add board size selection and rendering

This commit is contained in:
Sorrel Bri 2019-08-07 23:52:13 -07:00
parent 8299f02c42
commit ddefdf3655
3 changed files with 2254 additions and 334 deletions

View file

@ -301,8 +301,8 @@ content {
} }
#board-space td { #board-space td {
height: 9vmin; height: 6vmin;
width: 9vmin; 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,35 +311,35 @@ content {
vertical-align: middle; vertical-align: middle;
} }
#board-space td[id^="1"] { #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%);
} }
#board-space td[id^="9"] { #board-space td.btm {
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) 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
} }
#board-space td[id$="1"] { #board-space td.lft {
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) 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) 99%, #000 100%);
} }
#board-space td[id$="9"] { #board-space td.rgt {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, 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) 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%);
} }
#board-space td[id="1-1"] { #board-space td.top.lft {
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%); 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%);
} }
#board-space td[id="1-9"] { #board-space td.top.rgt {
background: conic-gradient( 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) 49%, #000 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 74%, #000 75%, rgba(0,0,0,0) 76% );
} }
#board-space td[id="9-1"] { #board-space td.btm.lft {
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) 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) 99%, #000 100%);
} }
#board-space td[id="9-9"] { #board-space td.btm.rgt {
background: conic-gradient(#000 0%, rgba(0,0,0,0) 1%, 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%);
} }
@ -423,58 +423,6 @@ td .dot .seki {
height: 14vh; height: 14vh;
} }
#kifu {
order: 0;
height: 12vh;
width: 9vh;
background-color: #FFF;
transform: rotate(-20deg);
}
.bowl {
margin: 2vh;
height: 12vh;
width: 12vh;
}
.caps-space {
margin: 1vh;
height: 8vh;
width: 8vh;
}
#board-space {
margin: 0 auto;
/* grid-area: board-space; */
display: flex;
flex-direction: column;
background-color: #EAB24E;
/* width: 90vmin; */
/* height: 90vmin; */
padding: 1vmin;
z-index: 1;
box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5);
flex: 1;
}
#board-space table {
display: flex;
align-items: stretch;
justify-content: space-between;
height: 72vmin;
width: 72min;
margin: auto;
}
#board-space td {
height: 8vmin;
width: 8vmin;
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;
margin: auto;
padding: 0;
vertical-align: middle;
}
} }

2424
index.html

File diff suppressed because it is too large Load diff

View file

