From 3b459606e455854a5dbff1efd79312077808f3ec Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <s8dozimm@stud.uni-saarland.de>
Date: Sat, 29 Oct 2022 14:43:14 +0200
Subject: [PATCH] Update UI, respect multitouch

---
 frontend/src/Client.css |  3 +++
 frontend/src/Client.tsx | 12 +++++++-----
 frontend/src/TVMode.css | 33 +++++++++++++++++++++++++++++++--
 frontend/src/TVMode.tsx | 25 ++++++++++++++++++-------
 4 files changed, 59 insertions(+), 14 deletions(-)

diff --git a/frontend/src/Client.css b/frontend/src/Client.css
index 8d5c03f..d1d3a2b 100644
--- a/frontend/src/Client.css
+++ b/frontend/src/Client.css
@@ -27,6 +27,9 @@
     --button-color: lightgrey;
 }
 
+body {
+    background-color: black;
+}
 
 .button {
     line-height: var(--button-height);
diff --git a/frontend/src/Client.tsx b/frontend/src/Client.tsx
index 7b14f49..527b4d3 100644
--- a/frontend/src/Client.tsx
+++ b/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;
       }
     });
 
diff --git a/frontend/src/TVMode.css b/frontend/src/TVMode.css
index 67b7707..192dc12 100644
--- a/frontend/src/TVMode.css
+++ b/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 {
diff --git a/frontend/src/TVMode.tsx b/frontend/src/TVMode.tsx
index e1d8097..18604ab 100644
--- a/frontend/src/TVMode.tsx
+++ b/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>