From 39eb90be671390a2869c8db628431bdd861fab3e Mon Sep 17 00:00:00 2001 From: Sorrel Bri Date: Fri, 2 Aug 2019 21:19:31 -0700 Subject: [PATCH] add board index, click and hover listeners --- css/main.css | 60 +++++++-- index.html | 336 ++++++++++++++++++++++++++++++++++++++------------- js/main.js | 148 ++++++++++++++++------- 3 files changed, 404 insertions(+), 140 deletions(-) diff --git a/css/main.css b/css/main.css index 1959bdc..6b5de01 100644 --- a/css/main.css +++ b/css/main.css @@ -87,32 +87,74 @@ td { color: black; } -td[id^="0,"] { +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-8 td { +#row-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) 74%, #000 75%, rgba(0,0,0,0) 76%, rgba(0,0,0,0) 99%, #000 100%); } -td[id$="0"] { +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$="8"] { +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="0,0"] { +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%); } -td#0,8 { +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%); } -td#8,0 { +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%); } -td#8,8 { +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%); -} \ No newline at end of file +} + +td .stone { + width: 85%; + height: 85%; + border-radius: 50%; + margin: auto; +} +td .stone .dot { + width: 35%; + height: 35%; + border-radius: 50%; + margin: auto; +} + +td .stone .ko { + +} +td .stone .white { + +} +td .stone .black { + background-color: black; +} +td .stone .transparent { + +} +td .dot .white { + +} +td .dot .black { + +} +td .dot .transparent { + +} +td .dot .dame { + +} +td .dot .seki { + +} + diff --git a/index.html b/index.html index 3c7dba3..b131af1 100644 --- a/index.html +++ b/index.html @@ -4,8 +4,12 @@ - - + + + + + + Browser Go @@ -20,104 +24,266 @@
- - - - - - - - - - - - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + - - - - - - - - - + + + + + + + + + + + + + + + + + + + +
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+ 		+
+
diff --git a/js/main.js b/js/main.js index 0a5ce43..b4c4799 100644 --- a/js/main.js +++ b/js/main.js @@ -1,23 +1,39 @@ /*----- constants -----*/ // game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures} +const STONES_CLASS = { + '-1': 'white', + '0': 'transparent', + '1': 'black', + 'k': 'ko' +} + +const DOTS_CLASS = { + '-1': 'white', + '0': 'transparent', + '1': 'black', + 'd': 'dame', + 's': 'seki' +} + const gameState = { winner: null, turn: null, // turn logic depends on handicap stones pass: null, komi: null, // komi depends on handicap stones handicap: null, + boardSize: 9, playerState: { bCaptures: null, wCaptures: null }, gameMeta: { // declared at game start and not editable after - date: null// contains metadata + date: null // contains metadata }, playerMeta: { // editable during game b: { name: null, rank: null, - rankCertain: false + rankCertain: false }, w: { name: null, @@ -25,40 +41,56 @@ const gameState = { rankCertain: false }, }, + groups: {}, gameRecord : [] } - // boardState [point objects-contain overlay] lastState (created from boardState) - // groups? - // deadShapes{} + +// deadShapes{} // index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) } const handiPlace = [ 0, - [ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 } ], - [ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 } ], - [ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 }, { rPos: 7, cPos: 3 } ]]; - -/*----- app's state (variables) -----*/ - -// define initial game state -let boardState; - -// Class Point { -// rPos: 1, -// cPos: 1, -// neighbors: { -// top: null, -// btm: null, -// lft: null, -// rgt: null -// } -// checkLegal: function() { - -// } -// } - - - // modeling 1,1 point for + [ [ 3, 3 ], [ 7, 7 ] ], + [ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ] ], + [ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ] ]; + + /*----- app's state (variables) -----*/ + + // 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*/ } + // }); + // } + // } + } + }; + + // 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), + ]; + + // modeling 1,1 point for // define boardState and overlay as 2d 9x9 arrays // boardState accepts values of 0, 1, -1 // overlay accepts values of 0, 1, -1, 'k', 'd', 'chk', 'hold', 'l', 'x' @@ -76,29 +108,53 @@ let boardState; // 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); // 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) // click on menu items // click on kifu to display game menu /*----- functions -----*/ -init(); +// init(); - 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.playerState.bCaptures = 0; - gameState.playerState.wCaptures = 0; - // gameState.gameMeta.date = // get from browser window - // get any future meta from player input - // gameState.playerMeta.b // get from player input - // gameState.playerMeta.w // get from player input - gameState.gameRecord = []; // clear game record from previous game - // gameState.boardState // create board from user input - }; +function checkLegal(evt) { + let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; + console.log(hover); + +} + +function placeStone(evt) { + + console.log('click!'); + let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ]; + //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; + }); +} + +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.playerState.bCaptures = 0; + gameState.playerState.wCaptures = 0; + // gameState.gameMeta.date = // get from browser window + // get any future meta from player input + // gameState.playerMeta.b // get from player input + // gameState.playerMeta.w // get from player input + gameState.gameRecord = []; // clear game record from previous game + // gameState.boardState // create board from user input + + //need init player meta +}; // functions