front: GameAction and GameBoard

webapp/src/components/Game/GameAction.css

@@ -0,0 +1,73 @@
+.action-panel {
+    margin-bottom: 10px;
+    /* background-color: lightgrey; */
+    width: 100%;
+    /* padding-top: 8px;
+    padding-bottom: 8px; */
+    color: black;
+    padding-left: -10px;
+    /* */
+
+    margin-left: 10px;
+    border: 0.5px dotted lightslategray; 
+}
+
+.game-action {
+    width:fit-content;
+    padding: 8px;
+    padding-left: 15px;
+    padding-right: 15px;
+    border-radius: 10px;
+    border: 0.5px solid darkgrey; 
+    margin: 2px;
+}
+
+.game-action.create:hover {
+    background-color:#00b0ff60;  
+}
+
+.game-action.create:active {
+    background-color:#00b0ffa0;  
+}
+
+.game-action.cancel:hover,
+.game-action.reject:hover {
+    background-color:#ff000030
+}
+
+.game-action.cancel:active,
+.game-action.reject:active {
+    background-color:#ff000080
+}
+
+.game-action.accept:hover {
+    background-color: #00af0030;  
+}
+
+.game-action.accept:active {
+    background-color:#00af0080;  
+}
+
+/* .game-header a {
+    color:darkgrey;
+    text-decoration: none;
+    transition: .25s ease;
+    margin-left: 5px;
+    margin-right: 5px;
+}
+
+.game-action .active {
+    color: white;
+    border-radius: 2px;
+    background-color: cadetblue;
+    opacity: 80%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+}
+
+.game-header a:hover:not(.active) {
+    color: cadetblue; 
+
+    box-shadow: 0 1.5px 0 0 currentColor;
+} 
+*/

webapp/src/components/Game/GameAction.jsx

@@ -0,0 +1,24 @@
+import './GameAction.css';
+import React from 'react';
+
+import Create from './GameAction/Create'
+import Reject from './GameAction/Reject'
+import Cancel from './GameAction/Cancel'
+import Accept from './GameAction/Accept'
+import { AppContext } from '../../context/app'
+
+export default function GameAction() {
+  const [ctx, dispatchCtx] = React.useContext(AppContext)
+
+  return (
+    <div>
+      <div className='action-panel'>
+        <Create />
+        <Reject />
+        <Cancel />
+        <Accept />
+      </div>
+      {/* {isProposalPath && <Proposal games={data.games} />} */}
+    </div>
+  )
+}

webapp/src/components/Game/GameAction/Accept.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Accept() {
+
+    return <button className='game-action accept'>Accept</button>
+}

webapp/src/components/Game/GameAction/Cancel.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Cancel() {
+
+    return <button className='game-action cancel'>Cancel</button>
+}

webapp/src/components/Game/GameAction/Create.jsx

@@ -0,0 +1,22 @@
+import React/*, {useState}*/ from 'react';
+
+export default function Create() {
+    // const [pending, setPending] = useState([])
+
+    // for (const [key, value] of Object.entries(pending))
+    //     console.log("pending ", key, value);
+
+    // function sendRequest(reject_uuid) {
+    //     setPending(             // Replace the old array
+    //         [                   // with a new array consisting of:
+    //             ...pending,     // - all the old items
+    //             { uuid: reject_uuid }  // - and a new item at the end
+    //         ]
+    //     )
+    // }
+
+    // return <button className="action" onClick={() => sendRequest(uuid) }>
+    //     Reject
+    //     </button>
+    return <button className='game-action create'>Create</button>
+}

webapp/src/components/Game/GameAction/Reject.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+
+export default function Reject() {
+
+    return <button className='game-action reject'>Reject</button>
+}

webapp/src/components/Game/GameBoard.jsx

@@ -1,7 +1,7 @@
-import './index.css';
+import './GameBoard.css';
 import React from 'react';
 
-import { WhiteStone, BlackStone } from '../Game/Stone' 
+import { WhiteStone, BlackStone } from './Stone' 
 
 export default function Board() {
 

webapp/src/components/Game/Reject.jsx

@@ -1,21 +0,0 @@
-import React, {useState} from 'react';
-
-export default function Reject({uuid}) {
-    const [pending, setPending] = useState([])
-
-    for (const [key, value] of Object.entries(pending))
-        console.log("pending ", key, value);
-
-    function sendRequest(reject_uuid) {
-        setPending(             // Replace the old array
-            [                   // with a new array consisting of:
-                ...pending,     // - all the old items
-                { uuid: reject_uuid }  // - and a new item at the end
-            ]
-        )
-    }
-
-    return <button className="action" onClick={() => sendRequest(uuid) }>
-        Reject
-        </button>
-}

webapp/src/components/Game/index.jsx

@@ -2,7 +2,8 @@ import './index.css';
 import React from 'react';
 import GameHeader from './GameHeader'
 import GameSelector from './GameSelector'
-import Board from '../Board'
+import GameAction from './GameAction'
+import GameBoard from './GameBoard'
 
 // import { AppData } from "../../context/data"
 
@@ -16,7 +17,8 @@ export default function Game() {
     </div>
 
     <div className='split right'>
-      <Board />
+      <GameAction />
+      <GameBoard />
     </div>
   </div>