Merge branch 'create-button-woble-prfix'

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { AppContext } from '../../../context/app'
 import { AppData } from '../../../context/data'
 import { WHITE, BLACK } from '../Stone'
+import Wobler from '../../Wobler'
 
 export default function Create() {
     const ctx = Definitions()
@@ -15,10 +16,13 @@ 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)
             });
     }
 
@@ -27,7 +31,7 @@ export default function Create() {
             className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')}
             onClick={onClick}
         >
-            Create
+            <Wobler text="Leaderboard" dance={ctx.fetching} />
         </button>
     )
 }
@@ -64,8 +68,11 @@ function Definitions() {
         hasCurrentUser,
         isEnabled,
 
+        fetching: ctx.newGame.fetching,
+        setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: 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.jsx

@@ -0,0 +1,30 @@
+import './Header.css';
+import React from "react"
+import { NavLink } from "react-router-dom";
+import OnlineToggle from './OnlineTgl';
+import { AppData } from "../context/data"
+import Wobler from './Wobler';
+
+export default function Header() {
+  const [data] = React.useContext(AppData)
+
+  return (
+    <div className='app-header'>
+      <h1 >
+        CordaCheckers
+      </h1>
+      <OnlineToggle />
+      <nav>
+        <NavLink to="/about">
+          About
+        </NavLink>
+        <NavLink to="/game">
+          <Wobler text="Game" dance={data.gamesFetching} />
+        </NavLink>
+        <NavLink to="/leaderboard">
+          <Wobler text="Leaderboard" dance={data.leaderboardFetching} />
+        </NavLink>
+      </nav>
+    </div>
+  )
+}

webapp/src/components/Header/index.jsx

@@ -1,43 +0,0 @@
-import './index.css';
-import './wave.css'
-import React from "react"
-import { NavLink } from "react-router-dom";
-import OnlineToggle from '../OnlineTgl';
-import { AppData } from "../../context/data"
-
-export default function Header() {
-  const [data] = React.useContext(AppData)
-
-  return (
-    <div className='app-header'>
-      <h1 >
-        CordaCheckers
-      </h1>
-      <OnlineToggle />
-      <nav>
-        <NavLink to="/about">
-          About
-        </NavLink>
-        <NavLink to="/game" className={data.gamesFetching && "woble"}>
-          <span>G</span>
-          <span>a</span>
-          <span>m</span>
-          <span>e</span>
-        </NavLink>
-        <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"}>
-          <span>L</span>
-          <span>e</span>
-          <span>a</span>
-          <span>d</span>
-          <span>e</span>
-          <span>r</span>
-          <span>b</span>
-          <span>o</span>
-          <span>a</span>
-          <span>r</span>
-          <span>d</span>
-        </NavLink>
-      </nav>
-    </div>
-  )
-}

webapp/src/components/Header/wave.css

@@ -1,48 +0,0 @@
-/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
-  
-  .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 {
-    transform: rotate(-90deg);
-  } */
-  
-  @keyframes wave {
-    0% {
-      transform: scale(1) /*rotate(-90deg)*/;
-    }
-    50% {
-      transform: scale(1.1) /*rotate(-90deg)*/;
-    }
-    100% {
-       transform: scale(1) rotate(-5deg);
-    }
-  }
-  
-  .woble span {
-    animation: wave 0.4s linear infinite;
-  }
-  
-  .woble span:nth-child(2) {
-    animation-delay: 0.1s;
-  }
-  
-  .woble span:nth-child(3) {
-    animation-delay: 0.2s;
-  }
-  
-  .woble span:nth-child(4) {
-    animation-delay: 0.3s;
-  }
-  

webapp/src/components/Wobler.css

@@ -0,0 +1,42 @@
+/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
+
+/* 
+.wave > span {
+  transform: rotate(-90deg);
+} 
+*/
+
+@keyframes wave {
+  0% {
+    transform: scale(1);
+  }
+
+  50% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1) rotate(-5deg);
+  }
+}
+
+.wobler.dance {
+  display: flex;
+  flex-direction: row;
+}
+
+.wobler.dance span {
+  animation: wave 0.4s linear infinite;
+}
+
+.wobler.dance span:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.wobler.dance span:nth-child(3) {
+  animation-delay: 0.2s;
+}
+
+.wobler.dance span:nth-child(4) {
+  animation-delay: 0.3s;
+}

webapp/src/components/Wobler.jsx

@@ -0,0 +1,14 @@
+import './Wobler.css'
+import React from 'react';
+
+export default function Wobler({ text, dance }) {
+    const spannedMessage = Array.from(text).map((letter, idx) => {
+        return <span key={idx}>{letter}</span>
+    })
+
+    return (
+        <div className={'wobler' + (dance === true ? ' dance' : '')}>
+            {spannedMessage}
+        </div>
+    )
+}

webapp/src/context/app/reducer.js

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