@ -113,6 +113,12 @@ const HANDI_PLACE = {
] ]
}; };
const BOARD_POINT_SIZE = {
'9' : '9vmin',
'13': '6vmin',
'19' : '4vmin'
}
/*----- app's state (variables) -----*/ /*----- app's state (variables) -----*/
let boardState = []; let boardState = [];
@ -236,9 +242,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 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 boardSizeEl = document.getElementById('board-size-radio');
const komiDisplayEl = document.getElementById('komi'); const komiDisplayEl = document.getElementById('komi');
const handiDisplayEl = document.getElementById('handicap'); const handiDisplayEl = document.getElementById('handicap');
const boardEl = document.querySelector('#board tbody');
// store modal #menu for displaying game info // store modal #menu for displaying game info
// store // store
@ -307,7 +319,7 @@ function clickUpdatePlayerMeta(evt) {
function clickBoardSize(evt) { function clickBoardSize(evt) {
evt.stopPropagation(); evt.stopPropagation();
gameState.boardSize = document.querySelector('#board-size-radio [checked]').value; gameState.boardSize = boardSizeRadioEls.find(el => el.checked === true).value;
renderMenu(); renderMenu();
} }
@ -349,7 +361,7 @@ function renderHandiSlider() {
function renderBoardSizeRadio() { function renderBoardSizeRadio() {
boardSizeEl.value = gameState.boardSize; boardSizeEl.value = gameState.boardSize;
if (gameState.gameMeta.start) boardSizeEl.setAttribute('disabled', true); if (gameState.gameMeta.start) boardSizeRadioEls.forEach(el => el.setAttribute('disabled', true));
} }
function renderMenu() { function renderMenu() {
@ -413,7 +425,8 @@ function hoverPreview(evt) {
evt.stopPropagation(); evt.stopPropagation();
if (gameState.pass > 1 || gameState.winner) return; if (gameState.pass > 1 || gameState.winner) return;
// renders preview stone if move is legal // renders preview stone if move is legal
let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let hover = evt.target.closest('td').id.split('-');
hover = [parseInt(hover[0]), parseInt(hover[1])]
let point = findPointFromIdx(hover); let point = findPointFromIdx(hover);
if (checkLegal(point)) { if (checkLegal(point)) {
point.legal = true; // legal point.legal = true; // legal
@ -457,7 +470,7 @@ function resolveCaptures(point) {
} }
function editTerritory(evt) { function editTerritory(evt) {
let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let placement = [ parseInt(evt.target.closest('td').id.split('-')[0]), parseInt(evt.target.closest('td').id[2]) ];
let point = findPointFromIdx(placement); let point = findPointFromIdx(placement);
point.cycleTerritory(); point.cycleTerritory();
renderGame(); renderGame();
@ -472,7 +485,9 @@ function clickBoard(evt) {
evt.stopPropagation(); evt.stopPropagation();
if (gameState.pass > 1 || gameState.winner) return editTerritory(evt); if (gameState.pass > 1 || gameState.winner) return editTerritory(evt);
// checks for placement and pushes to cell // checks for placement and pushes to cell
let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let placement = [ parseInt(evt.target.closest('td').id.split('-')[0]), parseInt(evt.target.closest('td').id.split('-')[1]) ];
console.log(placement);
console.log(evt);
let point = findPointFromIdx(placement); let point = findPointFromIdx(placement);
//checks that this placement was marked as legal //checks that this placement was marked as legal
if ( !checkLegal(point) ) return; if ( !checkLegal(point) ) return;
@ -516,7 +531,9 @@ function initBoard() {
} }
function initHandi() { function initHandi() {
// HANDI_PLACE[gameState.handicap] HANDI_PLACE[gameState.boardSize][gameState.handicap].forEach(pt => {
})
} }
function getDate() { function getDate() {
@ -544,6 +561,7 @@ function initGame() {
gameState.turn = gameState.handicap ? -1 : 1; gameState.turn = gameState.handicap ? -1 : 1;
gameState.gameMeta.start = true; gameState.gameMeta.start = true;
initBoard(); initBoard();
renderBoardInit();
renderGame(); renderGame();
} }
@ -555,10 +573,56 @@ function renderGame() {
blackNameDisplayEl.textContent = gameState.playerMeta.b.name; blackNameDisplayEl.textContent = gameState.playerMeta.b.name;
whiteNameDisplayEl.textContent = gameState.playerMeta.w.name; whiteNameDisplayEl.textContent = gameState.playerMeta.w.name;
gameState.gameRecord.length? renderTurn() : renderFirstTurn(); gameState.gameRecord.length? renderTurn() : renderFirstTurn();
renderBoard(); renderBoardState();
renderCaps(); renderCaps();
} }
function renderBoardInit() {
clearCurrentBoard();
renderBoardTableRows();
renderBoardTableStyle();
}
function clearCurrentBoard() {
boardEl.innerHTML = '';
}
function renderBoardTableStyle() {
document.querySelectorAll('#board-space td[id^="1-"]').forEach(pt => pt.className += 'top ');
document.querySelectorAll(`#board-space td[id^="${gameState.boardSize}-"]`).forEach(pt => pt.className += 'btm ');
document.querySelectorAll('#board-space td[id$="-1"]').forEach(pt => pt.className += 'lft ');
document.querySelectorAll(`#board-space td[id$="-${gameState.boardSize}"]`).forEach(pt => pt.className += 'rgt ');
}
function renderBoardTableRows() {
let i = 1;
while (i <= gameState.boardSize) {
let tableRow = document.createElement('tr');
tableRow.id = `row-${i}`;
tableRow.innerHTML = renderBoardTableCells(i);
boardEl.appendChild(tableRow);
i++
}
}
function renderBoardTableCells(x) {
let y = 1
let cells = '';
while (y <= gameState.boardSize) {
let newCell = `
<td id="${x}-${y}">
<div class="stone">
<div class="dot">
</div>
</div>
</td>
`;
cells = cells + newCell;
y++;
}
return cells;
}
function renderMessage() { function renderMessage() {
if (gameState.winner && gameState.pass < 2) { if (gameState.winner && gameState.pass < 2) {
gameHudEl.style.visibility = 'visible'; gameHudEl.style.visibility = 'visible';
@ -579,7 +643,7 @@ function renderMessage() {
function renderTerritory() { function renderTerritory() {
boardState.forEach(val => { boardState.forEach(val => {
let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0]; let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).getElementsByClassName('dot')[0];
stoneElem.setAttribute("data-dot", DOTS_DATA[val.territory]); stoneElem.setAttribute("data-dot", DOTS_DATA[val.territory]);
}) })
} }
@ -596,9 +660,9 @@ function renderTurn() {
document.querySelectorAll(`.bowl`).forEach(bowl => bowl.toggleAttribute('data-turn')); document.querySelectorAll(`.bowl`).forEach(bowl => bowl.toggleAttribute('data-turn'));
} }
function renderBoard() { function renderBoardState() {
boardState.forEach(val => { boardState.forEach(val => {
let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1]; let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).getElementsByClassName('stone')[0];
stoneElem.setAttribute("data-stone", STONES_DATA[val.stone]); stoneElem.setAttribute("data-stone", STONES_DATA[val.stone]);
}) })
} }
@ -610,7 +674,7 @@ function renderCaps() {
function renderPreview(hoverPoint) { function renderPreview(hoverPoint) {
boardState.forEach(val => { boardState.forEach(val => {
let dot = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0]; let dot = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).getElementsByClassName('dot')[0];
dot.setAttribute("data-dot", val.legal === true && val.pos[0] === hoverPoint.pos[0] && val.pos[1] === hoverPoint.pos[1] ? DOTS_DATA[gameState.turn] : DOTS_DATA[0]); dot.setAttribute("data-dot", val.legal === true && val.pos[0] === hoverPoint.pos[0] && val.pos[1] === hoverPoint.pos[1] ? DOTS_DATA[gameState.turn] : DOTS_DATA[0]);
}) })