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 {
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,10 +422,6 @@ td .dot .seki {
width: 50%;
}
#menu {
grid-template-columns: 60vw;
grid-template-rows: auto auto 60vw auto;
}
}
@media only screen and (min-width: 500px) {
@ -423,6 +434,58 @@ td .dot .seki {
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 -----*/
// 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,
@ -120,15 +120,13 @@ const HANDI_PLACE = {
}
/*----- 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 = `
<td id="${x}-${y}">
<div class="stone">
<div class="dot">
</div>
<div class="dot"></div>
</div>
</td>
`;
@ -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