const gameDiv = h(
"div",
{
- class: {
+ "class": {
game: true,
clearer: true
}
return h(
"div",
{
- class: {
+ "class": {
row: true
},
style: { opacity: this.choices.length > 0 ? "0.5" : "1" }
if (showPiece(ci, cj)) {
elems.push(
h("img", {
- class: {
+ "class": {
piece: true,
ghost:
!!this.selectedPiece &&
if (this.settings.hints && hintSquares[ci][cj]) {
elems.push(
h("img", {
- class: {
+ "class": {
"mark-square": true
},
attrs: {
return h(
"div",
{
- class: {
+ "class": {
board: true,
["board" + sizeY]: true,
"light-square": lightSquare,
h(
"div",
{
- class: { board: true, ["board" + sizeY]: true },
+ "class": { board: true, ["board" + sizeY]: true },
attrs: { id: getSquareId({ x: sizeX + shiftIdx, y: i }) },
style: { opacity: qty > 0 ? 1 : 0.35 }
},
[
h("img", {
- class: { piece: true, reserve: true },
+ "class": { piece: true, reserve: true },
attrs: {
src:
"/images/pieces/" +
".svg"
}
}),
- h("sup", { class: { "reserve-count": true } }, [ qty ])
+ h("sup", { "class": { "reserve-count": true } }, [ qty ])
]
)
);
h(
"div",
{
- class: { board: true, ["board" + sizeY]: true },
+ "class": { board: true, ["board" + sizeY]: true },
attrs: { id: getSquareId({ x: sizeX + (1 - shiftIdx), y: i }) },
style: { opacity: qty > 0 ? 1 : 0.35 }
},
[
h("img", {
- class: { piece: true, reserve: true },
+ "class": { piece: true, reserve: true },
attrs: {
src:
"/images/pieces/" +
".svg"
}
}),
- h("sup", { class: { "reserve-count": true } }, [ qty ])
+ h("sup", { "class": { "reserve-count": true } }, [ qty ])
]
)
);
h(
"div",
{
- class: {
+ "class": {
game: true,
"reserve-div": true
},
h(
"div",
{
- class: {
+ "class": {
row: true,
"reserve-row": true
}
h(
"div",
{
- class: {
+ "class": {
game: true,
"reserve-div": true
},
h(
"div",
{
- class: {
+ "class": {
row: true,
"reserve-row": true
}
"div",
{
attrs: { id: "choices" },
- class: { row: true },
+ "class": { row: true },
style: {
top: topOffset + "px",
left:
},
[ h(
"div",
- { },
+ {
+ "class": { "full-width": true }
+ },
this.choices.map(m => {
// A "choice" is a move
const applyMove = (e) => {
return h(
"div",
{
- class: {
+ "class": {
board: true,
["board" + sizeY]: true
},
this.vr.getPPpath(m, this.orientation) +
V.IMAGE_EXTENSION
},
- class: { "choice-piece": true },
+ "class": { "choice-piece": true },
on: onClick
})
]
</script>
<style lang="sass" scoped>
+// NOTE: no variants with reserve of size != 8
.game.reserve-div
margin-bottom: 18px
-
.reserve-count
padding-left: 40%
-
.reserve-row
margin-bottom: 15px
-// NOTE: no variants with reserve of size != 8
+.full-width
+ width: 100%
.game
user-select: none