Update frontend

frontend/src/TVMode.css

@@ -2,12 +2,13 @@ span {
     color: white;
 }
 .stream > div {
-    width: 300px;
+    width: 290px;
-    height: 1080px;
+    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;
@@ -90,3 +91,65 @@ 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%;
+}

frontend/src/TVMode.tsx

@@ -36,6 +36,22 @@ const TVMode = () => {
     {state === undefined ?
       <span>Loading...</span> :
       <div>
+        <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>
@@ -57,12 +73,7 @@ const TVMode = () => {
               </div>;
             })}
           </div>
-        <div>
-          Current state: <pre>
-            {JSON.stringify(state, null, 4)}
-          </pre>
         </div>
-
       </div>
     }
   </div>;