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

@@ -15,31 +15,19 @@ export default function Create() {
 
         const request = ctx.get_GameProposalRequest()
 
-        ctx.setFetching(true)
-
         postData("/api/gameproposal", request)
             .then((responce) => {
                 console.log("responce", responce) // JSON data parsed by `data.json()` call
                 ctx.clear_Message2Opponent()
-                ctx.setFetching(false)
             });
     }
 
-    console.log("ctx", ctx)
     return (
         <button
-            className={'game-action create'
+            className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
-                + (ctx.isEnabled ? ' enabled' : ' disabled')
-                + (ctx.isFetching === true ? ' woble' : '')
-            }
             onClick={onClick}
         >
-            <span>C</span>
+            Create
-            <span>r</span>
-            <span>e</span>
-            <span>a</span>
-            <span>t</span>
-            <span>e</span>
         </button>
     )
 }
@@ -76,11 +64,8 @@ function Definitions() {
         hasCurrentUser,
         isEnabled,
 
-        isFetching: ctx.newGame.isFetching,
-        setFetching: (status) => { console.log("setFetching: ", status); dispatchCtx({ update: "newGame", isFetching: status }) },
-
         get_GameProposalRequest,
-        clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) },
+        clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }
     }
 }
 

webapp/src/components/Game/GameMessage.jsx

@@ -1,11 +1,11 @@
 import './GameMessage.css'
 import React from 'react'
 
-// import { AppContext } from '../../context/app'
+import { AppContext } from '../../context/app'
 
 export default function GameMessage() {
 
-  // const [ctx] = React.useContext(AppContext)
+  const [ctx] = React.useContext(AppContext)
 
   return (
     <div className='game-message'>

webapp/src/components/Game/GameSelector.jsx

@@ -8,14 +8,14 @@ import Proposal from './GameSelector/GameProposal';
 
 export default function GameSelector() {
   const [data] = React.useContext(AppData)
-  const [/*ctx*/, dispatchCtx] = React.useContext(AppContext)
+  const [ctx, dispatchCtx] = React.useContext(AppContext)
 
   const { pathname } = useLocation();
   const isProposalPath = matchPath("/game/proposal/*", pathname);
   const isActivelPath  = matchPath("/game/active/*", pathname);
   const isArchivePath  = matchPath("/game/archive/*", pathname);
 
-  // console.log("GameSelector appCtx", ctx)
+  console.log("GameSelector appCtx", ctx)
 
   const onClick_proposal = (selectedGame) => {
     dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame })

webapp/src/components/Header/index.jsx

@@ -1,9 +1,9 @@
-import './Header.css';
+import './index.css';
-import './woble.css'
+import './wave.css'
 import React from "react"
 import { NavLink } from "react-router-dom";
-import OnlineToggle from './OnlineTgl';
+import OnlineToggle from '../OnlineTgl';
-import { AppData } from "../context/data"
+import { AppData } from "../../context/data"
 
 export default function Header() {
   const [data] = React.useContext(AppData)

webapp/src/components/Header/wave.css

@@ -2,6 +2,16 @@
   
   .woble {
     display: flex;
+    cursor: pointer;
+    justify-content: center; 
+    align-items: center;
+    /* text-transform: uppercase; */
+    /* font-size: 1.5rem; */
+    /* padding: 1rem 2rem; */
+    /* background-color: black; */
+    /* color: white; */
+    /* border-radius: 100px; */
+    /* gap: 1rem; */
   }
   
   /* .wave > span {

webapp/src/context/app/reducer.js

@@ -25,7 +25,6 @@ export const initialState = {
     whitePlayer: '',
     blackPlayer: '',
     message: '',
-    isFetching: false,
   },
 
 }