From eaa25b91cac11c2c03d6ad57b59e9285428c4ef2 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Thu, 8 Aug 2019 11:45:03 -0700 Subject: [PATCH] fix board style on small device, menu style on large device --- css/main.css | 89 ++++++++++++++++++++++++++++++++++++++++++++-------- js/main.js | 71 +++++++++++++---------------------------- 2 files changed, 97 insertions(+), 63 deletions(-) diff --git a/css/main.css b/css/main.css index 81f4619..477f992 100644 --- a/css/main.css +++ b/css/main.css @@ -2,6 +2,7 @@ html { font-size: 12px; + background-color: #61a6c2; } * { @@ -14,6 +15,8 @@ html { body { height: vh; width: vw; + display: flex; + justify-content: center; } .modal { @@ -36,8 +39,8 @@ body { background-color: rgb(250, 2250, 255, 0.9); padding: 1vmin; display: grid; - grid-template-columns: 80vw; - grid-template-rows: auto auto 80vw auto; + grid-template-columns: 60vw; + grid-template-rows: auto auto 60vw auto; grid-template-areas: "meta" "player" @@ -152,7 +155,6 @@ height: 1; } content { - background-color: #61a6c2; display: flex !important; flex-direction: column; justify-content: space-between !important; @@ -301,8 +303,6 @@ content { } #board-space td { - height: 6vmin; - width: 6vmin; background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); border-radius: 50% solid black; color: black; @@ -311,6 +311,21 @@ content { vertical-align: middle; } +#board-space .board-9x9 td { + height: 9vmin; + width: 9vmin; +} + +#board-space .board-13x13 td { + height: 7vmin; + width: 7vmin; +} + +#board-space .board-19x19 td { + height: 5vmin; + width: 5vmin; +} + #board-space td.top { background: conic-gradient( rgba(0,0,0,0) 24%, #000 25%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76%); } @@ -407,22 +422,70 @@ td .dot .seki { width: 50%; } - #menu { - grid-template-columns: 60vw; - grid-template-rows: auto auto 60vw auto; - } } @media only screen and (min-width: 500px) { - + html { font-size: 14px; } - + .player-pos { height: 14vh; } - - } + +@media only screen and (min-width: 590px) { + + #board-space .board-19x19 td { + height: 3.5vh; + width: 3.5vh; + } + +} + +@media only screen and (min-width: 570px) { + + #board-space .board-9x9 td { + height: 8vh; + width: 8vh; + } + + #board-space .board-13x13 td { + height: 5.5vh; + width: 5.5vh; + } + +} + +@media only screen and (min-width: 700px) { + + content { + width: 700px; + } + + #menu { + grid-template-columns: 50vw; + grid-template-rows: auto auto 50vw auto; + } + +} + +@media only screen and (min-width: 900px) { + + #menu { + grid-template-columns: 40vw; + grid-template-rows: auto auto 40vw auto; + } + +} + +@media only screen and (min-width: 1200px) { + + #menu { + grid-template-columns: 35vw; + grid-template-rows: auto auto 35vw auto; + } + +} \ No newline at end of file diff --git a/js/main.js b/js/main.js index e622723..3168ab2 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,4 @@ /*----- constants -----*/ -// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures} const STONES_DATA = { '-1': 'white', '0': 'none', @@ -45,7 +44,7 @@ const HANDI_REC = { ] } -const gameState = { +const gameState = { // pre-init values (render prior to any player input) winner: null, turn: 1, // turn logic depends on handicap stones pass: null, // -1 represents state in which resignation has been submitted, not confirmed @@ -81,7 +80,8 @@ const gameState = { // deadShapes{} -// index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) } +// index represents handicap placement for different board-sizes, eg handiPlace['9][1] = { (3, 3), (7, 7) } +// last array in each property also used for hoshi rendering const HANDI_PLACE = { '9' : [ 0, 0, @@ -113,22 +113,20 @@ const HANDI_PLACE = { ] }; - const BOARD_POINT_SIZE = { - '9' : '9vmin', - '13': '6vmin', - '19' : '4vmin' - } +const BOARD_POINT_SIZE = { + '9' : '9vmin', + '13': '6vmin', + '19' : '4vmin' +} + +/*----- app's state (variables) -----*/ - /*----- app's state (variables) -----*/ let boardState = []; - - // define initial game state - class Point { constructor(x, y) { this.pos = [ x, y ] - this.stone = 0; // this is where move placement will go 0, 1, -1 'k' + this.stone = 0; // this is where move placement will go 0, 1, -1, also contains ko: 'k' this.legal; this.territory; this.capturing = []; @@ -158,8 +156,7 @@ class Point { } getLiberties = () => { let neighborsArr = this.checkNeighbors().filter(pt => pt.stone === 0); - return neighborsArr; //checked - // return all liberties; + return neighborsArr; } joinGroup = () => { this.groupMembers = this.groupMembers.filter(grp => grp.stone === this.stone); @@ -177,7 +174,6 @@ class Point { } } checkCapture = () => { - let tempCaptures = []; let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1 && nbr.getLiberties().every(liberty => liberty === this)); for (let opp of opps) { @@ -215,14 +211,6 @@ class Point { } } } -// could use this Array to iterate through and create -// let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize); -// boardState [point objects-contain overlay] lastState (created from boardState) - -// 'k' represents komi, in-game integers represent move previews, -// 'chk', 'hold', 'x' and 'l' represent points checked during checkLegalMove run -// game-end integer represent points of territory, 'd' represents dame, - /*----- cached element references -----*/ const whiteCapsEl = document.getElementById('white-caps'); @@ -242,19 +230,15 @@ const blackNameDisplayEl = document.querySelector('h4#black-player-name'); const whiteNameDisplayEl = document.querySelector('h4#white-player-name'); const gameHudEl = document.querySelector('#game-hud p'); const dateEl = document.getElementById('date'); +const boardSizeEl = document.getElementById('board-size-radio'); +const komiDisplayEl = document.getElementById('komi'); +const handiDisplayEl = document.getElementById('handicap'); +const boardEl = document.querySelector('#board tbody'); const boardSizeRadioEls = [ document.querySelectorAll('input[name="board-size"')[0], document.querySelectorAll('input[name="board-size"')[1], document.querySelectorAll('input[name="board-size"')[2] ]; -const boardSizeEl = document.getElementById('board-size-radio'); -const komiDisplayEl = document.getElementById('komi'); -const handiDisplayEl = document.getElementById('handicap'); -const boardEl = document.querySelector('#board tbody'); - -// store modal #menu for displaying game info -// store - /*----- event listeners -----*/ document.getElementById('board').addEventListener('mousemove', hoverPreview); @@ -408,7 +392,7 @@ function clickResign(evt) { } function playerResign() { - // display confirmation message\ + // display confirmation message gameState.pass = -1; gameHudEl.style.visibility = "visible"; gameHudEl.textContent = "Do you want to resign?"; @@ -449,7 +433,7 @@ function checkLegal(point) { return true; } -function clearOverlay() { //legal and check +function clearOverlay() { for (let point in boardState) { point = boardState[point]; point.legal = false; @@ -598,6 +582,7 @@ function renderHoshi() { function clearCurrentBoard() { boardEl.innerHTML = ''; + boardEl.classList = ''; } function renderBoardTableStyle() { @@ -616,6 +601,7 @@ function renderBoardTableRows() { boardEl.appendChild(tableRow); i++ } + boardEl.classList = `board-${gameState.boardSize}x${gameState.boardSize}`; } function renderBoardTableCells(x) { @@ -625,8 +611,7 @@ function renderBoardTableCells(x) { let newCell = `
-
-
+
`; @@ -763,17 +748,3 @@ function endGame() { renderGame(); } - // game record: [ 0: handicapStones Obj, 1: 1stMove([moveState[],moveState[][])] - // pass() pass++ and player turn to other player - // gameEnd when pass = 2 - // search empty spaces on board for deadShapes - // compare spaces to rotations of deadShapes[...] - // 'd' if empty spaces - // return dead group suggestion - // users can flip status of any dead group overlay( 1, -1 ) - // confirm state - // calculate score = points in overlay for each player + captures - // render final board state with dead groups removed - // log game record - // stringify according to .sgf format - // log as text