+ "game.clocks": function(newState) {
+ if (this.game.moves.length < 2)
+ {
+ // 1st move not completed yet: freeze time
+ this.virtualClocks = newState.map(s => ppt(s));
+ return;
+ }
+ const currentTurn = this.vr.turn;
+ const colorIdx = ["w","b"].indexOf(currentTurn);
+ let countdown = newState[colorIdx] -
+ (Date.now() - this.game.initime[colorIdx])/1000;
+ this.virtualClocks = [0,1].map(i => {
+ const removeTime = i == colorIdx
+ ? (Date.now() - this.game.initime[colorIdx])/1000
+ : 0;
+ return ppt(newState[i] - removeTime);
+ });
+ const myTurn = (currentTurn == this.game.mycolor);
+ let clockUpdate = setInterval(() => {
+ if (countdown <= 0 || this.vr.turn != currentTurn)
+ {
+ clearInterval(clockUpdate);
+ if (countdown <= 0 && myTurn)
+ {
+ this.$refs["basegame"].endGame(
+ this.game.mycolor=="w" ? "0-1" : "1-0", "Time");
+ this.st.conn.send(JSON.stringify({
+ code: "timeover",
+ target: this.game.oppid,
+ }));
+ }
+ }
+ else
+ {
+ // TODO: with Vue 3, just do this.virtualClocks[colorIdx] = ppt(--countdown)
+ this.$set(this.virtualClocks, colorIdx, ppt(Math.max(0, --countdown)));
+ }
+ }, 1000);
+ },
+ // In case variants array was't loaded when game was retrieved
+ "st.variants": function(variantArray) {
+ if (!!this.game.vname && this.game.vname == "")
+ this.game.vname = variantArray.filter(v => v.id == this.game.vid)[0].name;
+ },