webapp/src/App.js

@@ -9,12 +9,14 @@ import {
 import Header from "./components/Header"
 import Leaderboard from "./components/Leaderboard"
 import GameProposal from "./components/GameProposal"
+import DataPolling from './components/OfflineToggle';
 
 function App() { 
 
   return <div className="App">
     <BrowserRouter>
         <Header/>
+        <DataPolling/>
         <div className="Container">
           <Routes>
             <Route path="/leaderboard" element={<Leaderboard/>} />

webapp/src/components/Header/index.css

@@ -1,9 +1,3 @@
-h1 {
-    display: inline-flex;
-}
-
-.OnlineTgl {
-    transform: scale(.25, .25);
-    width: 32px;
-    height: 16px;
-}
+p {
+    margin-bottom: 30px;
+}

webapp/src/components/Header/index.jsx

@@ -1,13 +1,11 @@
 import './index.css';
 import React from "react"
 import { Link } from "react-router-dom";
-import OfflineToggle from '../OnlineTgl';
 
 export default function Header() {
 
   return <div>
-    <h1>CordaCheckers <OfflineToggle/> </h1>
-
+    <h1>CordaCheckers</h1>
     <nav>
       <Link to="/leaderboard">Leaderboard</Link> {"| "}
       <Link to="/gameproposal">Game Proposal</Link> {"| "}

webapp/src/components/OfflineToggle/index.jsx

@@ -0,0 +1,12 @@
+import React from "react"
+import { AppData } from "../../context/data"
+
+export default function OfflineToggle() {
+    const [appData, dispatchData] = React.useContext(AppData)
+
+    return <div className="OfflineToggle">
+        <button onClick={() => dispatchData({type: "toggleOfflineMode"})}>
+            { appData.offlineMode === true ? "offline" : "online" }
+        </button>
+        </div>
+}

webapp/src/components/OnlineTgl/index.css

@@ -1,104 +0,0 @@
-
-.tgl {
-  display: none;
-  
-  /* add default box-sizing for this scope */
-  &,
-  &:after,
-  &:before,
-  & *,
-  & *:after,
-  & *:before,
-  & + .tgl-btn {
-    box-sizing: border-box;
-    &::selection {
-      background: none;
-    }
-  }
-  
-  + .tgl-btn {
-    outline: 0;
-    display: block;
-    width: 4em;
-    height: 2em;
-    position: relative;
-    cursor: pointer;
-    user-select: none;
-    &:after,
-    &:before {
-      position: relative;
-      display: block;
-      content: "";
-      width: 50%;
-      height: 100%;
-    }
-    
-    &:after {
-      left: 0;
-    }
-    
-    &:before {
-      display: none;
-    }
-  }
-  
-  &:checked + .tgl-btn:after {
-    left: 50%;
-  }
-}
-
-.tgl-flip {
-  + .tgl-btn {
-    padding: 2px;
-    transition: all .2s ease;
-    font-family: sans-serif;
-    perspective: 100px;
-    &:after,
-    &:before {
-      display: inline-block;
-      transition: all .4s ease;
-      width: 100%;
-      text-align: center;
-      position: absolute;
-      line-height: 2em;
-      font-weight: bold;
-      color: #fff;
-      position: absolute;
-      top: 0;
-      left: 0;
-      backface-visibility: hidden;
-      border-radius: 4px;
-    }
-    
-    &:after {
-      content: attr(data-tg-on);
-      background: #02C66F;
-      transform: rotateY(-180deg);
-    }
-    
-    &:before {
-      background: #FF3A19;
-      content: attr(data-tg-off);
-    }
-
-    &:active:before {
-      transform: rotateY(-20deg);
-    }
-  }
-  
-  &:checked + .tgl-btn {
-    &:before {
-      transform: rotateY(180deg);
-    }
-    
-    &:after {
-      transform: rotateY(0);
-      left: 0;
-      background: #7FC6A6;
-    }
-    
-    &:active:after {
-      transform: rotateY(20deg);
-    }
-  }
-}

webapp/src/components/OnlineTgl/index.jsx

@@ -1,12 +0,0 @@
-import "./index.css"
-import React from "react"
-import { AppData } from "../../context/data"
-
-export default function OnlineTgl() {
-    const [/*appData*/, dispatchData] = React.useContext(AppData)
-
-    return <div className="OnlineTgl">
-            <input className="tgl tgl-flip" id="cb5" type="checkbox" defaultChecked onClick={() => dispatchData({type: "toggleOfflineMode"})}/>
-            <label className="tgl-btn" data-tg-off="offline" data-tg-on="online" htmlFor="cb5"/>
-        </div>
-}