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

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

@ -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 posX = Math.floor(i / boardSize) + 1;
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) : <></> }
{game.id ? renderPoints(game.boardSize) : <></>}
</div>
);
}
};
export default Board;

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

@ -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)}
onClick={(e) => clickHandle(e)}
>
<div className="board__point__stone"
data-stone={stone()}
>
<div className="board__point__stone" data-stone={stone()}>
<div className="board__point__dot" data-dot={dot()}></div>
</div>
</div>
);
}
};
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;
}
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="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);
}
&[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"] {
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);
div.board__point:hover {
div.board__point__dot[data-dot="1"] {
background: black;
}
div.board__point__dot[data-dot="-1"] {
background: white;
}
}