From 8fa6e207edfdee826f2ded7071d457ab8e044091 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Sat, 30 May 2020 17:07:27 -0700 Subject: [PATCH] add styling for ko and legal move on hover --- .../src/components/GameUI/Board/Board.js | 35 ++++----- .../src/components/GameUI/Point/Point.js | 71 ++++++++++--------- .../src/components/GameUI/Point/Point.scss | 33 +++++++-- 3 files changed, 83 insertions(+), 56 deletions(-) diff --git a/packages/play-node-go/src/components/GameUI/Board/Board.js b/packages/play-node-go/src/components/GameUI/Board/Board.js index f570c16..c32c68d 100644 --- a/packages/play-node-go/src/components/GameUI/Board/Board.js +++ b/packages/play-node-go/src/components/GameUI/Board/Board.js @@ -1,20 +1,20 @@ -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( - { meta={meta} {...props} /> - ); i++; + ); + i++; } return boardPoints; - } + }; - return ( + return (
- { game.id ? renderPoints(game.boardSize) : <> } + {game.id ? renderPoints(game.boardSize) : <>}
); -} +}; -export default Board; \ No newline at end of file +export default Board; diff --git a/packages/play-node-go/src/components/GameUI/Point/Point.js b/packages/play-node-go/src/components/GameUI/Point/Point.js index ea9351f..bb51f8a 100644 --- a/packages/play-node-go/src/components/GameUI/Point/Point.js +++ b/packages/play-node-go/src/components/GameUI/Point/Point.js @@ -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 ( -
clickHandle(e)} + onClick={(e) => clickHandle(e)} > -
+
-
); -} +}; -export default Point; \ No newline at end of file +export default Point; diff --git a/packages/play-node-go/src/components/GameUI/Point/Point.scss b/packages/play-node-go/src/components/GameUI/Point/Point.scss index ceaa175..410b12d 100644 --- a/packages/play-node-go/src/components/GameUI/Point/Point.scss +++ b/packages/play-node-go/src/components/GameUI/Point/Point.scss @@ -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; + } } \ No newline at end of file