add board size selection and rendering
This commit is contained in:
Sorrel Bri
parent
8299f02c42
commit
ddefdf3655
3 changed files with 2254 additions and 334 deletions
72
css/main.css
72
css/main.css
|
|
@ -301,8 +301,8 @@ content {
|
|||
}
|
||||
|
||||
#board-space td {
|
||||
height: 9vmin;
|
||||
width: 9vmin;
|
||||
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,35 +311,35 @@ content {
|
|||
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%);
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
#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% );
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
#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%);
|
||||
}
|
||||
|
||||
|
|
@ -423,58 +423,6 @@ td .dot .seki {
|
|||
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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
2430
index.html
2430
index.html
File diff suppressed because it is too large
Load diff
86
js/main.js
86
js/main.js
|
|
@ -113,6 +113,12 @@ const HANDI_PLACE = {
|
|||
]
|
||||
};
|
||||
|
||||
const BOARD_POINT_SIZE = {
|
||||
'9' : '9vmin',
|
||||
'13': '6vmin',
|
||||
'19' : '4vmin'
|
||||
}
|
||||
|
||||
/*----- app's state (variables) -----*/
|
||||
let boardState = [];
|
||||
|
||||
|
|
@ -236,9 +242,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 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
|
||||
|
|
@ -307,7 +319,7 @@ function clickUpdatePlayerMeta(evt) {
|
|||
|
||||
function clickBoardSize(evt) {
|
||||
evt.stopPropagation();
|
||||
gameState.boardSize = document.querySelector('#board-size-radio [checked]').value;
|
||||
gameState.boardSize = boardSizeRadioEls.find(el => el.checked === true).value;
|
||||
renderMenu();
|
||||
}
|
||||
|
||||
|
|
@ -349,7 +361,7 @@ function renderHandiSlider() {
|
|||
|
||||
function renderBoardSizeRadio() {
|
||||
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() {
|
||||
|
|
@ -413,7 +425,8 @@ function hoverPreview(evt) {
|
|||
evt.stopPropagation();
|
||||
if (gameState.pass > 1 || gameState.winner) return;
|
||||
// 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);
|
||||
if (checkLegal(point)) {
|
||||
point.legal = true; // legal
|
||||
|
|
@ -457,7 +470,7 @@ function resolveCaptures(point) {
|
|||
}
|
||||
|
||||
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);
|
||||
point.cycleTerritory();
|
||||
renderGame();
|
||||
|
|
@ -472,7 +485,9 @@ function clickBoard(evt) {
|
|||
evt.stopPropagation();
|
||||
if (gameState.pass > 1 || gameState.winner) return editTerritory(evt);
|
||||
// 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);
|
||||
//checks that this placement was marked as legal
|
||||
if ( !checkLegal(point) ) return;
|
||||
|
|
@ -516,7 +531,9 @@ function initBoard() {
|
|||
}
|
||||
|
||||
function initHandi() {
|
||||
// HANDI_PLACE[gameState.handicap]
|
||||
HANDI_PLACE[gameState.boardSize][gameState.handicap].forEach(pt => {
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
function getDate() {
|
||||
|
|
@ -544,6 +561,7 @@ function initGame() {
|
|||
gameState.turn = gameState.handicap ? -1 : 1;
|
||||
gameState.gameMeta.start = true;
|
||||
initBoard();
|
||||
renderBoardInit();
|
||||
renderGame();
|
||||
}
|
||||
|
||||
|
|
@ -555,10 +573,56 @@ function renderGame() {
|
|||
blackNameDisplayEl.textContent = gameState.playerMeta.b.name;
|
||||
whiteNameDisplayEl.textContent = gameState.playerMeta.w.name;
|
||||
gameState.gameRecord.length? renderTurn() : renderFirstTurn();
|
||||
renderBoard();
|
||||
renderBoardState();
|
||||
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() {
|
||||
if (gameState.winner && gameState.pass < 2) {
|
||||
gameHudEl.style.visibility = 'visible';
|
||||
|
|
@ -579,7 +643,7 @@ function renderMessage() {
|
|||
|
||||
function renderTerritory() {
|
||||
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]);
|
||||
})
|
||||
}
|
||||
|
|
@ -596,9 +660,9 @@ function renderTurn() {
|
|||
document.querySelectorAll(`.bowl`).forEach(bowl => bowl.toggleAttribute('data-turn'));
|
||||
}
|
||||
|
||||
function renderBoard() {
|
||||
function renderBoardState() {
|
||||
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]);
|
||||
})
|
||||
}
|
||||
|
|
@ -610,7 +674,7 @@ function renderCaps() {
|
|||
|
||||
function renderPreview(hoverPoint) {
|
||||
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]);
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in a new issue