From c0423f27d308407829ae1596bbc47c923be204ea Mon Sep 17 00:00:00 2001
From: djmil <andriy@djmil.dev>
Date: Tue, 31 Oct 2023 20:05:47 +0100
Subject: [PATCH] implementstion

---
 webapp/src/components/Header.jsx | 23 ++++-------------
 webapp/src/components/Wobler.css | 42 ++++++++++++++++++++++++++++++++
 webapp/src/components/Wobler.jsx | 14 +++++++++++
 webapp/src/components/woble.css  | 38 -----------------------------
 4 files changed, 61 insertions(+), 56 deletions(-)
 create mode 100644 webapp/src/components/Wobler.css
 create mode 100644 webapp/src/components/Wobler.jsx
 delete mode 100644 webapp/src/components/woble.css

diff --git a/webapp/src/components/Header.jsx b/webapp/src/components/Header.jsx
index a785ebd..71d4b9f 100644
--- a/webapp/src/components/Header.jsx
+++ b/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>
diff --git a/webapp/src/components/Wobler.css b/webapp/src/components/Wobler.css
new file mode 100644
index 0000000..2b7f7eb
--- /dev/null
+++ b/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;
+}
diff --git a/webapp/src/components/Wobler.jsx b/webapp/src/components/Wobler.jsx
new file mode 100644
index 0000000..3d3358c
--- /dev/null
+++ b/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>
+    )
+}
diff --git a/webapp/src/components/woble.css b/webapp/src/components/woble.css
deleted file mode 100644
index 93f818f..0000000
--- a/webapp/src/components/woble.css
+++ /dev/null
@@ -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;
-  }
-  
\ No newline at end of file