faceoff text for start, win, lose

WORKLOG.md

@@ -3,13 +3,9 @@
 
 *PRODUCTION*
 
-* rename vbox to shop (just for display)
-* give the shop and inventory distinct delineation
-* proper victory / lose page instead of just face off (you are the winner or something)
+* give the vbox and inventory distinct delineation
 * vbox phase skill list navigator (overlay maybe?)
 
-* clear active mtx after joining game
-
 * mobile styles
 * mobile info page
 

client/assets/styles/instance.less

@@ -413,9 +413,10 @@
     text-align: center;
     overflow: hidden;
     display: grid;
-    grid-template-rows: 1fr 1.5fr;
+    grid-template-rows: 1fr 0.25fr 1.5fr;
     grid-template-areas:
         "opponent"
+        "text"
         "player";
 
     h1 {
@@ -445,6 +446,13 @@
     }
 }
 
+.faceoff-text {
+    grid-area: text;
+    text-align: center;
+    align-self: center;
+    height: auto;
+}
+
 /* Mobile Nav*/
 .instance-nav { display: none; }
 

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>
     );