Touch frontend

frontend/src/Client.tsx

@@ -44,7 +44,7 @@ const Client = () => {
 
   return (
     <div>
-      <div style={{ transform: "translate(-50%, 0)",position: "absolute", top: 10, left: "50%" }}>
+      <div style={{ display: "none", transform: "translate(-50%, 0)",position: "absolute", top: 10, left: "50%" }}>
         State: <pre>{JSON.stringify(state)}</pre>
         ButtonMap: <pre>{mapToBitvector(buttonMap).map(s => s.toString()).join(" ")}</pre>
       </div>

frontend/src/TVMode.css

@@ -1,6 +1,9 @@
+span {
+    color: white;
+}
 .stream > div {
-    width: 250px;
-    height: 50vh;
+    width: 300px;
+    height: 1080px;
     background-color: #00ff00;
     padding: 5px;
     display: flex;
@@ -11,11 +14,46 @@
     flex-direction: row;
     justify-content: space-between;
 }
+
 .timer {
     font-weight: bold;
+    text-align: right;
+}
+.subtitle {
+    font-weight: bold;
 }
 
+.mode-democracy {
+    color: #00b7ff;
+}
+.mode-anarchy {
+    color: #ff2500;
+}
+.mode-random {
+    background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);
+    color: transparent;
+    -webkit-background-clip: text;
+}
 .mode {
     font-weight: bold;
     text-transform: uppercase;
+    text-align: center;
+    font-size: 32pt;
+}
+.row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0px 10px;
+}
+
+.vote {
+    font-size: 24pt;
+    text-transform: uppercase;
+    display: flex;
+    justify-content: space-between;
+    gap: 30px;
+}
+.voting {
+    margin: auto;
 }

frontend/src/TVMode.tsx

@@ -1,6 +1,7 @@
-import { useEffect, useState } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 import './TVMode.css';
-import { WGPPState } from './types';
+import './Client.css';
+import { buttonTypeList, WGPPState } from './types';
 
 const TVMode = () => {
 
@@ -36,15 +37,23 @@ const TVMode = () => {
     };
   }, [])
 
+  const totalCount = buttonTypeList.reduce((acc, v) => (state?.votes?.[v]??0) + acc, 0);
+
   return <div className="stream">
     {state === undefined ?
       <span>Loading...</span> :
       <div>
-        <div className="heading">
-          <span className={`mode mode-${state.mode}`}>Mode: {state.mode}</span>
-          <div>
-            <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
-          </div>
+        <span className={`mode mode-${state.mode}`}>{state.mode}</span>
+        <div className="row">
+          <span className="subtitle">next: {state.nextMode}</span>
+          <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
+        </div>
+        <div className="voting">
+          {buttonTypeList.map((b, index) =>
+            <div className="vote" key={index}>
+              <span>{b}</span><span> {state?.votes?.[b] ? Math.round(state?.votes?.[b] ?? 0 / totalCount / 100) : ""}</span>
+            </div>
+          )}
         </div>
         <div>
           Current state: <pre>