From 9a20746b7894131c8ad396c4ca19f7da739ad0ef Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Thu, 30 Jan 2020 00:30:56 -0800 Subject: [PATCH] stub Game components --- .../{Button => Display}/Logo/Logo.js | 0 .../{Button => Display}/Logo/Logo.scss | 0 .../src/components/GameUI/Board/Board.js | 32 +++++++++ .../src/components/GameUI/Board/Board.scss | 70 +++++++++++++++++++ .../components/GameUI/GameTree/GameTree.js | 12 ++++ .../components/GameUI/GameTree/GameTree.scss | 0 .../MessageContainer/MessageContainer.js | 11 +++ .../MessageContainer/MessageContainer.scss | 0 .../GameUI/PlayerArea/PlayerArea.js | 11 +++ .../GameUI/PlayerArea/PlayerArea.scss | 0 .../src/components/GameUI/Point/Point.js | 12 ++++ .../src/components/GameUI/Point/Point.scss | 0 .../src/components/GameUI/Timer/Timer.js | 11 +++ .../src/components/GameUI/Timer/Timer.scss | 0 .../play-node-go/src/pages/Game/Game.js | 42 +++++++---- .../play-node-go/src/pages/Game/Game.scss | 12 ++++ .../src/pages/Layout/NavBar/NavBar.js | 2 +- 17 files changed, 200 insertions(+), 15 deletions(-) rename packages/server/play-node-go/src/components/{Button => Display}/Logo/Logo.js (100%) rename packages/server/play-node-go/src/components/{Button => Display}/Logo/Logo.scss (100%) create mode 100644 packages/server/play-node-go/src/components/GameUI/Board/Board.js create mode 100644 packages/server/play-node-go/src/components/GameUI/Board/Board.scss create mode 100644 packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.js create mode 100644 packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.scss create mode 100644 packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.js create mode 100644 packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.scss create mode 100644 packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js create mode 100644 packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss create mode 100644 packages/server/play-node-go/src/components/GameUI/Point/Point.js create mode 100644 packages/server/play-node-go/src/components/GameUI/Point/Point.scss create mode 100644 packages/server/play-node-go/src/components/GameUI/Timer/Timer.js create mode 100644 packages/server/play-node-go/src/components/GameUI/Timer/Timer.scss diff --git a/packages/server/play-node-go/src/components/Button/Logo/Logo.js b/packages/server/play-node-go/src/components/Display/Logo/Logo.js similarity index 100% rename from packages/server/play-node-go/src/components/Button/Logo/Logo.js rename to packages/server/play-node-go/src/components/Display/Logo/Logo.js diff --git a/packages/server/play-node-go/src/components/Button/Logo/Logo.scss b/packages/server/play-node-go/src/components/Display/Logo/Logo.scss similarity index 100% rename from packages/server/play-node-go/src/components/Button/Logo/Logo.scss rename to packages/server/play-node-go/src/components/Display/Logo/Logo.scss diff --git a/packages/server/play-node-go/src/components/GameUI/Board/Board.js b/packages/server/play-node-go/src/components/GameUI/Board/Board.js new file mode 100644 index 0000000..f9036e1 --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/Board/Board.js @@ -0,0 +1,32 @@ +import React from 'react'; +import './Board.scss'; +import Point from '../Point/Point'; + +const Board = (props) => { + const { game, record, user, dispatch } = props; + + const renderPoints = boardSize => { + let i = 0, boardPoints = []; + while (i < boardSize * boardSize) { + const posX = Math.floor(i/boardSize) + 1; + const posY = i % boardSize + 1; + boardPoints.push( + + ); i++; + } + return boardPoints; + } + + return ( +
+ { game.id ? renderPoints(game.boardSize) : <> } +
+ ); +} + +export default Board; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/Board/Board.scss b/packages/server/play-node-go/src/components/GameUI/Board/Board.scss new file mode 100644 index 0000000..af43cd6 --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/Board/Board.scss @@ -0,0 +1,70 @@ +@import '../../../../public/stylesheets/partials/mixins'; +@import '../../../../public/stylesheets/partials/variables'; + +div.Game__board { + display: grid; + @include fullspan; + + background: radial-gradient(farthest-corner at 55% 40%, rgba(244, 230, 120, 0.75) 0%, rgba(234, 178, 78, 0.5) 65%, rgba(200, 160, 90, 0.45) 90%, rgba(200, 140, 90, 0.45) 100%); + background-size: cover; + + margin: 0 auto; + // background-image: url(../images/board.png); + z-index: 1; + box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); + flex: 1; + + &__size__9 { + grid-template-columns: repeat(9, 1fr); + grid-template-rows: repeat(9, 1fr); + + div.board__point { + width: 9vmin; + height: 9vmin; + + @media #{map-get($break-points, "570")} { + height: 7.5vh; + width: 7.5vh; + } + } + } + + &__size__13 { + grid-template-columns: repeat(13, 1fr); + grid-template-rows: repeat(13, 1fr); + + div.board__point { + width: 7vmin; + height: 7vmin; + + @media #{map-get($break-points, "570")} { + height: 5vh; + width: 5vh; + } + } + } + + &__size__19 { + grid-template-columns: repeat(19, 1fr); + grid-template-rows: repeat(19, 1fr); + + div.board__point { + width: 5vmin; + height: 5vmin; + + @media #{map-get($break-points, "590")} { + height: 3.5vh; + width: 3.5vh; + } + } + } + + div.board__point { + background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); + border-radius: 50% solid black; + color: black; + margin: auto; + padding: 0; + vertical-align: middle; + } +} diff --git a/packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.js b/packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.js new file mode 100644 index 0000000..eedca58 --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './GameTree.scss'; + +const GameTree = () => { + return ( +
+ +
+ ); +} + +export default GameTree; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.scss b/packages/server/play-node-go/src/components/GameUI/GameTree/GameTree.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.js b/packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.js new file mode 100644 index 0000000..5df8aad --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './MessageContainer.scss'; + +const MessageContainer = () => { + return ( + <> + + ); +} + +export default MessageContainer; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.scss b/packages/server/play-node-go/src/components/GameUI/MessageContainer/MessageContainer.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js b/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js new file mode 100644 index 0000000..bc898dd --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './PlayerArea.scss'; + +const PlayerArea = () => { + return ( + <> + + ); +} + +export default PlayerArea; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss b/packages/server/play-node-go/src/components/GameUI/PlayerArea/PlayerArea.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/server/play-node-go/src/components/GameUI/Point/Point.js b/packages/server/play-node-go/src/components/GameUI/Point/Point.js new file mode 100644 index 0000000..4120132 --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/Point/Point.js @@ -0,0 +1,12 @@ +import React from 'react'; +import './Point.scss'; + +const Point = (props) => { + const { posX, posY, user, game, record } = props; + + return ( + <> + ); +} + +export default Point; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/Point/Point.scss b/packages/server/play-node-go/src/components/GameUI/Point/Point.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/server/play-node-go/src/components/GameUI/Timer/Timer.js b/packages/server/play-node-go/src/components/GameUI/Timer/Timer.js new file mode 100644 index 0000000..824d279 --- /dev/null +++ b/packages/server/play-node-go/src/components/GameUI/Timer/Timer.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './Timer.scss'; + +const Timer = () => { + return ( + <> + + ); +} + +export default Timer; \ No newline at end of file diff --git a/packages/server/play-node-go/src/components/GameUI/Timer/Timer.scss b/packages/server/play-node-go/src/components/GameUI/Timer/Timer.scss new file mode 100644 index 0000000..e69de29 diff --git a/packages/server/play-node-go/src/pages/Game/Game.js b/packages/server/play-node-go/src/pages/Game/Game.js index 87dc882..6aeb29f 100644 --- a/packages/server/play-node-go/src/pages/Game/Game.js +++ b/packages/server/play-node-go/src/pages/Game/Game.js @@ -4,8 +4,8 @@ import socketIOClient from 'socket.io-client'; import config from '../../config'; import gamesServices from '../../services/api/gamesServices'; import './Game.scss'; - -import Development from '../../components/Display/Development/Development'; +import Logo from '../../components/Display/Logo/Logo'; +import Board from '../../components/GameUI/Board/Board'; const Game = (props) => { const { state, dispatch } = props; @@ -27,8 +27,6 @@ const Game = (props) => { fetchGameAPI(); }, []) - // ! [start] gameSocket - const roomSocketConnect = () => { const game = state.active.game; const user = state.user; @@ -44,21 +42,37 @@ const Game = (props) => { roomSocketConnect(); }, [state.active] ) - // ! [end] - return (
-

