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