webapp/src/components/Header.jsx

@@ -1,9 +1,9 @@
 import './Header.css';
-import './woble.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)
@@ -18,24 +18,11 @@ export default function Header() {
         <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 to="/game">
+          <Wobler text="Game" dance={data.gamesFetching} />
         </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 to="/leaderboard">
+          <Wobler text="Leaderboard" dance={data.leaderboardFetching} />
         </NavLink>
       </nav>
     </div>

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/components/woble.css

@@ -1,38 +0,0 @@
-/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
-  
-  .woble {
-    display: flex;
-  }
-  
-  /* .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;
-  }
-