visuals

1 files changed, 62 insertions, 0 deletions

diff --git a/src/stones.js b/src/stones.js
new file mode 100644
index 0000000..6648eba
--- /dev/null
+++ b/src/stones.js
@@ -0,0 +1,62 @@
+import { Vector2 } 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({
+        team = "black",
+        position = new Vector2(0, 0),
+    }) {
+        this.team = team
+        this.position = position
+
+        this.create_span()
+        board.stones[position.y][position.x] = this
+
+        this.update(MEDIA_LISTENER)
+    }
+
+    create_span() {
+        this.span = document.createElement("span")
+        this.span.className = `stone ${this.team}`
+
+        let img = document.createElement("img")
+        img.src = this.team == "black" ? ASSETS_BLACK : ASSETS_WHITE
+        this.span.appendChild(img)
+
+        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`
+        }
+    }
+}