changes go brrr

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
     }
 }