incheck: [],
pgnTxt: "",
hints: (getCookie("hints") === "1" ? true : false),
- //color: TODO (lichess, chess.com, chesstempo)
- //sound: TODO (0,1, 2)
+ color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+ // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
+ sound: 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
- : 30;
+ : 37; //TODO: always 37?
if (this.mode == "human")
{
let connectedIndic = h(
"topindicator": true,
"indic-right": true,
"settings-btn": true,
- "small": smallScreen,
},
},
[h('i', { 'class': { "material-icons": true } }, "settings")]
['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',
{
h('h3',
{
"class": { "section": true },
- domProps: { innerHTML: "User settings" },
+ domProps: { innerHTML: "Preferences" },
}
),
- // 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)" } }),
+ h('fieldset',
+ { },
+ [
+ //h('legend', { domProps: { innerHTML: "Show " } }),
+ 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: "lichess"
+ },
+ attrs: { "selected": this.color=="lichess" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesscom",
+ innerHTML: "chess.com"
+ },
+ attrs: { "selected": this.color=="chesscom" },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "chesstempo",
+ innerHTML: "chesstempo"
+ },
+ attrs: { "selected": this.color=="chesstempo" },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
+ h('fieldset',
+ { },
+ [
+ h('label',
+ {
+ attrs: {
+ for: "selectSound",
+ },
+ domProps: { innerHTML: "Sound level" },
+ },
+ ),
+ h("select",
+ {
+ attrs: { "id": "selectSound" },
+ on: { "change": this.setSound },
+ },
+ [
+ h("option",
+ {
+ domProps: {
+ "value": "0",
+ innerHTML: "No sound"
+ },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "1",
+ innerHTML: "Newgame sound"
+ },
+ }
+ ),
+ h("option",
+ {
+ domProps: {
+ "value": "2",
+ innerHTML: "All sounds"
+ },
+ }
+ ),
+ ],
+ ),
+ ]
+ ),
]
)
]
this.hints = !this.hints;
setCookie("hints", this.hints ? "1" : "0");
},
+ // TODO:
+ setColor: function() {
+ alert("Change");
+ },
+ setSound: function() {
+ alert("Change");
+ },
clickGameSeek: function(e) {
this.getRidOfTooltip(e.currentTarget);
if (this.mode == "human")