progress bars

client/cryps.css

@@ -377,47 +377,22 @@ header {
     box-shadow: inset -0.5em 0 0 0 forestgreen;
 }
 
-progress {
+.timer-container {
-  /* Dimensions */
+    display: flex;
-  width: 100%;
+    flex: 1 1 100%;
-  height: .25em;
+    height: 0.25em;
 
-  /* Reset the apperance */
+    border: none;
-  -webkit-appearance: none;
+    margin: 0.5em 0;
-     -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 {
+.timer {
-  background-color: forestgreen;
+    background: whitesmoke;
-}
+    transition-property: all;
+    transition-duration: 0.5s;
+    transition-delay: 0;
+    transition-timing-function: ease;
 
-.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 {

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' : ''}`;
 

server/src/game.rs

@@ -564,7 +564,7 @@ impl Game {
     }
 
     fn phase_timed_out(&self) -> bool {
-        !Utc::now().signed_duration_since(self.phase_end).is_zero()
+        Utc::now().signed_duration_since(self.phase_end).num_milliseconds() > 0
     }
 
     pub fn upkeep(mut self) -> Game {

server/src/instance.rs

@@ -83,7 +83,7 @@ impl Instance {
     }
 
     fn phase_timed_out(&self) -> bool {
-        !Utc::now().signed_duration_since(self.phase_end).is_zero()
+        Utc::now().signed_duration_since(self.phase_end).num_milliseconds() > 0
     }
 
     fn timed_out_players(&self) -> Vec<Uuid> {