From f14c0ce08703c6b7e0e69ee0a7949e2a4e9a16e0 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Sun, 21 Jun 2020 17:34:03 -0700 Subject: [PATCH 1/5] style Kifu to hover 'show menu' text --- .../src/components/GameUI/Kifu/Kifu.js | 7 +++++++ .../src/components/GameUI/Kifu/Kifu.scss | 17 +++++++++++++++++ 2 files changed, 24 insertions(+) diff --git a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js index a494739..20855b3 100644 --- a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js +++ b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js @@ -2,8 +2,15 @@ import React from "react"; import "./Kifu.scss"; const Kifu = () => { + const handleClick = (e) => { + console.log("clicked"); + }; + return (
+

+ Show Menu? +

); diff --git a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss index a529d41..debafbe 100644 --- a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss +++ b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss @@ -1,9 +1,26 @@ +@import '../../../../public/stylesheets/partials/mixins'; + div.Kifu { order: 0; height: 10vh; width: 8vh; background-color: #FFF; transform: rotate(-20deg); + + p.Kifu__show-menu { + display: none; + position: absolute; + transform: rotate(20deg); + width: fit-content; + } + &:hover { + p.Kifu__show-menu { + @include gameViewLabel; + cursor: pointer; + display: inline-block; + } + } + div.Kifu__board { border: 0.25vh solid #444; width: 5vh; From 3955f940e27647c722861cc18787c96e191d9509 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Sun, 21 Jun 2020 18:20:03 -0700 Subject: [PATCH 2/5] stub Menu, add showMenu value to Game --- packages/play-node-go/src/components/GameUI/Kifu/Kifu.js | 8 ++------ .../play-node-go/src/components/GameUI/Kifu/Kifu.scss | 1 + packages/play-node-go/src/components/GameUI/Menu/Menu.js | 7 +++++++ .../play-node-go/src/components/GameUI/Menu/Menu.scss | 0 packages/play-node-go/src/pages/Game/Game.js | 9 ++++++++- 5 files changed, 18 insertions(+), 7 deletions(-) create mode 100644 packages/play-node-go/src/components/GameUI/Menu/Menu.js create mode 100644 packages/play-node-go/src/components/GameUI/Menu/Menu.scss diff --git a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js index 20855b3..c1a8e5c 100644 --- a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js +++ b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.js @@ -1,14 +1,10 @@ import React from "react"; import "./Kifu.scss"; -const Kifu = () => { - const handleClick = (e) => { - console.log("clicked"); - }; - +const Kifu = ({ clickKifu }) => { return (
-

+

Show Menu?

diff --git a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss index debafbe..8d8c141 100644 --- a/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss +++ b/packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss @@ -9,6 +9,7 @@ div.Kifu { p.Kifu__show-menu { display: none; + margin: 3vh auto; position: absolute; transform: rotate(20deg); width: fit-content; diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.js b/packages/play-node-go/src/components/GameUI/Menu/Menu.js new file mode 100644 index 0000000..2a34590 --- /dev/null +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.js @@ -0,0 +1,7 @@ +import React from "react"; + +const Menu = ({ ...props }) => { + return <>; +}; + +export default Menu; diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/play-node-go/src/pages/Game/Game.js b/packages/play-node-go/src/pages/Game/Game.js index fab84af..a7abdf8 100644 --- a/packages/play-node-go/src/pages/Game/Game.js +++ b/packages/play-node-go/src/pages/Game/Game.js @@ -6,12 +6,14 @@ import Logo from "../../components/Display/Logo/Logo"; import Board from "../../components/GameUI/Board/Board"; import PlayerArea from "../../components/GameUI/PlayerArea/PlayerArea"; import Kifu from "../../components/GameUI/Kifu/Kifu"; +import Menu from "../../components/GameUI/Menu/Menu"; const Game = (props) => { const { state, dispatch } = props; const gameId = parseInt(useParams().id) || 0; const [playerBlackMeta, setPlayerBlackMeta] = useState({}); const [playerWhiteMeta, setPlayerWhiteMeta] = useState({}); + const [showMenu, setShowMenu] = useState(false); const playerState = state?.meta?.playerState; const game = state.active?.game; @@ -91,6 +93,11 @@ const Game = (props) => { return (
+ setShowMenu(false)} + {...props} + />
{state.socket ? "✓" : " ⃠"} @@ -140,7 +147,7 @@ const Game = (props) => { ? playerWhiteMeta : playerBlackMeta } - Kifu={} + Kifu={ setShowMenu(true)} />} turn={state?.meta?.turn} />
From 62fe6dfcb4ebf2705b17d8b462ea99f2ba540684 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Sun, 21 Jun 2020 18:47:00 -0700 Subject: [PATCH 3/5] add click handler and basic style to menu on Game --- .../src/components/GameUI/Menu/Menu.js | 19 +++++++++++++++++-- .../src/components/GameUI/Menu/Menu.scss | 16 ++++++++++++++++ 2 files changed, 33 insertions(+), 2 deletions(-) diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.js b/packages/play-node-go/src/components/GameUI/Menu/Menu.js index 2a34590..3ef8e1e 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.js +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.js @@ -1,7 +1,22 @@ import React from "react"; +import "./Menu.scss"; -const Menu = ({ ...props }) => { - return <>; +const Menu = ({ showMenu, clickClose, ...props }) => { + const handleBackgroundClick = (e) => { + if (e.target.className === "Game__Menu-container") clickClose(); + }; + + if (!showMenu) return <>; + return ( +
handleBackgroundClick(e)} + > +
+ +
+
+ ); }; export default Menu; diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss index e69de29..3dcafc4 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss @@ -0,0 +1,16 @@ +div.Game__Menu-container { + background: rgba(0,0,0,0.5); + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + position: absolute; + width: 100vw; + z-index: 2; + + .Game__Menu-container__Menu { + background: #eef; + width: 80vw; + min-height: 20vh; + } +} \ No newline at end of file From 9ed4fc0a39b1d510175c5b0ea0d5cea3075917fb Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Wed, 24 Jun 2020 16:53:31 -0700 Subject: [PATCH 4/5] draw game record on canvas when menu is opened --- .../src/components/GameUI/Menu/Menu.js | 62 ++++++++++++++++++- .../src/components/GameUI/Menu/Menu.scss | 10 +++ 2 files changed, 69 insertions(+), 3 deletions(-) diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.js b/packages/play-node-go/src/components/GameUI/Menu/Menu.js index 3ef8e1e..b18aea7 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.js +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.js @@ -1,19 +1,75 @@ -import React from "react"; +import React, { useEffect, useRef } from "react"; import "./Menu.scss"; const Menu = ({ showMenu, clickClose, ...props }) => { + const { active, meta } = props.state; // active.game.boardSize, meta.gameRecord + const boardSize = active.game.boardSize; const handleBackgroundClick = (e) => { if (e.target.className === "Game__Menu-container") clickClose(); }; + const canvasRef = useRef(); + const drawGameRecord = () => { + return ; + }; + + useEffect(() => { + const canvas = canvasRef.current; + const ctx = canvas.getContext("2d"); + const scale = Math.min(window.innerWidth * 0.75, 500); + canvas.height = scale; + canvas.width = scale; + const space = scale / boardSize; + const offset = space / 2; + for (let i = 0; i < boardSize; i++) { + const start = i * space + offset; + const end = scale - offset; + ctx.beginPath(); + ctx.moveTo(start, offset); + ctx.lineTo(start, end); + ctx.closePath(); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(offset, start); + ctx.lineTo(end, start); + ctx.closePath(); + ctx.stroke(); + } + if (!meta?.gameRecord) return; + meta.gameRecord.forEach(({ player, pos }, index) => { + ctx.beginPath(); + ctx.arc( + (pos.y - 1) * space + offset, + (pos.x - 1) * space + offset, + offset * 0.95, + 0, + Math.PI * 2, + true + ); + ctx.stroke(); + ctx.fillStyle = player === "white" ? "#fff" : "#000"; + ctx.fill(); + ctx.fillStyle = player === "white" ? "#000" : "#fff"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + ctx.fillText( + index + 1, + (pos.y - 1) * space + offset, + (pos.x - 1) * space + offset + ); + }); + }, [showMenu, meta]); - if (!showMenu) return <>; return (
handleBackgroundClick(e)} >
+
+ {drawGameRecord()} +
+
); diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss index 3dcafc4..0890ae6 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss @@ -1,4 +1,8 @@ div.Game__Menu-container { + &--hidden { + display: none; + } + background: rgba(0,0,0,0.5); display: flex; justify-content: center; @@ -13,4 +17,10 @@ div.Game__Menu-container { width: 80vw; min-height: 20vh; } + + div.Game__Menu__game-record-container { + display: flex; + flex-flow: column nowrap; + align-items: center; + } } \ No newline at end of file From a290ec532dd019313ca230efad42b3a29d0804c9 Mon Sep 17 00:00:00 2001 From: sorrelbri Date: Thu, 25 Jun 2020 19:44:51 -0700 Subject: [PATCH 5/5] add game record display overflow canvas for moves made at previously played points --- .../src/components/GameUI/Menu/Menu.js | 135 +++++++++++++++--- .../src/components/GameUI/Menu/Menu.scss | 7 +- 2 files changed, 122 insertions(+), 20 deletions(-) diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.js b/packages/play-node-go/src/components/GameUI/Menu/Menu.js index b18aea7..ca9fadc 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.js +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.js @@ -8,8 +8,14 @@ const Menu = ({ showMenu, clickClose, ...props }) => { if (e.target.className === "Game__Menu-container") clickClose(); }; const canvasRef = useRef(); + const overflowRef = useRef(); const drawGameRecord = () => { - return ; + return ( + <> + + + + ); }; useEffect(() => { @@ -35,29 +41,123 @@ const Menu = ({ showMenu, clickClose, ...props }) => { ctx.stroke(); } if (!meta?.gameRecord) return; - meta.gameRecord.forEach(({ player, pos }, index) => { - ctx.beginPath(); - ctx.arc( - (pos.y - 1) * space + offset, - (pos.x - 1) * space + offset, + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + const { overflow } = meta.gameRecord.reduce( + (dict, { player, pos }, index) => { + const past = dict[`${pos.x}-${pos.y}`]; + if (past) { + // overflow: [ { move:#, player:'color', subsequentMoves: [ { move: #, player: 'color' } ] } ] + if (dict.overflow) { + const indexOfPrior = dict.overflow.findIndex( + ({ move }) => move === past + ); + if (indexOfPrior !== -1) { + // if multiple past moves at this point exist + dict.overflow[indexOfPrior].subsequentMoves.push({ + move: index + 1, + player, + }); + return dict; + } + // if a second move at this point has not yet been encountered + // prior move will be black if no active handicap and move is odd or if active handicap and move is even + const playerPrior = + (active.handicap && !(past % 2)) || past % 2 ? "black" : "white"; + return { + ...dict, + overflow: [ + ...dict.overflow, + { + move: past, + player: playerPrior, + subsequentMoves: [{ move: index + 1, player }], + }, + ], + }; + } + // if no move has yet been encountered at a previously made move + return { + ...dict, + overflow: [ + { move: past, subsequentMoves: [{ move: index + 1, player }] }, + ], + }; + } + ctx.beginPath(); + ctx.arc( + (pos.y - 1) * space + offset, + (pos.x - 1) * space + offset, + offset * 0.95, + 0, + Math.PI * 2, + true + ); + ctx.stroke(); + ctx.fillStyle = player === "white" ? "#fff" : "#000"; + ctx.fill(); + ctx.fillStyle = player === "white" ? "#000" : "#fff"; + + ctx.fillText( + index + 1, + (pos.y - 1) * space + offset, + (pos.x - 1) * space + offset + ); + return { ...dict, [`${pos.x}-${pos.y}`]: index + 1 }; + }, + {} + ); + if (!overflow?.length) return; + // Draw Overflow Moves (moves made at prior points) + const canvas2 = overflowRef.current; + const ctx2 = canvas2.getContext("2d"); + canvas2.width = scale; + canvas2.height = space * overflow.length; + ctx2.textAlign = "center"; + ctx2.textBaseline = "middle"; + overflow.forEach(({ move, subsequentMoves, player }, index) => { + subsequentMoves.forEach(({ player, move }, subIndex) => { + ctx2.beginPath(); + ctx2.arc( + subIndex * space + offset, + index * space + offset, + offset * 0.95, + 0, + Math.PI * 2, + true + ); + ctx2.stroke(); + ctx2.fillStyle = player === "white" ? "#fff" : "#000"; + ctx2.fill(); + ctx2.fillStyle = player === "white" ? "#000" : "#fff"; + ctx2.fillText(move, subIndex * space + offset, index * space + offset); + }); + ctx2.fillStyle = "#000"; + ctx2.fillText( + "at", + subsequentMoves.length * space + offset, + index * space + offset + ); + ctx2.fillStyle = player === "white" ? "#fff" : "#000"; + ctx2.beginPath(); + ctx2.arc( + (subsequentMoves.length + 1) * space + offset, + index * space + offset, offset * 0.95, 0, Math.PI * 2, true ); - ctx.stroke(); - ctx.fillStyle = player === "white" ? "#fff" : "#000"; - ctx.fill(); - ctx.fillStyle = player === "white" ? "#000" : "#fff"; - ctx.textAlign = "center"; - ctx.textBaseline = "middle"; - ctx.fillText( - index + 1, - (pos.y - 1) * space + offset, - (pos.x - 1) * space + offset + ctx2.fill(); + ctx2.stroke(); + ctx2.fillStyle = player === "white" ? "#000" : "#fff"; + ctx2.fillText( + move, + (subsequentMoves.length + 1) * space + offset, + index * space + offset ); }); - }, [showMenu, meta]); + }, [showMenu, meta, active.handicap, boardSize]); return (
{
{drawGameRecord()} -
diff --git a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss index 0890ae6..05bf39e 100644 --- a/packages/play-node-go/src/components/GameUI/Menu/Menu.scss +++ b/packages/play-node-go/src/components/GameUI/Menu/Menu.scss @@ -5,6 +5,7 @@ div.Game__Menu-container { background: rgba(0,0,0,0.5); display: flex; + flex-flow: column nowrap; justify-content: center; align-items: center; height: 100vh; @@ -14,8 +15,10 @@ div.Game__Menu-container { .Game__Menu-container__Menu { background: #eef; - width: 80vw; - min-height: 20vh; + max-height: 90vh; + max-width: 80vw; + padding: 2vh; + overflow: scroll; } div.Game__Menu__game-record-container {