fix board style on small device, menu style on large device
This commit is contained in:
Sorrel Bri
parent
c82f3da5af
commit
eaa25b91ca
2 changed files with 97 additions and 63 deletions
81
css/main.css
81
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,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;
|
||||
}
|
||||
|
||||
}
|
||||
65
js/main.js
65
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 = {
|
||||
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 = `
|
||||
<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
|
||||
|
|
|
|||
Loading…
Reference in a new issue