From: Benjamin Auder Date: Thu, 17 Jan 2019 00:30:41 +0000 (+0100) Subject: Some debug, all components enabled (but not finished: socket+AJAX missing) X-Git-Url: https://git.auder.net/assets/%7B%7B%20asset%28%27mixstore/css/doc/html/index.html?a=commitdiff_plain;h=60d9063fdfcd4b7628fbc0e0fc594f083bda8761;p=vchess.git 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 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", {

o.id == chat.uid)"} + v-html="chat.msg" > - {{ chat.msg }} + TODO: why chat.msg fails here?

@@ -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: ` +
+

TODO: load from server, show timeControl + players + link "play"

+

Also tab for current challenges + button "new game"

+
+ `, +}); 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", { Players names Cadence - + Result 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: `
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', { skip_next
-
+

{{ curProb.instructions }}

- +

{{ 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: `
- +
- +
-
+
+

Online players

{{ p.name }}
- + +
- + - +
@@ -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: ` +
+
+ + + +
+ + + + + + +
+ `, + 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")