Some debug, all components enabled (but not finished: socket+AJAX missing)

diff --git a/public/javascripts/components/TODO_FIND_NAME_gameList.js b/public/javascripts/components/TODO_FIND_NAME_gameList.js
deleted file mode 100644 (file)
index bd0dde1..0000000
--- a/public/javascripts/components/TODO_FIND_NAME_gameList.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// TODO: variable "display" at "corr", "imported" or "local" (e.g. ...)
-//My games : (tabs)
-//mes parties corr en cours
-//mes parties (toutes) terminées (possibilité de supprimer)
-//parties importées

diff --git a/public/javascripts/components/chat.js b/public/javascripts/components/chat.js
index b9bc798..8230e9f 100644 (file)
--- a/public/javascripts/components/chat.js
+++ b/public/javascripts/components/chat.js
@@ -22,8 +22,9 @@ Vue.component("my-chat", {
                                        <p v-for="chat in chats" :class={
                                                "my-chatmsg": "chat.uid==user.id",
                                                "opp-chatmsg": "opponents.any(o => o.id == chat.uid)"}
+                                               v-html="chat.msg"
                                        >
-                                               {{ chat.msg }}
+                                               TODO: why chat.msg fails here?
                                        </p>
                                        <input id="input-chat" type="text" placeholder="translate('Type here')"
                                                @keyup.enter="sendChat"/>
@@ -61,6 +62,7 @@ Vue.component("my-chat", {
                this.conn.onclose = socketCloseListener;
        },
        methods: {
+               translate: translate,
                // TODO: complete this component
                sendChat: function() {
                        let chatInput = document.getElementById("input-chat");

diff --git a/public/javascripts/components/correspondance.js b/public/javascripts/components/correspondance.js
new file mode 100644 (file)
index 0000000..47a3775
--- /dev/null
+++ b/public/javascripts/components/correspondance.js
@@ -0,0 +1,9 @@
+Vue.component("my-correspondance", {
+       //TODO
+       template: `
+               <div class="col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
+                       <p>TODO: load from server, show timeControl + players + link "play"</p>
+                       <p>Also tab for current challenges + button "new game"</p>
+               </div>
+       `,
+});

diff --git a/public/javascripts/components/game.js b/public/javascripts/components/game.js
index ef38559..8662028 100644 (file)
--- a/public/javascripts/components/game.js
+++ b/public/javascripts/components/game.js
@@ -35,11 +35,11 @@ Vue.component('my-game', {
                };
        },
        watch: {
-               fen: function(newFen) {
+               fen: function() {
                        // (Security) No effect if a computer move is in progress:
                        if (this.mode == "computer" && this.lockCompThink)
                                return this.$emit("computer-think");
-                       this.newGameFromFen(newFen);
+                       this.newGameFromFen();
                },
                gameId: function() {
                        this.loadGame();
@@ -132,8 +132,10 @@ Vue.component('my-game', {
                // Send ping to server (answer pong if opponent is connected)
                if (true && !!this.conn)
                {
-                       this.conn.send(JSON.stringify({
-                               code:"ping",oppid:this.oppid,gameId:this.gameId}));
+                       this.conn.onopen = () => {
+                               this.conn.send(JSON.stringify({
+                                       code:"ping",oppid:this.oppid,gameId:this.gameId}));
+                       };
                }
                // TODO: also handle "draw accepted" (use opponents array?)
                // --> must give this info also when sending lastState...
@@ -298,22 +300,22 @@ Vue.component('my-game', {
                        this.endGame(this.mycolor=="w"?"0-1":"1-0");
                },
                translate: translate,
-               newGameFromFen: function(fen) {
-                       this.vr = new VariantRules(fen);
+               newGameFromFen: function() {
+                       this.vr = new VariantRules(this.fen);
                        this.moves = [];
                        this.cursor = -1;
-                       this.fenStart = newFen;
+                       this.fenStart = this.fen;
                        this.score = "*";
                        if (this.mode == "analyze")
                        {
-                               this.mycolor = V.ParseFen(newFen).turn;
+                               this.mycolor = V.ParseFen(this.fen).turn;
                                this.orientation = this.mycolor;
                        }
                        else if (this.mode == "computer") //only other alternative (HH with gameId)
                        {
                                this.mycolor = (Math.random() < 0.5 ? "w" : "b");
                                this.orientation = this.mycolor;
-                               this.compWorker.postMessage(["init",newFen]);
+                               this.compWorker.postMessage(["init",this.fen]);
                                if (this.mycolor != "w" || this.subMode == "auto")
                                        this.playComputerMove();
                        }

diff --git a/public/javascripts/components/gameList.js b/public/javascripts/components/gameList.js
index fcbb39a..9eb1f7d 100644 (file)
--- a/public/javascripts/components/gameList.js
+++ b/public/javascripts/components/gameList.js
@@ -10,7 +10,7 @@ Vue.component("my-game-list", {
                        <tr>
                                <th>Players names</th>
                                <th>Cadence</th>
-                               <th v-if="showResult">
+                               <th v-if="showResult">Result</th>
                        </tr>
                        <tr v-for="g in games" @click="$emit('show-game',g)">
                                <td>

diff --git a/public/javascripts/components/problemSummary.js b/public/javascripts/components/problemSummary.js
index 08109ef..d7f239e 100644 (file)
--- a/public/javascripts/components/problemSummary.js
+++ b/public/javascripts/components/problemSummary.js
@@ -1,5 +1,5 @@
 // Preview a problem on variant page
-Vue.component('my-problem-preview', {
+Vue.component('my-problem-summary', {
        props: ['prob','userid'],
        template: `
                <div class="row problem">

diff --git a/public/javascripts/components/problems.js b/public/javascripts/components/problems.js
index 00ea769..6f03fd9 100644 (file)
--- a/public/javascripts/components/problems.js
+++ b/public/javascripts/components/problems.js
@@ -9,6 +9,7 @@ Vue.component('my-problems', {
                        display: "others", //or "mine"
                        curProb: null, //(reference to) current displayed problem (if any)
                        showSolution: false,
+                       nomoreMessage: "",
                        pbNum: 0, //to navigate directly to some problem
                        // New problem (to upload), or existing problem to edit:
                        modalProb: {
@@ -33,14 +34,14 @@ Vue.component('my-problems', {
                                        <i class="material-icons">skip_next</i>
                                </button>
                        </div>
-                       <div id="mainBoard" v-show="!!curProb">
+                       <div id="mainBoard" v-if="!!curProb">
                                <div id="instructions-div" class="section-content">
                                        <p id="problem-instructions">
                                                {{ curProb.instructions }}
                                        </p>
                                </div>
                                <my-game :fen="curProb.fen" :mode="analyze" :allowMovelist="true" :settings="settings">
-                               </my-board>
+                               </my-game>
                                <div id="solution-div" class="section-content">
                                        <h3 class="clickable" @click="showSolution = !showSolution">
                                                {{ translations["Show solution"] }}

diff --git a/public/javascripts/components/room.js b/public/javascripts/components/room.js
index 47370fb..93990ce 100644 (file)
--- a/public/javascripts/components/room.js
+++ b/public/javascripts/components/room.js
@@ -12,17 +12,21 @@ main time should be positive (no 0+2 & cie...)
 // TODO: objet game, objet challenge ? et player ?
 Vue.component('my-room', {
        props: ["conn","settings"],
-       data: {
-               gdisplay: "live",
-               liveGames: [],
-               corrGames: [],
-               players: [], //online players
-               challenges: [], //live challenges
+       data: function () {
+               return {
+                       gdisplay: "live",
+                       user: user,
+                       liveGames: [],
+                       corrGames: [],
+                       players: [], //online players
+                       challenges: [], //live challenges
+                       people: [], //people who connect to this room (or disconnect)
+               };
        },
        // Modal new game, and then sub-components
        template: `
                <div>
-                       <input id="modalNewgame" type="checkbox" class"="modal"/>
+                       <input id="modalNewgame" type="checkbox" class="modal"/>
                        <div role="dialog" aria-labelledby="titleFenedit">
                                <div class="card smallpad">
                                        <label id="closeNewgame" for="modalNewgame" class="modal-close">
@@ -38,24 +42,27 @@ Vue.component('my-room', {
                                </div>
                        </div>
                        <div>
-                               <my-chat :conn="conn" :myname="myname" :people="people"></my-chat>
+                               <my-chat :conn="conn" :myname="user.name" :people="people"></my-chat>
                                <my-challenge-list :challenges="challenges" @click-challenge="clickChallenge">
                                </my-challenge-list>
                        </div>
                        <button onClick="doClick('modalNewgame')">New game</button>
                        <div>
-                               <div>
+                               <div style="border:1px solid black">
+                                       <h3>Online players</h3>
                                        <div v-for="p in players" @click="challenge(p)">
                                                {{ p.name }}
                                        </div>
                                </div>
                                <div class="button-group">
-                                       <button @click="gdisplay='live'>Live games</button>
-                                       <button @click="gdisplay='corr'>Correspondance games</button>
+                                       <button @click="gdisplay='live'">Live games</button>
+                                       <button @click="gdisplay='corr'">Correspondance games</button>
                                </div>
-                               <my-game-list v-show="display=='live'" :games="liveGames" @show-game="showGame">
+                               <my-game-list v-show="gdisplay=='live'" :games="liveGames"
+                                       @show-game="showGame">
                                </my-game-list>
-                               <my-game-list v-show="display=='corr'" :games="corrGames" @show-game="showGame">
+                               <my-game-list v-show="gdisplay=='corr'" :games="corrGames"
+                                       @show-game="showGame">
                                </my-game-list>
                        </div>
                </div>
@@ -101,6 +108,7 @@ Vue.component('my-room', {
                this.conn.onclose = socketCloseListener;
        },
        methods: {
+               translate: translate,
                showGame: function(game) {
                        let hash = "#game?id=" + game.id;
                        if (!!game.uid)
@@ -109,7 +117,7 @@ Vue.component('my-room', {
                },
                challenge: function(player) {
                        this.conn.send(JSON.stringify({code:"sendchallenge", oppid:p.id,
-                               user:{name:user.name,id:user.id}));
+                               user:{name:user.name,id:user.id}}));
                },
                clickChallenge: function(challenge) {
                        const index = this.challenges.findIndex(c => c.id == challenge.id);
@@ -140,7 +148,8 @@ Vue.component('my-room', {
                        const game = {}; //TODO: fen, players, time ...
                        //setStorage(game); //TODO
                        game.players.forEach(p => {
-                               this.conn.send(JSON.stringify({code:"newgame", oppid:p.id, game:game});
+                               this.conn.send(
+                                       JSON.stringify({code:"newgame", oppid:p.id, game:game}));
                        });
                        if (this.settings.sound >= 1)
                                new Audio("/sounds/newgame.mp3").play().catch(err => {});

diff --git a/public/javascripts/components/tabGames.js b/public/javascripts/components/tabGames.js
new file mode 100644 (file)
index 0000000..3181be6
--- /dev/null
+++ b/public/javascripts/components/tabGames.js
@@ -0,0 +1,39 @@
+// "My" games: tabs my archived local games, my correspondance games
+// + my imported games (of any type).
+// TODO: later, also add possibility to upload a game (parse PGN).
+Vue.component("my-tab-games", {
+       props: ["settings"],
+       data: function() {
+               return {
+                       display: "",
+                       imported: [],
+                       local: [],
+                       corr: []
+               };
+       },
+       template: `
+               <div>
+                       <div class="button-group">
+                               <button @click="display='local'">Local games</button>
+                               <button @click="display='corr'">Correspondance games</button>
+                               <button @click="display='imported'">Imported games</button>
+                       </div>
+                       <my-game-list v-show="display=='local'" :games="local">
+                       </my-game-list>
+                       <my-game-list v-show="display=='corr'" :games="corr">
+                       </my-game-list>
+                       <my-game-list v-show="display=='imported'" :games="imported">
+                       </my-game-list>
+               </div>
+       `,
+       created: function() {
+               // TODO: fetch corr games, local and corr
+               // if any corr game where it's my turn, set display = "corr",
+               // else set display = "local" (if any) or imported (if any and no local)
+       },
+       methods: {
+               update: function() {
+                       // TODO: scan local + imported games, if any new then add it
+               },
+       },
+});

diff --git a/views/index.pug b/views/index.pug
index 51df923..cecca5c 100644 (file)
--- a/views/index.pug
+++ b/views/index.pug
@@ -24,7 +24,7 @@ block content
                                include userMenu
                                a.right-menu(v-show="display=='variants'" href="#games")
                                        .info-container
-                                               p My games
+                                               p Correspondance
                                a.right-menu(v-show="display=='games'" href="#variants")
                                        .info-container
                                                p Variants
@@ -34,14 +34,14 @@ block content
                                input#prefixFilter(v-model="curPrefix")
                        my-variant-summary(v-for="(v,idx) in sortedCounts"
                                v-bind:vobj="v" v-bind:index="idx" v-bind:key="v.name")
-               .row(v-show="display=='games'")
-                       .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
-                               p TODO: load from server, show timeControl + players + link "play"
-                               p Also tab for current challenges + button "new game"
+               .row(v-show="display=='correspondance'")
+                       my-correspondance
 
 block javascripts
        script.
                const variantArray = !{JSON.stringify(variantArray)};
        script(src="/javascripts/socket_url.js")
        script(src="/javascripts/components/variantSummary.js")
+       script(src="/javascripts/components/gameList.js")
+       script(src="/javascripts/components/correspondance.js")
        script(src="/javascripts/index.js")

diff --git a/views/variant.pug b/views/variant.pug
index a3b0089..1050f06 100644 (file)
--- a/views/variant.pug
+++ b/views/variant.pug
@@ -16,7 +16,7 @@ block content
                                                i.material-icons home
                                        a(href="#room")
                                                =translations["Hall"]
-                                       a(href="#gameList")
+                                       a(href="#tabGames")
                                                =translations["My games"]
                                        a(href="#rules")
                                                =translations["Rules"]
@@ -28,13 +28,14 @@ block content
                                                i.material-icons settings
                                        include userMenu
                .row
-                       my-room(v-show="display=='room'")
-                       my-TODO_FIND_NAME_game-list(v-show="display=='gameList'")
+                       my-room(v-show="display=='room'" :conn="conn" :settings="settings")
+                       my-tab-games(v-show="display=='tabGames'")
                        my-rules(v-show="display=='rules'" :settings="settings")
-                       //my-problems(v-show="display=='problems'" :query-hash="queryHash")
+                       my-problems(v-show="display=='problems'" :query-hash="queryHash"
+                               :settings="settings")
                        my-game(v-show="display=='game'" :game-id="gameid" :conn="conn"
                                :allow-chat="allowChat" :allow-movelist="allowMovelist"
-                               :mode="mode" :query-hash="queryHash"
+                               :mode="mode" :query-hash="queryHash" :settings="settings"
                                @game-over="archiveGame")
 
 block javascripts
@@ -44,18 +45,19 @@ block javascripts
        script(src="/javascripts/utils/squareId.js")
        script(src="/javascripts/socket_url.js")
        script(src="/javascripts/base_rules.js")
-       script(src="/javascripts/settings.js")
        script(src="/javascripts/variants/" + variant.name + ".js")
        script.
                const V = VariantRules; //because this variable is often used
                const variant = !{JSON.stringify(variant)};
-       script(src="/javascripts/components/room.js")
-       script(src="/javascripts/components/gameList.js")
-       script(src="/javascripts/components/TODO_FIND_NAME_gameList.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")
+       script(src="/javascripts/components/chat.js")
+       script(src="/javascripts/components/gameList.js")
+       script(src="/javascripts/components/challengeList.js")
        script(src="/javascripts/components/moveList.js")
        script(src="/javascripts/components/game.js")
+       script(src="/javascripts/components/rules.js")
+       script(src="/javascripts/components/room.js")
+       script(src="/javascripts/components/tabGames.js")
+       script(src="/javascripts/components/problemSummary.js")
+       script(src="/javascripts/components/problems.js")
        script(src="/javascripts/variant.js")