Simplify navigation
authorBenjamin Auder <benjamin.auder@somewhere>
Mon, 14 Jan 2019 04:14:53 +0000 (05:14 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Mon, 14 Jan 2019 04:14:53 +0000 (05:14 +0100)
public/javascripts/components/game.js
public/javascripts/components/problems.js
public/javascripts/index.js
public/javascripts/variant.js
public/stylesheets/layout.sass
public/stylesheets/variant.sass
reflexions
sockets.js
views/index.pug
views/variant.pug

index 096a9e5..6361b8a 100644 (file)
@@ -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: `
                <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
                        <input id="modal-eog" type="checkbox" class="modal"/>
@@ -83,7 +87,7 @@ Vue.component('my-game', {
                                </p>
                        </div>
                        <div id="pgn-div" class="section-content">
-                               <a id="download" href"#">
+                               <a id="download" href="#">
                                </a>
                                <button id="downloadBtn" @click="download">
                                        {{ translate("Download PGN") }}
index 5307704..cf2cd07 100644 (file)
@@ -129,6 +129,7 @@ Vue.component('my-problems', {
                </div>
        `,
        created: function() {
+               // TODO: adapt this, #problems:28 ? (for example)
                if (location.hash.length > 0)
                        this.showProblem(location.hash.slice(1));
                else
index fe0b36a..0e2a263 100644 (file)
@@ -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);
+               },
+
        },
 });
index e24dfc6..74c4298 100644 (file)
@@ -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)
index 161995d..5639c7b 100644 (file)
@@ -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)
index 15c1996..7857085 100644 (file)
@@ -37,7 +37,7 @@ a#homeLink
       margin-top: 10px
       display: block
 
-#helpMenu
+#userMenu, #settings
   @media screen and (min-width: 768px)
     float: right
   .info-container
index 61c9932..82e5980 100644 (file)
@@ -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)
index 21742d1..1ebd521 100644 (file)
@@ -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);
                                });
                        });
                });
index 823b67c..377aef9 100644 (file)
@@ -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'")
index c7f4e55..dbdbaba 100644 (file)
@@ -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")