Update UI, respect multitouch

frontend/src/Client.css

@@ -27,6 +27,9 @@
     --button-color: lightgrey;
 }
 
+body {
+    background-color: black;
+}
 
 .button {
     line-height: var(--button-height);

frontend/src/Client.tsx

@@ -10,13 +10,15 @@ const Client = () => {
   const [socket, setSocket] = useState<WebSocket>();
   const [buttonMap, setButtonMap] = useState<ButtonMap>(defaultButtonMap);
 
-  const updateButtonEvent = (button: ButtonType, state: "down" | "up") =>
+  const updateButtonEvent = (button: ButtonType, buttonState: "down" | "up") =>
     () => setButtonMap((m) => {
-      const newMap = { ...m, [button]: (state === "down") };
-      if (mapToBitvector(newMap).reduce((a,b) => a+b, 0) > 1) {
-        return m;
-      } else {
+      const newMap = { ...m, [button]: (buttonState === "down") };
+      const multitouch = !!state.allowMultitouch;
+      const multiInput = mapToBitvector(newMap).reduce((a,b) => a+b, 0) > 1;
+      if (!multiInput || multitouch) {
         return newMap;
+      } else {
+        return m;
       }
     });
 

frontend/src/TVMode.css

@@ -16,6 +16,7 @@ span {
 }
 
 .timer {
+    width: 75px;
     font-weight: bold;
     text-align: right;
 }
@@ -43,19 +44,47 @@ span {
 .row {
     display: flex;
     flex-direction: row;
-    justify-content: space-between;
+    justify-content: space-around;
     padding: 0px 10px;
 }
 
 .vote {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+}
+.vote .bar {
+    color: white;
     font-size: 24pt;
     text-transform: uppercase;
     display: flex;
     justify-content: space-between;
-    gap: 30px;
+
+    border-radius: 5px;
+    background-color: #3a3a3a;
+    max-width: 200px;
+    width: var(--vote-percentage, 0px);
 }
+.vote .percentage {
+    font-weight: bold;
+    line-height: 100%;
+    align-items: center;
+    display: inline-flex;
+}
+.vote .bar-wrap {
+    width: 70%;
+}
+
 .voting {
+    background: #040404;
+    border-radius: 20px;
+    padding: 4px;
+    gap: 2px;
     margin: 15%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
 }
 
 pre {

frontend/src/TVMode.tsx

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
-import './Client.css';
+import { CSSProperties, useEffect, useMemo, useState } from 'react';
 import './TVMode.css';
 import { ButtonType, buttonTypeList, WGPPState } from './types';
 
@@ -27,7 +26,11 @@ const TVMode = () => {
   }, [])
 
   const totalCount = useMemo(() => buttonTypeList.reduce((acc, v) => (state?.votes?.[v] ?? 0) + acc, 0), [state]);
-  const voteList = useMemo(() => buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]).sort((a, b) => b[1] - a[1]), [state]);
+  const voteList = useMemo(() =>
+    buttonTypeList
+      .map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number])
+      //.sort((a, b) => b[1] - a[1])
+    , [state]);
 
   return <div className="stream">
     {state === undefined ?
@@ -35,14 +38,22 @@ const TVMode = () => {
       <div>
         <span className={`mode mode-${state.mode}`}>{state.mode}</span>
         <div className="row">
-          <span className="subtitle">next: {state.nextMode}</span>
+          <div>
+            <span>
+              next:&nbsp;
+            </span>
+            <span className={`subtitle mode-${state.nextMode}`}>{state.nextMode}</span>
+          </div>
           <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
         </div>
         <div className="voting">
           {voteList.flatMap(([b, numVotes], index) => {
-            const percentage = numVotes === 0 ? "" : Math.round(numVotes / totalCount * 100) + "%";
-            return <div className="vote" key={index}>
-              <span>{b}</span><span>{percentage}</span>
+            const percentage = numVotes === 0 ? 0 : Math.round(numVotes / totalCount * 100);
+            return <div className="vote" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} key={index}>
+              <div className="bar-wrap">
+              <div className="bar" style={{ "--vote-percentage": percentage + "%" } as CSSProperties} >{b}</div>
+              </div>
+              <span className="percentage">{percentage === 0 ? "" : `${percentage}%`}</span>
             </div>;
           })}
         </div>