From ddefdf36551e00b0a9d729f4b612209ccb03d0f9 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Wed, 7 Aug 2019 23:52:13 -0700 Subject: [PATCH] add board size selection and rendering --- css/main.css | 72 +- index.html | 2430 ++++++++++++++++++++++++++++++++++++++++++++------ js/main.js | 86 +- 3 files changed, 2254 insertions(+), 334 deletions(-) diff --git a/css/main.css b/css/main.css index 47d8582..81f4619 100644 --- a/css/main.css +++ b/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; - } } diff --git a/index.html b/index.html index f4ea966..34607b3 100644 --- a/index.html +++ b/index.html @@ -84,267 +84,2175 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + +
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
- 		-
-
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+
+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ + 		+
+
+
+
+ 		+
+
+
+
+
diff --git a/js/main.js b/js/main.js index 8f4fa65..c97fb0c 100644 --- a/js/main.js +++ b/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 = ` + +
+
+
+
+ + `; + 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]); })