diff options
Diffstat (limited to 'src/stones.js')
-rw-r--r-- | src/stones.js | 41 |
1 files changed, 11 insertions, 30 deletions
diff --git a/src/stones.js b/src/stones.js index 6648eba..ebe0f9b 100644 --- a/src/stones.js +++ b/src/stones.js @@ -1,25 +1,9 @@ -import { Vector2 } from "./engine/visual.js" +import { Vector2, placeOnBoard } from "./engine/visual.js" import { board } from "./board.js" const ASSETS_BLACK = "assets/black.png" const ASSETS_WHITE = "assets/white.png" -const HEAD_TOP_VW = 20 -const HEAD_TOP_VH = 20 - -// Create a MediaQueryList object -const MEDIA_LISTENER = window.matchMedia("(max-width: 600px)") - -// Attach listener function on state changes -MEDIA_LISTENER.addEventListener("change", function() { - Array.from(board.stones).forEach(x => { - Array.from(x).map(y => { - if (y != null) { - y.update(MEDIA_LISTENER) - } - }) - }) -}); export class Stone { constructor({ @@ -32,7 +16,7 @@ export class Stone { this.create_span() board.stones[position.y][position.x] = this - this.update(MEDIA_LISTENER) + this.update() } create_span() { @@ -46,17 +30,14 @@ export class Stone { document.body.appendChild(this.span) } - update(media) { - if (media.matches) { - let size = 72 / board.size - this.span.style.left = `calc(50% + ${this.position.x * (80 / (board.size - 1)) - size / 2 - 40}vw)` - this.span.style.top = `calc(${30 + 5 + this.position.y * (80 / (board.size - 1)) - size / 2 - HEAD_TOP_VW}vw + ${HEAD_TOP_VH}vh)` - this.span.style.width = `${size}vw` - } else { - let size = 54 / board.size - this.span.style.left = `calc(50% - 30vh + ${this.position.x * (60 / (board.size - 1)) - 54 / board.size / 2}vh)` - this.span.style.top = `${14 + 5 + this.position.y * (60 / (board.size - 1)) - size / 2}vh` - this.span.style.width = `${size}vh` - } + update() { + let response = placeOnBoard({ + position: this.position, + board_size: board.size, + }) + + this.span.style.left = response.left + this.span.style.top = response.top + this.span.style.width = response.width } } |