X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=public%2Fjavascripts%2Fcomponents%2Fgame.js;h=80a8e7cbd302a772b5f29b016b3a5ee71a51ec0b;hb=e6dcb115eab52abefa1d54a65af546cf5a0153e9;hp=8f34be22c437d6638d05f6ed018102430bf73f01;hpb=56a683cd685eceeff44560c060c9c97605429ee1;p=vchess.git diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 8f34be22..80a8e7cb 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -15,7 +15,7 @@ Vue.component('my-game', { 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, @@ -23,10 +23,10 @@ Vue.component('my-game', { 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 @@ -127,53 +127,50 @@ Vue.component('my-game', { ); 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', { @@ -260,7 +257,11 @@ Vue.component('my-game', { 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=[]; }, + }, }) ] ); @@ -370,7 +371,7 @@ Vue.component('my-game', { attrs: { "aria-label": 'Undo' }, "class": { "small": smallScreen, - "marginleft": true, + "spaceleft": true, }, }, [h('i', { 'class': { "material-icons": true } }, "fast_rewind")]), @@ -394,7 +395,7 @@ Vue.component('my-game', { attrs: { "aria-label": 'Undo' }, "class": { "small": smallScreen, - "marginleft": true, + "spaceleft": true, }, }, [h('i', { 'class': { "material-icons": true } }, "undo")] @@ -521,48 +522,6 @@ Vue.component('my-game', { ]; 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', { @@ -1133,7 +1092,7 @@ Vue.component('my-game', { 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 @@ -1170,7 +1129,6 @@ Vue.component('my-game', { setTimeout(() => { modalBox.checked = false; }, 2000); }, endGame: function(score) { - console.log("call " + score + " " + this.mode); this.score = score; if (["human","computer"].includes(this.mode)) { @@ -1233,21 +1191,30 @@ Vue.component('my-game', { 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); @@ -1311,7 +1278,8 @@ Vue.component('my-game', { 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")) @@ -1319,12 +1287,8 @@ Vue.component('my-game', { 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, []); @@ -1546,8 +1510,6 @@ Vue.component('my-game', { // 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" @@ -1556,6 +1518,8 @@ Vue.component('my-game', { 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?!) @@ -1602,6 +1566,8 @@ Vue.component('my-game', { 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) {