faceoff text for start, win, lose

client/src/components/faceoff.jsx

@@ -66,6 +66,7 @@ function Faceoff(props) {
         );
     }
 
+
     function OpponentTeam(team) {
         const constructs = team.constructs.map((c, i) =>
             <FaceoffConstruct key={c.id} construct={c}/>);
@@ -78,10 +79,44 @@ function Faceoff(props) {
             </div>
         );
     }
+    function faceoffText() {
+        if (!instance.winner) {
+            const zero = Date.parse(instance.phase_start);
+            const now = Date.now();
+            const end = Date.parse(instance.phase_end);
+            const timerPct = instance.phase_end
+                ? ((now - zero) / (end - zero) * 100)
+                : 100;
+            const fight = timerPct > 10 ? <h1> FIGHT </h1> : null;
+            return (
+                <div class="faceoff-text"> 
+                    <h1> {otherTeam.name} </h1>
+                    <h1> vs </h1>
+                    <h1> {playerTeam.name} </h1>
+                    {fight}
+                </div>
+            );
+        }
+
+        if (instance.winner === playerTeam.id) {
+            return (
+                <div class="faceoff-text"> 
+                    <h1> You are the champion </h1>
+                </div>
+            )
+        }
+
+        return (
+            <div class="faceoff-text"> 
+                <h1> You lose </h1>
+            </div>
+        )
+    }
 
     return (
         <main class="faceoff">
             {OpponentTeam(otherTeam)}
+            {faceoffText()}
             {PlayerTeam(playerTeam)}
         </main>
     );