diff options
| -rwxr-xr-x | sass/index.scss | 1 | ||||
| -rwxr-xr-x | sass/links.scss | 18 | ||||
| -rwxr-xr-x | sass/stones.scss | 2 | ||||
| -rw-r--r-- | src/board.js | 1 | ||||
| -rw-r--r-- | src/constants.js | 7 | ||||
| -rw-r--r-- | src/engine/turns.js | 35 | ||||
| -rw-r--r-- | src/engine/visual.js | 50 | ||||
| -rw-r--r-- | src/engine/visual/placeOnBoard.js | 61 | ||||
| -rw-r--r-- | src/engine/visual/vector2.js | 6 | ||||
| -rwxr-xr-x | src/index.js | 27 | ||||
| -rw-r--r-- | src/link.js | 57 | ||||
| -rw-r--r-- | src/stone.js (renamed from src/stones.js) | 14 | ||||
| -rwxr-xr-x | style.css | 16 |
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 } } @@ -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; |