Simplify navigation

[vchess.git] / public / javascripts / components / game.js

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index bbef6f8..6361b8a 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -1,9 +1,11 @@
 // TODO: envoyer juste "light move", sans FEN ni notation ...etc
+// TODO: also "observers" prop, we should send moves to them too (in a web worker ? webRTC ?)
 
 // Game logic on a variant page: 3 modes, analyze, computer or human
 Vue.component('my-game', {
        // gameId: to find the game in storage (assumption: it exists)
-       props: ["gameId","mode","allowChat","allowMovelist"],
+       // fen: to start from a FEN without identifiers (analyze mode)
+       props: ["conn","gameId","fen","mode","allowChat","allowMovelist"],
        data: function() {
                return {
                        // if oppid == "computer" then mode = "computer" (otherwise human)
@@ -12,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
@@ -21,8 +22,26 @@ 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
+                       // lastMove: update after every play, initialize with last move from list (if continuation)
+                       //orientation ? userColor ? gameOver ? lastMove ?
+               
                };
        },
+       watch: {
+               fen: function(newFen) {
+                       this.vr = new VariantRules(newFen);
+               },
+               gameId: function() {
+                       this.loadGame();
+               },
+       },
        computed: {
                showChat: function() {
                        return this.allowChat && this.mode=='human' && this.score != '*';
@@ -36,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"/>
@@ -56,18 +79,18 @@ 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>
                        </div>
                        <div id="pgn-div" class="section-content">
-                               <a id="download" href: "#">
+                               <a id="download" href="#">
                                </a>
                                <button id="downloadBtn" @click="download">
-                                       {{ translations["Download PGN"] }}
+                                       {{ translate("Download PGN") }}
                                </button>
                        </div>
                        <my-move-list v-if="showMoves">
@@ -75,8 +98,13 @@ Vue.component('my-game', {
                </div>
        `,
        created: function() {
-               const url = socketUrl;
-               this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
+
+//             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 => {
@@ -151,7 +179,6 @@ Vue.component('my-game', {
                };
 
                const socketCloseListener = () => {
-                       this.conn = new WebSocket(url + "/?sid=" + this.myid + "&page=" + variant._id);
                        this.conn.addEventListener('message', socketMessageListener);
                        this.conn.addEventListener('close', socketCloseListener);
                };
@@ -184,10 +211,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)