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