diff options
| -rw-r--r-- | src/engine/visual.js | 44 | ||||
| -rwxr-xr-x | src/index.js | 8 | ||||
| -rw-r--r-- | src/stones.js | 41 |
3 files changed, 61 insertions, 32 deletions
diff --git a/src/engine/visual.js b/src/engine/visual.js index a3a1bc2..a2fab0a 100644 --- a/src/engine/visual.js +++ b/src/engine/visual.js @@ -1,3 +1,47 @@ +import { board } from "../board.js" + +const HEAD_TOP_VW = 20 +const HEAD_TOP_VH = 20 + +const MEDIA_LISTENER = window.matchMedia("(max-width: 600px)") + +MEDIA_LISTENER.addEventListener("change", function() { + Array.from(board.stones).forEach(x => { + Array.from(x).map(y => { + if (y != null) { + y.update(MEDIA_LISTENER) + } + }) + }) +}); + +const PLACE_VALUES = { + size: 54, + size_mob: 72, +} + + +export function placeOnBoard({ + position = new Vector2(0, 0), + board_size = 9, +}) { + let response = {} + if (MEDIA_LISTENER.matches) { + let size = PLACE_VALUES.size_mob / board_size + response["left"] = `calc(50% + ${position.x * (80 / (board_size - 1)) - size / 2 - 40}vw)` + response["top"] = `calc(${30 + 5 + position.y * (80 / (board_size - 1)) - size / 2 - HEAD_TOP_VW}vw + ${HEAD_TOP_VH}vh)` + response["width"] = `${size}vw` + } else { + let size = PLACE_VALUES.size / board_size + response["left"] = `calc(50% - 30vh + ${position.x * (60 / (board_size - 1)) - 54 / board_size / 2}vh)` + response["top"] = `${14 + 5 + position.y * (60 / (board_size - 1)) - size / 2}vh` + response["width"] = `${size}vh` + } + + return response +} + + export class Vector2 { constructor(x, y) { this.x = x diff --git a/src/index.js b/src/index.js index cde047f..8af22e7 100755 --- a/src/index.js +++ b/src/index.js @@ -10,15 +10,19 @@ function start() { } function nextTurn() { + placeLinks() +} + +function placeLinks() { turn = turn != "black" ? turn = "black" : turn = "white" for (let row = 0; row < board.size; row++) { for (let col = 0; col < board.size; col++) { - placeLink(new Vector2(row, col)) + tryLink(new Vector2(row, col)) } } } -function placeLink(position) { +function tryLink(position) { console.log("link to", position.x, position.y) new Stone({ position: position, 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 } } |