myid: "", //our ID, always set
oppid: "", //opponent ID in case of HH game
gameId: "", //useful if opponent started other human games after we disconnected
- myname: getCookie("username","anonymous"),
+ myname: localStorage["username"] || "anonymous",
oppName: "anonymous", //opponent name, revealed after a game (if provided)
chats: [], //chat messages after human game
oppConnected: false,
fenStart: "",
incheck: [],
pgnTxt: "",
- hints: (getCookie("hints") === "1" ? true : false),
- color: getCookie("color", "lichess"), //lichess, chesscom or chesstempo
+ hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
+ color: localStorage["color"] || "lichess", //lichess, chesscom or chesstempo
// sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
- sound: parseInt(getCookie("sound", "2")),
+ sound: parseInt(localStorage["sound"] || "2"),
// Web worker to play computer moves without freezing interface:
compWorker: new Worker('/javascripts/playCompMove.js'),
timeStart: undefined, //time when computer starts thinking
);
elementArray.push(connectedIndic);
}
- const menuElt = h('div', { }, [
- h('label',
+ if (this.mode == "chat")
+ {
+ const chatButton = h(
+ 'button',
{
- attrs: { for: "drawer-control" },
- "class": {
- "drawer-toggle": true,
- "persistent": true,
- "button": true,
+ on: { click: this.startChat },
+ attrs: {
+ "aria-label": 'Start chat',
+ "id": "chatBtn",
},
- }
- ),
- h('input',
+ 'class': {
+ "tooltip": true,
+ "topindicator": true,
+ "indic-left": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "chat")]
+ );
+ elementArray.push(chatButton);
+ }
+ else if (this.mode == "computer")
+ {
+ const clearButton = h(
+ 'button',
{
- attrs: { type: "checkbox", id: "drawer-control" },
- "class": { "drawer": true, "persistent": true },
- }
- ),
- h('div',
- { },
- [
- h('label',
- {
- attrs: { for: "drawer-control" },
- "class": { "drawer-close": true }
- }
- ),
- h('a',
- {
- attrs: { "href": "#" },
- domProps: { innerHTML: "Home" },
- }
- ),
- h('a',
- {
- attrs: { "href": "#" },
- domProps: { innerHTML: "....." },
- }
- ),
- ]
- )
- ]);
- elementArray.push(menuElt);
-
- // TODO: chat available only in "chat" mode...
- // on: {
-// "click": () => { document.getElementById("modal-chat").checked = true; },
-
+ on: { click: this.clearComputerGame },
+ attrs: {
+ "aria-label": 'Clear computer game',
+ "id": "clearBtn",
+ },
+ 'class': {
+ "tooltip": true,
+ "topindicator": true,
+ "indic-left": true,
+ "settings-btn": !smallScreen,
+ "settings-btn-small": smallScreen,
+ },
+ },
+ [h('i', { 'class': { "material-icons": true } }, "clear")]
+ );
+ elementArray.push(clearButton);
+ }
const turnIndic = h(
'div',
{
attrs: { "src": '/images/pieces/' +
VariantRules.getPpath(m.appear[0].c+m.appear[0].p) + '.svg' },
'class': { 'choice-piece': true },
- on: { "click": e => { this.play(m); this.choices=[]; } },
+ on: {
+ "click": e => { this.play(m); this.choices=[]; },
+ // NOTE: add 'touchstart' event to fix a problem on smartphones
+ "touchstart": e => { this.play(m); this.choices=[]; },
+ },
})
]
);
attrs: { "aria-label": 'Undo' },
"class": {
"small": smallScreen,
- "marginleft": true,
+ "spaceleft": true,
},
},
[h('i', { 'class': { "material-icons": true } }, "fast_rewind")]),
attrs: { "aria-label": 'Undo' },
"class": {
"small": smallScreen,
- "marginleft": true,
+ "spaceleft": true,
},
},
[h('i', { 'class': { "material-icons": true } }, "undo")]
];
elementArray = elementArray.concat(modalEog);
}
- // NOTE: this modal could be in Pug view (no usage of Vue functions or variables)
- const modalNewgame = [
- h('input',
- {
- attrs: { "id": "modal-newgame", type: "checkbox" },
- "class": { "modal": true },
- }),
- h('div',
- {
- attrs: { "role": "dialog", "aria-labelledby": "newGameTxt" },
- },
- [
- h('div',
- {
- "class": { "card": true, "smallpad": true },
- },
- [
- h('label',
- {
- attrs: { "id": "close-newgame", "for": "modal-newgame" },
- "class": { "modal-close": true },
- }
- ),
- h('h3',
- {
- attrs: { "id": "newGameTxt" },
- "class": { "section": true },
- domProps: { innerHTML: "New game" },
- }
- ),
- h('p',
- {
- "class": { "section": true },
- domProps: { innerHTML: "Waiting for opponent..." },
- }
- )
- ]
- )
- ]
- )
- ];
- elementArray = elementArray.concat(modalNewgame);
const modalFenEdit = [
h('input',
{
h('p',
{
attrs: { id: "fen-string" },
- domProps: { innerHTML: this.vr.getBaseFen() }
+ domProps: { innerHTML: this.vr.getBaseFen() },
+ "class": { "text-center": true },
}
)
]
methods: {
setMyname: function(e) {
this.myname = e.target.value;
- setCookie("username",this.myname);
+ localStorage["username"] = this.myname;
},
trySendChat: function(e) {
if (e.keyCode == 13) //'enter' key
setTimeout(() => { modalBox.checked = false; }, 2000);
},
endGame: function(score) {
- console.log("call " + score + " " + this.mode);
this.score = score;
if (["human","computer"].includes(this.mode))
{
elt.style.visibility = "hidden";
setTimeout(() => { elt.style.visibility="visible"; }, 100);
},
+ startChat: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ document.getElementById("modal-chat").checked = true;
+ },
+ clearComputerGame: function(e) {
+ this.getRidOfTooltip(e.currentTarget);
+ this.clearStorage(); //this.mode=="computer" (already checked)
+ location.reload(); //to see clearing effects
+ },
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");
+ localStorage["hints"] = (this.hints ? "1" : "0");
},
setColor: function(e) {
this.color = e.target.options[e.target.selectedIndex].value;
- setCookie("color", this.color);
+ localStorage["color"] = this.color;
},
setSound: function(e) {
this.sound = parseInt(e.target.options[e.target.selectedIndex].value);
- setCookie("sound", this.sound);
+ localStorage["sound"] = this.sound;
},
clickGameSeek: function(e) {
this.getRidOfTooltip(e.currentTarget);
const storageVariant = localStorage.getItem("comp-variant");
if (!!storageVariant)
{
- if (storageVariant !== variant)
+ const score = localStorage.getItem("comp-score");
+ if (storageVariant !== variant && score == "*")
{
if (!confirm("Unfinished " + storageVariant +
" computer game will be erased"))
return;
}
}
- else
- {
- const score = localStorage.getItem("comp-score");
- if (score == "*")
- return this.continueGame("computer");
- }
+ else if (score == "*")
+ return this.continueGame("computer");
}
}
this.vr = new VariantRules(fen, []);
// 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}));
- if (this.sound == 2)
- new Audio("/sounds/chessmove1.mp3").play().catch(err => {});
if (!["idle","chat"].includes(this.mode))
{
// Emergency check, if human game started "at the same time"
return;
this.incheck = this.vr.getCheckSquares(move); //is opponent in check?
this.vr.play(move, "ingame");
+ if (this.sound == 2)
+ new Audio("/sounds/move.mp3").play().catch(err => {});
if (this.mode == "computer")
{
// Send the move to web worker (TODO: including his own moves?!)
if (!!lm)
{
this.vr.undo(lm);
+ if (this.sound == 2)
+ new Audio("/sounds/undo.mp3").play().catch(err => {});
const lmBefore = this.vr.lastMove;
if (!!lmBefore)
{
projects / vchess.git / blobdiff