front: NewGame: Create action button enable/disable

webapp/src/components/Game/GameAction.css

@@ -26,7 +26,7 @@
     background-color:#00b0ff60;  
 }
 
-.game-action.create:active {
+.game-action.create.enabled:active {
     background-color:#00b0ffa0;  
 }
 
@@ -48,26 +48,6 @@
     background-color:#00af0080;  
 }
 
-/* .game-header a {
-    color:darkgrey;
-    text-decoration: none;
-    transition: .25s ease;
-    margin-left: 5px;
-    margin-right: 5px;
+.game-action.disabled {
+    color: gray;
 }
-
-.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/Create.jsx

@@ -1,22 +1,36 @@
-import React/*, {useState}*/ from 'react';
+import React from 'react';
+import { AppContext } from '../../../context/app'
+import { AppData } from '../../../context/data'
 
 export default function Create() {
-    // const [pending, setPending] = useState([])
+    const [ctx] = React.useContext(AppContext)
+    const [data] = React.useContext(AppData)
 
-    // for (const [key, value] of Object.entries(pending))
-    //     console.log("pending ", key, value);
+    const hasPlayers = ctx.newGame.whitePlayer !== ctx.newGame.blackPlayer
+        && ctx.newGame.blackPlayer !== ''
+        && ctx.newGame.whitePlayer !== ''
 
-    // 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
-    //         ]
-    //     )
-    // }
+    const hasCurrentUser = data.isCurrentUser(ctx.newGame.blackPlayer) 
+        || data.isCurrentUser(ctx.newGame.whitePlayer)
+    
+    const isEnabled = hasPlayers && hasCurrentUser
 
-    // return <button className="action" onClick={() => sendRequest(uuid) }>
-    //     Reject
-    //     </button>
-    return <button className='game-action create'>Create</button>
+    const onClick = () => {
+        if (!hasPlayers) 
+            return alert("Choose both black and white players");
+
+        if (!hasCurrentUser)
+            return alert("You must be one of the players");
+    
+        console.log("TODO: send GameCreateRequest to the server!")
+    }
+
+    return (
+        <button
+            className={'game-action create' + (isEnabled ? ' enabled' : ' disabled')}
+            onClick={onClick}
+        >
+            Create
+        </button>
+    )
 }

webapp/src/components/Game/NewGame.jsx

@@ -19,12 +19,11 @@ export default function NewGame() {
   /*
    * Name options
    */
-  const nameOptions = data.leaderboard
-    ? Object.keys(data.leaderboard).map(playerName => {
-      const displayName = data.isCurrentUser(playerName) ? 'You' : playerName
-      return <option key={playerName} value={playerName}>{displayName}</option>
-    })
-    : []
+  const nameOptions = data.leaderboard ? Object.keys(data.leaderboard).map(playerName =>
+      <option key={playerName} value={playerName}>
+        {data.isCurrentUser(playerName) ? 'You' : playerName}
+      </option>)
+    : [<option key='loading' value='…'>…loading</option>]
 
   const whiteOptions = Array(nameOptions)
   whiteOptions.push(<option key='default' value=''>{'white player …'}</option>)

webapp/src/components/Header/index.jsx

@@ -15,7 +15,7 @@ export default function Header() {
       </h1>
       <OnlineToggle />
       <nav>
-        <NavLink to="/about" className={""}>
+        <NavLink to="/about">
           About
         </NavLink>
         <NavLink to="/game" className={data.gamesFetching && "woble"}>