fix board style on small device, menu style on large device

This commit is contained in:
Sorrel Bri 2019-08-08 11:45:03 -07:00
parent c82f3da5af
commit eaa25b91ca
2 changed files with 97 additions and 63 deletions

View file

@ -2,6 +2,7 @@
html { html {
font-size: 12px; font-size: 12px;
background-color: #61a6c2;
} }
* { * {
@ -14,6 +15,8 @@ html {
body { body {
height: vh; height: vh;
width: vw; width: vw;
display: flex;
justify-content: center;
} }
.modal { .modal {
@ -36,8 +39,8 @@ body {
background-color: rgb(250, 2250, 255, 0.9); background-color: rgb(250, 2250, 255, 0.9);
padding: 1vmin; padding: 1vmin;
display: grid; display: grid;
grid-template-columns: 80vw; grid-template-columns: 60vw;
grid-template-rows: auto auto 80vw auto; grid-template-rows: auto auto 60vw auto;
grid-template-areas: grid-template-areas:
"meta" "meta"
"player" "player"
@ -152,7 +155,6 @@ height: 1;
} }
content { content {
background-color: #61a6c2;
display: flex !important; display: flex !important;
flex-direction: column; flex-direction: column;
justify-content: space-between !important; justify-content: space-between !important;
@ -301,8 +303,6 @@ content {
} }
#board-space td { #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%); 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; border-radius: 50% solid black;
color: black; color: black;
@ -311,6 +311,21 @@ content {
vertical-align: middle; 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 { #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%); 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,10 +422,6 @@ td .dot .seki {
width: 50%; width: 50%;
} }
#menu {
grid-template-columns: 60vw;
grid-template-rows: auto auto 60vw auto;
}
} }
@media only screen and (min-width: 500px) { @media only screen and (min-width: 500px) {
@ -423,6 +434,58 @@ td .dot .seki {
height: 14vh; 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;
}
} }

View file

@ -1,5 +1,4 @@
/*----- constants -----*/ /*----- constants -----*/
// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures}
const STONES_DATA = { const STONES_DATA = {
'-1': 'white', '-1': 'white',
'0': 'none', '0': 'none',
@ -45,7 +44,7 @@ const HANDI_REC = {
] ]
} }
const gameState = { const gameState = { // pre-init values (render prior to any player input)
winner: null, winner: null,
turn: 1, // turn logic depends on handicap stones turn: 1, // turn logic depends on handicap stones
pass: null, // -1 represents state in which resignation has been submitted, not confirmed pass: null, // -1 represents state in which resignation has been submitted, not confirmed
@ -81,7 +80,8 @@ const gameState = {
// deadShapes{} // 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 = { const HANDI_PLACE = {
'9' : [ '9' : [
0, 0, 0, 0,
@ -113,22 +113,20 @@ const HANDI_PLACE = {
] ]
}; };
const BOARD_POINT_SIZE = { const BOARD_POINT_SIZE = {
'9' : '9vmin', '9' : '9vmin',
'13': '6vmin', '13': '6vmin',
'19' : '4vmin' '19' : '4vmin'
} }
/*----- app's state (variables) -----*/
/*----- app's state (variables) -----*/
let boardState = []; let boardState = [];
// define initial game state
class Point { class Point {
constructor(x, y) { constructor(x, y) {
this.pos = [ 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.legal;
this.territory; this.territory;
this.capturing = []; this.capturing = [];
@ -158,8 +156,7 @@ class Point {
} }
getLiberties = () => { getLiberties = () => {
let neighborsArr = this.checkNeighbors().filter(pt => pt.stone === 0); let neighborsArr = this.checkNeighbors().filter(pt => pt.stone === 0);
return neighborsArr; //checked return neighborsArr;
// return all liberties;
} }
joinGroup = () => { joinGroup = () => {
this.groupMembers = this.groupMembers.filter(grp => grp.stone === this.stone); this.groupMembers = this.groupMembers.filter(grp => grp.stone === this.stone);
@ -177,7 +174,6 @@ class Point {
} }
} }
checkCapture = () => { checkCapture = () => {
let tempCaptures = [];
let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1 let opps = this.checkNeighbors().filter(nbr => nbr.stone === gameState.turn * -1
&& nbr.getLiberties().every(liberty => liberty === this)); && nbr.getLiberties().every(liberty => liberty === this));
for (let opp of opps) { 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 -----*/ /*----- cached element references -----*/
const whiteCapsEl = document.getElementById('white-caps'); 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 whiteNameDisplayEl = document.querySelector('h4#white-player-name');
const gameHudEl = document.querySelector('#game-hud p'); const gameHudEl = document.querySelector('#game-hud p');
const dateEl = document.getElementById('date'); 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 = [ const boardSizeRadioEls = [
document.querySelectorAll('input[name="board-size"')[0], document.querySelectorAll('input[name="board-size"')[0],
document.querySelectorAll('input[name="board-size"')[1], document.querySelectorAll('input[name="board-size"')[1],
document.querySelectorAll('input[name="board-size"')[2] 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 -----*/ /*----- event listeners -----*/
document.getElementById('board').addEventListener('mousemove', hoverPreview); document.getElementById('board').addEventListener('mousemove', hoverPreview);
@ -408,7 +392,7 @@ function clickResign(evt) {
} }
function playerResign() { function playerResign() {
// display confirmation message\ // display confirmation message
gameState.pass = -1; gameState.pass = -1;
gameHudEl.style.visibility = "visible"; gameHudEl.style.visibility = "visible";
gameHudEl.textContent = "Do you want to resign?"; gameHudEl.textContent = "Do you want to resign?";
@ -449,7 +433,7 @@ function checkLegal(point) {
return true; return true;
} }
function clearOverlay() { //legal and check function clearOverlay() {
for (let point in boardState) { for (let point in boardState) {
point = boardState[point]; point = boardState[point];
point.legal = false; point.legal = false;
@ -598,6 +582,7 @@ function renderHoshi() {
function clearCurrentBoard() { function clearCurrentBoard() {
boardEl.innerHTML = ''; boardEl.innerHTML = '';
boardEl.classList = '';
} }
function renderBoardTableStyle() { function renderBoardTableStyle() {
@ -616,6 +601,7 @@ function renderBoardTableRows() {
boardEl.appendChild(tableRow); boardEl.appendChild(tableRow);
i++ i++
} }
boardEl.classList = `board-${gameState.boardSize}x${gameState.boardSize}`;
} }
function renderBoardTableCells(x) { function renderBoardTableCells(x) {
@ -625,8 +611,7 @@ function renderBoardTableCells(x) {
let newCell = ` let newCell = `
<td id="${x}-${y}"> <td id="${x}-${y}">
<div class="stone"> <div class="stone">
<div class="dot"> <div class="dot"></div>
</div>
</div> </div>
</td> </td>
`; `;
@ -763,17 +748,3 @@ function endGame() {
renderGame(); 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