incheckSq[sq[0]][sq[1]] = true;
});
- const lm = this.lastMove;
+ let lm = this.lastMove;
+ // Precompute lastMove highlighting squares
+ const lmHighlights = {};
+ if (!!lm) {
+ if (!Array.isArray(lm)) lm = [lm];
+ lm.forEach(m => {
+ lmHighlights[m.start.x + sizeX * m.start.y] = true;
+ lmHighlights[m.end.x + sizeX * m.end.y] = true;
+ });
+ }
const showLight = (
this.settings.highlight &&
["all","highlight"].includes(V.ShowMoves)
);
};
const inHighlight = (x, y) => {
- return showLight && !!lm && (
- (lm.end.x == x && lm.end.y == y) ||
- (lm.start.x == x && lm.start.y == y));
+ return showLight && !!lmHighlights[x + sizeX * y];
};
const inShadow = (x, y) => {
return (
elementArray.push(gameDiv);
if (!!this.vr.reserve) elementArray.push(reserveBottom);
const boardElt = document.querySelector(".game");
+ // boardElt might be undefine (at first drawing),
+ // but it won't be used in this case.
+ const squareWidth = (!!boardElt ? boardElt.offsetWidth / sizeY : 42);
if (this.choices.length > 0 && !!boardElt) {
// No choices to show at first drawing
- const squareWidth = boardElt.offsetWidth / sizeY;
const offset = [boardElt.offsetTop, boardElt.offsetLeft];
const maxNbeltsPerRow = Math.min(this.choices.length, sizeY);
let topOffset = offset[0] + (sizeY / 2) * squareWidth - squareWidth / 2;
(this.arrows.length > 0 || this.movingArrow.x >= 0)
) {
let svgArrows = [];
+ const arrowWidth = squareWidth / 4;
this.arrows.forEach(a => {
+ const endPoint = this.adjustEndArrow(a.start, a.end, squareWidth);
svgArrows.push(
h(
"path",
attrs: {
d: (
"M" + a.start.x + "," + a.start.y + " " +
- "L" + a.end.x + "," + a.end.y
- )
+ "L" + endPoint.x + "," + endPoint.y
+ ),
+ style: "stroke-width:" + arrowWidth + "px"
}
}
)
);
});
if (this.movingArrow.x >= 0) {
+ const endPoint =
+ this.adjustEndArrow(this.startArrow, this.movingArrow, squareWidth);
svgArrows.push(
h(
"path",
attrs: {
d: (
"M" + this.startArrow.x + "," + this.startArrow.y + " " +
- "L" + this.movingArrow.x + "," + this.movingArrow.y
- )
+ "L" + endPoint.x + "," + endPoint.y
+ ),
+ style: "stroke-width:" + arrowWidth + "px"
}
}
)
{
attrs: {
id: "arrow",
- markerWidth: "2",
- markerHeight: "2",
- markerUnits: "strokeWidth",
+ markerWidth: (2 * arrowWidth) + "px",
+ markerHeight: (3 * arrowWidth) + "px",
+ markerUnits: "userSpaceOnUse",
refX: "0",
- refY: "1",
+ refY: (1.5 * arrowWidth) + "px",
orient: "auto"
}
},
h(
"path",
{
+ "class": { "arrow-head": true },
attrs: {
- d: "M0,0 L0,2 L2,1 z",
- style: "fill: blue"
+ d: (
+ "M0,0 L0," + (3 * arrowWidth) + " L" +
+ (2 * arrowWidth) + "," + (1.5 * arrowWidth) + " z"
+ )
}
}
)
this.arrows = [];
this.circles = {};
},
+ adjustEndArrow: function(start, end, squareWidth) {
+ // Simple heuristic for now, just remove 1/3 square.
+ // TODO: should depend on the orientation.
+ const delta = [end.x - start.x, end.y - start.y];
+ const dist = Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
+ const fracSqWidth = squareWidth / 3;
+ return {
+ x: end.x - delta[0] * fracSqWidth / dist,
+ y: end.y - delta[1] * fracSqWidth / dist
+ };
+ },
mousedown: function(e) {
- if (!([1, 3].includes(e.which))) return;
e.preventDefault();
- if (e.which != 3)
+ if (!this.mobileBrowser && e.which != 3)
// Cancel current drawing and circles, if any
this.cancelResetArrows();
- if (e.which == 1 || this.mobileBrowser) {
+ if (this.mobileBrowser || e.which == 1) {
// Mouse left button
if (!this.start) {
// NOTE: classList[0] is enough: 'piece' is the first assigned class
} else {
this.processMoveAttempt(e);
}
- } else {
- // e.which == 3 : mouse right button
+ } else if (e.which == 3) {
+ // Mouse right button
let elem = e.target;
// Next loop because of potential marks
while (elem.tagName == "IMG") elem = elem.parentNode;
}
},
mouseup: function(e) {
- if (!([1, 3].includes(e.which))) return;
e.preventDefault();
- if (e.which == 1) {
+ if (this.mobileBrowser || e.which == 1) {
if (!this.selectedPiece) return;
// Drag'n drop. Selected piece is no longer needed:
this.selectedPiece.parentNode.removeChild(this.selectedPiece);
delete this.selectedPiece;
this.selectedPiece = null;
this.processMoveAttempt(e);
- } else {
- // Mouse right button (e.which == 3)
+ } else if (e.which == 3) {
+ // Mouse right button
this.movingArrow = { x: -1, y: -1 };
this.processArrowAttempt(e);
}
},
+ // Called by BaseGame after partially undoing multi-moves:
+ resetCurrentAttempt: function() {
+ this.possibleMoves = [];
+ this.start = null;
+ this.click = "";
+ this.selectedPiece = null;
+ },
processMoveAttempt: function(e) {
// Obtain the move from start and end squares
const [offsetX, offsetY] =
</script>
<style lang="sass" scoped>
+@import "@/styles/_board_squares_img.sass";
+
// NOTE: no variants with reserve of size != 8
.game.reserve-div
margin-bottom: 18px
.svg-arrow
opacity: 0.65
stroke: #5f0e78
- stroke-width: 10px
fill: none
marker-end: url(#arrow)
+.arrow-head
+ fill: #5f0e78
+
.incheck-light
background-color: rgba(204, 51, 0, 0.7) !important
.incheck-dark
background-color: #9f9fff
.dark-square.chesstempo.highlight-dark
background-color: #557fff
-
</style>