From fa377bcc6d4793dcd79ae5c07a43a1193aa2613a Mon Sep 17 00:00:00 2001
From: niliara-edu <nil.jimeno@estudiant.fjaverianas.com>
Date: Wed, 11 Dec 2024 09:38:08 +0100
Subject: changes go brrr

---
 src/engine/visual.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 src/index.js         |  8 ++++++--
 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
     }
 }
-- 
cgit v1.2.3