+// Game logic on a variant page
Vue.component('my-game', {
data: function() {
return {
vr: null, //object to check moves, store them, FEN..
mycolor: "w",
possibleMoves: [], //filled after each valid click/dragstart
- choices: [], //promotion pieces, or checkered captures... (contain possible pieces)
+ choices: [], //promotion pieces, or checkered captures... (as moves)
start: {}, //pixels coordinates + id of starting square (click or drag)
selectedPiece: null, //moving piece (or clicked piece)
- conn: null, //socket messages
+ conn: null, //socket connection
score: "*", //'*' means 'unfinished'
mode: "idle", //human, friend, computer or idle (when not playing)
oppid: "", //opponent ID in case of HH game
fenStart: "",
incheck: [],
pgnTxt: "",
- expert: getCookie("expert") === "1" ? true : false,
- gameId: "", //used to limit computer moves' time
+ hints: (getCookie("hints") === "1" ? true : false),
+ //color: TODO (lichess, chess.com, chesstempo)
+ //sound: TODO (0,1, 2)
};
},
render(h) {
const [sizeX,sizeY] = VariantRules.size;
+ const smallScreen = (screen.width <= 420);
// Precompute hints squares to facilitate rendering
let hintSquares = doubleArray(sizeX, sizeY, false);
this.possibleMoves.forEach(m => { hintSquares[m.end.x][m.end.y] = true; });
"bottom": true, //display below
"seek": this.seek,
"playing": this.mode == "human",
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "accessibility")])
"tooltip":true,
"bottom": true,
"playing": this.mode == "computer",
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "computer")])
"tooltip":true,
"bottom": true,
"playing": this.mode == "friend",
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "people")])
const squareWidth = !!square00
? parseFloat(window.getComputedStyle(square00).width.slice(0,-2))
: 0;
- const indicWidth = (squareWidth>0 ? squareWidth/2 : 20);
+ const settingsBtnElt = document.getElementById("settingsBtn");
+ const indicWidth = !!settingsBtnElt //-2 for border:
+ ? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
+ : 30;
if (this.mode == "human")
{
let connectedIndic = h(
}
);
elementArray.push(turnIndic);
- let expertSwitch = h(
+ let settingsBtn = h(
'button',
{
- on: { click: this.toggleExpertMode },
- attrs: { "aria-label": 'Toggle expert mode' },
+ on: { click: this.showSettings },
+ attrs: {
+ "aria-label": 'Settings',
+ "id": "settingsBtn",
+ },
'class': {
- "tooltip":true,
+ "tooltip": true,
"topindicator": true,
"indic-right": true,
- "expert-switch": true,
- "expert-mode": this.expert,
+ "settings-btn": true,
+ "small": smallScreen,
},
},
- [h('i', { 'class': { "material-icons": true } }, "visibility_off")]
+ [h('i', { 'class': { "material-icons": true } }, "settings")]
);
- elementArray.push(expertSwitch);
+ elementArray.push(settingsBtn);
let choices = h('div',
{
attrs: { "id": "choices" },
)
);
}
- if (!this.expert && hintSquares[ci][cj])
+ if (this.hints && hintSquares[ci][cj])
{
elems.push(
h(
);
}
const lm = this.vr.lastMove;
- const showLight = !this.expert &&
+ const showLight = this.hints &&
(this.mode!="idle" || this.cursor==this.vr.moves.length);
return h(
'div',
'class': {
"tooltip":true,
"bottom": true,
+ "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "flag")])
actionArray = actionArray.concat([
h('button',
{
- style: { "margin-left": "30px" },
on: { click: e => this.undo() },
attrs: { "aria-label": 'Undo' },
+ "class": {
+ "small": smallScreen,
+ "marginleft": true,
+ },
},
[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
h('button',
{
on: { click: e => this.play() },
attrs: { "aria-label": 'Play' },
+ "class": { "small": smallScreen },
},
[h('i', { 'class': { "material-icons": true } }, "fast_forward")]),
]
[
h('button',
{
- style: { "margin-left": "30px" },
on: { click: this.undoInGame },
attrs: { "aria-label": 'Undo' },
+ "class": {
+ "small": smallScreen,
+ "marginleft": true,
+ },
},
[h('i', { 'class': { "material-icons": true } }, "undo")]
),
{
on: { click: () => { this.mycolor = this.vr.getOppCol(this.mycolor) } },
attrs: { "aria-label": 'Flip' },
+ "class": { "small": smallScreen },
},
[h('i', { 'class': { "material-icons": true } }, "cached")]
),
}
}),
h('sup',
- {style: { "padding-left":"40%"} },
+ {"class": { "reserve-count": true } },
[ this.vr.reserve[this.mycolor][VariantRules.RESERVE_PIECES[i]] ]
)
]));
}
}),
h('sup',
- {style: { "padding-left":"40%"} },
+ {"class": { "reserve-count": true } },
[ this.vr.reserve[oppCol][VariantRules.RESERVE_PIECES[i]] ]
)
]));
}
let reserves = h('div',
{
- 'class':{'game':true},
- style: {"margin-bottom": "20px"},
+ 'class':{
+ 'game': true,
+ "reserve-div": true,
+ },
},
[
h('div',
{
- 'class': { 'row': true },
- style: {"margin-bottom": "15px"},
+ 'class': {
+ 'row': true,
+ "reserve-row-1": true,
+ },
},
myReservePiecesArray
),
)
];
elementArray = elementArray.concat(modalFenEdit);
+ const modalSettings = [
+ h('input',
+ {
+ attrs: { "id": "modal-settings", type: "checkbox" },
+ "class": { "modal": true },
+ }),
+ h('div',
+ {
+ attrs: { "role": "dialog", "aria-labelledby": "modal-settings" },
+ },
+ [
+ h('div',
+ {
+ "class": { "card": true, "smallpad": true },
+ },
+ [
+ h('label',
+ {
+ attrs: { "id": "close-settings", "for": "modal-settings" },
+ "class": { "modal-close": true },
+ }
+ ),
+ h('h3',
+ {
+ "class": { "section": true },
+ domProps: { innerHTML: "User settings" },
+ }
+ ),
+ // https://minicss.org/docs#forms-and-input
+ h('p', { domProps: { innerHTML: "TODO: hints" } }),
+ h('p', { domProps: { innerHTML: "TODO: board(color)" } }),
+ h('p', { domProps: { innerHTML: "TODO: sound(level)" } }),
+ ]
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalSettings);
const actions = h('div',
{
attrs: { "id": "actions" },
this.myid = continuation ? localStorage.getItem("myid") : getRandString();
if (!continuation)
{
- // HACK: play a small silent sound to allow "new game" sound later if tab not focused
+ // HACK: play a small silent sound to allow "new game" sound later
+ // if tab not focused (TODO: does it really work ?!)
new Audio("/sounds/silent.mp3").play().then(() => {}).catch(err => {});
}
this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant);
switch (data.code)
{
case "newgame": //opponent found
- this.newGame("human", data.fen, data.color, data.oppid); //oppid: opponent socket ID
+ // oppid: opponent socket ID
+ this.newGame("human", data.fen, data.color, data.oppid);
break;
case "newmove": //..he played!
this.play(data.move, "animate");
// Prepare and trigger download link
let downloadAnchor = document.getElementById("download");
downloadAnchor.setAttribute("download", "game.pgn");
- downloadAnchor.href = "data:text/plain;charset=utf-8," + encodeURIComponent(content);
+ downloadAnchor.href = "data:text/plain;charset=utf-8," +
+ encodeURIComponent(content);
downloadAnchor.click();
},
endGame: function(score) {
elt.style.visibility = "hidden";
setTimeout(() => { elt.style.visibility="visible"; }, 100);
},
+ showSettings: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ document.getElementById("modal-settings").checked = true;
+ },
+ toggleHints: function() {
+ this.hints = !this.hints;
+ setCookie("hints", this.hints ? "1" : "0");
+ },
clickGameSeek: function(e) {
this.getRidOfTooltip(e.currentTarget);
if (this.mode == "human")
this.getRidOfTooltip(e.currentTarget);
document.getElementById("modal-fenedit").checked = true;
},
- toggleExpertMode: function(e) {
- this.getRidOfTooltip(e.currentTarget);
- this.expert = !this.expert;
- setCookie("expert", this.expert ? "1" : "0");
- },
resign: function(e) {
this.getRidOfTooltip(e.currentTarget);
if (this.mode == "human" && this.oppConnected)
}
return;
}
- this.gameId = getRandString();
this.vr = new VariantRules(fen, moves || []);
this.score = "*";
this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
},
playComputerMove: function() {
const timeStart = Date.now();
- const nbMoves = this.vr.moves.length; //using played moves to know if search finished
- const gameId = this.gameId; //to know if game was reset before timer end
- setTimeout(
- () => {
- if (gameId != this.gameId)
- return; //game stopped
- const L = this.vr.moves.length;
- if (nbMoves == L || !this.vr.moves[L-1].notation) //move search didn't finish
- this.vr.shouldReturn = true;
- }, 5000);
const compMove = this.vr.getComputerMove();
// (first move) HACK: avoid selecting elements before they appear on page:
const delay = Math.max(500-(Date.now()-timeStart), 0);
const iCanPlay = this.mode!="idle"
&& (this.mode=="friend" || this.vr.canIplay(this.mycolor,startSquare));
this.possibleMoves = iCanPlay ? this.vr.getPossibleMovesFrom(startSquare) : [];
- // Next line add moving piece just after current image (required for Crazyhouse reserve)
+ // Next line add moving piece just after current image
+ // (required for Crazyhouse reserve)
e.target.parentNode.insertBefore(this.selectedPiece, e.target.nextSibling);
}
},
return;
e = e || window.event;
// Read drop target (or parentElement, parentNode... if type == "img")
- this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coordinates
+ this.selectedPiece.style.zIndex = -3000; //HACK to find square from final coords
const [offsetX,offsetY] = !!e.clientX
? [e.clientX,e.clientY]
: [e.changedTouches[0].pageX, e.changedTouches[0].pageY];
let landing = document.elementFromPoint(offsetX, offsetY);
this.selectedPiece.style.zIndex = 3000;
- while (landing.tagName == "IMG") //classList.contains(piece) fails because of mark/highlight
+ // Next condition: classList.contains(piece) fails because of marks
+ while (landing.tagName == "IMG")
landing = landing.parentNode;
- if (this.start.id == landing.id) //a click: selectedPiece and possibleMoves already filled
+ if (this.start.id == landing.id)
+ {
+ // A click: selectedPiece and possibleMoves are already filled
return;
+ }
// OK: process move attempt
let endSquare = this.getSquareFromId(landing.id);
let moves = this.findMatchingMoves(endSquare);
let translation = {x:rectEnd.x-rectStart.x, y:rectEnd.y-rectStart.y};
let movingPiece =
document.querySelector("#" + this.getSquareId(move.start) + " > img.piece");
- // HACK for animation (with positive translate, image slides "under background"...)
+ // HACK for animation (with positive translate, image slides "under background")
// Possible improvement: just alter squares on the piece's way...
squares = document.getElementsByClassName("board");
for (let i=0; i<squares.length; i++)
if (square.id != this.getSquareId(move.start))
square.style.zIndex = "-1";
}
- movingPiece.style.transform = "translate(" + translation.x + "px," + translation.y + "px)";
+ movingPiece.style.transform = "translate(" + translation.x + "px," +
+ translation.y + "px)";
movingPiece.style.transitionDuration = "0.2s";
movingPiece.style.zIndex = "3000";
setTimeout( () => {