oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

add render hoshi on game start

Browse source
This commit is contained in:
Sorrel Bri 2019-08-08 12:22:33 -07:00
parent eaa25b91ca
commit 1d9afdfd6d
2 changed files with 24 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
css/main.css
View file

@ -358,11 +358,11 @@ content {
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%);
} }
#board-space td * * div.hoshi { /* to be added later */ .dot.hoshi { /* to be added later */
background: radial-gradient(circle farthest-corner at center, #000 0%, #000 30%, rgba(0,0,0,0) 50%); background: radial-gradient(circle farthest-corner at center, #000 0%, #000 44%, rgba(0,0,0,0) 45%);
z-index: 3; z-index: 3;
width: 100%; width: 100%;
height: 100% height: 100%;
} }
td .stone { td .stone {

35
js/main.js
View file

@ -85,7 +85,7 @@ const gameState = { // pre-init values (render prior to any player input)
const HANDI_PLACE = { const HANDI_PLACE = {
'9' : [ '9' : [
0, 0, 0, 0,
[ [ 7, 3 ], [ 3, 7 ] ], [[ 7, 3 ], [ 3, 7 ] ],
[ [ 7, 7 ], [ 7, 3 ], [ 3, 7 ] ], [ [ 7, 7 ], [ 7, 3 ], [ 3, 7 ] ],
[ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ] [ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ]
], ],
@ -261,7 +261,10 @@ document.querySelector('input[name="game-start"]').addEventListener('click', cli
/*----- functions -----*/ /*----- functions -----*/
init(); init();
let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); function findPointFromIdx(arr) {
console.log(arr);
return pointFromIdx = boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] );
}
function changeUpdateKomi(evt) { function changeUpdateKomi(evt) {
evt.stopPropagation(); evt.stopPropagation();
@ -511,12 +514,16 @@ function initBoard() {
boardState.push(point); boardState.push(point);
i++; i++;
} }
// initHandi(); initHandi();
} }
function initHandi() { function initHandi() {
if (gameState.handicap < 2) return;
HANDI_PLACE[gameState.boardSize][gameState.handicap].forEach(pt => { HANDI_PLACE[gameState.boardSize][gameState.handicap].forEach(pt => {
if (!pt) return;
let handi = findPointFromIdx(pt);
handi.stone = 1;
handi.joinGroup();
}) })
} }
@ -562,25 +569,25 @@ function renderGame() {
} }
function renderBoardInit() { function renderBoardInit() {
clearCurrentBoard(); renderClearBoard();
renderBoardTableRows(); renderBoardTableRows();
renderHoshi(); renderHoshi();
renderBoardTableStyle(); renderBoardTableStyle();
} }
function renderHoshi() { function renderHoshi() { // gets hoshi placement from handiplace const and adds a class to dot elem
let hoshi = HANDI_PLACE[gameState.boardSize].slice(-1); let hoshi = HANDI_PLACE[gameState.boardSize].slice(-1);
console.log(hoshi); hoshi = hoshi[0]
hoshi.forEach(star => { hoshi.forEach(star => {
console.log(star); console.log(hoshi);
let starPt = findPointFromIdx(star); console.log(`star: ${star[0][0]}
console.log(starPt); ${star[0][1]} end star`)
// .getElementsByClassName['dot'].style.className += ' hoshi' }); let boardPt = document.getElementById(`${star[0]}-${star[1]}`).getElementsByClassName('dot')[0];
}) console.log(boardPt);
boardPt.className += ' hoshi' });
} }
// HANDI_PLACE[gameState.boardSize].slice(-1) [0] [0][0] === boardState[20].pos[0]
function clearCurrentBoard() { function renderClearBoard() {
boardEl.innerHTML = ''; boardEl.innerHTML = '';
boardEl.classList = ''; boardEl.classList = '';
} }