solve the lag problem

master
Ondřej Hruška 5 years ago
parent bb8096f3b2
commit 9129306f7c
Signed by: MightyPork
GPG Key ID: 2C5FD5035250423D
  1. 39
      script.js
  2. 7
      style.css

@ -92,6 +92,22 @@ function isXyOutside(x, y) {
|| (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
*
@ -335,6 +351,7 @@ class Board {
<polygon
points="43,-25 0,-50 -43,-25 -43,25 0,50 43,25"
transform="translate(0,0) scale(10.7) rotate(30)"
class="board-bg-hex"
fill="#7e6c56" />
`);
this.$bg.appendChild(polygon);
@ -361,6 +378,18 @@ class Board {
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.$bg.appendChild(elem);
});
@ -449,7 +478,7 @@ class Board {
const scaleShadow = scale + 0.1;
this.tileShadowTpl = Svg.fromXMLg(`
<g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})">
<g transform="scale(${scaleShadow}) translate(${offsetX},${offsetY})" class="tile-shadow">
<path
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"
@ -520,9 +549,11 @@ class Board {
}));
*/
let polygon_shadow = this.tileShadowTpl.cloneNode(true);
polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
this.buf0.push(polygon_shadow);
if (isXyBorder(x, y)) {
let polygon_shadow = this.tileShadowTpl.cloneNode(true);
polygon_shadow.setAttribute('transform', `translate(${rx},${ry}),scale(1.1)`);
this.buf0.push(polygon_shadow);
}
const index = xyToGridIndex(x, y);
let tile = this.tileTpl.cloneNode(true);

@ -87,11 +87,16 @@ html, body {
/* No-blur version uses white ring around selected orbs, and has no shadow */
.cfg-no-blur .orb-shadow,
.cfg-no-blur .orb-glow {
.cfg-no-blur .orb-glow,
.cfg-no-blur .tile-shadow {
filter: none !important;
opacity: 0 !important;
}
.cfg-no-blur .board-bg-hex {
fill: #534334;
}
.cfg-no-blur .orb.selected .orb-fill,
.cfg-no-blur .orb:hover .orb-fill {
stroke: white;

Loading…
Cancel
Save