From 019ef381456664cc54e86463264599e9ed94e65f Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <s8dozimm@stud.uni-saarland.de>
Date: Fri, 28 Oct 2022 18:12:55 +0200
Subject: [PATCH] Update table

---
 frontend/src/TVMode.css | 2 +-
 frontend/src/TVMode.tsx | 7 ++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/frontend/src/TVMode.css b/frontend/src/TVMode.css
index 16a64e5..d030d6a 100644
--- a/frontend/src/TVMode.css
+++ b/frontend/src/TVMode.css
@@ -55,5 +55,5 @@ span {
     gap: 30px;
 }
 .voting {
-    margin: auto;
+    margin: 15%;
 }
\ No newline at end of file
diff --git a/frontend/src/TVMode.tsx b/frontend/src/TVMode.tsx
index 0435f43..e94c276 100644
--- a/frontend/src/TVMode.tsx
+++ b/frontend/src/TVMode.tsx
@@ -1,7 +1,7 @@
 import { CSSProperties, useEffect, useState } from 'react';
 import './TVMode.css';
 import './Client.css';
-import { buttonTypeList, WGPPState } from './types';
+import { ButtonType, buttonTypeList, WGPPState } from './types';
 
 const TVMode = () => {
 
@@ -38,6 +38,7 @@ const TVMode = () => {
   }, [])
 
   const totalCount = buttonTypeList.reduce((acc, v) => (state?.votes?.[v]??0) + acc, 0);
+  const voteList = buttonTypeList.map(b => [b, state?.votes?.[b] ?? 0] as [ButtonType, number]);
 
   return <div className="stream">
     {state === undefined ?
@@ -49,9 +50,9 @@ const TVMode = () => {
           <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
         </div>
         <div className="voting">
-          {buttonTypeList.map((b, index) =>
+          {voteList.map(([b, numVotes], index) =>
             <div className="vote" key={index}>
-              <span>{b}</span><span> {state?.votes?.[b] ? Math.round(state?.votes?.[b] ?? 0 / totalCount / 100) : ""}</span>
+              <span>{b}</span><span> {numVotes ? Math.round(numVotes / totalCount * 100) + "%" : ""} </span>
             </div>
           )}
         </div>