From 60d9063fdfcd4b7628fbc0e0fc594f083bda8761 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Thu, 17 Jan 2019 01:30:41 +0100 Subject: [PATCH] Some debug, all components enabled (but not finished: socket+AJAX missing) --- .../components/TODO_FIND_NAME_gameList.js | 5 --- public/javascripts/components/chat.js | 4 +- .../javascripts/components/correspondance.js | 9 +++++ public/javascripts/components/game.js | 20 +++++----- public/javascripts/components/gameList.js | 2 +- .../javascripts/components/problemSummary.js | 2 +- public/javascripts/components/problems.js | 5 ++- public/javascripts/components/room.js | 39 ++++++++++++------- public/javascripts/components/tabGames.js | 39 +++++++++++++++++++ views/index.pug | 10 ++--- views/variant.pug | 26 +++++++------ 11 files changed, 110 insertions(+), 51 deletions(-) delete mode 100644 public/javascripts/components/TODO_FIND_NAME_gameList.js create mode 100644 public/javascripts/components/correspondance.js create mode 100644 public/javascripts/components/tabGames.js diff --git a/public/javascripts/components/TODO_FIND_NAME_gameList.js b/public/javascripts/components/TODO_FIND_NAME_gameList.js deleted file mode 100644 index bd0dde10..00000000 --- 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 b9bc7986..8230e9f8 100644 --- 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 index 00000000..47a37757 --- /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 ef385592..8662028c 100644 --- 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 fcbb39a2..9eb1f7d0 100644 --- 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 08109eff..d7f239ee 100644 --- 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 00ea7692..6f03fd97 100644 --- 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 47370fb2..93990ce1 100644 --- 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 index 00000000..3181be6b --- /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 51df9235..cecca5cf 100644 --- 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 a3b00899..1050f064 100644 --- 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") -- 2.44.0