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>