+// TODO: use indexedDB instead of localStorage: more flexible.
+
Vue.component('my-game', {
data: function() {
return {
mode: "idle", //human, computer or idle (when not playing)
oppid: "", //opponent ID in case of HH game
oppConnected: false,
+ seek: false,
};
},
render(h) {
let squareWidth = !!square00
? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
: 0;
+ const playingHuman = (this.mode == "human");
+ const playingComp = (this.mode == "computer");
let actionArray = [
h('button',
{
- on: { click: () => this.newGame("human") },
+ on: {
+ click: () => {
+ if (this.seek)
+ delete localStorage["newgame"]; //cancel game seek
+ else
+ {
+ localStorage["newgame"] = variant;
+ this.newGame("human");
+ }
+ this.seek = !this.seek;
+ }
+ },
attrs: { "aria-label": 'New game VS human' },
- 'class': { "tooltip":true },
+ 'class': {
+ "tooltip": true,
+ "seek": this.seek,
+ "playing": playingHuman,
+ },
},
[h('i', { 'class': { "material-icons": true } }, "accessibility")]),
h('button',
{
on: { click: () => this.newGame("computer") },
attrs: { "aria-label": 'New game VS computer' },
- 'class': { "tooltip":true },
+ 'class': {
+ "tooltip":true,
+ "playing": playingComp,
+ },
},
[h('i', { 'class': { "material-icons": true } }, "computer")])
];
)
);
}
- const lm = this.vr.lastMove; //TODO: interruptions (FEN local storage..)
+ const lm = this.vr.lastMove;
const highlight = !!lm && _.isMatch(lm.end, {x:ci,y:cj}); //&& _.isMatch(lm.start, {x:ci,y:cj})
return h(
'div',
// Send ping to server, which answers pong if opponent is connected
this.conn.send(JSON.stringify({code:"ping", oppid:this.oppId}));
}
+ else if (localStorage.getItem("newgame") === variant)
+ {
+ // New game request has been cancelled on disconnect
+ this.seek = true;
+ this.newGame("human");
+ }
};
const socketMessageListener = msg => {
const data = JSON.parse(msg.data);
}
};
const socketCloseListener = () => {
- console.log("Lost connection -- reconnect"); //TODO: be more subtle than that, reconnect only when needed!
+ console.log("Lost connection -- reconnect");
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
this.conn.addEventListener('open', socketOpenListener);
this.conn.addEventListener('message', socketMessageListener);
methods: {
endGame: function(message) {
this.endofgame = message;
- document.getElementById("modal-control").checked = true;
+ let modalBox = document.getElementById("modal-control");
+ modalBox.checked = true;
+ setTimeout(() => { modalBox.checked = false; }, 2000);
if (this.mode == "human")
this.clearStorage();
this.mode = "idle";
} catch (INVALID_STATE_ERR) {
return; //nothing achieved
}
- document.getElementById("modal-control2").checked = true;
+ let modalBox = document.getElementById("modal-control2");
+ modalBox.checked = true;
+ setTimeout(() => { modalBox.checked = false; }, 2000);
return;
}
this.vr = new VariantRules(fen);
this.oppid = oppId;
this.oppConnected = true;
this.mycolor = color;
+ this.seek = false;
+ delete localStorage["newgame"];
}
else //against computer
{