diff --git a/README.md b/README.md index 7c6126d..9d64813 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Go +# Browser Go #### Minimum Deliverable Product a working game of go for a 9x9 board that diff --git a/css/main.css b/css/main.css index 162733f..d5c3638 100644 --- a/css/main.css +++ b/css/main.css @@ -1,6 +1,11 @@ * { box-sizing: border-box; margin: 0; + vertical-align: middle; +} + +body { + display: block; } .full-screen { @@ -12,21 +17,27 @@ "b-player-info*2 w-player-info*2" <- name, rank, rank-certainty "record record record options" <- displays numbered record (stretch!), new game, get game record(stretch!) pre-game record will display instructions - */ + */ } content { background-color: #61a6c2; - display: grid; + /* display: grid; grid-template-columns: 100vmin; grid-template-rows: 1fr 100vmin 1fr; grid-template-areas: "white-pos" "board-space" - "black-pos" + "black-pos"; */ + display: flex; + flex-direction: column; + /* justify-content: flex-end; */ + justify-content: space-between !important; + justify-items: stretch !important; } .player-pos { + /* flex-grow: 2; */ display: flex; align-content: center; align-items: center; @@ -34,11 +45,12 @@ content { } .player-pos#white-pos { - grid-area: white-pos; + /* grid-area: white-pos; */ + } .player-pos#black-pos { - grid-area: black-pos; + /* grid-area: black-pos; */ flex-direction: row-reverse; } @@ -48,20 +60,26 @@ content { .bowl { order: -1; - margin: 20px; + margin: 1vh; height: 8vh; width: 8vh; - border: solid black; + /* border: solid black; */ border-radius: 50%; + background-color: rgb(116, 48, 17); } .caps { order: 1; + margin: 1vh; + height: 6vh; + width: 6vh; + border-radius: 50%; + background-color: rgb(116, 48, 17); } #board-space { margin: 0 auto; - grid-area: board-space; + /* grid-area: board-space; */ display: flex; flex-direction: column; background-color: #EAB24E; @@ -90,11 +108,11 @@ td { vertical-align: middle; } -td[id^="1,"] { +td[id^="1"] { 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%); } -#row-9 td { +td[id^="9"] { 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%); } @@ -107,17 +125,17 @@ td[id$="9"] { } td[id="1,1"] { - 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%); + 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%); } td[id="1,9"] { - 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( 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% ); } td[id="9,1"] { - 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) 99%, #000 100%); } td[id="9,9"] { - 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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); } td .stone { diff --git a/index.html b/index.html index b131af1..a67b6ba 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,7 @@ - + @@ -20,7 +20,7 @@
White Bowl
-
White Captures
+
White Caps
diff --git a/js/main.js b/js/main.js index 3be9ac9..9a1ff95 100644 --- a/js/main.js +++ b/js/main.js @@ -12,7 +12,6 @@ const DOTS_DATA = { '0': 'none', '1': 'black', 'd': 'dame', - 'l': 'legal', 's': 'seki' } @@ -69,28 +68,58 @@ class Point { 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*/ } - // }); - // } - // } - } - }; + } + // first + checkNeighbors = () => { + let neighborsArr = []; + for ( let neighbor in this.neighbors ) { + let nbr = this.neighbors[neighbor]; + console.log(nbr !== null) + // neighbor exists it's point is stored as { rPos, cPos} + if ( nbr !== null ) { + neighborsArr.push(boardState.find( val => val.pos[0] === nbr[0] && val.pos[1] === nbr[1] )) + } + }; + // returns array of existing neighbors to calling function + return neighborsArr; + } + emptyNeighbor = () => { + let neighborsArr = this.checkNeighbors(); + return !!neighborsArr.find(val => val.stone === 0); + // return true if neighboring point is empty; + } + captureNeighbor = () => { + let neighborsArr = this.checkNeighbors(); + // neighborsArr.find(val => val.point === turn * -1 ); + // console.log(neighborsArr.find(val => val.point === turn * -1 )) + } + // captureNeighbor = () + // livingNeighbor() +} + + // 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(1,4), new Point(1,5), new Point(1,6), new Point(1,7), new Point(1,8), new Point(1,9), + new Point(2,1), new Point(2,2), new Point(2,3), new Point(2,4), new Point(2,5), new Point(2,6), new Point(2,7), new Point(2,8), new Point(2,9), + new Point(3,1), new Point(3,2), new Point(3,3), new Point(3,4), new Point(3,5), new Point(3,6), new Point(3,7), new Point(3,8), new Point(3,9), + new Point(4,1), new Point(4,2), new Point(4,3), new Point(4,4), new Point(4,5), new Point(4,6), new Point(4,7), new Point(4,8), new Point(4,9), + new Point(5,1), new Point(5,2), new Point(5,3), new Point(5,4), new Point(5,5), new Point(5,6), new Point(5,7), new Point(5,8), new Point(5,9), + new Point(6,1), new Point(6,2), new Point(6,3), new Point(6,4), new Point(6,5), new Point(6,6), new Point(6,7), new Point(6,8), new Point(6,9), + new Point(7,1), new Point(7,2), new Point(7,3), new Point(7,4), new Point(7,5), new Point(7,6), new Point(7,7), new Point(7,8), new Point(7,9), + new Point(8,1), new Point(8,2), new Point(8,3), new Point(8,4), new Point(8,5), new Point(8,6), new Point(8,7), new Point(8,8), new Point(8,9), + new Point(9,1), new Point(9,2), new Point(9,3), new Point(9,4), new Point(9,5), new Point(9,6), new Point(9,7), new Point(9,8), new Point(9,9) ]; +boardState[0].checkNeighbors(); +boardState[1].checkNeighbors(); +boardState[2].checkNeighbors(); + // modeling 1,1 point for // define boardState and overlay as 2d 9x9 arrays @@ -123,19 +152,37 @@ 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]) ]; + let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let point = findPointFromIdx(hover); - //first step in logic: is stone occupied - point.overlay = point.stone !== 0 ? 0 : 'l'; + + // working old way assigns legal + // point.overlay = point.stone !== 0 ? 0 : 'l'; + + // first step in logic: is point occupied, or in ko + if (point.stone) return; + // if point is not empty check if neighboring point is empty + if (!point.emptyNeighbor()) { + //if neighboring point is not empty check if friendly group is alive + + //if neighboring point is not empty check if enemy group is captured + + } else { + point.overlay = 'l'; + } + // if neighboring point is + + + render(point); } function placeStone(evt) { console.log('click!'); - let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; + let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; // checks for placement and pushes to cell let point = findPointFromIdx(placement); + // console.log(placement); //checks that this placement was marked as legal point.stone = point.overlay === 'l' ? gameState.turn : point.stone; gameState.turn*= -1;