1 files changed, 44 insertions, 0 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