From cb9494c89a4b83935cfa2393205839af2f0d8c1a Mon Sep 17 00:00:00 2001
From: Dominic Zimmer <s8dozimm@stud.uni-saarland.de>
Date: Sat, 29 Oct 2022 16:20:58 +0200
Subject: [PATCH] Update frontend

---
 frontend/src/TVMode.css | 69 +++++++++++++++++++++++++++++++++++++++--
 frontend/src/TVMode.tsx | 61 +++++++++++++++++++++---------------
 2 files changed, 102 insertions(+), 28 deletions(-)

diff --git a/frontend/src/TVMode.css b/frontend/src/TVMode.css
index 192dc12..fb0a628 100644
--- a/frontend/src/TVMode.css
+++ b/frontend/src/TVMode.css
@@ -2,12 +2,13 @@ span {
     color: white;
 }
 .stream > div {
-    width: 300px;
-    height: 1080px;
+    width: 290px;
+    height: 1070px;
     background-color: black;
     padding: 5px;
     display: flex;
     flex-direction: column;
+    justify-content: space-around;
 }
 .heading {
     display: flex;
@@ -81,7 +82,7 @@ span {
     border-radius: 20px;
     padding: 4px;
     gap: 2px;
-    margin: 15%;
+    width: 200px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -89,4 +90,66 @@ span {
 
 pre {
     color: white;
+}
+
+.info {
+    height: 35%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+}
+.info .heading {
+    display: block;
+    font-weight: bold;
+    color: #e8ff37;
+    font-size: 30pt;
+    text-align: center; 
+}
+.info .link {
+    display: block;
+    font-weight: bold;
+    color: #49ff4f;
+    font-size: 24pt;
+    text-align: center;
+}
+.info .text {
+    display: block;
+    font-weight: bold;
+    font-size: 24pt;
+    text-align: center; 
+}
+.info hr {
+    width: 100%;
+}
+.scoreboard {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.pokeball {
+    height: 200px;
+    width: 200px;
+    position: relative;
+}
+.pokeball :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: red;
+    clip-path: polygon(0% 0%, 0% 50%, 100% 50%, 100% 0%);
+    border-radius: 50%;
+}
+.pokeball :last-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    background: white;
+    clip-path: polygon(0% 50%, 0% 100%, 100% 100%, 100% 50%);
+    border-radius: 50%;
 }
\ No newline at end of file
diff --git a/frontend/src/TVMode.tsx b/frontend/src/TVMode.tsx
index 18604ab..9174671 100644
--- a/frontend/src/TVMode.tsx
+++ b/frontend/src/TVMode.tsx
@@ -36,33 +36,44 @@ const TVMode = () => {
     {state === undefined ?
       <span>Loading...</span> :
       <div>
-        <span className={`mode mode-${state.mode}`}>{state.mode}</span>
-        <div className="row">
-          <div>
-            <span>
-              next:&nbsp;
-            </span>
-            <span className={`subtitle mode-${state.nextMode}`}>{state.nextMode}</span>
+        <div className="info">
+          <span className="heading">
+            LAN-Party Plays Pokemon
+          </span>
+          <span className="text">
+          Join with your phone on
+          </span>
+          <span className="link">
+            http://pokemon.lan/
+          </span>
+          <span className="text">
+            and become the very best!
+          </span>
+          <hr />
+        </div>
+        <div className="scoreboard">
+          <span className={`mode mode-${state.mode}`}>{state.mode}</span>
+          <div className="row">
+            <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 ? 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>
-          <span className="timer">{Math.round(state.timeUntilNextMode ?? 0)}s ⏱️</span>
         </div>
-        <div className="voting">
-          {voteList.flatMap(([b, numVotes], index) => {
-            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>
-        <div>
-          Current state: <pre>
-            {JSON.stringify(state, null, 4)}
-          </pre>
-        </div>
-
       </div>
     }
   </div>;