oxaliq/node-go
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add styling for ko and legal move on hover

Browse source
This commit is contained in:
sorrelbri 2020-05-30 17:07:27 -07:00
parent d54d43c42c
commit 8fa6e207ed
3 changed files with 83 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
packages/play-node-go/src/components/GameUI/Board/Board.js
View file

@ -1,20 +1,20 @@
import React from 'react'; import React from "react";
import './Board.scss'; import "./Board.scss";
import Point from '../Point/Point'; import Point from "../Point/Point";
const Board = (props) => { const Board = (props) => {
const { game, user, dispatch, board, meta } = 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 => { const renderPoints = (boardSize) => {
let i = 0, boardPoints = []; let i = 0,
boardPoints = [];
while (i < boardSize * boardSize) { while (i < boardSize * boardSize) {
const posX = Math.floor(i/boardSize) + 1; const posX = Math.floor(i / boardSize) + 1;
const posY = i % boardSize + 1; const posY = (i % boardSize) + 1;
console.log(board[`${posX}-${posY}`])
boardPoints.push( boardPoints.push(
<Point <Point
key={`${posX}-${posY}`} key={`${posX}-${posY}`}
posX={posX} posX={posX}
posY={posY} posY={posY}
pointData={board[`${posX}-${posY}`]} pointData={board[`${posX}-${posY}`]}
@ -24,16 +24,17 @@ const Board = (props) => {
meta={meta} meta={meta}
{...props} {...props}
/> />
); i++; );
i++;
} }
return boardPoints; return boardPoints;
} };
return ( return (
<div className={`Game__board ${sizeFlag}`}> <div className={`Game__board ${sizeFlag}`}>
{ game.id ? renderPoints(game.boardSize) : <></> } {game.id ? renderPoints(game.boardSize) : <></>}
</div> </div>
); );
} };
export default Board; export default Board;

71
packages/play-node-go/src/components/GameUI/Point/Point.js
View file

@ -1,58 +1,65 @@
import React from 'react'; import React from "react";
import './Point.scss'; import "./Point.scss";
const Point = (props) => { const Point = (props) => {
const { posX, posY, user, game, meta, dispatch, pointData } = 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 = () => { const stone = () => {
if (pointData === 1) return 'black' if (pointData === 1) return "black";
if (pointData === -1) return 'white' if (pointData === -1) return "white";
return 'none' if (pointData === "k") return "ko";
} return "none";
};
const dot = () => { const dot = () => {
if (pointData === 'l') return game.turn; if (pointData === "l") {
} return game.turn || meta.turn;
}
};
const xFlag = () => { const xFlag = () => {
if ( posX === 1 ) return `board__point--top` if (posX === 1) return `board__point--top`;
if ( posX === game.boardSize ) return `board__point--bottom` if (posX === game.boardSize) return `board__point--bottom`;
return ''; return "";
} };
const yFlag = () => { const yFlag = () => {
if ( posY === 1 ) return `board__point--left` if (posY === 1) return `board__point--left`;
if ( posY === game.boardSize ) return `board__point--right` if (posY === game.boardSize) return `board__point--right`;
return ''; return "";
} };
const clickHandle = (e) => { const clickHandle = (e) => {
const action = { const action = {
type: 'SOCKET', type: "SOCKET",
message: 'MAKE_MOVE', message: "MAKE_MOVE",
body: { body: {
user, user,
game, game,
room: game.room, room: game.room,
board: {}, board: {},
move: { player: turn, pos: { x: posX, y: posY } } move: { player: turn, pos: { x: posX, y: posY } },
} },
} };
dispatch(action); dispatch(action);
} };
return ( return (
<div <div
className={`board__point ${xFlag()} ${yFlag()}`} className={`board__point ${xFlag()} ${yFlag()}`}
onClick={e => clickHandle(e)} onClick={(e) => clickHandle(e)}
> >
<div className="board__point__stone" <div className="board__point__stone" data-stone={stone()}>
data-stone={stone()}
>
<div className="board__point__dot" data-dot={dot()}></div> <div className="board__point__dot" data-dot={dot()}></div>
</div> </div>
</div> </div>
); );
} };
export default Point; export default Point;

33
packages/play-node-go/src/components/GameUI/Point/Point.scss
View file

@ -58,13 +58,32 @@ div.board__point div.board__point__stone div.board__point__dot {
vertical-align: middle; vertical-align: middle;
} }
div.board__point__stone[data-stone="white"] { div.board__point__stone{
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%); &[data-stone="white"] {
box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.5); 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);
}
&[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__stone[data-stone="black"] { div.board__point:hover {
background-color: black; div.board__point__dot[data-dot="1"] {
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%); background: black;
box-shadow: -.25vmin .5vmin .5vmin rgba(145, 92, 23, 0.75); }
div.board__point__dot[data-dot="-1"] {
background: white;
}
} }