fix board style on small device, menu style on large device
This commit is contained in:
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 {
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
59
js/main.js
59
js/main.js
|
@ -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,
|
||||||
|
@ -120,15 +120,13 @@ const HANDI_PLACE = {
|
||||||
}
|
}
|
||||||
|
|
||||||
/*----- 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
|
|
||||||
|
|
Loading…
Reference in a new issue