progress bars

client/src/components/game.component.jsx

@@ -78,18 +78,6 @@ 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);
@@ -97,9 +85,23 @@ function GamePanel(props) {
     }
 
     const otherTeams = game.players.filter(t => t.id !== account.id);
-
     const playerTeam = game.players.find(t => t.id === account.id);
 
+    const zero = Date.parse(game.phase_end) - (1000 * 60);
+    const now = Date.now();
+    const end = Date.parse(game.phase_end);
+    const timerPct = ((now - zero) / (end - zero) * 100);
+    const timerStyles = {
+        width: `${timerPct < 100 && !resolution ? timerPct : 0}%`,
+        background: playerTeam.ready ? 'forestgreen' : 'whitesmoke',
+    };
+
+    const timer = (
+        <div className="timer-container">
+            <div className="timer" style={timerStyles} >&nbsp;</div>
+        </div>
+    );
+
     function stackElement(c, i) {
         let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
             const target = findCryp(s.target_cryp_id);

client/src/components/instance.component.jsx

@@ -73,6 +73,22 @@ function InstanceComponent(args) {
         ? readyBtn
         : null;
 
+    // TIMER
+    const zero = Date.parse(instance.phase_end) - (1000 * 120);
+    const now = Date.now();
+    const end = Date.parse(instance.phase_end);
+    const timerPct = ((now - zero) / (end - zero) * 100);
+    const timerStyles = {
+        width: `${timerPct < 100 ? timerPct : 0}%`,
+        background: player.ready ? 'forestgreen' : 'whitesmoke',
+    };
+
+    const timer = (
+        <div className="timer-container">
+            <div className="timer" style={timerStyles} >&nbsp;</div>
+        </div>
+    );
+
     return (
         <main className="instance" >
             <div className="instance-hdr">
@@ -83,6 +99,7 @@ function InstanceComponent(args) {
                 </div>
                 {actionBtn}
             </div>
+            {timer}
             <VboxContainer />
             <InstanceCrypsContainer />
             <InfoContainer />

client/src/components/vbox.component.jsx

@@ -210,7 +210,6 @@ function Vbox(args) {
         return setReclaiming(!reclaiming);
     }
 
-console.log('reclaiminig', reclaiming)
     const classes = `vbox ${activeVar !== null || activeCryp ? 'hidden' : ''}`;
     const reclaimClass = `instance-btn instance-ui-btn vbox-btn ${reclaiming ? 'reclaiming' : ''}`;