front: action: CreateGameProposal: use Definitions

webapp/package.json

@@ -33,8 +33,8 @@
       "not op_mini all"
     ],
     "development": [
-      "last 1 chrome version",
+      "last 1 firefox version",
-      "last 1 firefox version"
+      "last 1 chrome version"
     ]
   }
 }

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

@@ -1,36 +1,77 @@
 import React from 'react';
 import { AppContext } from '../../../context/app'
 import { AppData } from '../../../context/data'
+import { WHITE, BLACK } from '../Stone'
 
 export default function Create() {
-    const [ctx] = React.useContext(AppContext)
+    const ctx = Definitions()
-    const [data] = React.useContext(AppData)
-
-    const hasPlayers = ctx.newGame.whitePlayer !== ctx.newGame.blackPlayer
-        && ctx.newGame.blackPlayer !== ''
-        && ctx.newGame.whitePlayer !== ''
-
-    const hasCurrentUser = data.isCurrentUser(ctx.newGame.blackPlayer) 
-        || data.isCurrentUser(ctx.newGame.whitePlayer)
-    
-    const isEnabled = hasPlayers && hasCurrentUser
 
     const onClick = () => {
-        if (!hasPlayers) 
+        if (!ctx.hasPlayers) 
             return alert("Choose both black and white players");
 
-        if (!hasCurrentUser)
+        if (!ctx.hasCurrentUser)
             return alert("You must be one of the players");
     
-        console.log("TODO: send GameCreateRequest to the server!")
+        const request = ctx.get_GameProposalRequest()
+        console.log("TODO: send GameCreateRequest to the server!", request)
     }
 
     return (
         <button
-            className={'game-action create' + (isEnabled ? ' enabled' : ' disabled')}
+            className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
             onClick={onClick}
         >
             Create
         </button>
     )
 }
+
+function Definitions() {
+    const [ctx] = React.useContext(AppContext)
+    const [data] = React.useContext(AppData)
+
+    const isCurrentUser = data.isCurrentUser
+    const whitePlayerName = ctx.newGame.whitePlayer
+    const blackPlayerName = ctx.newGame.blackPlayer
+    
+    const hasPlayers = whitePlayerName !== blackPlayerName
+        && whitePlayerName !== ''
+        && blackPlayerName !== ''
+
+    const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName)
+    
+    const isEnabled = hasPlayers && hasCurrentUser
+
+    const get_GameProposalRequest = () => {
+        const [opponentName, opponentColor] = get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName)
+
+        return {
+            opponentName,
+            opponentColor,
+            board: null,
+            message: "let's play a game"
+        }
+    }
+    
+    return {
+        hasPlayers,
+        hasCurrentUser,
+        isEnabled,
+
+        get_GameProposalRequest,
+    }
+}
+
+function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) {
+    if (isCurrentUser(whitePlayerName)) {
+        return [blackPlayerName, BLACK()]
+    }
+
+    if (isCurrentUser(blackPlayerName)) {
+        return [whitePlayerName, WHITE()]
+    }
+
+    return ['', '']
+}
+