phase end

client/cryps.css

@@ -338,7 +338,6 @@ header {
     flex-flow: row;
 
     flex: 0 0 100%;
-    margin-bottom: 1em;
 }
 
 .instance-info {
@@ -378,6 +377,49 @@ header {
     box-shadow: inset -0.5em 0 0 0 forestgreen;
 }
 
+progress {
+  /* Dimensions */
+  width: 100%;
+  height: .25em;
+
+  /* Reset the apperance */
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+
+  /* Get rid of the default border in Firefox/Opera. */
+  border: none;
+
+  /* For Firefox/IE10+ */
+  background-color: transparent;
+
+  /* For IE10+, color of the progress bar */
+  color: forestgreen;
+
+  margin: 0.5em 0;
+}
+
+progress::-webkit-progress-bar {
+  background-color: forestgreen;
+}
+
+.progress-container {
+  width: 100%;
+  background-color: transparent;
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: .25em;
+  display: block;
+}
+
+.progress-bar {
+  background-color: forestgreen;
+  width: 50%;
+  display: block;
+  height: inherit;
+}
+
 .instance-ui-btn {
     font-size: 100%;
     padding: 0;

client/src/components/game.component.jsx

@@ -78,6 +78,18 @@ function GamePanel(props) {
         </div>
     );
 
+    const timerPct = (Date.parse(game.phase_start) + 1000 * 60 * 60) - Date.now();
+    console.log(Date.now(), Date.parse(game.phase_start));
+    console.log(timerPct);
+
+    const timer = (
+        <progress value="100">
+          <div className="progress-container">
+            <span className="progress-bar"></span>
+          </div>
+        </progress>
+    );
+
     function findCryp(id) {
         const team = game.players.find(t => t.cryps.find(c => c.id === id));
         if (team) return team.cryps.find(c => c.id === id);
@@ -173,6 +185,7 @@ function GamePanel(props) {
     return (
         <main className="game" onClick={() => setActiveCryp(null)} >
             {header}
+            {timer}
             {PlayerTeam(playerTeam, setActiveSkill)}
             <div className="mobile-skills">
                 {mobileSkills}