<template lang="pug">
-.row
- .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
- BaseGame(:game="game" :vr="vr" ref="basegame"
- @newmove="processMove" @gameover="gameOver")
- div Names: {{ game.players[0].name }} - {{ game.players[1].name }}
- div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }}
- .button-group(v-if="game.mode!='analyze' && game.score=='*'")
- button(@click="offerDraw") Draw
- button(@click="abortGame") Abort
- button(@click="resign") Resign
- textarea(v-if="game.score=='*'" v-model="corrMsg")
- Chat(:players="game.players")
+main
+ .row
+ .col-sm-12.col-md-3
+ Chat(:players="game.players")
+ .col-sm-12.col-md-9
+ BaseGame(:game="game" :vr="vr" ref="basegame"
+ @newmove="processMove" @gameover="gameOver")
+ .row
+ .col-sm-12.col-md-9.col-md-offset-3
+ .button-group(v-if="game.mode!='analyze' && game.score=='*'")
+ button(@click="offerDraw") Draw
+ button(@click="abortGame") Abort
+ button(@click="resign") Resign
+ div Names: {{ game.players[0].name }} - {{ game.players[1].name }}
+ div(v-if="game.score=='*'") Time: {{ virtualClocks[0] }} - {{ virtualClocks[1] }}
+ div(v-if="game.type=='corr'") {{ game.corrMsg }}
+ textarea(v-if="game.score=='*'" v-model="corrMsg")
</template>
<script>
this.loadGame();
},
"game.clocks": function(newState) {
- if (this.game.moves.length < 2)
+ if (this.game.moves.length < 2 || this.game.score != "*")
{
- // 1st move not completed yet: freeze time
+ // 1st move not completed yet, or game over: freeze time
this.virtualClocks = newState.map(s => ppt(s));
return;
}
{
clearInterval(clockUpdate);
if (countdown < 0)
- {
- this.$refs["basegame"].endGame(
- this.vr.turn=="w" ? "0-1" : "1-0", "Time");
- }
+ this.setScore(this.vr.turn=="w" ? "0-1" : "1-0", "Time");
}
else
{
game:myGame, target:data.from}));
break;
case "newmove":
- // NOTE: this call to play() will trigger processMove()
- this.$refs["basegame"].play(data.move,
- "receive", this.game.vname!="Dark" ? "animate" : null);
+ this.corrMsg = data.move.message; //may be empty
+ this.$set(this.game, "moveToPlay", data.move); //TODO: Vue3...
break;
case "lastate": //got opponent infos about last move
{
break;
}
case "resign":
- this.$refs["basegame"].endGame(
- (data.side=="b" ? "1-0" : "0-1"), "Resign");
+ this.setScore(data.side=="b" ? "1-0" : "0-1", "Resign");
break;
case "abort":
- this.$refs["basegame"].endGame("?", "Abort");
+ this.setScore("?", "Abort");
break;
case "draw":
- this.$refs["basegame"].endGame("1/2", "Mutual agreement");
+ this.setScore("1/2", "Mutual agreement");
break;
case "drawoffer":
this.drawOffer = "received"; //TODO: observers don't know who offered draw
if (data.movesCount > L)
{
// Just got last move from him
- this.$refs["basegame"].play(data.lastMove,
- "receive", this.game.vname!="Dark" ? "animate" : null);
+ this.$set(this.game, "moveToPlay", data.lastMove);
if (data.score != "*" && this.game.score == "*")
{
// Opponent resigned or aborted game, or accepted draw offer
// (this is not a stalemate or checkmate)
- this.$refs["basegame"].endGame(data.score, "Opponent action");
+ this.setScore(data.score, "Opponent action");
}
this.game.clocks = data.clocks; //TODO: check this?
if (!!data.lastMove.draw)
this.drawOffer = "received";
}
},
+ setScore: function(score, message) {
+ this.game.scoreMsg = message;
+ this.$set(this.game, "score", score); //TODO: Vue3...
+ },
offerDraw: function() {
- // TODO: also for corr games
if (this.drawOffer == "received")
{
if (!confirm("Accept draw?"))
if (p.sid != this.st.user.sid)
this.st.conn.send(JSON.stringify({code:"draw", target:p.sid}));
});
- this.$refs["basegame"].endGame("1/2", "Mutual agreement");
+ this.setScore("1/2", "Mutual agreement");
}
else if (this.drawOffer == "sent")
+ {
this.drawOffer = "";
+ if (this.game.type == "corr")
+ GameStorage.update(this.gameRef.id, {drawOffer: false});
+ }
else
{
if (!confirm("Offer draw?"))
if (p.sid != this.st.user.sid)
this.st.conn.send(JSON.stringify({code:"drawoffer", target:p.sid}));
});
+ if (this.game.type == "corr")
+ GameStorage.update(this.gameRef.id, {drawOffer: true});
}
},
abortGame: function() {
if (!confirm(this.st.tr["Terminate game?"]))
return;
- // Next line will trigger a "gameover" event, bubbling up till here
- this.$refs["basegame"].endGame("?", "Abort");
+ this.setScore("?", "Abort");
this.people.forEach(p => {
if (p.sid != this.st.user.sid)
{
side:this.game.mycolor, target:p.sid}));
}
});
- // Next line will trigger a "gameover" event, bubbling up till here
- this.$refs["basegame"].endGame(
- this.game.mycolor=="w" ? "0-1" : "1-0", "Resign");
+ this.setScore(this.game.mycolor=="w" ? "0-1" : "1-0", "Resign");
},
// 3 cases for loading a game:
// - from indexedDB (running or completed live game I play)
// corr game: needs to compute the clocks + initime
// NOTE: clocks in seconds, initime in milliseconds
game.clocks = [tc.mainTime, tc.mainTime];
- game.initime = [0, 0];
- const L = game.moves.length;
game.moves.sort((m1,m2) => m1.idx - m2.idx); //in case of
- if (L >= 3)
+ if (game.score == "*") //otherwise no need to bother with time
{
- let addTime = [0, 0];
- for (let i=2; i<L; i++)
+ game.initime = [0, 0];
+ const L = game.moves.length;
+ if (L >= 3)
{
- addTime[i%2] += tc.increment -
- (game.moves[i].played - game.moves[i-1].played) / 1000;
+ let addTime = [0, 0];
+ for (let i=2; i<L; i++)
+ {
+ addTime[i%2] += tc.increment -
+ (game.moves[i].played - game.moves[i-1].played) / 1000;
+ }
+ for (let i=0; i<=1; i++)
+ game.clocks[i] += addTime[i];
}
- for (let i=0; i<=1; i++)
- game.clocks[i] += addTime[i];
+ if (L >= 1)
+ game.initime[L%2] = game.moves[L-1].played;
+ if (game.drawOffer)
+ this.drawOffer = "received";
}
- if (L >= 1)
- game.initime[L%2] = game.moves[L-1].played;
// Now that we used idx and played, re-format moves as for live games
game.moves = game.moves.map( (m) => {
const s = m.squares;
if (gtype == "live" && game.clocks[0] < 0) //game unstarted
{
game.clocks = [tc.mainTime, tc.mainTime];
- game.initime[0] = Date.now();
- if (myIdx >= 0)
+ if (game.score == "*")
{
- // I play in this live game; corr games don't have clocks+initime
- GameStorage.update(game.id,
+ game.initime[0] = Date.now();
+ if (myIdx >= 0)
{
- clocks: game.clocks,
- initime: game.initime,
- });
+ // I play in this live game; corr games don't have clocks+initime
+ GameStorage.update(game.id,
+ {
+ clocks: game.clocks,
+ initime: game.initime,
+ });
+ }
}
}
this.game = Object.assign({},
}));
}
});
- if (this.game.type == "corr" && this.corrMsg != "")
- {
- // Add message to last move in BaseGame:
- // TODO: not very good style...
- this.$refs["basegame"].setCurrentMessage(this.corrMsg);
- }
}
else
addTime = move.addTime; //supposed transmitted
GameStorage.update(this.gameRef.id,
{
fen: move.fen,
+ message: this.corrMsg,
move:
{
squares: filtered_move,
- message: this.corrMsg,
played: Date.now(), //TODO: on server?
idx: this.game.moves.length,
},
//TODO: (Vue3) just this.game.clocks[colorIdx] += addTime;
this.$set(this.game.clocks, colorIdx, this.game.clocks[colorIdx] + addTime);
this.game.initime[nextIdx] = Date.now();
- // Finally reset curMoveMessage if needed
- if (this.game.type == "corr" && move.color == this.game.mycolor)
- this.corrMsg = "";
},
gameOver: function(score) {
this.game.mode = "analyze";
- this.game.score = score;
+ this.game.score = score; //until Vue3, this property change isn't seen
+ //by child (and doesn't need to be)
const myIdx = this.game.players.findIndex(p => {
return p.sid == this.st.user.sid || p.uid == this.st.user.id;
});