From: Benjamin Auder Date: Mon, 14 Jan 2019 04:14:53 +0000 (+0100) Subject: Simplify navigation X-Git-Url: https://git.auder.net/doc/html/scripts/img/current/pieces/cb.svg?a=commitdiff_plain;h=4608eed94432356bd2df8c144d7d233913c6483c;p=vchess.git Simplify navigation --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 096a9e56..6361b8a1 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -55,12 +55,16 @@ Vue.component('my-game', { }, // Modal end of game, and then sub-components // TODO: provide chat parameters (connection, players ID...) - // and alwo moveList parameters (just moves ?) + // and also moveList parameters (just moves ?) // TODO: connection + turn indicators en haut à droite (superposé au menu) // TODO: controls: abort, clear, resign, draw (avec confirm box) // et si partie terminée : (mode analyse) just clear, back / play // + flip button toujours disponible // gotoMove : vr = new VariantRules(fen stocké dans le coup [TODO]) + + // NOTE: move.color must be fulfilled after each move played, because of Marseille (or Avalanche) chess + // --> useful in moveList component (universal comma separator ?) + template: `
@@ -83,7 +87,7 @@ Vue.component('my-game', {

- +
`, created: function() { + // TODO: adapt this, #problems:28 ? (for example) if (location.hash.length > 0) this.showProblem(location.hash.slice(1)); else diff --git a/public/javascripts/index.js b/public/javascripts/index.js index fe0b36a3..0e2a2631 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -30,6 +30,9 @@ new Vue({ }, }, created: function() { + this.setDisplay(); + window.onhashchange = this.setDisplay; + const url = socketUrl; const sid = getRandString(); this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index"); @@ -54,5 +57,14 @@ new Vue({ // si dernier lastMove sur serveur n'est pas le mien et nextColor == moi, alors background orange // ==> background orange si à moi de jouer par corr (sur main index) // (helper: static fonction "GetNextCol()" dans base_rules.js) + + }, + methods: { + setDisplay: function() { + if (!location.hash) + location.hash = "#variants"; //default + this.display = location.hash.substr(1); + }, + }, }); diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index e24dfc68..74c4298c 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -18,7 +18,7 @@ new Vue({ created: function() { // TODO: navigation becomes a little more complex this.setDisplay(); - + window.onhashchange = this.setDisplay; this.myid = "abcdefghij"; //console.log(this.myid + " " + variant); @@ -29,7 +29,6 @@ new Vue({ } this.conn.onclose = socketCloseListener; - window.onhashchange = this.setDisplay; //this.vr = new VariantRules( V.GenRandInitFen() ); }, methods: { @@ -37,8 +36,9 @@ new Vue({ //TODO: prevent set display if there is a running game - const page = (location.hash || "#room").substr(1); - this.display = page; + if (!location.hash) + location.hash = "#room"; //default + this.display = location.hash.substr(1); // Close menu on small screens: let menuToggle = document.getElementById("drawer-control"); if (!!menuToggle) diff --git a/public/stylesheets/layout.sass b/public/stylesheets/layout.sass index 161995db..5639c7b2 100644 --- a/public/stylesheets/layout.sass +++ b/public/stylesheets/layout.sass @@ -42,6 +42,10 @@ body p margin-right: 5px +a.right-menu + &:link, &:visited, &:hover + color: black + #settings, #contactForm max-width: 767px @media screen and (max-width: 767px) diff --git a/public/stylesheets/variant.sass b/public/stylesheets/variant.sass index 15c1996d..78570856 100644 --- a/public/stylesheets/variant.sass +++ b/public/stylesheets/variant.sass @@ -37,7 +37,7 @@ a#homeLink margin-top: 10px display: block -#helpMenu +#userMenu, #settings @media screen and (min-width: 768px) float: right .info-container diff --git a/reflexions b/reflexions index 61c9932a..82e59809 100644 --- a/reflexions +++ b/reflexions @@ -1,4 +1,6 @@ tell opponent that I got the move, for him to start timer (and lose...) + --> no, not needed and impossible if everybody is offline + ==> just store this time locally (cheating possible but...) board2, board3, board4 VariantRules2, 3 et 4 aussi fetch challenges and corr games from server at startup (room) diff --git a/sockets.js b/sockets.js index 21742d1d..1ebd5212 100644 --- a/sockets.js +++ b/sockets.js @@ -1,6 +1,5 @@ const url = require('url'); -const sqlite3 = require('sqlite3'); -const db = new sqlite3.Database(__dirname + "/db/vchess.sqlite"); +const VariantModel = require("./models/Variant"); // Node version in Ubuntu 16.04 does not know about URL class function getJsonFromUrl(url) { @@ -16,137 +15,140 @@ function getJsonFromUrl(url) { // TODO: empêcher multi-log du même user (envoyer le user ID + secret en même temps que name et...) // --> si secret ne matche pas celui trouvé en DB, stop +// TODO: this file in the end will be much simpler, just tracking connect/disconnect +// (everything else using WebRTC) + module.exports = function(wss) { - db.serialize(function() { - db.all("SELECT * FROM Variants", (err,variants) => { - let clients = { "index": {} }; - let games = {}; //pending games (player sid) - for (const v of variants) - clients[v.id] = {}; - // No-op function as a callback when sending messages - const noop = () => { }; - wss.on("connection", (socket, req) => { + VariantModel.getAll((err,variants) => { + let clients = { "index": {} }; + let games = {}; //pending games (player sid) + for (const v of variants) + clients[v.id] = {}; + // No-op function as a callback when sending messages + const noop = () => { }; + wss.on("connection", (socket, req) => { // const params = new URL("http://localhost" + req.url).searchParams; // const sid = params.get("sid"); // const page = params.get("page"); - var query = getJsonFromUrl(req.url); - const sid = query["sid"]; - const page = query["page"]; - // Ignore duplicate connections: - if (!!clients[page][sid]) - { - socket.send(JSON.stringify({code:"duplicate"})); - return; - } - clients[page][sid] = socket; - if (page == "index") - { - // Send counting info - const countings = {}; - for (const v of variants) - countings[v.id] = Object.keys(clients[v.id]).length; - socket.send(JSON.stringify({code:"counts",counts:countings})); - } - else + var query = getJsonFromUrl(req.url); + const sid = query["sid"]; + const page = query["page"]; + // Ignore duplicate connections: + if (!!clients[page][sid]) + { + socket.send(JSON.stringify({code:"duplicate"})); + return; + } + clients[page][sid] = socket; + if (page == "index") + { + // Send counting info + const countings = {}; + for (const v of variants) + countings[v.id] = Object.keys(clients[v.id]).length; + socket.send(JSON.stringify({code:"counts",counts:countings})); + } + else + { + // Send to every client connected on index an update message for counts + Object.keys(clients["index"]).forEach( k => { + clients["index"][k].send( + JSON.stringify({code:"increase",vid:page}), noop); + }); + // Also notify potential opponents: + // hit all clients which check if sid corresponds + Object.keys(clients[page]).forEach( k => { + clients[page][k].send(JSON.stringify({code:"connect",id:sid}), noop); + }); + socket.on("message", objtxt => { + let obj = JSON.parse(objtxt); + switch (obj.code) + { + case "newchat": + if (!!clients[page][obj.oppid]) + { + clients[page][obj.oppid].send( + JSON.stringify({code:"newchat",msg:obj.msg}), noop); + } + break; + case "newmove": + if (!!clients[page][obj.oppid]) + { + clients[page][obj.oppid].send( + JSON.stringify({code:"newmove",move:obj.move}), noop); + } + break; + case "ping": + if (!!clients[page][obj.oppid]) + socket.send(JSON.stringify({code:"pong",gameId:obj.gameId})); + break; + case "myname": + // Reveal my username to opponent + if (!!clients[page][obj.oppid]) + { + clients[page][obj.oppid].send(JSON.stringify({ + code:"oppname", name:obj.name})); + } + break; + case "lastate": + if (!!clients[page][obj.oppid]) + { + const oppId = obj.oppid; + obj.oppid = sid; //I'm oppid for my opponent + clients[page][oppId].send(JSON.stringify(obj), noop); + } + break; + case "newgame": + if (!!games[page]) + { + // Start a new game + const oppId = games[page]["id"]; + const fen = games[page]["fen"]; + const gameId = games[page]["gameid"]; + delete games[page]; + const mycolor = (Math.random() < 0.5 ? 'w' : 'b'); + socket.send(JSON.stringify( + {code:"newgame",fen:fen,oppid:oppId,color:mycolor,gameid:gameId})); + if (!!clients[page][oppId]) + { + clients[page][oppId].send( + JSON.stringify( + {code:"newgame",fen:fen,oppid:sid,color:mycolor=="w"?"b":"w",gameid:gameId}), + noop); + } + } + else + games[page] = {id:sid, fen:obj.fen, gameid:obj.gameid}; //wait for opponent + break; + case "cancelnewgame": //if a user cancel his seek + delete games[page]; + break; + case "resign": + if (!!clients[page][obj.oppid]) + clients[page][obj.oppid].send(JSON.stringify({code:"resign"}), noop); + break; + // TODO: case "challenge" (get ID) --> send to all, "acceptchallenge" (with ID) --> send to all, "cancelchallenge" --> send to all + // also, "sendgame" (give current game info, if any) --> to new connections, "sendchallenges" (same for challenges) --> to new connections + } + }); + } + socket.on("close", () => { + delete clients[page][sid]; + // Remove potential pending game + if (!!games[page] && games[page]["id"] == sid) + delete games[page]; + if (page != "index") { // Send to every client connected on index an update message for counts Object.keys(clients["index"]).forEach( k => { clients["index"][k].send( - JSON.stringify({code:"increase",vid:page}), noop); - }); - // Also notify potential opponents: - // hit all clients which check if sid corresponds - Object.keys(clients[page]).forEach( k => { - clients[page][k].send(JSON.stringify({code:"connect",id:sid}), noop); - }); - socket.on("message", objtxt => { - let obj = JSON.parse(objtxt); - switch (obj.code) - { - case "newchat": - if (!!clients[page][obj.oppid]) - { - clients[page][obj.oppid].send( - JSON.stringify({code:"newchat",msg:obj.msg}), noop); - } - break; - case "newmove": - if (!!clients[page][obj.oppid]) - { - clients[page][obj.oppid].send( - JSON.stringify({code:"newmove",move:obj.move}), noop); - } - break; - case "ping": - if (!!clients[page][obj.oppid]) - socket.send(JSON.stringify({code:"pong",gameId:obj.gameId})); - break; - case "myname": - // Reveal my username to opponent - if (!!clients[page][obj.oppid]) - { - clients[page][obj.oppid].send(JSON.stringify({ - code:"oppname", name:obj.name})); - } - break; - case "lastate": - if (!!clients[page][obj.oppid]) - { - const oppId = obj.oppid; - obj.oppid = sid; //I'm oppid for my opponent - clients[page][oppId].send(JSON.stringify(obj), noop); - } - break; - case "newgame": - if (!!games[page]) - { - // Start a new game - const oppId = games[page]["id"]; - const fen = games[page]["fen"]; - const gameId = games[page]["gameid"]; - delete games[page]; - const mycolor = (Math.random() < 0.5 ? 'w' : 'b'); - socket.send(JSON.stringify( - {code:"newgame",fen:fen,oppid:oppId,color:mycolor,gameid:gameId})); - if (!!clients[page][oppId]) - { - clients[page][oppId].send( - JSON.stringify( - {code:"newgame",fen:fen,oppid:sid,color:mycolor=="w"?"b":"w",gameid:gameId}), - noop); - } - } - else - games[page] = {id:sid, fen:obj.fen, gameid:obj.gameid}; //wait for opponent - break; - case "cancelnewgame": //if a user cancel his seek - delete games[page]; - break; - case "resign": - if (!!clients[page][obj.oppid]) - clients[page][obj.oppid].send(JSON.stringify({code:"resign"}), noop); - break; - } + JSON.stringify({code:"decrease",vid:page}), noop); }); } - socket.on("close", () => { - delete clients[page][sid]; - // Remove potential pending game - if (!!games[page] && games[page]["id"] == sid) - delete games[page]; - if (page != "index") - { - // Send to every client connected on index an update message for counts - Object.keys(clients["index"]).forEach( k => { - clients["index"][k].send( - JSON.stringify({code:"decrease",vid:page}), noop); - }); - } - // Also notify potential opponents: - // hit all clients which check if sid corresponds - Object.keys(clients[page]).forEach( k => { - clients[page][k].send(JSON.stringify({code:"disconnect",id:sid}), noop); - }); + // Also notify potential opponents: + // hit all clients which check if sid corresponds + Object.keys(clients[page]).forEach( k => { + clients[page][k].send(JSON.stringify({code:"disconnect",id:sid}), noop); }); }); }); diff --git a/views/index.pug b/views/index.pug index 823b67c5..377aef94 100644 --- a/views/index.pug +++ b/views/index.pug @@ -22,10 +22,10 @@ block content #flagMenu.clickable(onClick="doClick('modalLang')") img(src="/images/flags/" + lang + ".svg") include userMenu - #mygamesMenu.clickable.right-menu(v-show="display=='variants'" @click="display='games'") + a.right-menu(v-show="display=='variants'" href="#games") .info-container p My games - #variantsMenu.clickable.right-menu(v-show="display=='games'" @click="display='variants'") + a.right-menu(v-show="display=='games'" href="#variants") .info-container p Variants .row(v-show="display=='variants'") diff --git a/views/variant.pug b/views/variant.pug index c7f4e55f..dbdbabae 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -14,21 +14,23 @@ block content label.drawer-close(for="drawer-control") a.icon-link(href="/") i.material-icons home - a(href="#room" @click="setDisplay('room')") + a(href="#room") =translations["Hall"] - a(href="#gameList" @click="setDisplay('gameList')") + a(href="#gameList") =translations["My games"] - a(href="#rules" @click="setDisplay('rules')") + a(href="#rules") =translations["Rules"] - a(href="#problems" @click="setDisplay('problems')") + a(href="#problems") =translations["Problems"] + #flagMenu.clickable(onClick="doClick('modalLang')") + img(src="/images/flags/" + lang + ".svg") #settings.clickable(onClick="doClick('modalSettings')") i.material-icons settings include userMenu .row //my-room(v-show="display=='room'") //my-game-list(v-show="display=='gameList'") - //my-rules(v-show="display=='rules'") + my-rules(v-show="display=='rules'") //my-problems(v-show="display=='problems'") my-game(v-show="display=='game'" :game-id="gameid" :conn="conn" :allow-chat="allowChat" :allow-movelist="allowMovelist" @@ -48,7 +50,7 @@ block javascripts const variant = !{JSON.stringify(variant)}; //script(src="/javascripts/components/room.js") //script(src="/javascripts/components/gameList.js") - //script(src="/javascripts/components/rules.js") + script(src="/javascripts/components/rules.js") script(src="/javascripts/components/board.js") //script(src="/javascripts/components/problemPreview.js") //script(src="/javascripts/components/problems.js")