if (!!lm) {
if (!Array.isArray(lm)) lm = [lm];
lm.forEach(m => {
- if (V.OnBoard(m.start.x, m.start.y))
+ if (!m.start.noHighlight && V.OnBoard(m.start.x, m.start.y))
lmHighlights[m.start.x + sizeX * m.start.y] = true;
- if (V.OnBoard(m.end.x, m.end.y))
+ if (!m.end.noHighlight && V.OnBoard(m.end.x, m.end.y))
lmHighlights[m.end.x + sizeX * m.end.y] = true;
+ if (!!m.start.toplay)
+ // For Dice variant (at least?)
+ lmHighlights[m.start.toplay[0] + sizeX * m.start.toplay[1]] = true;
});
}
const showLight = (
this.settings.highlight &&
- ["all","highlight"].includes(V.ShowMoves)
+ ["all", "highlight"].includes(V.ShowMoves)
);
const showCheck = (
this.settings.highlight &&
- ["all","highlight","byrow"].includes(V.ShowMoves)
+ ["all", "highlight", "byrow"].includes(V.ShowMoves)
);
const orientation = !V.CanFlip ? "w" : this.orientation;
// Ensure that squares colors do not change when board is flipped
"middle-square": V.Notoodark,
[this.settings.bcolor]: true,
"in-shadow": inShadow(ci, cj),
- "highlight-light": inHighlight(ci, cj) && lightSquare,
- "highlight-dark":
- inHighlight(ci, cj) && (V.Monochrome || !lightSquare),
+ "highlight": inHighlight(ci, cj),
"incheck-light":
showCheck && lightSquare && incheckSq[ci][cj],
"incheck-dark":
- showCheck && !lightSquare && incheckSq[ci][cj]
+ showCheck && !lightSquare && incheckSq[ci][cj],
+ "hover-highlight": this.vr.hoverHighlight(ci, cj)
},
attrs: {
id: getSquareId({ x: ci, y: cj })
this.coordsToXY(line[1], bPos.top, bPos.left, squareWidth);
let path =
document.createElementNS("http://www.w3.org/2000/svg", "path");
- path.classList.add("svg-line");
+ if (line[0][0] == line[1][0] || line[0][1] == line[1][1])
+ path.classList.add("svg-line");
+ else
+ // "Diagonals" are drawn with a lighter color (TODO: generalize)
+ path.classList.add("svg-diag");
path.setAttribute(
"d",
"M" + lStart.x + "," + lStart.y + " " +
const color = this.analyze ? this.vr.turn : this.userColor;
if (this.vr.canIplay(color, startSquare))
this.possibleMoves = this.vr.getPossibleMovesFrom(startSquare);
+ else return;
// For potential drag'n drop, remember start coordinates
// (to center the piece on mouse cursor)
const rect = parent.getBoundingClientRect();
// Cancel if off boardContainer
const [offsetX, offsetY] =
this.mobileBrowser
- ?
- [
- e.changedTouches[0].pageX,
- // TODO: fixing attempt for smartphones, removing window.scrollY
- e.changedTouches[0].pageY - window.scrollY
- ]
+ ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
: [e.clientX, e.clientY];
if (
offsetX < this.containerPos.left ||
// Obtain the move from start and end squares
const [offsetX, offsetY] =
this.mobileBrowser
- ?
- [
- e.changedTouches[0].pageX,
- e.changedTouches[0].pageY - window.scrollY
- ]
+ ? [e.changedTouches[0].clientX, e.changedTouches[0].clientY]
: [e.clientX, e.clientY];
let landing = document.elementFromPoint(offsetX, offsetY);
// Next condition: classList.contains(piece) fails because of marks
.svg-line
stroke: black
+.svg-diag
+ stroke: grey
+
.arrow-head
fill: #5f0e78
</style>
.incheck-dark
background-color: rgba(204, 51, 0, 0.9) !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: #dfdfdf
-.dark-square.chesstempo
- background-color: #7287b6
-
-.middle-square.lichess
- background-color: #D3B18C
-
-.middle-square.chesscom
- background-color: #AABA91
-
-.middle-square.chesstempo
- background-color: #A9B3CB
-
// TODO: no predefined highlight colors, but layers. How?
-.light-square.lichess.highlight-light
- background-color: #cdd26a
-.dark-square.lichess.highlight-dark
- background-color: #aaa23a
-
-.light-square.chesscom.highlight-light
- background-color: #f7f783
-.dark-square.chesscom.highlight-dark
- background-color: #bacb44
+.hover-highlight:hover
+ // TODO: color dependant on board theme, or inner border...
+ background-color: #C571E6 !important
-.light-square.chesstempo.highlight-light
- background-color: #9f9fff
-.dark-square.chesstempo.highlight-dark
- background-color: #557fff
+.highlight
+ &.light-square
+ &.lichess
+ background-color: #cdd26a
+ &.chesscom
+ background-color: #f7f783
+ &.chesstempo
+ background-color: #9f9fff
+ &.orangecc
+ background-color: #fef273
+ &.dark-square
+ &.lichess
+ background-color: #aaa23a
+ &.chesscom
+ background-color: #bacb44
+ &.chesstempo
+ background-color: #557fff
+ &.orangecc
+ background-color: #e8c525
+ &.middle-square
+ &.lichess
+ background-color: #BCBA52
+ &.chesscom
+ background-color: #D9E164
+ &.chesstempo
+ background-color: #7A8FFF
+ &.orangecc
+ background-color: #F3DC4C
</style>