|
|
@ -92,6 +92,22 @@ function isXyOutside(x, y) { |
|
|
|
|| (y > 5 && x < y - 5); |
|
|
|
|| (y > 5 && x < y - 5); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
|
|
|
|
* Get if a coordinate is on the board border. |
|
|
|
|
|
|
|
* |
|
|
|
|
|
|
|
* @param x |
|
|
|
|
|
|
|
* @param y |
|
|
|
|
|
|
|
* @return {boolean|boolean} |
|
|
|
|
|
|
|
*/ |
|
|
|
|
|
|
|
function isXyBorder(x, y) { |
|
|
|
|
|
|
|
return x === 0 |
|
|
|
|
|
|
|
|| x === 10 |
|
|
|
|
|
|
|
|| y === 0 |
|
|
|
|
|
|
|
|| y === 10 |
|
|
|
|
|
|
|
|| (y <= 5 && x === 5 + y) |
|
|
|
|
|
|
|
|| (y > 5 && x === y - 5); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
/** |
|
|
|
/** |
|
|
|
* Game board |
|
|
|
* Game board |
|
|
|
* |
|
|
|
* |
|
|
@ -335,6 +351,7 @@ class Board { |
|
|
|
<polygon
|
|
|
|
<polygon
|
|
|
|
points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25" |
|
|
|
points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25" |
|
|
|
transform="translate(0,0) scale(10.7) rotate(30)" |
|
|
|
transform="translate(0,0) scale(10.7) rotate(30)" |
|
|
|
|
|
|
|
class="board-bg-hex" |
|
|
|
fill="#7e6c56" /> |
|
|
|
fill="#7e6c56" /> |
|
|
|
`);
|
|
|
|
`);
|
|
|
|
this.$bg.appendChild(polygon); |
|
|
|
this.$bg.appendChild(polygon); |
|
|
@ -361,6 +378,18 @@ class Board { |
|
|
|
this.$bg.appendChild(elem); |
|
|
|
this.$bg.appendChild(elem); |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// inner fill so the inner tiles don't have to use blur shadow
|
|
|
|
|
|
|
|
// The color is precisely the shadow in the middle of the border shadows
|
|
|
|
|
|
|
|
// superimposed over the background brown.
|
|
|
|
|
|
|
|
let polygon2 = Svg.fromXML(` |
|
|
|
|
|
|
|
<polygon
|
|
|
|
|
|
|
|
points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25" |
|
|
|
|
|
|
|
transform="translate(0,0) scale(9.3) rotate(30)" |
|
|
|
|
|
|
|
class="tile-shadow" |
|
|
|
|
|
|
|
fill="#372F26" /> |
|
|
|
|
|
|
|
`);
|
|
|
|
|
|
|
|
this.$bg.appendChild(polygon2); |
|
|
|
|
|
|
|
|
|
|
|
this.buf1.forEach((elem) => { |
|
|
|
this.buf1.forEach((elem) => { |
|
|
|
this.$bg.appendChild(elem); |
|
|
|
this.$bg.appendChild(elem); |
|
|
|
}); |
|
|
|
}); |
|
|
@ -449,7 +478,7 @@ class Board { |
|
|
|
const scaleShadow = scale + 0.1; |
|
|
|
const scaleShadow = scale + 0.1; |
|
|
|
|
|
|
|
|
|
|
|
this.tileShadowTpl = Svg.fromXMLg(` |
|
|
|
this.tileShadowTpl = Svg.fromXMLg(` |
|
|
|
<g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})">
|
|
|
|
<g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})" class="tile-shadow"> |
|
|
|
<path |
|
|
|
<path |
|
|
|
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)" |
|
|
|
transform="matrix(0.81746386,-0.47196298,0.47519507,0.823062,-132.56101,57.743511)" |
|
|
|
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z" |
|
|
|
d="M 28.028064,282.66339 21.029591,294.7851 H 7.0326457 L 0.03417301,282.66339 7.0326457,270.54168 H 21.029591 Z" |
|
|
@ -520,9 +549,11 @@ class Board { |
|
|
|
})); |
|
|
|
})); |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
|
|
|
|
|
|
|
|
let polygon_shadow = this.tileShadowTpl.cloneNode(true); |
|
|
|
if (isXyBorder(x, y)) { |
|
|
|
polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`); |
|
|
|
let polygon_shadow = this.tileShadowTpl.cloneNode(true); |
|
|
|
this.buf0.push(polygon_shadow); |
|
|
|
polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`); |
|
|
|
|
|
|
|
this.buf0.push(polygon_shadow); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
const index = xyToGridIndex(x, y); |
|
|
|
const index = xyToGridIndex(x, y); |
|
|
|
let tile = this.tileTpl.cloneNode(true); |
|
|
|
let tile = this.tileTpl.cloneNode(true); |
|
|
|