place pieces

13 files changed, 211 insertions, 84 deletions

diff --git a/sass/index.scss b/sass/index.scss
index fdf4f97..456d908 100755
--- a/sass/index.scss
+++ b/sass/index.scss
@@ -1,5 +1,6 @@
 @import "board";
 @import "stones";
+@import "links";
 @import "head";
 
 body {
diff --git a/sass/links.scss b/sass/links.scss
new file mode 100755
index 0000000..b62879a
--- /dev/null
+++ b/sass/links.scss
@@ -0,0 +1,18 @@
+.link {
+    position: absolute;
+    display: block;
+    opacity: 0.5;
+    cursor: pointer;
+    vertical-align: middle;
+}
+
+.link img {
+    display: block;
+    padding: 10%;
+    width:80%;
+}
+
+.link:not(:hover) {
+    opacity: 0;
+    width: 200%;
+}
diff --git a/sass/stones.scss b/sass/stones.scss
index 65ad970..3635c3b 100755
--- a/sass/stones.scss
+++ b/sass/stones.scss
@@ -1,5 +1,3 @@
-@import "variables";
-
 .stone {
     position: absolute;
     display: block;
diff --git a/src/board.js b/src/board.js
index 3a0edd9..82b6b28 100644
--- a/src/board.js
+++ b/src/board.js
@@ -2,6 +2,7 @@ export let board = {
     element: document.getElementById("board"),
     size: 9,
     stones: {},
+    links: {},
 }
 
 export function prepareBoard() {
diff --git a/src/constants.js b/src/constants.js
new file mode 100644
index 0000000..bb70c8e
--- /dev/null
+++ b/src/constants.js
@@ -0,0 +1,7 @@
+export const PLAYER = {
+    BLACK: "black",
+    WHITE: "white",
+}
+
+export const ASSETS_BLACK = "assets/black.png"
+export const ASSETS_WHITE = "assets/white.png"
diff --git a/src/engine/turns.js b/src/engine/turns.js
new file mode 100644
index 0000000..7026dcc
--- /dev/null
+++ b/src/engine/turns.js
@@ -0,0 +1,35 @@
+import { board } from "../board.js"
+import { Vector2 } from "../engine/visual/vector2.js"
+import { Link } from "../link.js"
+import { PLAYER } from "../constants.js"
+
+export let turn = ""
+
+export function nextTurn() {
+    turn = turn == PLAYER.BLACK ? PLAYER.WHITE : PLAYER.BLACK
+    placeLinks()
+}
+
+function placeLinks() {
+    resetLink()
+    board.links = [...Array(board.size)].map(_ => Array(board.size))
+    for (let row = 0; row < board.size; row++) {
+        for (let col = 0; col < board.size; col++) {
+            tryLink(new Vector2(row, col))
+        }
+    }
+}
+
+function resetLink() {
+    Array.from(board.links).forEach(x => {
+        Array.from(x).filter((x) => x !== undefined).map(y => {
+            y.removeLink()
+        })
+    })
+}
+
+function tryLink(position) {
+    new Link({
+        position: position,
+    })
+}
diff --git a/src/engine/visual.js b/src/engine/visual.js
deleted file mode 100644
index a2fab0a..0000000
--- a/src/engine/visual.js
+++ /dev/null
@@ -1,50 +0,0 @@
-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
-        this.y = y
-    }
-}
diff --git a/src/engine/visual/placeOnBoard.js b/src/engine/visual/placeOnBoard.js
new file mode 100644
index 0000000..cee2969
--- /dev/null
+++ b/src/engine/visual/placeOnBoard.js
@@ -0,0 +1,61 @@
+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).filter((x) => x !== undefined).map(y => {
+            y.update(MEDIA_LISTENER)
+        })
+    })
+
+    Array.from(board.links).forEach(x => {
+        Array.from(x).filter((x) => x !== undefined).map(y => {
+            y.update(MEDIA_LISTENER)
+        })
+    })
+});
+
+const PLACE_VALUES = {
+    stone: {
+        size: 54,
+        size_mob: 72,
+    },
+    link: {
+        size: 69,
+        size_mob: 92,
+    }
+}
+
+
+export function placeOnBoard({
+    position = new Vector2(0, 0),
+    board_size = 9,
+    use_real_size = false,
+}) {
+    let response = {}
+    if (MEDIA_LISTENER.matches) {
+        let totalSize = (
+            use_real_size ?
+                PLACE_VALUES.link.size_mob : PLACE_VALUES.stone.size_mob
+        )
+        let size = totalSize / 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["size"] = `${size}vw`
+    } else {
+        let totalSize = (
+            use_real_size ?
+                PLACE_VALUES.link.size : PLACE_VALUES.stone.size
+        )
+        let size = totalSize / board_size
+        response["left"] = `calc(50% - 30vh + ${position.x * (60 / (board_size - 1)) - totalSize / board_size / 2}vh)`
+        response["top"] = `${14 + 5 + position.y * (60 / (board_size - 1)) - size / 2}vh`
+        response["size"] = `${size}vh`
+    }
+
+    return response
+}
diff --git a/src/engine/visual/vector2.js b/src/engine/visual/vector2.js
new file mode 100644
index 0000000..a3a1bc2
--- /dev/null
+++ b/src/engine/visual/vector2.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
index 8af22e7..70c9695 100755
--- a/src/index.js
+++ b/src/index.js
@@ -1,34 +1,11 @@
-import { board, prepareBoard } from "./board.js"
-import { Vector2 } from "./engine/visual.js"
-import { Stone } from "./stones.js"
+import { prepareBoard } from "./board.js"
+import { nextTurn } from "./engine/turns.js"
 
