<script>
-// This can work for squared boards (2 or 4 players), with some adaptations (TODO)
-// TODO: for 3 players, write a "board3.js"
+// TODO: BoardHex for hexagonal variants (2 players)
import { getSquareId, getSquareFromId } from "@/utils/squareId";
import { ArrayFun } from "@/utils/array";
name: 'my-board',
// Last move cannot be guessed from here, and is required to highlight squares
// vr: object to check moves, print board...
- // mode: HH, HC or analyze
- // userColor: for mode HH or HC
- props: ["vr","lastMove","mode","orientation","userColor","vname"],
+ // userColor is left undefined for an external observer
+ props: ["vr","lastMove","analyze","orientation","userColor","vname"],
data: function () {
return {
hints: (!localStorage["hints"] ? true : localStorage["hints"] === "1"),
attrs: { "id": "choices" },
'class': { 'row': true },
style: {
- "display": this.choices.length>0?"block":"none",
+ "display": (this.choices.length > 0 ? "block" : "none"),
"top": "-" + ((sizeY/2)*squareWidth+squareWidth/2) + "px",
"width": (this.choices.length * squareWidth) + "px",
"height": squareWidth + "px",
let cj = (this.orientation=='w' ? j : sizeY-j-1);
let elems = [];
if (this.vr.board[ci][cj] != V.EMPTY && (this.vname!="Dark"
- || this.gameOver || this.mode == "analyze"
- || this.vr.enlightened[this.userColor][ci][cj]))
+ || this.analyze || (!!this.userColor
+ && this.vr.enlightened[this.userColor][ci][cj])))
{
elems.push(
h(
&& 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",
},
}
)
'light-square': (i+j)%2==0,
'dark-square': (i+j)%2==1,
[this.bcolor]: true,
- 'in-shadow': this.vname=="Dark" && !this.gameOver
- && this.mode != "analyze"
- && !this.vr.enlightened[this.userColor][ci][cj],
+ 'in-shadow': this.vname=="Dark" && !this.analyze
+ && (!this.userColor
+ || !this.vr.enlightened[this.userColor][ci][cj]),
'highlight': showLight && !!lm && lm.end.x == ci && lm.end.y == cj,
'incheck': showLight && incheckSq[ci][cj],
},
);
})
);
+ const playingColor = this.userColor || "w"; //default for an observer
let elementArray = [choices, gameDiv];
if (!!this.vr.reserve)
{
- const shiftIdx = (this.userColor=="w" ? 0 : 1);
+ const shiftIdx = (playingColor=="w" ? 0 : 1);
let myReservePiecesArray = [];
for (let i=0; i<V.RESERVE_PIECES.length; i++)
{
'class': {"piece":true, "reserve":true},
attrs: {
"src": "/images/pieces/" +
- this.vr.getReservePpath(this.userColor,i) + ".svg",
+ this.vr.getReservePpath(playingColor,i) + ".svg",
}
}),
h('sup',
{"class": { "reserve-count": true } },
- [ this.vr.reserve[this.userColor][V.RESERVE_PIECES[i]] ]
+ [ this.vr.reserve[playingColor][V.RESERVE_PIECES[i]] ]
)
]));
}
let oppReservePiecesArray = [];
- const oppCol = V.GetOppCol(this.userColor);
+ const oppCol = V.GetOppCol(playingColor);
for (let i=0; i<V.RESERVE_PIECES.length; i++)
{
oppReservePiecesArray.push(h('div',
this.selectedPiece.style.zIndex = 3000;
const startSquare = getSquareFromId(e.target.parentNode.id);
this.possibleMoves = [];
- const color = this.mode=="analyze" || this.gameOver
- ? this.vr.turn
- : this.userColor;
+ const color = (this.analyze ? this.vr.turn : this.userColor);
if (this.vr.canIplay(color,startSquare))
this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
// Next line add moving piece just after current image
</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>