diff options
| -rw-r--r-- | .ignore | 3 | ||||
| -rwxr-xr-x | assets/black.png | bin | 0 -> 20237 bytes | |||
| -rwxr-xr-x | assets/board.jpg | bin | 0 -> 94996 bytes | |||
| -rwxr-xr-x | assets/dismal.jpg | bin | 0 -> 537034 bytes | |||
| -rw-r--r-- | assets/icon.jpg | bin | 0 -> 64334 bytes | |||
| -rwxr-xr-x | assets/kodama.jpg | bin | 0 -> 1028290 bytes | |||
| -rwxr-xr-x | assets/used_board.jpg | bin | 0 -> 619951 bytes | |||
| -rwxr-xr-x | assets/white.png | bin | 0 -> 17786 bytes | |||
| -rwxr-xr-x | countlines.sh | 10 | ||||
| -rwxr-xr-x | index.html | 56 | ||||
| -rwxr-xr-x | sass/board.scss | 34 | ||||
| -rw-r--r-- | sass/head.scss | 129 | ||||
| -rwxr-xr-x | sass/index.scss | 14 | ||||
| -rwxr-xr-x | sass/stones.scss | 10 | ||||
| -rwxr-xr-x | sass/variables.scss | 38 | ||||
| -rw-r--r-- | src/board.js | 26 | ||||
| -rw-r--r-- | src/engine/visual.js | 6 | ||||
| -rwxr-xr-x | src/index.js | 30 | ||||
| -rw-r--r-- | src/stones.js | 62 | ||||
| -rwxr-xr-x | style.css | 144 |
20 files changed, 562 insertions, 0 deletions
@@ -0,0 +1,3 @@ +*.jpg +*.png +*.css diff --git a/assets/black.png b/assets/black.png Binary files differnew file mode 100755 index 0000000..5025176 --- /dev/null +++ b/assets/black.png diff --git a/assets/board.jpg b/assets/board.jpg Binary files differnew file mode 100755 index 0000000..170334c --- /dev/null +++ b/assets/board.jpg diff --git a/assets/dismal.jpg b/assets/dismal.jpg Binary files differnew file mode 100755 index 0000000..a664d04 --- /dev/null +++ b/assets/dismal.jpg diff --git a/assets/icon.jpg b/assets/icon.jpg Binary files differnew file mode 100644 index 0000000..a73ea9e --- /dev/null +++ b/assets/icon.jpg diff --git a/assets/kodama.jpg b/assets/kodama.jpg Binary files differnew file mode 100755 index 0000000..ffa4d44 --- /dev/null +++ b/assets/kodama.jpg diff --git a/assets/used_board.jpg b/assets/used_board.jpg Binary files differnew file mode 100755 index 0000000..a354f14 --- /dev/null +++ b/assets/used_board.jpg diff --git a/assets/white.png b/assets/white.png Binary files differnew file mode 100755 index 0000000..67d9a83 --- /dev/null +++ b/assets/white.png diff --git a/countlines.sh b/countlines.sh new file mode 100755 index 0000000..62858f9 --- /dev/null +++ b/countlines.sh @@ -0,0 +1,10 @@ +#!/usr/bin/bash +echo " +js lines of code: " +find . -name '*.js' | xargs wc -l + +echo " +scss lines of code: " +find . -name '*.scss' | xargs wc -l + +echo "" diff --git a/index.html b/index.html new file mode 100755 index 0000000..0ac62a6 --- /dev/null +++ b/index.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>go</title> + <link rel="stylesheet" href="style.css"> + <link rel="icon" type="image/x-icon" href="assets/icon.jpg"> +</head> +<body> + +<!-- +<div class="player player-left"> + 15 +</div> + +<div class="player player-right"> + 30 +</div> +--> + +<div id="head"> + +<div class="player-label-left"> + 30 +</div> +<div class="player-label-right"> + 30 +</div> + +<img class="player-image-left" src="assets/black.png" alt=""> +<img class="player-image-right" src="assets/white.png" alt=""> + +<!-- +<div class="turn"> + +<div class="border"> +<div class="inner"> +<h2>62 - 42</h2> +</div> +</div> + +</div> +--> + +</div> + + +<div id="board"> +</div> + + +<script type="module" src="src/index.js"></script> +</body> + +</html> diff --git a/sass/board.scss b/sass/board.scss new file mode 100755 index 0000000..a34a4fa --- /dev/null +++ b/sass/board.scss @@ -0,0 +1,34 @@ +@import "variables"; + +#board { + background-image: $board_image; + background-size: 100%; + opacity:0.9; + + margin: 0 auto; + padding: $board-border; + + height: $board-size; + aspect-ratio: 1; +} + +@media screen and (max-width: $screen-transition-width) { + #board { + height: $board-size-mob; + padding: $board-border-mob; + } +} + +table { + height: 100%; + width: 100%; +} + +table, tr, td { + border: 1px solid black; + padding: 0; + margin: 0; + border-collapse: collapse; +} + + diff --git a/sass/head.scss b/sass/head.scss new file mode 100644 index 0000000..88b0d3b --- /dev/null +++ b/sass/head.scss @@ -0,0 +1,129 @@ +@import "variables"; +#head { + display: block; + height: $head_height; + margin: 0; + padding: 0; + overflow:scroll; +} + +@media screen and (max-width: $screen-transition-width) { + #head { + height: $head_height_mob; + margin-top: calc(#{$head_top_vh} - #{$head_top_vw}); + } +} + +@mixin player-image { + position: absolute; + display: inline-block; + z-index: 1; + + height: $head_height * 0.6; + margin: $head_height * 0.2; + + top: 0; +} + +img.player-image-left { + left: calc(50% - #{$board_size / 2 + $board_border}); + @include player-image; +} + +img.player-image-right { + left: calc(50% + #{$board_size / 2 + $board_border - $head_height}); + @include player-image; +} + +@media screen and (max-width: $screen-transition-width) { + @mixin player-image-mob { + height: $head_height_mob * 0.4; + margin: $head_height_mob * 0.3; + top: calc(#{$head_top_vh} - #{$head_top_vw}); + } + + img.player-image-left { + left: calc(50% - #{$board_size_mob / 2 + $board_border_mob + $label_width_mob * 0.3}); + @include player-image-mob; + } + + img.player-image-right { + left: calc(50% + #{$board_size_mob / 2 + $board_border_mob - $head_height_mob + $label_width_mob * 0.3}); + @include player-image-mob; + } +} + +.turn { + width: 20vh; + height: $label_height; + + margin: 0 auto; + margin-top: calc(#{$head_height / 2} - #{$label_height}); + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); +} + +.turn h2 { + font-size: $label_height - 1; +} + +.turn .border { + height: $label_height; + + margin: 0 auto; + margin-top: 4vh; + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); +} + +.turn .inner { + height:100%; + width: 100%; + text-align: center; + background-color: $background-color; + clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%); +} + +@mixin player-label { + width: $label_width; + height: $label_height; + + font-size: 3vh; + text-align: center; + + background-color: #000b; + color: white; + position: absolute; + top: calc(#{$head_height / 2 - $label_height / 2}); +} + +div.player-label-left { + clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%); + left: calc(50% - #{$board_size / 2 + $board_border - $label_width * $label_margin}); + @include player-label; +} + +div.player-label-right { + clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%); + left: calc(50% + #{$board_size / 2 + $board_border - $label_width * ($label_margin + 1)}); + @include player-label; +} + +@media screen and (max-width: $screen-transition-width) { + @mixin player-label-mob { + width: $label_width_mob; + height: $label_height_mob; + font-size: $label_height_mob - 1; + + top: #{calc(#{$head_top_vh} - #{$head_top_vw} + #{$head_height_mob / 2} - #{$label_height_mob / 2})}; + } + div.player-label-left { + left: calc(50% - #{$board_size_mob / 2 + $board_border_mob - $label_width_mob * $label_margin_mob}); + @include player-label-mob; + } + + div.player-label-right { + left: calc(50% + #{$board_size_mob / 2 + $board_border_mob} - #{$label_width_mob * ($label_margin_mob + 1)}); + @include player-label-mob; + } +} diff --git a/sass/index.scss b/sass/index.scss new file mode 100755 index 0000000..fdf4f97 --- /dev/null +++ b/sass/index.scss @@ -0,0 +1,14 @@ +@import "board"; +@import "stones"; +@import "head"; + +body { + background-image: $background-image; + background-repeat: no-repeat; + background-size: auto 100%; + background-position: center top; + background-attachment: fixed; + background-color: $background-color; + margin: 0; +} + diff --git a/sass/stones.scss b/sass/stones.scss new file mode 100755 index 0000000..65ad970 --- /dev/null +++ b/sass/stones.scss @@ -0,0 +1,10 @@ +@import "variables"; + +.stone { + position: absolute; + display: block; +} + +.stone img { + width:100%; +} diff --git a/sass/variables.scss b/sass/variables.scss new file mode 100755 index 0000000..2e70aeb --- /dev/null +++ b/sass/variables.scss @@ -0,0 +1,38 @@ +// screen // +$screen-transition-width: 600px; + +$head_top_vw: 20vw; +$head_top_vh: 20vh; + + +// board // +$board-size: 60vh; +$board-border: 5vh; + +$board-size-mob: 80vw; +$board-border-mob: 5vw; + + +// colors // +$background-color: #efd; +$foreground-color: #000; + + +// images // +$background-image: url("assets/dismal.jpg"); +$board-image: url("assets/board.jpg"); + + +// head // +$head-margin-top-mob: 20vw; + +$head_height: 14vh; +$label_height: 4vh; +$label_width: 16vh; + +$head_height_mob: 30vw; +$label_height_mob: 6vw; +$label_width_mob: 26vw; + +$label-margin: 0.6; +$label-margin-mob: 0.3; 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` + } + } +} diff --git a/style.css b/style.css new file mode 100755 index 0000000..5d1d6d5 --- /dev/null +++ b/style.css @@ -0,0 +1,144 @@ +#board { + background-image: url("assets/board.jpg"); + background-size: 100%; + opacity: 0.9; + margin: 0 auto; + padding: 5vh; + height: 60vh; + aspect-ratio: 1; } + +@media screen and (max-width: 600px) { + #board { + height: 80vw; + padding: 5vw; } } + +table { + height: 100%; + width: 100%; } + +table, tr, td { + border: 1px solid black; + padding: 0; + margin: 0; + border-collapse: collapse; } + +.stone { + position: absolute; + display: block; } + +.stone img { + width: 100%; } + +#head { + display: block; + height: 14vh; + margin: 0; + padding: 0; + overflow: scroll; } + +@media screen and (max-width: 600px) { + #head { + height: 30vw; + margin-top: calc(20vh - 20vw); } } + +img.player-image-left { + left: calc(50% - 35vh); + position: absolute; + display: inline-block; + z-index: 1; + height: 8.4vh; + margin: 2.8vh; + top: 0; } + +img.player-image-right { + left: calc(50% + 21vh); + position: absolute; + display: inline-block; + z-index: 1; + height: 8.4vh; + margin: 2.8vh; + top: 0; } + +@media screen and (max-width: 600px) { + img.player-image-left { + left: calc(50% - 52.8vw); + height: 12vw; + margin: 9vw; + top: calc(20vh - 20vw); } + img.player-image-right { + left: calc(50% + 22.8vw); + height: 12vw; + margin: 9vw; + top: calc(20vh - 20vw); } } + +.turn { + width: 20vh; + height: 4vh; + margin: 0 auto; + margin-top: calc(7vh - 4vh); + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); } + +.turn h2 { + font-size: 3vh; } + +.turn .border { + height: 4vh; + margin: 0 auto; + margin-top: 4vh; + background-color: black; + clip-path: polygon(5% 0%, 95% 0%, 100% 50%, 95% 100%, 5% 100%, 0% 50%); } + +.turn .inner { + height: 100%; + width: 100%; + text-align: center; + background-color: #efd; + clip-path: polygon(7% 10%, 93% 10%, 97% 50%, 93% 90%, 7% 90%, 3% 50%); } + +div.player-label-left { + clip-path: polygon(0 0, 0 100%, 90% 100%, 100% 0%); + left: calc(50% - 25.4vh); + width: 16vh; + height: 4vh; + font-size: 3vh; + text-align: center; + background-color: #000b; + color: white; + position: absolute; + top: calc(5vh); } + +div.player-label-right { + clip-path: polygon(100% 0, 100% 100%, 10% 100%, 0% 0%); + left: calc(50% + 9.4vh); + width: 16vh; + height: 4vh; + font-size: 3vh; + text-align: center; + background-color: #000b; + color: white; + position: absolute; + top: calc(5vh); } + +@media screen and (max-width: 600px) { + div.player-label-left { + left: calc(50% - 37.2vw); + width: 26vw; + height: 6vw; + font-size: 5vw; + top: calc(20vh - 20vw + 15vw - 3vw); } + div.player-label-right { + left: calc(50% + 45vw - 33.8vw); + width: 26vw; + height: 6vw; + font-size: 5vw; + top: calc(20vh - 20vw + 15vw - 3vw); } } + +body { + background-image: url("assets/dismal.jpg"); + background-repeat: no-repeat; + background-size: auto 100%; + background-position: center top; + background-attachment: fixed; + background-color: #efd; + margin: 0; } |
