stub Game components

packages/play-node-go/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(
+        <Point 
+          key={`${posX}-${posY}`} 
+          posX
+          posY
+          {...props}
+        />
+      ); i++;
+    }
+    return boardPoints;
+  }
+
+  return (  
+    <div className="Game__board">
+      { game.id ? renderPoints(game.boardSize) : <></> }
+    </div>
+  );
+}
+
+export default Board;

packages/play-node-go/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;
+  }
+}

packages/play-node-go/play-node-go/src/components/GameUI/GameTree/GameTree.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import './GameTree.scss';
+
+const GameTree = () => {
+  return (
+    <div className="GameTree">
+      
+    </div>
+  );
+}
+
+export default GameTree;

packages/play-node-go/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;

packages/play-node-go/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;

packages/play-node-go/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;

packages/play-node-go/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;

packages/play-node-go/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 (  
     <div 
       className="Game" 
       data-testid="Game"
     >
-      <p>Game</p>
+      <div className="Game__meta-container">
+        <span 
+          className="Game__socket-flag"
+        >{state.socket ? '✓' : ' ⃠'}</span>
+        <Logo />
+        <p>Timer</p>
+        <p>? Game Tree</p>
+      </div>
 
-      <span 
-        className="Game__socket-flag"
-      >{state.socket ? '✓' : ' ⃠'}</span>
-      
-      <Development />
+      <div className="Game__board-container">
+        <p>Player Area</p>
+        <ul><li>Bowl</li><li>? Kifu</li><li>Captures</li></ul>
+        <Board 
+          dispatch
+          game={state.active.game} 
+          record={state.active.record}
+          user={state.user} 
+        />
+        <p>Player Area</p>
+        <ul><li>Captures</li><li>? Kifu</li><li>Bowl</li></ul>
+      </div>
 
+      <div className="Game__message-container">
+        <p>Messages</p>
+        <p>Message Form</p>
+      </div>
     </div>
   );
 }

packages/play-node-go/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;
+}

packages/play-node-go/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) => {