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: getCookie("sound", "2"),
+ sound: parseInt(getCookie("sound", "2")),
};
},
render(h) {
const settingsBtnElt = document.getElementById("settingsBtn");
const indicWidth = !!settingsBtnElt //-2 for border:
? parseFloat(window.getComputedStyle(settingsBtnElt).height.slice(0,-2)) - 2
- : 37; //TODO: always 37?
+ : (smallScreen ? 31 : 37);
if (this.mode == "human")
{
let connectedIndic = h(
"tooltip": true,
"topindicator": true,
"indic-right": true,
- "settings-btn": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "settings")]
})
);
// 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 },
)
);
}
- const lm = this.vr.lastMove;
- const showLight = this.hints &&
- (this.mode!="idle" || this.cursor==this.vr.moves.length);
return h(
'div',
{
h('fieldset',
{ },
[
- //h('legend', { domProps: { innerHTML: "Show " } }),
+ //h('legend', { domProps: { innerHTML: "Legend title" } }),
h('label',
{
- attrs: {
- for: "setHints",
- },
+ attrs: { for: "setHints" },
domProps: { innerHTML: "Show hints?" },
},
),
[
h('label',
{
- attrs: {
- for: "selectColor",
- },
+ attrs: { for: "selectColor" },
domProps: { innerHTML: "Board colors" },
},
),
{
domProps: {
"value": "lichess",
- innerHTML: "lichess"
+ innerHTML: "brown"
},
attrs: { "selected": this.color=="lichess" },
}
{
domProps: {
"value": "chesscom",
- innerHTML: "chess.com"
+ innerHTML: "green"
},
attrs: { "selected": this.color=="chesscom" },
}
{
domProps: {
"value": "chesstempo",
- innerHTML: "chesstempo"
+ innerHTML: "blue"
},
attrs: { "selected": this.color=="chesstempo" },
}
[
h('label',
{
- attrs: {
- for: "selectSound",
- },
- domProps: { innerHTML: "Sound level" },
+ attrs: { for: "selectSound" },
+ domProps: { innerHTML: "Play sounds?" },
},
),
h("select",
{
domProps: {
"value": "0",
- innerHTML: "No sound"
+ innerHTML: "None"
},
+ attrs: { "selected": this.sound==0 },
}
),
h("option",
{
domProps: {
"value": "1",
- innerHTML: "Newgame sound"
+ innerHTML: "Newgame"
},
+ attrs: { "selected": this.sound==1 },
}
),
h("option",
{
domProps: {
"value": "2",
- innerHTML: "All sounds"
+ innerHTML: "All"
},
+ attrs: { "selected": this.sound==2 },
}
),
],
{
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',
{
this.hints = !this.hints;
setCookie("hints", this.hints ? "1" : "0");
},
- // TODO:
- setColor: function() {
- alert("Change");
+ setColor: function(e) {
+ this.color = e.target.options[e.target.selectedIndex].value;
+ setCookie("color", this.color);
},
- setSound: function() {
- alert("Change");
+ 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 (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;
// 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?