From: Benjamin Auder Date: Mon, 14 Jan 2019 01:12:08 +0000 (+0100) Subject: Advance on components/game.js X-Git-Url: https://git.auder.net/doc/html/bundles/framework/pieces/mini-custom.min.css?a=commitdiff_plain;h=d44df0b01732d1948525daef5df62211ea6e1f64;p=vchess.git Advance on components/game.js --- diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js index 555d3924..096a9e56 100644 --- a/public/javascripts/components/game.js +++ b/public/javascripts/components/game.js @@ -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', { - + -
+

{{ vr.getFen() }}

@@ -81,7 +86,7 @@ Vue.component('my-game', {
@@ -89,10 +94,13 @@ Vue.component('my-game', {
`, 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) diff --git a/public/javascripts/index.js b/public/javascripts/index.js index bc4cd9e1..fe0b36a3 100644 --- a/public/javascripts/index.js +++ b/public/javascripts/index.js @@ -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"); diff --git a/public/javascripts/utils/misc.js b/public/javascripts/utils/misc.js index 4ad07661..3643fa7f 100644 --- a/public/javascripts/utils/misc.js +++ b/public/javascripts/utils/misc.js @@ -41,3 +41,7 @@ function doClick(elemId) { document.getElementById(elemId).click(); //or ".checked = true" } + +function translate(msg) { + return translations[msg]; +} diff --git a/public/javascripts/variant.js b/public/javascripts/variant.js index 7d30d731..e24dfc68 100644 --- a/public/javascripts/variant.js +++ b/public/javascripts/variant.js @@ -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) diff --git a/sockets.js b/sockets.js index 60434b5e..21742d1d 100644 --- a/sockets.js +++ b/sockets.js @@ -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: diff --git a/views/variant.pug b/views/variant.pug index 490a13ae..c7f4e55f 100644 --- a/views/variant.pug +++ b/views/variant.pug @@ -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")