Revert to 'old' way of dealing with assets + diagrams
authorBenjamin Auder <benjamin.auder@somewhere>
Wed, 6 Feb 2019 20:24:02 +0000 (21:24 +0100)
committerBenjamin Auder <benjamin.auder@somewhere>
Wed, 6 Feb 2019 20:24:02 +0000 (21:24 +0100)
78 files changed:
client/public/images/flags/SOURCE [moved from client/src/assets/images/flags/SOURCE with 100% similarity]
client/public/images/flags/en.svg [moved from client/src/assets/images/flags/en.svg with 100% similarity]
client/public/images/flags/es.svg [moved from client/src/assets/images/flags/es.svg with 100% similarity]
client/public/images/flags/fr.svg [moved from client/src/assets/images/flags/fr.svg with 100% similarity]
client/public/images/mark.svg [moved from client/src/assets/images/mark.svg with 100% similarity]
client/public/images/pieces/Alice/bc.svg [moved from client/src/assets/images/pieces/Alice/bc.svg with 100% similarity]
client/public/images/pieces/Alice/bl.svg [moved from client/src/assets/images/pieces/Alice/bl.svg with 100% similarity]
client/public/images/pieces/Alice/bo.svg [moved from client/src/assets/images/pieces/Alice/bo.svg with 100% similarity]
client/public/images/pieces/Alice/bs.svg [moved from client/src/assets/images/pieces/Alice/bs.svg with 100% similarity]
client/public/images/pieces/Alice/bt.svg [moved from client/src/assets/images/pieces/Alice/bt.svg with 100% similarity]
client/public/images/pieces/Alice/bu.svg [moved from client/src/assets/images/pieces/Alice/bu.svg with 100% similarity]
client/public/images/pieces/Alice/wc.svg [moved from client/src/assets/images/pieces/Alice/wc.svg with 100% similarity]
client/public/images/pieces/Alice/wl.svg [moved from client/src/assets/images/pieces/Alice/wl.svg with 100% similarity]
client/public/images/pieces/Alice/wo.svg [moved from client/src/assets/images/pieces/Alice/wo.svg with 100% similarity]
client/public/images/pieces/Alice/ws.svg [moved from client/src/assets/images/pieces/Alice/ws.svg with 100% similarity]
client/public/images/pieces/Alice/wt.svg [moved from client/src/assets/images/pieces/Alice/wt.svg with 100% similarity]
client/public/images/pieces/Alice/wu.svg [moved from client/src/assets/images/pieces/Alice/wu.svg with 100% similarity]
client/public/images/pieces/Antiking/ba.svg [moved from client/src/assets/images/pieces/Antiking/ba.svg with 100% similarity]
client/public/images/pieces/Antiking/wa.svg [moved from client/src/assets/images/pieces/Antiking/wa.svg with 100% similarity]
client/public/images/pieces/Baroque/bm.svg [moved from client/src/assets/images/pieces/Baroque/bm.svg with 100% similarity]
client/public/images/pieces/Baroque/wm.svg [moved from client/src/assets/images/pieces/Baroque/wm.svg with 100% similarity]
client/public/images/pieces/Checkered/cb.svg [moved from client/src/assets/images/pieces/Checkered/cb.svg with 100% similarity]
client/public/images/pieces/Checkered/cn.svg [moved from client/src/assets/images/pieces/Checkered/cn.svg with 100% similarity]
client/public/images/pieces/Checkered/cp.svg [moved from client/src/assets/images/pieces/Checkered/cp.svg with 100% similarity]
client/public/images/pieces/Checkered/cq.svg [moved from client/src/assets/images/pieces/Checkered/cq.svg with 100% similarity]
client/public/images/pieces/Checkered/cr.svg [moved from client/src/assets/images/pieces/Checkered/cr.svg with 100% similarity]
client/public/images/pieces/Grand/bc.svg [moved from client/src/assets/images/pieces/Grand/bc.svg with 100% similarity]
client/public/images/pieces/Grand/bm.svg [moved from client/src/assets/images/pieces/Grand/bm.svg with 100% similarity]
client/public/images/pieces/Grand/wc.svg [moved from client/src/assets/images/pieces/Grand/wc.svg with 100% similarity]
client/public/images/pieces/Grand/wm.svg [moved from client/src/assets/images/pieces/Grand/wm.svg with 100% similarity]
client/public/images/pieces/SOURCE [moved from client/src/assets/images/pieces/SOURCE with 100% similarity]
client/public/images/pieces/Wildebeest/bc.svg [moved from client/src/assets/images/pieces/Wildebeest/bc.svg with 100% similarity]
client/public/images/pieces/Wildebeest/bw.svg [moved from client/src/assets/images/pieces/Wildebeest/bw.svg with 100% similarity]
client/public/images/pieces/Wildebeest/wc.svg [moved from client/src/assets/images/pieces/Wildebeest/wc.svg with 100% similarity]
client/public/images/pieces/Wildebeest/ww.svg [moved from client/src/assets/images/pieces/Wildebeest/ww.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Alt26.svg [moved from client/src/assets/images/pieces/_originals/Chess_Alt26.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Gdt45.svg [moved from client/src/assets/images/pieces/_originals/Chess_Gdt45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Gll45.svg [moved from client/src/assets/images/pieces/_originals/Chess_Gll45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Ult45.svg [moved from client/src/assets/images/pieces/_originals/Chess_Ult45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Zdl45.svg [moved from client/src/assets/images/pieces/_originals/Chess_Zdl45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_Zll45.svg [moved from client/src/assets/images/pieces/_originals/Chess_Zll45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_adt45.svg [moved from client/src/assets/images/pieces/_originals/Chess_adt45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_alt45.svg [moved from client/src/assets/images/pieces/_originals/Chess_alt45.svg with 100% similarity]
client/public/images/pieces/_originals/Chess_clt45.svg [moved from client/src/assets/images/pieces/_originals/Chess_clt45.svg with 100% similarity]
client/public/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg [moved from client/src/assets/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg with 100% similarity]
client/public/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg [moved from client/src/assets/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg with 100% similarity]
client/public/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg [moved from client/src/assets/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg with 100% similarity]
client/public/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg [moved from client/src/assets/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg with 100% similarity]
client/public/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg [moved from client/src/assets/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg with 100% similarity]
client/public/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg [moved from client/src/assets/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg with 100% similarity]
client/public/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg [moved from client/src/assets/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg with 100% similarity]
client/public/images/pieces/bb.svg [moved from client/src/assets/images/pieces/bb.svg with 100% similarity]
client/public/images/pieces/bk.svg [moved from client/src/assets/images/pieces/bk.svg with 100% similarity]
client/public/images/pieces/bn.svg [moved from client/src/assets/images/pieces/bn.svg with 100% similarity]
client/public/images/pieces/bp.svg [moved from client/src/assets/images/pieces/bp.svg with 100% similarity]
client/public/images/pieces/bq.svg [moved from client/src/assets/images/pieces/bq.svg with 100% similarity]
client/public/images/pieces/br.svg [moved from client/src/assets/images/pieces/br.svg with 100% similarity]
client/public/images/pieces/wb.svg [moved from client/src/assets/images/pieces/wb.svg with 100% similarity]
client/public/images/pieces/wk.svg [moved from client/src/assets/images/pieces/wk.svg with 100% similarity]
client/public/images/pieces/wn.svg [moved from client/src/assets/images/pieces/wn.svg with 100% similarity]
client/public/images/pieces/wp.svg [moved from client/src/assets/images/pieces/wp.svg with 100% similarity]
client/public/images/pieces/wq.svg [moved from client/src/assets/images/pieces/wq.svg with 100% similarity]
client/public/images/pieces/wr.svg [moved from client/src/assets/images/pieces/wr.svg with 100% similarity]
client/public/images/tmp_checkered/README [moved from client/src/assets/images/tmp_checkered/README with 100% similarity]
client/public/images/tmp_checkered/cb.png [moved from client/src/assets/images/tmp_checkered/cb.png with 100% similarity]
client/public/images/tmp_checkered/cn.png [moved from client/src/assets/images/tmp_checkered/cn.png with 100% similarity]
client/public/images/tmp_checkered/cp.png [moved from client/src/assets/images/tmp_checkered/cp.png with 100% similarity]
client/public/images/tmp_checkered/cq.png [moved from client/src/assets/images/tmp_checkered/cq.png with 100% similarity]
client/public/images/tmp_checkered/cr.png [moved from client/src/assets/images/tmp_checkered/cr.png with 100% similarity]
client/public/images/tmp_checkered/no_ck.png [moved from client/src/assets/images/tmp_checkered/no_ck.png with 100% similarity]
client/public/sounds/SOURCE [moved from client/src/assets/sounds/SOURCE with 100% similarity]
client/public/sounds/move.mp3 [moved from client/src/assets/sounds/move.mp3 with 100% similarity]
client/public/sounds/newgame.mp3 [moved from client/src/assets/sounds/newgame.mp3 with 100% similarity]
client/public/sounds/undo.mp3 [moved from client/src/assets/sounds/undo.mp3 with 100% similarity]
client/src/components/Board.vue
client/src/components/VariantRules.vue [deleted file]
client/src/stylesheets/variant.sass
client/src/views/Rules.vue

index 03a5b6e..c36ea8a 100644 (file)
@@ -111,8 +111,8 @@ export default {
                         && this.selectedPiece.parentNode.id == "sq-"+ci+"-"+cj,
                     },
                     attrs: {
-                      src: require("@/assets/images/pieces/" +
-                        V.getPpath(this.vr.board[ci][cj]) + ".svg"),
+                      src: "/images/pieces/" +
+                        V.getPpath(this.vr.board[ci][cj]) + ".svg",
                     },
                   }
                 )
@@ -364,5 +364,102 @@ export default {
 </script>
 
 <style lang="sass">
-// TODO: styles to see pieces!
+.game.reserve-div
+  margin-bottom: 18px
+
+.reserve-count
+  padding-left: 40%
+
+.reserve-row-1
+  margin-bottom: 15px
+
+div.board
+  float: left
+  height: 0
+  display: inline-block
+  position: relative
+
+div.board8
+  width: 12.5%
+  padding-bottom: 12.5%
+
+div.board10
+  width: 10%
+  padding-bottom: 10%
+
+div.board11
+  width: 9.09%
+  padding-bottom: 9.1%
+
+// NOTE: no variants with reserve of size != 8
+
+.game
+  width: 80vh
+  margin: 0 auto
+  .board
+    cursor: pointer
+  @media screen and (max-width: 767px)
+    width: 100%
+    margin: 0
+
+#choices
+  margin: 0 auto 0 auto
+  position: relative
+  z-index: 300
+  overflow-y: inherit
+  background-color: rgba(0,0,0,0)
+  img
+    cursor: pointer
+    background-color: #e6ee9c
+    &:hover
+      background-color: skyblue
+    &.choice-piece
+      width: 100%
+      height: auto
+      display: block
+
+img.piece
+  width: 100%
+
+img.piece, img.mark-square
+  max-width: 100%
+  height: auto
+  display: block
+
+img.mark-square
+  opacity: 0.6
+  width: 76%
+  position: absolute
+  top: 12%
+  left: 12%
+  opacity: .7
+
+img.ghost
+  position: absolute
+  opacity: 0.4
+  top: 0
+
+.highlight
+  background-color: #00cc66 !important
+
+.in-shadow
+  filter: brightness(50%)
+
+.incheck
+  background-color: #cc3300 !important
+
+.light-square.lichess
+  background-color: #f0d9b5;
+.dark-square.lichess
+  background-color: #b58863;
+
+.light-square.chesscom
+  background-color: #e5e5ca;
+.dark-square.chesscom
+  background-color: #6f8f57;
+
+.light-square.chesstempo
+  background-color: #fdfdfd;
+.dark-square.chesstempo
+  background-color: #88a0a8;
 </style>
diff --git a/client/src/components/VariantRules.vue b/client/src/components/VariantRules.vue
deleted file mode 100644 (file)
index a2c89e3..0000000
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--<template :src="require(`@/rules/${vname}/${st.lang}.pug`)">
-</template>
--->
-
-<template lang="pug">
-.section-content(v-html="content")
-</template>
-
-<script>
-import Diagrammer from "@/components/Diagrammer";
-import { store } from "@/store";
-export default {
-  name: "my-variant-rules",
-  components: {
-    Diagrammer,
-  },
-  props: ["vname"],
-  data: function() {
-    return {
-      st: store.state,
-      content: "",
-    };
-  },
-  watch: {
-    vname: function() {
-      this.loadVariantFile();
-    },
-  },
-  methods: {
-    loadVariantFile: function() {
-      if (this.vname != "_unknown")
-      {
-        // TODO (to understand): no loader required here ? Pug preset ?
-        const content = require("raw-loader!@/rules/" + this.vname + "/" + this.st.lang + ".pug");
-        console.log(content);
-        this.content = content;
-      }
-    },
-  },
-  created: function() {
-    this.loadVariantFile();
-  },
-};
-</script>
-
-<!--
-  TODO: template + script dans rules/Alice/en.pug (-> .vue), puis dynamic import ici ?!
--->
index ae4f0b2..4c00a62 100644 (file)
@@ -145,110 +145,6 @@ button.seek
   &:hover
     background-color: #cc99ff
 
-.game.reserve-div
-  margin-bottom: 18px
-
-.reserve-count
-  padding-left: 40%
-
-.reserve-row-1
-  margin-bottom: 15px
-
-div.board
-  float: left
-  height: 0
-  display: inline-block
-  position: relative
-
-div.board8
-  width: 12.5%
-  padding-bottom: 12.5%
-
-div.board10
-  width: 10%
-  padding-bottom: 10%
-
-div.board11
-  width: 9.09%
-  padding-bottom: 9.1%
-
-// NOTE: no variants with reserve of size != 8
-
-.game
-  width: 80vh
-  margin: 0 auto
-  .board
-    cursor: pointer
-  @media screen and (max-width: 767px)
-    width: 100%
-    margin: 0
-
-#choices
-  margin: 0 auto 0 auto
-  position: relative
-  z-index: 300
-  overflow-y: inherit
-  background-color: rgba(0,0,0,0)
-  img
-    cursor: pointer
-    background-color: #e6ee9c
-    &:hover
-      background-color: skyblue
-    &.choice-piece
-      width: 100%
-      height: auto
-      display: block
-
-img.piece
-  width: 100%
-
-img.piece, img.mark-square
-  max-width: 100%
-  height: auto
-  display: block
-
-img.mark-square
-  opacity: 0.6
-  width: 76%
-  position: absolute
-  top: 12%
-  left: 12%
-  opacity: .7
-
-img.ghost
-  position: absolute
-  opacity: 0.4
-  top: 0
-
-.highlight
-  background-color: #00cc66 !important
-
-.in-shadow
-  filter: brightness(50%)
-
-.incheck
-  background-color: #cc3300 !important
-
-.light-square.lichess
-  background-color: #f0d9b5;
-.dark-square.lichess
-  background-color: #b58863;
-
-.light-square.chesscom
-  background-color: #e5e5ca;
-.dark-square.chesscom
-  background-color: #6f8f57;
-
-.light-square.chesstempo
-  background-color: #fdfdfd;
-.dark-square.chesstempo
-  background-color: #88a0a8;
-
-.light-square-diag
-  background-color: #e5e5ca
-.dark-square-diag
-  background-color: #6f8f57
-
 #fen-string
   margin-top: 0
   margin-bottom: 10px
@@ -277,70 +173,6 @@ img.ghost
 
 // Rules section:
 
-.warn
-  padding: 3px
-  color: red
-  background-color: lightgrey
-  font-weight: bold
-
-figure.diagram-container
-  margin: 15px 0 15px 0
-  text-align: center
-  width: 100%
-  display: block
-  .diagram
-    display: block
-    width: 40%
-    min-width: 240px
-    margin-left: auto
-    margin-right: auto
-  .diag12
-    float: left
-    margin-left: calc(10% - 20px)
-    margin-right: 40px
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto 10px auto
-  .diag22
-    float: left
-    margin-right: calc(10% - 20px)
-    @media screen and (max-width: 630px)
-      float: none
-      margin: 0 auto
-  figcaption
-    display: block
-    clear: both
-    padding-top: 5px
-    font-size: 0.8em
-
-p.boxed
-  background-color: #FFCC66
-  padding: 5px
-
-.stageDelimiter
-  color: purple
-
-// To show (new) pieces, and/or there values...
-figure.showPieces > img
-  width: 50px
-
-figure.showPieces > figcaption
-  color: #6C6C6C
-
-.section-title
-  padding: 0
-
-.section-title > h4
-  padding: 5px
-
-ol, ul:not(.browser-default)
-  padding-left: 20px
-
-ul:not(.browser-default)
-  margin-top: 5px
-
-ul:not(.browser-default) > li
-  list-style-type: disc
 
 // Problems section:
 
index fd66846..4edc428 100644 (file)
@@ -9,7 +9,7 @@
         | Beat the computer!
       button(v-show="gameInProgress" @click="stopGame")
         | Stop game
-    VariantRules(v-show="display=='rules'" :vname="variant.name")
+    .section-content(v-show="display=='rules'" v-html="content")
     Game(v-show="display=='computer'" :gid-or-fen="fen"
       :mode="mode" :sub-mode="subMode" :variant="variant"
       @computer-think="gameInProgress=false" @game-over="stopGame")
 <script>
 import Game from "@/components/Game.vue";
 import { store } from "@/store";
-import VariantRules from "@/components/VariantRules";
+import { getDiagram } from "@/utils/printDiagram";
 export default {
   name: 'my-rules',
   components: {
     Game,
-    VariantRules,
   },
   data: function() {
     return {
       st: store.state,
       variant: {id: 0, name: "_unknown"}, //...yet
+      content: "",
       display: "rules",
       mode: "computer",
       subMode: "", //'auto' for game CPU vs CPU
@@ -47,6 +47,15 @@ export default {
     this.tryChangeVariant(this.$route.params["vname"]);
   },
   methods: {
+    parseFen(fen) {
+      const fenParts = fen.split(" ");
+      return {
+        position: fenParts[0],
+        marks: fenParts[1],
+        orientation: fenParts[2],
+        shadow: fenParts[3],
+      };
+    },
     tryChangeVariant: async function(vname) {
       if (vname == "_unknown")
         return;
@@ -59,6 +68,15 @@ export default {
         this.variant.name = vname;
       const vModule = await import("@/variants/" + vname + ".js");
       window.V = vModule.VariantRules;
+      // Method to replace diagrams in loaded HTML
+      const replaceByDiag = (match, p1, p2) => {
+        const args = this.parseFen(p2);
+        return getDiagram(args);
+      };
+      // (AJAX) Request to get rules content (plain text, HTML)
+      this.content =
+        require("raw-loader!@/rules/" + vname + "/" + this.st.lang + ".pug")
+        .replace(/(fen:)([^:]*):/g, replaceByDiag);
     },
     startGame: function() {
       if (this.gameInProgress)
@@ -83,3 +101,114 @@ export default {
   },
 };
 </script>
+
+<style lang="sass">
+.warn
+  padding: 3px
+  color: red
+  background-color: lightgrey
+  font-weight: bold
+
+figure.diagram-container
+  margin: 15px 0 15px 0
+  text-align: center
+  width: 100%
+  display: block
+  .diagram
+    display: block
+    width: 40%
+    min-width: 240px
+    margin-left: auto
+    margin-right: auto
+  .diag12
+    float: left
+    margin-left: calc(10% - 20px)
+    margin-right: 40px
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto 10px auto
+  .diag22
+    float: left
+    margin-right: calc(10% - 20px)
+    @media screen and (max-width: 630px)
+      float: none
+      margin: 0 auto
+  figcaption
+    display: block
+    clear: both
+    padding-top: 5px
+    font-size: 0.8em
+
+  p.boxed
+    background-color: #FFCC66
+    padding: 5px
+
+  .stageDelimiter
+    color: purple
+
+  // To show (new) pieces, and/or there values...
+  figure.showPieces > img
+    width: 50px
+
+  figure.showPieces > figcaption
+    color: #6C6C6C
+
+  .section-title
+    padding: 0
+
+  .section-title > h4
+    padding: 5px
+
+  ol, ul:not(.browser-default)
+    padding-left: 20px
+
+  ul:not(.browser-default)
+    margin-top: 5px
+
+  ul:not(.browser-default) > li
+    list-style-type: disc
+
+.light-square-diag
+  background-color: #e5e5ca
+
+.dark-square-diag
+  background-color: #6f8f57
+
+// TODO: following is duplicated
+div.board
+  float: left
+  height: 0
+  display: inline-block
+  position: relative
+
+div.board8
+  width: 12.5%
+  padding-bottom: 12.5%
+
+div.board10
+  width: 10%
+  padding-bottom: 10%
+
+div.board11
+  width: 9.09%
+  padding-bottom: 9.1%
+
+img.piece
+  width: 100%
+
+img.piece, img.mark-square
+  max-width: 100%
+  height: auto
+  display: block
+
+img.mark-square
+  opacity: 0.6
+  width: 76%
+  position: absolute
+  top: 12%
+  left: 12%
+  opacity: .7
+
+.in-shadow
+  filter: brightness(50%)
+</style>