&& 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",
},
}
)
</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>
+++ /dev/null
-<!--<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 ?!
--->
&: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
// 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:
| 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
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;
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)
},
};
</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>
projects / vchess.git / commitdiff
