implementation

webapp/src/components/Game/GameAction.css

@@ -22,7 +22,9 @@
     margin: 2px;
 }
 
-.game-action.create:hover {
+.game-action.create:hover,  /* OR */
+.game-action.busy 
+{
     background-color:#00b0ff60;  
 }
 

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

@@ -14,7 +14,10 @@ export default function Create() {
         if (!ctx.hasCurrentUser)
             return alert("You must be one of the players");
 
-        const request = ctx.get_GameProposalRequest()
+        if (ctx.fetching === true)
+            return
+
+        const request = ctx.getGameProposalRequest()
 
         ctx.setFetching(true)
 
@@ -28,7 +31,10 @@ export default function Create() {
 
     return (
         <button
-            className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
+            className={'game-action create'
+                + (ctx.enabled ? ' enabled' : ' disabled')
+                + (ctx.fetching ? ' busy' : '')
+            }
             onClick={onClick}
         >
             <Wobler text="Leaderboard" dance={ctx.fetching} />
@@ -50,10 +56,8 @@ function Definitions() {
 
     const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName)
 
-    const isEnabled = hasPlayers && hasCurrentUser
+    const getGameProposalRequest = () => {
-
+        const [opponentName, opponentColor] = getOpponent(isCurrentUser, whitePlayerName, blackPlayerName)
-    const get_GameProposalRequest = () => {
-        const [opponentName, opponentColor] = get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName)
 
         return {
             opponentName,
@@ -66,17 +70,17 @@ function Definitions() {
     return {
         hasPlayers,
         hasCurrentUser,
-        isEnabled,
+        enabled: hasPlayers && hasCurrentUser,
 
         fetching: ctx.newGame.fetching,
         setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) },
 
-        get_GameProposalRequest,
+        getGameProposalRequest,
         clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) },
     }
 }
 
-function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) {
+function getOpponent(isCurrentUser, whitePlayerName, blackPlayerName) {
     if (isCurrentUser(whitePlayerName)) {
         return [blackPlayerName, BLACK()]
     }
@@ -102,6 +106,6 @@ async function postData(url = "", data = {}) {
     if (response.ok)
         return response.json()// parses JSON response into native JavaScript objects
 
-    console.log("recponce", response)
+    console.wrn(response)
     return {}
 }