From 5157ce0b8872417fbeecd736c9d1ae750b24acdc Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Fri, 31 Jan 2020 12:10:57 +0100 Subject: [PATCH] 'update' --- client/src/App.vue | 10 ++++---- client/src/components/BaseGame.vue | 10 +++++++- client/src/components/MoveList.vue | 4 ++-- client/src/views/Analyze.vue | 38 +++++++++++++++++++++++------- client/src/views/Rules.vue | 11 ++++++--- 5 files changed, 53 insertions(+), 20 deletions(-) diff --git a/client/src/App.vue b/client/src/App.vue index 6c945663..4b062a65 100644 --- a/client/src/App.vue +++ b/client/src/App.vue @@ -8,7 +8,7 @@ .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 // Menu (top of page): - // Left: hall, variants, mygames, forum (ext. link) + // Left: hall, variants, mygames // Right: usermenu, settings, flag nav label.drawer-toggle(for="drawerControl") @@ -22,8 +22,6 @@ | {{ st.tr["Variants"] }} router-link(to="/mygames") | {{ st.tr["My games"] }} - a(href="https://forum.vchess.club") - | {{ st.tr["Forum"] }} #rightMenu .clickable(onClick="doClick('modalUser')") | {{ st.user.id > 0 ? (st.user.name || "@nonymous") : "Login" }} @@ -38,6 +36,8 @@ router-link.menuitem(to="/about") {{ st.tr["About"] }} p.clickable(onClick="doClick('modalContact')") | {{ st.tr["Contact"] }} + a.menuitem(href="https://forum.vchess.club") + | {{ st.tr["Forum"] }} </template> <script> @@ -163,7 +163,7 @@ footer justify-content: center & > .menuitem display: inline-block - margin: 0 10px 0 0 + margin: 0 10px &:link color: #2c3e50 &:visited, &:hover @@ -171,7 +171,7 @@ footer text-decoration: none & > p display: inline-block - margin: 0 0 0 10px + margin: 0 10px @media screen and (max-width: 767px) footer diff --git a/client/src/components/BaseGame.vue b/client/src/components/BaseGame.vue index 608a98d4..324e534a 100644 --- a/client/src/components/BaseGame.vue +++ b/client/src/components/BaseGame.vue @@ -23,7 +23,8 @@ div#baseGame(tabindex=-1 @click="() => focusBg()" @keydown="handleKeys") | {{ st.tr["Analyze"] }} .col-sm-12.col-md-3 MoveList(v-if="showMoves" :score="game.score" :message="game.scoreMsg" - :moves="moves" :cursor="cursor" @goto-move="gotoMove") + :firstNum="firstMoveNumber" :moves="moves" :cursor="cursor" + @goto-move="gotoMove") </template> <script> @@ -51,6 +52,7 @@ export default { moves: [], cursor: -1, //index of the move just played lastMove: null, + firstMoveNumber: 0, //for printing }; }, watch: { @@ -107,6 +109,8 @@ export default { // Post-processing: decorate each move with color + current FEN: // (to be able to jump to any position quickly) let vr_tmp = new V(this.game.fenStart); //vr is already at end of game + this.firstMoveNumber = + Math.floor(V.ParseFen(this.game.fenStart).movesCount / 2); this.moves.forEach(move => { // NOTE: this is doing manually what play() function below achieve, // but in a lighter "fast-forward" way @@ -297,6 +301,8 @@ export default { this.lastMove = this.moves[index]; }, gotoBegin: function() { + if (this.cursor == -1) + return; this.vr.re_init(this.game.fenStart); if (this.moves.length > 0 && this.moves[0].notation == "...") { @@ -310,6 +316,8 @@ export default { } }, gotoEnd: function() { + if (this.cursor == this.moves.length - 1) + return; this.gotoMove(this.moves.length-1); }, flip: function() { diff --git a/client/src/components/MoveList.vue b/client/src/components/MoveList.vue index 1bb44367..c63f2cdf 100644 --- a/client/src/components/MoveList.vue +++ b/client/src/components/MoveList.vue @@ -6,7 +6,7 @@ div table#movesList tbody tr(v-for="moveIdx in evenNumbers") - td {{ moveIdx / 2 + 1 }} + td {{ firstNum + moveIdx / 2 + 1 }} td(:class="{'highlight-lm': cursor == moveIdx}" data-label="White move" @click="() => gotoMove(moveIdx)") | {{ moves[moveIdx].notation }} @@ -22,7 +22,7 @@ div // Component for moves list on the right export default { name: 'my-move-list', - props: ["moves","cursor","score","message"], + props: ["moves","cursor","score","message","firstNum"], watch: { cursor: function(newValue) { if (newValue < 0) diff --git a/client/src/views/Analyze.vue b/client/src/views/Analyze.vue index a1352f7c..d7e812f4 100644 --- a/client/src/views/Analyze.vue +++ b/client/src/views/Analyze.vue @@ -2,7 +2,9 @@ main .row .col-sm-12 - #fenDiv(v-if="!!vr") {{ vr.getFen() }} + #fenDiv + input#fen(v-model="curFen" @input="adjustFenSize") + button(@click="gotoFen") Go .row .col-sm-12.col-md-10.col-md-offset-1 BaseGame(:game="game" :vr="vr" ref="basegame") @@ -31,6 +33,7 @@ export default { mode: "analyze" }, vr: null, //"variant rules" object initialized from FEN + curFen: "", //people: [], //players + observers //TODO later: interactive analyze... }; }, @@ -40,27 +43,44 @@ export default { this.gameRef.vname = to.params["vname"]; this.loadGame(); }, + "vr.movesCount": function(fen) { + this.curFen = this.vr.getFen(); + this.adjustFenSize(); + }, }, created: function() { this.gameRef.fen = this.$route.query["fen"].replace(/_/g, " "); this.gameRef.vname = this.$route.params["vname"]; - this.loadGame(); + this.initialize(this.loadGame); }, methods: { - loadGame: async function() { + initialize: async function(callback) { + // Obtain VariantRules object + const vModule = await import("@/variants/" + this.gameRef.vname + ".js"); + window.V = vModule.VariantRules; + callback(); + }, + loadGame: function() { this.game.vname = this.gameRef.vname; this.game.fen = this.gameRef.fen; - const vModule = await import("@/variants/" + this.game.vname + ".js"); - window.V = vModule.VariantRules; + this.curFen = this.game.fen; + this.adjustFenSize(); this.vr = new V(this.game.fen); - // fenStart initialized in the end, after definition of V, - // because it triggers a reset on BaseGame component. this.$set(this.game, "fenStart", this.gameRef.fen); //TODO: Vue3... }, + adjustFenSize: function() { + let fenInput = document.getElementById("fen"); + fenInput.style.width = this.curFen.length + "ch"; + }, + gotoFen: function() { + this.gameRef.fen = this.curFen; + this.loadGame(); + }, }, }; </script> -<style lang="sass"> -// TODO +<style lang="sass" scoped> +#fenDiv + text-align: center </style> diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index 33ef6a57..8056ba32 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -3,13 +3,14 @@ main .row .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .button-group - button(@click="clickReadRules") Read the rules + button(@click="clickReadRules") Rules button(v-show="!gameInProgress" @click="() => startGame('auto')") - | Observe a sample game + | Sample game button(v-show="!gameInProgress" @click="() => startGame('versus')") - | Beat the computer! + | Practice! button(v-show="gameInProgress" @click="() => stopGame()") | Stop game + button(@click="gotoAnalyze") Analyze .section-content(v-show="display=='rules'" v-html="content") ComputerGame(v-show="display=='computer'" :game-info="gameInfo" @game-over="stopGame" @game-stopped="gameStopped") @@ -102,6 +103,10 @@ export default { gameStopped: function() { this.gameInProgress = false; }, + gotoAnalyze: function() { + this.$router.push("/analyze/" + this.gameInfo.vname + + "/?fen=" + V.GenRandInitFen()); + }, }, }; </script> -- 2.44.0