-let turn = ""
 
 function start() {
     prepareBoard()
     nextTurn()
 }
 
-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++) {
-            tryLink(new Vector2(row, col))
-        }
-    }
-}
-
-function tryLink(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/link.js b/src/link.js
new file mode 100644
index 0000000..7d10413
--- /dev/null
+++ b/src/link.js
@@ -0,0 +1,57 @@
+import { placeOnBoard } from "./engine/visual/placeOnBoard.js"
+import { Vector2 } from "./engine/visual/vector2.js"
+import { board } from "./board.js"
+import { ASSETS_BLACK, ASSETS_WHITE, PLAYER } from "./constants.js"
+import { Stone } from "./stone.js"
+import { nextTurn, turn } from "./engine/turns.js"
+
+
+
+export class Link {
+    constructor({
+        position = new Vector2(0, 0),
+    }) {
+        this.team = turn
+        this.position = position
+
+        this.createSpan()
+        board.links[position.y][position.x] = this
+
+        this.span.addEventListener("click", _ => {
+            new Stone({
+                position: position,
+                team: this.team
+            })
+            nextTurn()
+        });
+
+        this.update()
+    }
+
+    createSpan() {
+        this.span = document.createElement("span")
+        this.span.className = `link`
+
+        let img = document.createElement("img")
+        img.src = this.team == PLAYER.BLACK ? ASSETS_BLACK : ASSETS_WHITE
+        this.span.appendChild(img)
+
+        document.body.appendChild(this.span)
+    }
+
+    update() {
+        let response = placeOnBoard({
+            position: this.position,
+            board_size: board.size,
+            use_real_size: true,
+        })
+
+        this.span.style.left = response.left
+        this.span.style.top = response.top
+        this.span.style.width = this.span.style.height = response.size
+    }
+
+    removeLink() {
+        this.span.remove()
+    }
+}
diff --git a/src/stones.js b/src/stone.js
index ebe0f9b..5203fed 100644
--- a/src/stones.js
+++ b/src/stone.js
@@ -1,13 +1,13 @@
-import { Vector2, placeOnBoard } from "./engine/visual.js"
+import { placeOnBoard } from "./engine/visual/placeOnBoard.js"
+import { Vector2 } from "./engine/visual/vector2.js"
 import { board } from "./board.js"
+import { ASSETS_BLACK, ASSETS_WHITE, PLAYER } from "./constants.js"
 
-const ASSETS_BLACK = "assets/black.png"
-const ASSETS_WHITE = "assets/white.png"
 
 
 export class Stone {
     constructor({
-        team = "black",
+        team = PLAYER.BLACK,
         position = new Vector2(0, 0),
     }) {
         this.team = team
@@ -21,10 +21,10 @@ export class Stone {
 
     create_span() {
         this.span = document.createElement("span")
-        this.span.className = `stone ${this.team}`
+        this.span.className = `stone`
 
         let img = document.createElement("img")
-        img.src = this.team == "black" ? ASSETS_BLACK : ASSETS_WHITE
+        img.src = this.team == PLAYER.BLACK ? ASSETS_BLACK : ASSETS_WHITE
         this.span.appendChild(img)
 
         document.body.appendChild(this.span)
@@ -38,6 +38,6 @@ export class Stone {
 
         this.span.style.left = response.left
         this.span.style.top = response.top
-        this.span.style.width = response.width
+        this.span.style.width = this.span.style.height = response.size
     }
 }
diff --git a/style.css b/style.css
index 5d1d6d5..43f0fc4 100755
--- a/style.css
+++ b/style.css
@@ -29,6 +29,22 @@ table, tr, td {
 .stone img {
   width: 100%; }
 
+.link {
+  position: absolute;
+  display: block;
+  opacity: 0.5;
+  cursor: pointer;
+  vertical-align: middle; }
+
+.link img {
+  display: block;
+  padding: 10%;
+  width: 80%; }
+
+.link:not(:hover) {
+  opacity: 0;
+  width: 200%; }
+
 #head {
   display: block;
   height: 14vh;