From 4473050c257453abb37cd53d8d1e6e941c49bf91 Mon Sep 17 00:00:00 2001 From: Benjamin Auder <benjamin.auder@somewhere> Date: Wed, 6 Feb 2019 11:18:20 +0100 Subject: [PATCH] Advance for rules page --- client/src/components/Board.vue | 18 +++++++----- client/src/components/Game.vue | 50 +++++++++++++++----------------- client/src/rules/Alice/en.pug | 2 ++ client/src/utils/printDiagram.js | 4 +-- client/src/views/Rules.vue | 5 +++- 5 files changed, 43 insertions(+), 36 deletions(-) diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue index 32738829..03a5b6e3 100644 --- a/client/src/components/Board.vue +++ b/client/src/components/Board.vue @@ -111,8 +111,8 @@ export default { && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj, }, attrs: { - src: "@/assets/images/pieces/" + - V.getPpath(this.vr.board[ci][cj]) + ".svg", + src: require("@/assets/images/pieces/" + + V.getPpath(this.vr.board[ci][cj]) + ".svg"), }, } ) @@ -239,11 +239,11 @@ export default { 'div', { 'class': { - "col-sm-12":true, - "col-md-10":true, - "col-md-offset-1":true, - "col-lg-8":true, - "col-lg-offset-2":true, + "col-sm-12": true, + "col-md-10": true, + "col-md-offset-1": true, + "col-lg-8": true, + "col-lg-offset-2": true, }, // NOTE: click = mousedown + mouseup on: { @@ -362,3 +362,7 @@ export default { }, }; </script> + +<style lang="sass"> +// TODO: styles to see pieces! +</style> diff --git a/client/src/components/Game.vue b/client/src/components/Game.vue index 678b914d..3eb8f0c6 100644 --- a/client/src/components/Game.vue +++ b/client/src/components/Game.vue @@ -6,31 +6,31 @@ .card.smallpad.small-modal.text-center label.modal-close(for="modalEog") h3#eogMessage.section {{ endgameMessage }} - //Chat(:opponents="opponents" :people="people") - Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor" - :orientation="orientation" :vname="variant.name" @play-move="play") + //Chat(:opponents="opponents" :people="people") + Board(:vr="vr" :last-move="lastMove" :mode="mode" :user-color="mycolor" + :orientation="orientation" :vname="variant.name" @play-move="play") + .button-group + button(@click="() => play()") Play + button(@click="() => undo()") Undo + button(@click="flip") Flip + button(@click="gotoBegin") GotoBegin + button(@click="gotoEnd") GotoEnd + .button-group(v-if="mode=='human'") + button(@click="offerDraw") Draw + button(@click="abortGame") Abort + button(@click="resign") Resign + div(v-if="mode=='human' && subMode=='corr'") + textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg") + div(v-show="cursor>=0") {{ moves[cursor].message }} + .section-content(v-if="showFen && !!vr" id="fen-div") + p#fenString.text-center {{ vr.getFen() }} + #pgnDiv.section-content + a#download(href="#") .button-group - button(@click="() => play()") Play - button(@click="() => undo()") Undo - button(@click="flip") Flip - button(@click="gotoBegin") GotoBegin - button(@click="gotoEnd") GotoEnd - .button-group(v-if="mode=='human'") - button(@click="offerDraw") Draw - button(@click="abortGame") Abort - button(@click="resign") Resign - div(v-if="mode=='human' && subMode=='corr'") - textarea(v-show="score=='*' && vr.turn==mycolor" v-model="corrMsg") - div(v-show="cursor>=0") {{ moves[cursor].message }} - .section-content(v-if="showFen && !!vr" id="fen-div") - p#fenString.text-center {{ vr.getFen() }} - #pgnDiv.section-content - a#download(href="#") - .button-group - button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }} - button Import game - //MoveList(v-if="showMoves" - :moves="moves" :cursor="cursor" @goto-move="gotoMove") + button#downloadBtn(@click="download") {{ st.tr["Download PGN"] }} + button Import game + //MoveList(v-if="showMoves" + :moves="moves" :cursor="cursor" @goto-move="gotoMove") </template> <script> @@ -92,8 +92,6 @@ export default { return this.$emit("computer-think"); this.launchGame(); }, - variant: function(newVar) { - }, }, computed: { showMoves: function() { diff --git a/client/src/rules/Alice/en.pug b/client/src/rules/Alice/en.pug index 5ef85f6e..be97d1b4 100644 --- a/client/src/rules/Alice/en.pug +++ b/client/src/rules/Alice/en.pug @@ -20,6 +20,8 @@ ul li King : L figure.diagram-container + // TODO: sub-component + use pug-loader instead of raw-loader + Diagram(:fen="rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R") .diagram | fen:rnbqkbnr/ppp1pppp/8/8/2p5/5O2/PP1PPPPP/RNBQKB1R: figcaption After the moves 1.Nf3 Pd5 2.Pc4 Sxc4 diff --git a/client/src/utils/printDiagram.js b/client/src/utils/printDiagram.js index 6e095c99..7ae23228 100644 --- a/client/src/utils/printDiagram.js +++ b/client/src/utils/printDiagram.js @@ -97,8 +97,8 @@ export function getDiagram(args) "'>"; if (board[i][j] != V.EMPTY) { - boardDiv += "<img src='/images/pieces/" + - V.getPpath(board[i][j]) + ".svg' class='piece'/>"; + boardDiv += "<img :src='require(`@/assets/images/pieces/" + + V.getPpath(board[i][j]) + ".svg`) class='piece'/>"; } if (markArray.length > 0 && markArray[i][j]) boardDiv += "<img src='/images/mark.svg' class='mark-square'/>"; diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue index 8406843e..fd26f16b 100644 --- a/client/src/views/Rules.vue +++ b/client/src/views/Rules.vue @@ -1,6 +1,6 @@ <template lang="pug"> .row - .col-sm-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2 + .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2 .button-group button(@click="display='rules'") Read the rules button(v-show="!gameInProgress" @click="watchComputerGame") @@ -51,6 +51,9 @@ export default { return getDiagram(args); }; // (AJAX) Request to get rules content (plain text, HTML) + // TODO: find a way to have Diagram(er) as a component, + // thus allowing images import through require(), handled by Webpack + // ==> the rules files should be less static this.content = // TODO: why doesn't this work? require("raw-loader!pug-plain-loader!@/rules/"...) require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug") -- 2.44.0