Merge pull request #5 from sorrelbri/game_record

Add Kifu to Game UI

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

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

packages/play-node-go/src/components/GameUI/Kifu/Kifu.scss

@@ -0,0 +1,13 @@
+div.Kifu {
+  order: 0;
+  height: 10vh;
+  width: 8vh;
+  background-color: #FFF;
+  transform: rotate(-20deg);
+  div.Kifu__board {
+    border: 0.25vh solid #444;
+    width: 5vh;
+    height: 5vh;
+    margin: 1vh 2vh 2vh auto;
+  }
+}

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

@@ -6,6 +6,7 @@ const PlayerArea = ({
   handlePassClick,
   playerMeta,
   turn,
+  Kifu,
 }) => {
   const { stones, player, rank, captures } = playerMeta;
   const isTurn =
@@ -21,7 +22,6 @@ const PlayerArea = ({
   const bowlText = () => {
     if (isTurn) return "Pass?";
     if (turn === 0) return "End Game?";
-    // return;
   };
 
   return (
@@ -32,6 +32,7 @@ const PlayerArea = ({
       >
         <p>{bowlText()}</p>
       </div>
+      {Kifu}
       <div
         className={`player-container__name-space player-container__name-space--${stones}`}
       >

packages/play-node-go/src/pages/Game/Game.js

@@ -5,6 +5,7 @@ import "./Game.scss";
 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";
 
 const Game = (props) => {
   const { state, dispatch } = props;
@@ -139,6 +140,7 @@ const Game = (props) => {
               ? playerWhiteMeta
               : playerBlackMeta
           }
+          Kifu={<Kifu />}
           turn={state?.meta?.turn}
         />
       </div>