Advance on components/game.js
authorBenjamin Auder <benjamin.auder@somewhere>
Mon, 14 Jan 2019 01:12:08 +0000 (02:12 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Mon, 14 Jan 2019 01:12:08 +0000 (02:12 +0100)
public/javascripts/components/game.js
public/javascripts/index.js
public/javascripts/utils/misc.js
public/javascripts/variant.js
sockets.js
views/variant.pug

index 555d392..096a9e5 100644 (file)
@@ -5,7 +5,7 @@
 Vue.component('my-game', {
        // gameId: to find the game in storage (assumption: it exists)
        // fen: to start from a FEN without identifiers (analyze mode)
-       props: ["gameId","fen","mode","allowChat","allowMovelist"],
+       props: ["conn","gameId","fen","mode","allowChat","allowMovelist"],
        data: function() {
                return {
                        // if oppid == "computer" then mode = "computer" (otherwise human)
@@ -14,7 +14,6 @@ Vue.component('my-game', {
                        oppid: "", //opponent ID in case of HH game
                        score: "*", //'*' means 'unfinished'
                        mycolor: "w",
-                       conn: null, //socket connection (et WebRTC connection ?!)
                        oppConnected: false, //TODO?
                        pgnTxt: "",
                        // sound level: 0 = no sound, 1 = sound only on newgame, 2 = always
@@ -23,7 +22,10 @@ Vue.component('my-game', {
                        compWorker: new Worker('/javascripts/playCompMove.js'),
                        timeStart: undefined, //time when computer starts thinking
                        vr: null, //VariantRules object, describing the game state + rules
-               
+                       endgameMessage: "",
+                       orientation: "w",
+                       
+                       moves: [], //TODO: initialize if gameId is defined...
                        // orientation :: button flip
                        // userColor: given by gameId, or fen (if no game Id)
                        // gameOver: known if gameId; otherwise assue false
@@ -36,6 +38,9 @@ Vue.component('my-game', {
                fen: function(newFen) {
                        this.vr = new VariantRules(newFen);
                },
+               gameId: function() {
+                       this.loadGame();
+               },
        },
        computed: {
                showChat: function() {
@@ -70,9 +75,9 @@ Vue.component('my-game', {
                        </div>
                        <my-chat v-if="showChat">
                        </my-chat>
-                       <my-board v-bind:vr="vr">
+                       <my-board v-bind:vr="vr" :mode="mode" :orientation="orientation" :user-color="mycolor" @play-move="play">
                        </my-board>
-                       <div v-show="showFen" id="fen-div" class="section-content">
+                       <div v-if="showFen && !!vr" id="fen-div" class="section-content">
                                <p id="fen-string" class="text-center">
                                        {{ vr.getFen() }}
                                </p>
@@ -81,7 +86,7 @@ Vue.component('my-game', {
                                <a id="download" href: "#">
                                </a>
                                <button id="downloadBtn" @click="download">
-                                       {{ translations["Download PGN"] }}
+                                       {{ translate("Download PGN") }}
                                </button>
                        </div>
                        <my-move-list v-if="showMoves">
@@ -89,10 +94,13 @@ Vue.component('my-game', {
                </div>
        `,
        created: function() {
-               const url = socketUrl;
-
-// TODO: connexion initialized in variant.js and passed as a prop
 
+//             console.log(this.fen);
+//             console.log(this.gameId);
+               if (!!this.gameId)
+                       this.loadGame();
+               else if (!!this.fen)
+                       this.vr = new VariantRules(this.fen);
                // TODO: after game, archive in indexedDB
                // TODO: this events listener is central. Refactor ? How ?
                const socketMessageListener = msg => {
@@ -199,10 +207,14 @@ Vue.component('my-game', {
                        }, delay);
                }
        },
-       //TODO: conn pourrait être une prop, donnée depuis variant.js
+       // this.conn est une prop, donnée depuis variant.js
        //dans variant.js (plutôt room.js) conn gère aussi les challenges
        // Puis en webRTC, repenser tout ça.
        methods: {
+               translate: translate,
+               loadGame: function() {
+                       // TODO: load this.gameId ...
+               },
                setEndgameMessage: function(score) {
                        let eogMessage = "Undefined";
                        switch (score)
index bc4cd9e..fe0b36a 100644 (file)
@@ -38,9 +38,9 @@ new Vue({
                        if (data.code == "counts")
                                this.counts = data.counts;
                        else if (data.code == "increase")
-                               this.counts[data.vname]++;
+                               this.counts[data.vid]++;
                        else if (data.code == "decrease")
-                               this.counts[data.vname]--;
+                               this.counts[data.vid]--;
                };
                const socketCloseListener = () => {
                        this.conn = new WebSocket(url + "/?sid=" + sid + "&page=index");
index 4ad0766..3643fa7 100644 (file)
@@ -41,3 +41,7 @@ function doClick(elemId)
 {
        document.getElementById(elemId).click(); //or ".checked = true"
 }
+
+function translate(msg) {
+       return translations[msg];
+}
index 7d30d73..e24dfc6 100644 (file)
@@ -2,7 +2,7 @@ new Vue({
        el: "#VueElement",
        data: {
                display: "undefined", //default to main hall; see "created()" function
-               gameid: "undefined", //...yet
+               gameid: undefined, //...yet
        
                conn: null,
 
@@ -10,25 +10,35 @@ new Vue({
                mode: "analyze",
                orientation: "w",
                userColor: "w",
+
+               allowChat: false,
+               allowMovelist: false,
+               fen: V.GenRandInitFen(),
        },
        created: function() {
                // TODO: navigation becomes a little more complex
-               const url = window.location.href;
-               const hashPos = url.indexOf("#");
-               const page = (hashPos >= 0 ? url.substr(hashPos+1) : "room");
-               this.setDisplay(page);
+               this.setDisplay();
+
+
+               this.myid = "abcdefghij";
+//console.log(this.myid + " " + variant);
 
-               this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
+               this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
                const socketCloseListener = () => {
-                       this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
+                       this.conn = new WebSocket(socketUrl + "/?sid=" + this.myid + "&page=" + variant.id);
                }
                this.conn.onclose = socketCloseListener;
 
-               this.vr = new VariantRules( V.GenRandInitFen() );
+               window.onhashchange = this.setDisplay;
+               //this.vr = new VariantRules( V.GenRandInitFen() );
        },
        methods: {
-               setDisplay: function(elt) {
-                       this.display = elt;
+               setDisplay: function() {
+
+//TODO: prevent set display if there is a running game
+
+                       const page = (location.hash || "#room").substr(1);
+                       this.display = page;
                        // Close menu on small screens:
                        let menuToggle = document.getElementById("drawer-control");
                        if (!!menuToggle)
index 60434b5..21742d1 100644 (file)
@@ -22,7 +22,7 @@ module.exports = function(wss) {
                        let clients = { "index": {} };
                        let games = {}; //pending games (player sid)
                        for (const v of variants)
-                               clients[v.name] = {};
+                               clients[v.id] = {};
                        // No-op function as a callback when sending messages
                        const noop = () => { };
                        wss.on("connection", (socket, req) => {
@@ -44,7 +44,7 @@ module.exports = function(wss) {
                                        // Send counting info
                                        const countings = {};
                                        for (const v of variants)
-                                               countings[v.name] = Object.keys(clients[v.name]).length;
+                                               countings[v.id] = Object.keys(clients[v.id]).length;
                                        socket.send(JSON.stringify({code:"counts",counts:countings}));
                                }
                                else
@@ -52,7 +52,7 @@ module.exports = function(wss) {
                                        // 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",vname:page}), noop);
+                                                       JSON.stringify({code:"increase",vid:page}), noop);
                                        });
                                        // Also notify potential opponents:
                                        // hit all clients which check if sid corresponds
@@ -139,7 +139,7 @@ module.exports = function(wss) {
                                                // 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",vname:page}), noop);
+                                                               JSON.stringify({code:"decrease",vid:page}), noop);
                                                });
                                        }
                                        // Also notify potential opponents:
index 490a13a..c7f4e55 100644 (file)
@@ -30,8 +30,10 @@ block content
                        //my-game-list(v-show="display=='gameList'")
                        //my-rules(v-show="display=='rules'")
                        //my-problems(v-show="display=='problems'")
-                       //my-game(v-show="display=='game'" :gameId="gameid")
-                       my-board(:vr="vr" :mode="mode" :orientation="orientation"
+                       my-game(v-show="display=='game'" :game-id="gameid" :conn="conn"
+                               :allow-chat="allowChat" :allow-movelist="allowMovelist"
+                               :mode="mode" :fen="fen")
+                       //my-board(:vr="vr" :mode="mode" :orientation="orientation"
                                :user-color="userColor" v-on:play-move="play")
 
 block javascripts
@@ -50,5 +52,5 @@ block javascripts
        script(src="/javascripts/components/board.js")
        //script(src="/javascripts/components/problemPreview.js")
        //script(src="/javascripts/components/problems.js")
-       //script(src="/javascripts/components/game.js")
+       script(src="/javascripts/components/game.js")
        script(src="/javascripts/variant.js")