add styling for ko and legal move on hover
This commit is contained in:
parent
d54d43c42c
commit
8fa6e207ed
3 changed files with 83 additions and 56 deletions
|
@ -1,17 +1,17 @@
|
|||
import React from 'react';
|
||||
import './Board.scss';
|
||||
import Point from '../Point/Point';
|
||||
import React from "react";
|
||||
import "./Board.scss";
|
||||
import Point from "../Point/Point";
|
||||
|
||||
const Board = (props) => {
|
||||
const { game, user, dispatch, board, meta } = props;
|
||||
const sizeFlag = `Game__board--size-${ game.boardSize }`
|
||||
const sizeFlag = `Game__board--size-${game.boardSize}`;
|
||||
|
||||
const renderPoints = boardSize => {
|
||||
let i = 0, boardPoints = [];
|
||||
const renderPoints = (boardSize) => {
|
||||
let i = 0,
|
||||
boardPoints = [];
|
||||
while (i < boardSize * boardSize) {
|
||||
const posX = Math.floor(i / boardSize) + 1;
|
||||
const posY = i % boardSize + 1;
|
||||
console.log(board[`${posX}-${posY}`])
|
||||
const posY = (i % boardSize) + 1;
|
||||
boardPoints.push(
|
||||
<Point
|
||||
key={`${posX}-${posY}`}
|
||||
|
@ -24,16 +24,17 @@ const Board = (props) => {
|
|||
meta={meta}
|
||||
{...props}
|
||||
/>
|
||||
); i++;
|
||||
);
|
||||
i++;
|
||||
}
|
||||
return boardPoints;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={`Game__board ${sizeFlag}`}>
|
||||
{game.id ? renderPoints(game.boardSize) : <></>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Board;
|
|
@ -1,58 +1,65 @@
|
|||
import React from 'react';
|
||||
import './Point.scss';
|
||||
import React from "react";
|
||||
import "./Point.scss";
|
||||
|
||||
const Point = (props) => {
|
||||
const { posX, posY, user, game, meta, dispatch, pointData } = props;
|
||||
const turn = meta && meta.turn ? meta.turn > 0 ? 'black' : 'white' : game.turn > 0 ? 'black' : 'white';
|
||||
const turn =
|
||||
meta && meta.turn
|
||||
? meta.turn > 0
|
||||
? "black"
|
||||
: "white"
|
||||
: game.turn > 0
|
||||
? "black"
|
||||
: "white";
|
||||
|
||||
const stone = () => {
|
||||
if (pointData === 1) return 'black'
|
||||
if (pointData === -1) return 'white'
|
||||
return 'none'
|
||||
}
|
||||
if (pointData === 1) return "black";
|
||||
if (pointData === -1) return "white";
|
||||
if (pointData === "k") return "ko";
|
||||
return "none";
|
||||
};
|
||||
|
||||
const dot = () => {
|
||||
if (pointData === 'l') return game.turn;
|
||||
if (pointData === "l") {
|
||||
return game.turn || meta.turn;
|
||||
}
|
||||
};
|
||||
|
||||
const xFlag = () => {
|
||||
if ( posX === 1 ) return `board__point--top`
|
||||
if ( posX === game.boardSize ) return `board__point--bottom`
|
||||
return '';
|
||||
}
|
||||
if (posX === 1) return `board__point--top`;
|
||||
if (posX === game.boardSize) return `board__point--bottom`;
|
||||
return "";
|
||||
};
|
||||
const yFlag = () => {
|
||||
if ( posY === 1 ) return `board__point--left`
|
||||
if ( posY === game.boardSize ) return `board__point--right`
|
||||
return '';
|
||||
}
|
||||
if (posY === 1) return `board__point--left`;
|
||||
if (posY === game.boardSize) return `board__point--right`;
|
||||
return "";
|
||||
};
|
||||
const clickHandle = (e) => {
|
||||
const action = {
|
||||
type: 'SOCKET',
|
||||
message: 'MAKE_MOVE',
|
||||
type: "SOCKET",
|
||||
message: "MAKE_MOVE",
|
||||
body: {
|
||||
user,
|
||||
game,
|
||||
room: game.room,
|
||||
board: {},
|
||||
move: { player: turn, pos: { x: posX, y: posY } }
|
||||
}
|
||||
}
|
||||
move: { player: turn, pos: { x: posX, y: posY } },
|
||||
},
|
||||
};
|
||||
dispatch(action);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`board__point ${xFlag()} ${yFlag()}`}
|
||||
onClick={e => clickHandle(e)}
|
||||
>
|
||||
<div className="board__point__stone"
|
||||
data-stone={stone()}
|
||||
onClick={(e) => clickHandle(e)}
|
||||
>
|
||||
<div className="board__point__stone" data-stone={stone()}>
|
||||
<div className="board__point__dot" data-dot={dot()}></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default Point;
|
|
@ -58,13 +58,32 @@ div.board__point div.board__point__stone div.board__point__dot {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
div.board__point__stone[data-stone="white"] {
|
||||
div.board__point__stone{
|
||||
&[data-stone="white"] {
|
||||
background: radial-gradient(farthest-side at 55% 40%, white 0%, rgb(200,200,200) 65%, rgb(100,100,100) 90%, rgb(68, 50, 0) 100%);
|
||||
box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.5);
|
||||
}
|
||||
|
||||
div.board__point__stone[data-stone="black"] {
|
||||
&[data-stone="black"] {
|
||||
background-color: black;
|
||||
background: radial-gradient(farthest-side at 55% 40%, rgb(220,220,220) 0%, rgb(60,60,60) 45%, rgb(15,15,15) 90%, rgb(5, 5, 0) 100%);
|
||||
box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.75);
|
||||
}
|
||||
|
||||
&[data-stone="ko"] {
|
||||
background-color: transparent;
|
||||
border: .5vmin solid rgba(200,20,50,0.8);
|
||||
border-radius: 0%;
|
||||
height: 60%;
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
div.board__point:hover {
|
||||
div.board__point__dot[data-dot="1"] {
|
||||
background: black;
|
||||
}
|
||||
div.board__point__dot[data-dot="-1"] {
|
||||
background: white;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue