webapp/src/container/Games.jsx

@@ -29,7 +29,7 @@ export default function Games({ context: { games, dispatchGames, gamesApi }, pla
           <ViewProvider players={players} dispatchGames={dispatchGames} />
         </div>
         <div className='right-side'>
-          <ActionPanel />
+          <ActionPanel players={players}/>
           <GameBoard />
           {/*
           <GameMessage />
@@ -80,11 +80,14 @@ function ViewProvider({ players, dispatchGames }) {
   )
 }
 
-function ActionPanel() {
+function ActionPanel({ players }) {
   return (
     <div className='ActionPanel'>
       <Routes>
-        <Route path='new' element={<Create />} />
+        <Route path='new' element={
+          <Create isCurrentUser={players.isCurrentUser}
+          />
+        } />
         <Route path='proposal' element={[<Accept key={1} />, <Reject key={2} />, <Cancel key={3} />]} />
         <Route path='active' element={[<DrawReq key={1} />, <DrawAcq key={2} />, <Surrender key={3} />]} />
         <Route path='archive' element={[<Backward key={1} />, <Forward key={2} />]} />

webapp/src/container/games/action/Create.jsx

@@ -1,6 +1,44 @@
-import React from 'react';
+import React, { useContext } from 'react';
+import { GamesContext } from '../../../context/games';
+import Wobler from '../../../components/Wobler';
 
-export default function Create() {
 
-    return <button className='Create'>Create</button>
+
+export default function Create({ isCurrentUser }) {
+    const newGameCtx = useContext(GamesContext).newGame;
+
+    const hasPlayers = checkPlayers(newGameCtx);
+    const hasCurrentUser = checkCurrentUser(newGameCtx, isCurrentUser);
+
+    const pushNewGame = () => {
+        if (!hasPlayers)
+            return alert("Black and White players must be selected for the game");
+
+        if (!hasCurrentUser)
+            return alert("You must be one of the selected players");
+
+        if (newGameCtx.pushing)
+            return; // current request is still being processed
+
+        console.log("send request");
+    }
+
+    return (
+        <button className={'Create'
+            + (hasPlayers && hasCurrentUser ? ' enabled' : ' disabled')
+        }
+            onClick={pushNewGame}
+        >
+            <Wobler text="Create" dance={newGameCtx.pushing} />
+        </button>
+    )
 }
+
+function checkPlayers({ whitePlayer, blackPlayer }) {
+    return whitePlayer && blackPlayer
+        && whitePlayer !== blackPlayer;
+}
+
+function checkCurrentUser({ whitePlayer, blackPlayer }, isCurrentUser) {
+    return isCurrentUser(whitePlayer) || isCurrentUser(blackPlayer);
+}