visuals

4 files changed, 124 insertions, 0 deletions

diff --git a/src/board.js b/src/board.js
new file mode 100644
index 0000000..3a0edd9
--- /dev/null
+++ b/src/board.js
@@ -0,0 +1,26 @@
+export let board = {
+    element: document.getElementById("board"),
+    size: 9,
+    stones: {},
+}
+
+export function prepareBoard() {
+    board.stones = [...Array(board.size)].map(_ => Array(board.size))
+    createBoard(board.size)
+}
+
+// ########### board engine #############
+
+function createBoard(size) {
+    let table = document.createElement("table")
+    for (let r = 1; r < size; r++) {
+        let tr = document.createElement("tr")
+
+        for (let c = 1; c < size; c++) {
+            let td = document.createElement("td")
+            tr.appendChild(td)
+        }
+        table.appendChild(tr)
+    }
+    board.element.appendChild(table)
+}
diff --git a/src/engine/visual.js b/src/engine/visual.js
new file mode 100644
index 0000000..a3a1bc2
--- /dev/null
+++ b/src/engine/visual.js
@@ -0,0 +1,6 @@
+export class Vector2 {
+    constructor(x, y) {
+        this.x = x
+        this.y = y
+    }
+}
diff --git a/src/index.js b/src/index.js
new file mode 100755
index 0000000..cde047f
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,30 @@
+import { board, prepareBoard } from "./board.js"
+import { Vector2 } from "./engine/visual.js"
+import { Stone } from "./stones.js"
+
+let turn = ""
+
+function start() {
+    prepareBoard()
+    nextTurn()
+}
+
+function nextTurn() {
+    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))
+        }
+    }
+}
+
+function placeLink(position) {
+    console.log("link to", position.x, position.y)
+    new Stone({
+        position: position,
+        team: (position.x + position.y) % 2 ? "white" : "black"
+    })
+}
+
+
+start()
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`
+        }
+    }
+}