}
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
const squareId = "sq-" + ci + "-" + cj;
let elems = [];
if (showPiece(ci, cj)) {
- elems.push(
- h("img", {
- "class": {
- piece: true,
- ghost:
- !!this.selectedPiece &&
- this.selectedPiece.parentNode.id == squareId
- },
- attrs: {
- src:
- "/images/pieces/" +
- this.vr.getPpath(
- this.vr.board[ci][cj],
- // Extra args useful for some variants:
- this.userColor,
- this.score,
- this.orientation) +
- V.IMAGE_EXTENSION
- }
- })
- );
+ let pieceSpecs = {
+ "class": {
+ piece: true,
+ ghost:
+ !!this.selectedPiece &&
+ this.selectedPiece.parentNode.id == squareId
+ },
+ attrs: {
+ src:
+ "/images/pieces/" +
+ this.vr.getPpath(
+ this.vr.board[ci][cj],
+ // Extra args useful for some variants:
+ this.userColor,
+ this.score,
+ this.orientation) +
+ V.IMAGE_EXTENSION
+ }
+ };
+ if (this.arrows.length == 0)
+ pieceSpecs["style"] = { position: "absolute" };
+ elems.push(h("img", pieceSpecs));
}
if (this.settings.hints && hintSquares[ci][cj]) {
elems.push(
"class": {
board: true,
["board" + sizeY]: true,
- "light-square": lightSquare && !V.Monochrome,
- "dark-square": !lightSquare || !!V.Monochrome,
+ "light-square":
+ !V.Notoodark && lightSquare && !V.Monochrome,
+ "dark-square":
+ !V.Notoodark && (!lightSquare || !!V.Monochrome),
+ "middle-square": V.Notoodark,
[this.settings.bcolor]: true,
"in-shadow": inShadow(ci, cj),
"highlight-light": inHighlight(ci, cj) && lightSquare,
- "highlight-dark": inHighlight(ci, cj) && !lightSquare,
+ "highlight-dark":
+ inHighlight(ci, cj) && (V.Monochrome || !lightSquare),
"incheck-light":
showCheck && lightSquare && incheckSq[ci][cj],
"incheck-dark":
},
[
h("img", {
+ // NOTE: class "reserve" not used currently
"class": { piece: true, reserve: true },
attrs: {
src:
".svg"
}
}),
- h("sup", { "class": { "reserve-count": true } }, [ qty ])
+ h(
+ "sup",
+ {
+ "class": { "reserve-count": true },
+ style: { top: "calc(100% + 5px)" }
+ },
+ [ qty ]
+ )
]
)
);
".svg"
}
}),
- h("sup", { "class": { "reserve-count": true } }, [ qty ])
+ h(
+ "sup",
+ {
+ "class": { "reserve-count": true },
+ style: { top: "calc(100% + 5px)" }
+ },
+ [ qty ]
+ )
]
)
);
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 + " " +
if (!this.mobileBrowser && e.which != 3)
// Cancel current drawing and circles, if any
this.cancelResetArrows();
- this.containerPos =
- document.getElementById("boardContainer").getBoundingClientRect();
if (this.mobileBrowser || e.which == 1) {
// Mouse left button
if (!this.start) {
+ this.containerPos =
+ document.getElementById("boardContainer").getBoundingClientRect();
// NOTE: classList[0] is enough: 'piece' is the first assigned class
const withPiece = (e.target.classList[0] == "piece");
// Emit the click event which could be used by some variants
}
} else if (e.which == 3) {
// Mouse right button
+ this.containerPos =
+ document.getElementById("gamePosition").getBoundingClientRect();
let elem = e.target;
// Next loop because of potential marks
while (elem.tagName == "IMG") elem = elem.parentNode;
// 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 ||
offsetY < this.containerPos.top ||
offsetY > this.containerPos.bottom
) {
- this.selectedPiece = null;
- this.startArrow = null;
+ if (!!this.selectedPiece) {
+ this.selectedPiece.parentNode.removeChild(this.selectedPiece);
+ delete this.selectedPiece;
+ this.selectedPiece = null;
+ this.start = null;
+ this.possibleMoves = []; //in case of
+ this.click = "";
+ let selected = document.querySelector(".ghost");
+ if (!!selected) selected.classList.remove("ghost");
+ }
+ else {
+ this.startArrow = null;
+ this.movingArrow = null;
+ const currentArrow = document.getElementById("currentArrow");
+ if (!!currentArrow)
+ currentArrow.parentNode.removeChild(currentArrow);
+ }
return;
}
e.preventDefault();
this.selectedPiece = null;
this.processMoveAttempt(e);
} else if (e.which == 3) {
+ if (!this.startArrow) return;
// Mouse right button
this.movingArrow = null;
this.processArrowAttempt(e);
// 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>
<style lang="sass" scoped>
@import "@/styles/_board_squares_img.sass";
-// NOTE: no variants with reserve of size != 8
-.game.reserve-div
- margin-bottom: 18px
+//.game.reserve-div
+ // TODO: would be cleaner to restrict width so that it doesn't overflow
+ // Commented out because pieces would disappear over the board otherwise:
+ //overflow: hidden
.reserve-count
- padding-left: 40%
+ width: 100%
+ text-align: center
+ display: inline-block
+ position: absolute
.reserve-row
margin-bottom: 15px
display: block
img.ghost
+ // NOTE: no need to set z-index here, since opacity is low
position: absolute
opacity: 0.5
top: 0
.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;
-
// TODO: no predefined highlight colors, but layers. How?
.light-square.lichess.highlight-light
background-color: #9f9fff
.dark-square.chesstempo.highlight-dark
background-color: #557fff
+
+.light-square.orangecc.highlight-light
+ background-color: #fef273
+.dark-square.orangecc.highlight-dark
+ background-color: #e8c525
</style>
projects / vchess.git / blobdiff