From 56a0f22e8dacdd20cd019947ceb3a6756cd36582 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Fri, 2 Aug 2019 23:42:49 -0700 Subject: [PATCH] add simple move logic, preview and move rendering --- css/main.css | 35 +++++++++------ js/main.js | 120 ++++++++++++++++++++++++++++++++------------------- 2 files changed, 97 insertions(+), 58 deletions(-) diff --git a/css/main.css b/css/main.css index 6b5de01..162733f 100644 --- a/css/main.css +++ b/css/main.css @@ -85,6 +85,9 @@ td { 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; } td[id^="1,"] { @@ -122,34 +125,40 @@ td .stone { height: 85%; border-radius: 50%; margin: auto; + vertical-align: middle; + display: flex; + flex-direction: column; + justify-content: center; } td .stone .dot { width: 35%; height: 35%; border-radius: 50%; margin: auto; + vertical-align: middle; } -td .stone .ko { - +td .stone[data-stone="ko"] { + background-color: transparent; + border: 1vmin solid red; } -td .stone .white { - +td .stone[data-stone="white"] { + background-color: white; } -td .stone .black { +td .stone[data-stone="black"] { background-color: black; } -td .stone .transparent { - +td .stone[data-stone="none"] { + background-color: transparent; } -td .dot .white { - +td .dot[data-dot="white"] { + background-color: white; } -td .dot .black { - +td .dot[data-dot="black"] { + background-color: black; } -td .dot .transparent { - +td .dot[data-dot="none"] { + background-color: transparent; } td .dot .dame { diff --git a/js/main.js b/js/main.js index b4c4799..3be9ac9 100644 --- a/js/main.js +++ b/js/main.js @@ -1,23 +1,24 @@ /*----- constants -----*/ // game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures} -const STONES_CLASS = { +const STONES_DATA = { '-1': 'white', - '0': 'transparent', + '0': 'none', '1': 'black', 'k': 'ko' } -const DOTS_CLASS = { +const DOTS_DATA = { '-1': 'white', - '0': 'transparent', + '0': 'none', '1': 'black', 'd': 'dame', + 'l': 'legal', 's': 'seki' } const gameState = { winner: null, - turn: null, // turn logic depends on handicap stones + turn: 1, // turn logic depends on handicap stones pass: null, komi: null, // komi depends on handicap stones handicap: null, @@ -58,37 +59,38 @@ const handiPlace = [ 0, // define initial game state - class Point { - constructor(x, y) { - this.pos = [ x, y ] - this.stone = 0; // this is where move placement will go 0, 1, -1 'k' - this.overlay = 0; // this is where 'chk', 'l' - this.neighbors = { - top: {}, - btm: {}, - lft: {}, - rgt: {} - }, - // neighbor exists it's point is stored as { rPos, cPos} - this.neighbors.top = x > 1 ? [ x - 1, y ] : null; - this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null; - this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null; - this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null; - // checkLegal: function() { - // this.cellValue = (for neighbor in this.neighbors) { - // boardState.find( val => { - // if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ } - // }); - // } - // } - } - }; +class Point { + constructor(x, y) { + this.pos = [ x, y ] + this.stone = 0; // this is where move placement will go 0, 1, -1 'k' + this.overlay = 0; // this is where 'chk', 'l' + this.neighbors = { + top: {}, + btm: {}, + lft: {}, + rgt: {} + }, + // neighbor exists it's point is stored as { rPos, cPos} + this.neighbors.top = x > 1 ? [ x - 1, y ] : null; + this.neighbors.btm = x < gameState.boardSize ? [ x + 1, y ] : null; + this.neighbors.rgt = y > 1 ? [ x, y - 1 ] : null; + this.neighbors.lft = y < gameState.boardSize ? [ x, y + 1 ] : null; + // checkLegal: function() { + // this.cellValue = (for neighbor in this.neighbors) { + // boardState.find( val => { + // if ( val.pos === neighbor.pos && val.stone = 0) { /*cell empty*/ } + // }); + // } + // } + } + }; // boardState [point objects-contain overlay] lastState (created from boardState) - let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), - new Point(2,1), new Point(2,2), new Point(2,3), - new Point(3,1), new Point(3,2), new Point(3,3), - ]; +let boardState = [ new Point(1,1), new Point(1,2), new Point(1,3), + new Point(2,1), new Point(2,2), new Point(2,3), + new Point(3,1), new Point(3,2), new Point(3,3), +]; + // modeling 1,1 point for // define boardState and overlay as 2d 9x9 arrays @@ -116,26 +118,28 @@ const handiPlace = [ 0, // click on kifu to display game menu /*----- functions -----*/ -// init(); +init(); + +let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); function checkLegal(evt) { let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; - console.log(hover); - + let point = findPointFromIdx(hover); + //first step in logic: is stone occupied + point.overlay = point.stone !== 0 ? 0 : 'l'; + render(point); } function placeStone(evt) { - console.log('click!'); + let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; + // checks for placement and pushes to cell + let point = findPointFromIdx(placement); //checks that this placement was marked as legal - // checks for placement and pushes to cell - boardState.find( point => { - // gets board point and ensures legal - point.stone = point.pos[0] === placement[0] && point.pos[1] === placement[1] - && point.overlay === 'l' - ? turn : point.stone; - }); + point.stone = point.overlay === 'l' ? gameState.turn : point.stone; + gameState.turn*= -1; + render(); } function init() { @@ -154,8 +158,34 @@ function init() { // gameState.boardState // create board from user input //need init player meta + + render(); }; +function render(hoverPoint) { + // console.log('render'); + renderBoard(); + renderPreview(hoverPoint); +} + +function renderBoard() { + boardState.forEach(val => { + let stone = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1]; + // console.log(stone); + stone.setAttribute("data-stone", STONES_DATA[val.stone]); + // console.log(val.stone); + // console.log(stone); + }) +} + +function renderPreview(hoverPoint) { + boardState.forEach(val => { + let dot = document.getElementById(`${val.pos[0]},${val.pos[1]}`).childNodes[1].childNodes[0]; + console.log(); + dot.setAttribute("data-dot", val.overlay === 'l' && val.pos[0] === hoverPoint.pos[0] && val.pos[1] === hoverPoint.pos[1] ? DOTS_DATA[gameState.turn] : DOTS_DATA[0]); + + }) +} // functions // initialize game