Game

- - {state.socket ? '✓' : ' ⃠'} - - - +
+ {state.socket ? '✓' : ' ⃠'} + +

Timer

+

? Game Tree

+
+ +
+

Player Area

+
  • Bowl
  • ? Kifu
  • Captures
+ +

Player Area

+
  • Captures
  • ? Kifu
  • Bowl
+
+ +
+

Messages

+

Message Form

+
); } diff --git a/packages/server/play-node-go/src/pages/Game/Game.scss b/packages/server/play-node-go/src/pages/Game/Game.scss index e69de29..d90cac6 100644 --- a/packages/server/play-node-go/src/pages/Game/Game.scss +++ b/packages/server/play-node-go/src/pages/Game/Game.scss @@ -0,0 +1,12 @@ +div.Game { + display: grid; + grid-template-columns: 1fr 2fr 1fr; +} + +div.Game__board-container { + display: flex; + flex-flow: column nowrap; + justify-content: space-evenly; + max-width: 50vw; + max-height: 100vh; +} \ No newline at end of file diff --git a/packages/server/play-node-go/src/pages/Layout/NavBar/NavBar.js b/packages/server/play-node-go/src/pages/Layout/NavBar/NavBar.js index 96f4c4a..5004060 100644 --- a/packages/server/play-node-go/src/pages/Layout/NavBar/NavBar.js +++ b/packages/server/play-node-go/src/pages/Layout/NavBar/NavBar.js @@ -1,7 +1,7 @@ import React from 'react'; import { Link } from 'react-router-dom'; import './NavBar.scss'; -import Logo from '../../../components/Button/Logo/Logo'; +import Logo from '../../../components/Display/Logo/Logo'; const NavBar = (props) => {