fenStart: "",
incheck: [],
pgnTxt: "",
- expert: (getCookie("expert") === "1" ? true : false),
- gameId: "", //used to limit computer moves' time
+ hints: (getCookie("hints") === "1" ? true : false),
+ color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+ // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+ sound: parseInt(getCookie("sound", "2")),
};
},
render(h) {
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
+ : (smallScreen ? 31 : 37);
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,
- "small": smallScreen,
+ "settings-btn": !smallScreen,
+ "settings-btn-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" },
})
);
// Create board element (+ reserves if needed by variant or mode)
+ const lm = this.vr.lastMove;
+ const showLight = this.hints &&
+ (this.mode!="idle" || this.cursor==this.vr.moves.length);
let gameDiv = h('div',
{
'class': { 'game': true },
)
);
}
- if (!this.expert && hintSquares[ci][cj])
+ if (this.hints && hintSquares[ci][cj])
{
elems.push(
h(
)
);
}
- const lm = this.vr.lastMove;
- const showLight = !this.expert &&
- (this.mode!="idle" || this.cursor==this.vr.moves.length);
return h(
'div',
{
['board'+sizeY]: true,
'light-square': (i+j)%2==0,
'dark-square': (i+j)%2==1,
+ [this.color]: true,
'highlight': showLight && !!lm && _.isMatch(lm.end, {x:ci,y:cj}),
'incheck': showLight && incheckSq[ci][cj],
},
];
elementArray = elementArray.concat(modalEog);
}
+ // NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
const modalNewgame = [
h('input',
{
)
];
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: "Preferences" },
+ }
+ ),
+ h('fieldset',
+ { },
+ [
+ //h('legend', { domProps: { innerHTML: "Legend title" } }),
+ h('label',
+ {
+ attrs: { for: "setHints" },
+ domProps: { innerHTML: "Show hints?" },
+ },
+ ),
+ h('input',
+ {
+ attrs: {
+ "id": "setHints",
+ type: "checkbox",
+ checked: this.hints,
+ },
+ on: { "change": this.toggleHints },
+ }
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "selectColor" },
+ domProps: { innerHTML: "Board colors" },
+ },
+ ),
+ h("select",
+ {
+ attrs: { "id": "selectColor" },
+ on: { "change": this.setColor },
+ },
+ [
+ h("option",
+ {
+ domProps: {
+ "value": "lichess",
+ innerHTML: "brown"
+ },
+ attrs: { "selected": this.color=="lichess" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesscom",
+ innerHTML: "green"
+ },
+ attrs: { "selected": this.color=="chesscom" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesstempo",
+ innerHTML: "blue"
+ },
+ attrs: { "selected": this.color=="chesstempo" },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: { for: "selectSound" },
+ domProps: { innerHTML: "Play sounds?" },
+ },
+ ),
+ h("select",
+ {
+ attrs: { "id": "selectSound" },
+ on: { "change": this.setSound },
+ },
+ [
+ h("option",
+ {
+ domProps: {
+ "value": "0",
+ innerHTML: "None"
+ },
+ attrs: { "selected": this.sound==0 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "1",
+ innerHTML: "Newgame"
+ },
+ attrs: { "selected": this.sound==1 },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "2",
+ innerHTML: "All"
+ },
+ attrs: { "selected": this.sound==2 },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
+ ]
+ )
+ ]
+ )
+ ];
+ elementArray = elementArray.concat(modalSettings);
const actions = h('div',
{
attrs: { "id": "actions" },
{
elementArray.push(
h('div',
- { attrs: { id: "pgn-div" } },
+ {
+ attrs: { id: "pgn-div" },
+ "class": { "section-content": true },
+ },
[
h('a',
{
h('p',
{
attrs: { id: "pgn-game" },
- on: { click: this.download },
domProps: { innerHTML: this.pgnTxt }
}
- )
+ ),
+ h('button',
+ {
+ attrs: { "id": "downloadBtn" },
+ on: { click: this.download },
+ domProps: { innerHTML: "Download game" },
+ }
+ ),
]
)
);
// Show current FEN
elementArray.push(
h('div',
- { attrs: { id: "fen-div" } },
+ {
+ attrs: { id: "fen-div" },
+ "class": { "section-content": true },
+ },
[
h('p',
{
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");
+ },
+ setColor: function(e) {
+ this.color = e.target.options[e.target.selectedIndex].value;
+ setCookie("color", this.color);
+ },
+ setSound: function(e) {
+ this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
+ setCookie("sound", this.sound);
+ },
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)
this.endGame(this.mycolor=="w"?"0-1":"1-0");
},
newGame: function(mode, fenInit, color, oppId, moves, continuation) {
- const fen = fenInit || VariantRules.GenRandInitFen();
+ const fen = "M7/8/8/3K1k2/8/8/8/8 0000";//fenInit || VariantRules.GenRandInitFen();
console.log(fen); //DEBUG
if (mode=="human" && !oppId)
{
}
return;
}
- this.gameId = getRandString();
this.vr = new VariantRules(fen, moves || []);
this.score = "*";
this.pgnTxt = ""; //redundant with this.score = "*", but cleaner
if (mode=="human")
{
// Opponent found!
- if (!continuation)
+ if (!continuation) //not playing sound on game continuation
{
- // Not playing sound on game continuation:
- new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
+ if (this.sound >= 1)
+ new Audio("/sounds/newgame.mp3").play().then(() => {}).catch(err => {});
document.getElementById("modal-newgame").checked = false;
}
this.oppid = oppId;
}
else if (mode == "computer")
{
- this.mycolor = Math.random() < 0.5 ? 'w' : 'b';
+ this.mycolor = "w";//Math.random() < 0.5 ? 'w' : 'b';
if (this.mycolor == 'b')
setTimeout(this.playComputerMove, 500);
}
},
playComputerMove: function() {
const timeStart = Date.now();
- // We use moves' count to know if search finished:
- const nbMoves = this.vr.moves.length;
- 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);
// Not programmatic, or animation is over
if (this.mode == "human" && this.vr.turn == this.mycolor)
this.conn.send(JSON.stringify({code:"newmove", move:move, oppid:this.oppid}));
- new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
+ if (this.sound == 2)
+ new Audio("/sounds/chessmove1.mp3").play().then(() => {}).catch(err => {});
if (this.mode != "idle")
{
this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
projects / vchess.git / blobdiff