From: Benjamin Auder <benjamin.auder@somewhere>
Date: Wed, 6 Feb 2019 20:24:02 +0000 (+0100)
Subject: Revert to 'old' way of dealing with assets + diagrams
X-Git-Url: https://git.auder.net/doc/html/assets/pieces/pieces/cn.svg?a=commitdiff_plain;h=50aed5a15e214d31b63f6320209ac14fe5c052cb;p=vchess.git

Revert to 'old' way of dealing with assets + diagrams
---

diff --git a/client/src/assets/images/flags/SOURCE b/client/public/images/flags/SOURCE
similarity index 100%
rename from client/src/assets/images/flags/SOURCE
rename to client/public/images/flags/SOURCE
diff --git a/client/src/assets/images/flags/en.svg b/client/public/images/flags/en.svg
similarity index 100%
rename from client/src/assets/images/flags/en.svg
rename to client/public/images/flags/en.svg
diff --git a/client/src/assets/images/flags/es.svg b/client/public/images/flags/es.svg
similarity index 100%
rename from client/src/assets/images/flags/es.svg
rename to client/public/images/flags/es.svg
diff --git a/client/src/assets/images/flags/fr.svg b/client/public/images/flags/fr.svg
similarity index 100%
rename from client/src/assets/images/flags/fr.svg
rename to client/public/images/flags/fr.svg
diff --git a/client/src/assets/images/mark.svg b/client/public/images/mark.svg
similarity index 100%
rename from client/src/assets/images/mark.svg
rename to client/public/images/mark.svg
diff --git a/client/src/assets/images/pieces/Alice/bc.svg b/client/public/images/pieces/Alice/bc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bc.svg
rename to client/public/images/pieces/Alice/bc.svg
diff --git a/client/src/assets/images/pieces/Alice/bl.svg b/client/public/images/pieces/Alice/bl.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bl.svg
rename to client/public/images/pieces/Alice/bl.svg
diff --git a/client/src/assets/images/pieces/Alice/bo.svg b/client/public/images/pieces/Alice/bo.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bo.svg
rename to client/public/images/pieces/Alice/bo.svg
diff --git a/client/src/assets/images/pieces/Alice/bs.svg b/client/public/images/pieces/Alice/bs.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bs.svg
rename to client/public/images/pieces/Alice/bs.svg
diff --git a/client/src/assets/images/pieces/Alice/bt.svg b/client/public/images/pieces/Alice/bt.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bt.svg
rename to client/public/images/pieces/Alice/bt.svg
diff --git a/client/src/assets/images/pieces/Alice/bu.svg b/client/public/images/pieces/Alice/bu.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/bu.svg
rename to client/public/images/pieces/Alice/bu.svg
diff --git a/client/src/assets/images/pieces/Alice/wc.svg b/client/public/images/pieces/Alice/wc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/wc.svg
rename to client/public/images/pieces/Alice/wc.svg
diff --git a/client/src/assets/images/pieces/Alice/wl.svg b/client/public/images/pieces/Alice/wl.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/wl.svg
rename to client/public/images/pieces/Alice/wl.svg
diff --git a/client/src/assets/images/pieces/Alice/wo.svg b/client/public/images/pieces/Alice/wo.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/wo.svg
rename to client/public/images/pieces/Alice/wo.svg
diff --git a/client/src/assets/images/pieces/Alice/ws.svg b/client/public/images/pieces/Alice/ws.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/ws.svg
rename to client/public/images/pieces/Alice/ws.svg
diff --git a/client/src/assets/images/pieces/Alice/wt.svg b/client/public/images/pieces/Alice/wt.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/wt.svg
rename to client/public/images/pieces/Alice/wt.svg
diff --git a/client/src/assets/images/pieces/Alice/wu.svg b/client/public/images/pieces/Alice/wu.svg
similarity index 100%
rename from client/src/assets/images/pieces/Alice/wu.svg
rename to client/public/images/pieces/Alice/wu.svg
diff --git a/client/src/assets/images/pieces/Antiking/ba.svg b/client/public/images/pieces/Antiking/ba.svg
similarity index 100%
rename from client/src/assets/images/pieces/Antiking/ba.svg
rename to client/public/images/pieces/Antiking/ba.svg
diff --git a/client/src/assets/images/pieces/Antiking/wa.svg b/client/public/images/pieces/Antiking/wa.svg
similarity index 100%
rename from client/src/assets/images/pieces/Antiking/wa.svg
rename to client/public/images/pieces/Antiking/wa.svg
diff --git a/client/src/assets/images/pieces/Baroque/bm.svg b/client/public/images/pieces/Baroque/bm.svg
similarity index 100%
rename from client/src/assets/images/pieces/Baroque/bm.svg
rename to client/public/images/pieces/Baroque/bm.svg
diff --git a/client/src/assets/images/pieces/Baroque/wm.svg b/client/public/images/pieces/Baroque/wm.svg
similarity index 100%
rename from client/src/assets/images/pieces/Baroque/wm.svg
rename to client/public/images/pieces/Baroque/wm.svg
diff --git a/client/src/assets/images/pieces/Checkered/cb.svg b/client/public/images/pieces/Checkered/cb.svg
similarity index 100%
rename from client/src/assets/images/pieces/Checkered/cb.svg
rename to client/public/images/pieces/Checkered/cb.svg
diff --git a/client/src/assets/images/pieces/Checkered/cn.svg b/client/public/images/pieces/Checkered/cn.svg
similarity index 100%
rename from client/src/assets/images/pieces/Checkered/cn.svg
rename to client/public/images/pieces/Checkered/cn.svg
diff --git a/client/src/assets/images/pieces/Checkered/cp.svg b/client/public/images/pieces/Checkered/cp.svg
similarity index 100%
rename from client/src/assets/images/pieces/Checkered/cp.svg
rename to client/public/images/pieces/Checkered/cp.svg
diff --git a/client/src/assets/images/pieces/Checkered/cq.svg b/client/public/images/pieces/Checkered/cq.svg
similarity index 100%
rename from client/src/assets/images/pieces/Checkered/cq.svg
rename to client/public/images/pieces/Checkered/cq.svg
diff --git a/client/src/assets/images/pieces/Checkered/cr.svg b/client/public/images/pieces/Checkered/cr.svg
similarity index 100%
rename from client/src/assets/images/pieces/Checkered/cr.svg
rename to client/public/images/pieces/Checkered/cr.svg
diff --git a/client/src/assets/images/pieces/Grand/bc.svg b/client/public/images/pieces/Grand/bc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Grand/bc.svg
rename to client/public/images/pieces/Grand/bc.svg
diff --git a/client/src/assets/images/pieces/Grand/bm.svg b/client/public/images/pieces/Grand/bm.svg
similarity index 100%
rename from client/src/assets/images/pieces/Grand/bm.svg
rename to client/public/images/pieces/Grand/bm.svg
diff --git a/client/src/assets/images/pieces/Grand/wc.svg b/client/public/images/pieces/Grand/wc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Grand/wc.svg
rename to client/public/images/pieces/Grand/wc.svg
diff --git a/client/src/assets/images/pieces/Grand/wm.svg b/client/public/images/pieces/Grand/wm.svg
similarity index 100%
rename from client/src/assets/images/pieces/Grand/wm.svg
rename to client/public/images/pieces/Grand/wm.svg
diff --git a/client/src/assets/images/pieces/SOURCE b/client/public/images/pieces/SOURCE
similarity index 100%
rename from client/src/assets/images/pieces/SOURCE
rename to client/public/images/pieces/SOURCE
diff --git a/client/src/assets/images/pieces/Wildebeest/bc.svg b/client/public/images/pieces/Wildebeest/bc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Wildebeest/bc.svg
rename to client/public/images/pieces/Wildebeest/bc.svg
diff --git a/client/src/assets/images/pieces/Wildebeest/bw.svg b/client/public/images/pieces/Wildebeest/bw.svg
similarity index 100%
rename from client/src/assets/images/pieces/Wildebeest/bw.svg
rename to client/public/images/pieces/Wildebeest/bw.svg
diff --git a/client/src/assets/images/pieces/Wildebeest/wc.svg b/client/public/images/pieces/Wildebeest/wc.svg
similarity index 100%
rename from client/src/assets/images/pieces/Wildebeest/wc.svg
rename to client/public/images/pieces/Wildebeest/wc.svg
diff --git a/client/src/assets/images/pieces/Wildebeest/ww.svg b/client/public/images/pieces/Wildebeest/ww.svg
similarity index 100%
rename from client/src/assets/images/pieces/Wildebeest/ww.svg
rename to client/public/images/pieces/Wildebeest/ww.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Alt26.svg b/client/public/images/pieces/_originals/Chess_Alt26.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Alt26.svg
rename to client/public/images/pieces/_originals/Chess_Alt26.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Gdt45.svg b/client/public/images/pieces/_originals/Chess_Gdt45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Gdt45.svg
rename to client/public/images/pieces/_originals/Chess_Gdt45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Gll45.svg b/client/public/images/pieces/_originals/Chess_Gll45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Gll45.svg
rename to client/public/images/pieces/_originals/Chess_Gll45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Ult45.svg b/client/public/images/pieces/_originals/Chess_Ult45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Ult45.svg
rename to client/public/images/pieces/_originals/Chess_Ult45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Zdl45.svg b/client/public/images/pieces/_originals/Chess_Zdl45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Zdl45.svg
rename to client/public/images/pieces/_originals/Chess_Zdl45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_Zll45.svg b/client/public/images/pieces/_originals/Chess_Zll45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_Zll45.svg
rename to client/public/images/pieces/_originals/Chess_Zll45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_adt45.svg b/client/public/images/pieces/_originals/Chess_adt45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_adt45.svg
rename to client/public/images/pieces/_originals/Chess_adt45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_alt45.svg b/client/public/images/pieces/_originals/Chess_alt45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_alt45.svg
rename to client/public/images/pieces/_originals/Chess_alt45.svg
diff --git a/client/src/assets/images/pieces/_originals/Chess_clt45.svg b/client/public/images/pieces/_originals/Chess_clt45.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/Chess_clt45.svg
rename to client/public/images/pieces/_originals/Chess_clt45.svg
diff --git a/client/src/assets/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg b/client/public/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg
rename to client/public/images/pieces/_originals/camel-animal-pet-desert-39f82768c72363eb.svg
diff --git a/client/src/assets/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg b/client/public/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg
rename to client/public/images/pieces/_originals/camel-animal-pet-desert-3f04e77f40eba40d.svg
diff --git a/client/src/assets/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg b/client/public/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg
rename to client/public/images/pieces/_originals/camel-animal-wildlife-34b2662eb81cfec3.svg
diff --git a/client/src/assets/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg b/client/public/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg
rename to client/public/images/pieces/_originals/camel-animal-wildlife-3b15afb5e788b9ec.svg
diff --git a/client/src/assets/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg b/client/public/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg
rename to client/public/images/pieces/_originals/unicorn-myth-legend-halloween-fantasy-37ec614cb63bc127.svg
diff --git a/client/src/assets/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg b/client/public/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg
rename to client/public/images/pieces/_originals/wildebeest-animal-wild-wildlife-face-326845431b848a31.svg
diff --git a/client/src/assets/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg b/client/public/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg
similarity index 100%
rename from client/src/assets/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg
rename to client/public/images/pieces/_originals/wildebeest-animal-wildlife-31b7b8fe2ffee150.svg
diff --git a/client/src/assets/images/pieces/bb.svg b/client/public/images/pieces/bb.svg
similarity index 100%
rename from client/src/assets/images/pieces/bb.svg
rename to client/public/images/pieces/bb.svg
diff --git a/client/src/assets/images/pieces/bk.svg b/client/public/images/pieces/bk.svg
similarity index 100%
rename from client/src/assets/images/pieces/bk.svg
rename to client/public/images/pieces/bk.svg
diff --git a/client/src/assets/images/pieces/bn.svg b/client/public/images/pieces/bn.svg
similarity index 100%
rename from client/src/assets/images/pieces/bn.svg
rename to client/public/images/pieces/bn.svg
diff --git a/client/src/assets/images/pieces/bp.svg b/client/public/images/pieces/bp.svg
similarity index 100%
rename from client/src/assets/images/pieces/bp.svg
rename to client/public/images/pieces/bp.svg
diff --git a/client/src/assets/images/pieces/bq.svg b/client/public/images/pieces/bq.svg
similarity index 100%
rename from client/src/assets/images/pieces/bq.svg
rename to client/public/images/pieces/bq.svg
diff --git a/client/src/assets/images/pieces/br.svg b/client/public/images/pieces/br.svg
similarity index 100%
rename from client/src/assets/images/pieces/br.svg
rename to client/public/images/pieces/br.svg
diff --git a/client/src/assets/images/pieces/wb.svg b/client/public/images/pieces/wb.svg
similarity index 100%
rename from client/src/assets/images/pieces/wb.svg
rename to client/public/images/pieces/wb.svg
diff --git a/client/src/assets/images/pieces/wk.svg b/client/public/images/pieces/wk.svg
similarity index 100%
rename from client/src/assets/images/pieces/wk.svg
rename to client/public/images/pieces/wk.svg
diff --git a/client/src/assets/images/pieces/wn.svg b/client/public/images/pieces/wn.svg
similarity index 100%
rename from client/src/assets/images/pieces/wn.svg
rename to client/public/images/pieces/wn.svg
diff --git a/client/src/assets/images/pieces/wp.svg b/client/public/images/pieces/wp.svg
similarity index 100%
rename from client/src/assets/images/pieces/wp.svg
rename to client/public/images/pieces/wp.svg
diff --git a/client/src/assets/images/pieces/wq.svg b/client/public/images/pieces/wq.svg
similarity index 100%
rename from client/src/assets/images/pieces/wq.svg
rename to client/public/images/pieces/wq.svg
diff --git a/client/src/assets/images/pieces/wr.svg b/client/public/images/pieces/wr.svg
similarity index 100%
rename from client/src/assets/images/pieces/wr.svg
rename to client/public/images/pieces/wr.svg
diff --git a/client/src/assets/images/tmp_checkered/README b/client/public/images/tmp_checkered/README
similarity index 100%
rename from client/src/assets/images/tmp_checkered/README
rename to client/public/images/tmp_checkered/README
diff --git a/client/src/assets/images/tmp_checkered/cb.png b/client/public/images/tmp_checkered/cb.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/cb.png
rename to client/public/images/tmp_checkered/cb.png
diff --git a/client/src/assets/images/tmp_checkered/cn.png b/client/public/images/tmp_checkered/cn.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/cn.png
rename to client/public/images/tmp_checkered/cn.png
diff --git a/client/src/assets/images/tmp_checkered/cp.png b/client/public/images/tmp_checkered/cp.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/cp.png
rename to client/public/images/tmp_checkered/cp.png
diff --git a/client/src/assets/images/tmp_checkered/cq.png b/client/public/images/tmp_checkered/cq.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/cq.png
rename to client/public/images/tmp_checkered/cq.png
diff --git a/client/src/assets/images/tmp_checkered/cr.png b/client/public/images/tmp_checkered/cr.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/cr.png
rename to client/public/images/tmp_checkered/cr.png
diff --git a/client/src/assets/images/tmp_checkered/no_ck.png b/client/public/images/tmp_checkered/no_ck.png
similarity index 100%
rename from client/src/assets/images/tmp_checkered/no_ck.png
rename to client/public/images/tmp_checkered/no_ck.png
diff --git a/client/src/assets/sounds/SOURCE b/client/public/sounds/SOURCE
similarity index 100%
rename from client/src/assets/sounds/SOURCE
rename to client/public/sounds/SOURCE
diff --git a/client/src/assets/sounds/move.mp3 b/client/public/sounds/move.mp3
similarity index 100%
rename from client/src/assets/sounds/move.mp3
rename to client/public/sounds/move.mp3
diff --git a/client/src/assets/sounds/newgame.mp3 b/client/public/sounds/newgame.mp3
similarity index 100%
rename from client/src/assets/sounds/newgame.mp3
rename to client/public/sounds/newgame.mp3
diff --git a/client/src/assets/sounds/undo.mp3 b/client/public/sounds/undo.mp3
similarity index 100%
rename from client/src/assets/sounds/undo.mp3
rename to client/public/sounds/undo.mp3
diff --git a/client/src/components/Board.vue b/client/src/components/Board.vue
index 03a5b6e3..c36ea8ae 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: 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
index a2c89e32..00000000
--- a/client/src/components/VariantRules.vue
+++ /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 ?!
--->
diff --git a/client/src/stylesheets/variant.sass b/client/src/stylesheets/variant.sass
index ae4f0b21..4c00a626 100644
--- a/client/src/stylesheets/variant.sass
+++ b/client/src/stylesheets/variant.sass
@@ -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:
 
diff --git a/client/src/views/Rules.vue b/client/src/views/Rules.vue
index fd668462..4edc428f 100644
--- a/client/src/views/Rules.vue
+++ b/client/src/views/Rules.vue
@@ -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")
@@ -18,17 +18,17 @@
 <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>