From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 20 Jun 2019 15:21:41 +0000 (+0200)
Subject: Update on game.clocks. Unfinished
X-Git-Url: https://git.auder.net/js/css/assets/current/git-logo.png?a=commitdiff_plain;h=5b87454c515b1fbf94e2c07ba7cb0cff21f38620;p=vchess.git

Update on game.clocks. Unfinished
---

diff --git a/client/src/utils/datetime.js b/client/src/utils/datetime.js
index 3075bffc..00e8b4b9 100644
--- a/client/src/utils/datetime.js
+++ b/client/src/utils/datetime.js
@@ -13,3 +13,31 @@ export function getTime(d)
 	return zeroPad(d.getHours()) + ":" + zeroPad(d.getMinutes()) + ":" +
 		zeroPad(d.getSeconds());
 }
+
+function padDigits(x)
+{
+  if (x < 10)
+    return "0" + x;
+  return x;
+}
+
+export function ppt(t)
+{
+  // "Pretty print" an amount of time given in seconds
+  const dayInSeconds = 60 * 60 * 24;
+  const hourInSeconds = 60 * 60;
+  const days = Math.floor(t / dayInSeconds);
+  const hours = Math.floor(t%dayInSeconds / hourInSeconds);
+  const minutes = Math.floor(t%hourInSeconds / 60);
+  const seconds = Math.floor(t % 60);
+  let res = "";
+  if (days > 0)
+    res += days + "d ";
+  if (days <= 3 && hours > 0) //TODO: 3 is arbitrary
+    res += hours + "h ";
+  if (days == 0 && minutes > 0)
+    res += (hours > 0 ? padDigits(minutes) + "m " : minutes + ":");
+  if (days == 0 && hours == 0)
+    res += padDigits(seconds);
+  return res.trim(); //remove potential last space
+}
diff --git a/client/src/views/Game.vue b/client/src/views/Game.vue
index ab6ae7a8..d3a4bd7b 100644
--- a/client/src/views/Game.vue
+++ b/client/src/views/Game.vue
@@ -11,6 +11,8 @@
         button(@click="abortGame") {{ st.tr["Game is too boring"] }}
     BaseGame(:game="game" :vr="vr" ref="basegame"
       @newmove="processMove" @gameover="gameOver")
+    // TODO: virtualClocks[...], not "clockState"
+    div Time: {{ clockState }}
     .button-group(v-if="game.mode!='analyze' && game.score=='*'")
       button(@click="offerDraw") Draw
       button(@click="() => abortGame()") Abort
@@ -26,6 +28,7 @@ import BaseGame from "@/components/BaseGame.vue";
 //import MoveList from "@/components/MoveList.vue";
 import { store } from "@/store";
 import { GameStorage } from "@/utils/gameStorage";
+import { ppt } from "@/utils/datetime";
 
 export default {
   name: 'my-game',
@@ -41,11 +44,23 @@ export default {
         rid: ""
       },
       game: { }, //passed to BaseGame
+      virtualClocks: [ ], //initialized with true game.clocks
       vr: null, //"variant rules" object initialized from FEN
       drawOfferSent: false, //did I just ask for draw? (TODO: use for button style)
       people: [ ], //potential observers (TODO)
     };
   },
+
+  // TODO: this method should disappear and virtualClocks already be "prettified":
+  // all computations are done when game.clocks are updated (see below)
+  computed: {
+    clockState: function() {
+      if (this.virtualClocks.length == 0)
+        return; //nothing to display for now
+      return ppt(this.virtualClocks[0]) + " - " + ppt(this.virtualClocks[1]);
+    },
+  },
+
   watch: {
     '$route' (to, from) {
       if (!!to.params["id"])
@@ -55,6 +70,18 @@ export default {
         this.loadGame();
       }
     },
+    "game.clocks": function(newState) {
+      this.virtualClocks = newState;
+      setInterval(function() {
+
+        // TODO: run clock of current turn, stop at 0, clearInterval in the end
+        // https://www.geeksforgeeks.org/create-countdown-timer-using-javascript/
+        // if it was my turn, call gameOver. Otherwise just stay at 0 and wait.
+        if ( ...........)
+//à 0, bloquer puis si mon temps : perte au temps. Sinon attendre message adversaire (il peut être offline).
+
+      });
+    },
   },
   created: function() {
     if (!!this.$route.params["id"])
@@ -311,25 +338,25 @@ export default {
           return obj;
         }, {});
       // Send move ("newmove" event) to opponent(s) (if ours)
-      // (otherwise move.elapsed is supposed to be already transmitted)
       let addTime = undefined;
       if (move.color == this.game.mycolor)
       {
         const elapsed = Date.now() - this.game.initime;
+        // elapsed time is measured in milliseconds
+        addTime = this.game.increment - elapsed/1000;
         this.game.players.forEach(p => {
           if (p.sid != this.st.user.sid)
           {
             this.st.conn.send(JSON.stringify({
               code: "newmove",
               target: p.sid,
-              move: Object.assign({}, filtered_move, {elapsed: elapsed}),
+              move: Object.assign({}, filtered_move, {addTime: addTime}),
             }));
           }
         });
-        move.elapsed = elapsed;
-        // elapsed time is measured in milliseconds
-        addTime = this.game.increment - elapsed/1000;
       }
+      else
+        addTime = move.addTime; //supposed transmitted
       const myTurnNow = (this.vr.turn == this.game.mycolor);
       GameStorage.update(this.gameRef.id,
       {
@@ -348,7 +375,8 @@ export default {
     // TODO: this update function should also work for corr games
     gameOver: function(score) {
       this.game.mode = "analyze";
-      GameStorage.update({
+      GameStorage.update(this.gameRef.id,
+      {
         score: score,
       });
     },