From c828fad0b41c220945a9ce6aed6b758e32ac31b7 Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Sat, 3 Aug 2019 16:59:56 -0700 Subject: [PATCH] correct legal move logic for surrounding friendly stones --- css/main.css | 38 ++++++++++++++++++------- index.html | 10 ++++++- js/main.js | 80 +++++++++++++++++++++++++--------------------------- 3 files changed, 75 insertions(+), 53 deletions(-) diff --git a/css/main.css b/css/main.css index d5c3638..4a1e0b1 100644 --- a/css/main.css +++ b/css/main.css @@ -56,6 +56,14 @@ content { #kifu { order: 0; + height: 10vh; + width: 8vh; + background-color: #FFF; + transform: rotate(-20deg); +} + +#kifu table { + } .bowl { @@ -66,15 +74,18 @@ content { /* border: solid black; */ border-radius: 50%; background-color: rgb(116, 48, 17); + box-shadow: -1vmin 2vmin 3vmin rgba(83, 53, 35, 0.61); } .caps { + color: #FFF; order: 1; margin: 1vh; height: 6vh; width: 6vh; border-radius: 50%; background-color: rgb(116, 48, 17); + box-shadow: -0.5vmin 1vmin 3vmin rgba(83, 53, 35, 0.61); } #board-space { @@ -86,9 +97,14 @@ content { width: 90vmin; height: 90vmin; padding: 1vmin; + z-index: 1; + box-shadow: -2vmin 4vmin 3vmin rgba(145, 92, 23, 0.5); } -table { +#board-space::after { +} + +#board-space table { display: flex; align-items: stretch; justify-content: space-between; @@ -97,7 +113,7 @@ table { margin: auto; } -td { +#board-space td { height: 9vmin; width: 9vmin; 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%); @@ -108,33 +124,35 @@ td { vertical-align: middle; } -td[id^="1"] { +#board-space 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%); } -td[id^="9"] { +#board-space 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%); } -td[id$="1"] { +#board-space td[id$="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) 99%, #000 100%); } -td[id$="9"] { +#board-space td[id$="9"] { 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%); } -td[id="1,1"] { +#board-space td[id="1,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%); } -td[id="1,9"] { +#board-space td[id="1,9"] { 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"] { + +#board-space 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) 99%, #000 100%); } -td[id="9,9"] { + +#board-space td[id="9,9"] { 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%); } diff --git a/index.html b/index.html index a67b6ba..85c66ca 100644 --- a/index.html +++ b/index.html @@ -290,7 +290,15 @@
Black Bowl
Black Captures
-
kifu
+
+ + + + +
+ +
+
diff --git a/js/main.js b/js/main.js index 9512e01..e799faa 100644 --- a/js/main.js +++ b/js/main.js @@ -95,21 +95,20 @@ class Point { // return true if neighboring point is empty; } checkCapture = () => { - let neighborsArr = this.checkNeighbors(); - let oppStones = neighborsArr.filter(val => { - if (val.stone === gameState.turn * -1) return val; - }); - console.log(oppStones); - for ( let oppStone in oppStones ) { - console.log(oppStones[oppStone]) - console.log(oppStones[oppStone].emptyNeighbor()) // will need to call something like .liveGroup() instead - return oppStones[oppStone].emptyNeighbor(); //return - } + return !this.liveGroup(gameState.turn * -1).some(val => val.emptyNeighbor()); + } + + checkGroup = () => { + return this.liveGroup(gameState.turn).some(val => val.emptyNeighbor()); + // returns first neighbor of turn color that has an empty neighbor + } + + liveGroup = (stone) => { + return this.checkNeighbors().filter(val => { + if ( val.stone === stone ) return val; + }); + //returns an array of neighbors for the value of stone } - // return true if move would form/join a living friendly group ad - // checkGroup = () => { - // - // } } let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize); @@ -131,7 +130,7 @@ let boardCreator = new Array(gameState.boardSize).fill(gameState.boardSize); // input listeners for player names, ranks, rank certainty (editable during game) //input lister for handicap + komi (only editable pre-game) // ::hover-over on board to preview move (with legal move logic) -document.getElementById('board').addEventListener('mousemove', checkLegal); +document.getElementById('board').addEventListener('mousemove', hoverPreview); // click on board to play move document.getElementById('board').addEventListener('click', placeStone); // ::hover-over on either bowl for pass, one-level undo options (CSS implementation) @@ -143,55 +142,52 @@ init(); let findPointFromIdx = (arr) => boardState.find( point => point.pos[0] === arr[0] && point.pos[1] === arr[1] ); -function checkLegal(evt) { +function hoverPreview(evt) { + // renders preview stone if move is legal let hover = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let point = findPointFromIdx(hover); - - // working old way assigns legal - // point.overlay = point.stone !== 0 ? 0 : 'l'; - + if (checkLegal(point)) { + point.overlay = 'l'; + render(point); + } +} + +function checkLegal(point) { // first step in logic: is point occupied, or in ko - if (point.stone) return; + if (point.stone) return false; + console.log('reading empty'); + console.log(point.emptyNeighbor()) // 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 - point.checkCapture(); - // if (point.checkCapture) return point.overlay = 'l'; - //if neighboring point is not empty check if enemy group is captured - // if (point.checkGroup) return point.overlay = 'l' - - - return; - } else { - point.overlay = 'l'; + if (!point.checkCapture()) return false; + //if neighboring point is not empty check if friendly group is alive + if (!point.checkGroup()) return false; + return true; } - // if neighboring point is - - - render(point); + return true; } function placeStone(evt) { - console.log('click!'); - - let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; // checks for placement and pushes to cell + let placement = [ parseInt(evt.target.closest('td').id[0]), parseInt(evt.target.closest('td').id[2]) ]; let point = findPointFromIdx(placement); - // console.log(placement); //checks that this placement was marked as legal - point.stone = point.overlay === 'l' ? gameState.turn : point.stone; + if ( !checkLegal(point) ) return; + point.stone = gameState.turn; gameState.turn*= -1; + for (let point in boardState) { + point.overlay = ''; + } render(); } - function init() { gameState.winner = null; - // gameState.turn = ? : ; // get turn from consequences of player input gameState.pass = null; // gameState.komi = ; // get komi from player input // gameState.handicap = ; // get handicap from player input + // gameState.turn = gameState.handicap ? -1 : 1; gameState.playerState.bCaptures = 0; gameState.playerState.wCaptures = 0; // gameState.gameMeta.date = // get from browser window