add board index, click and hover listeners

This commit is contained in:
Sorrel Bri 2019-08-02 21:19:31 -07:00
parent ff6d72a1ba
commit 39eb90be67
3 changed files with 404 additions and 140 deletions

View file

@ -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%);
}
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 {
}

View file

@ -4,8 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/reset.css" type="stylesheet">
<link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/main.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" type="stylesheet">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/main.css" type="text/css" />
<!-- <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> -->
<script defer src="js/main.js"></script>
<title>Browser Go</title>
</head>
<body>
@ -20,104 +24,266 @@
</div>
<div id="board-space">
<table id="board">
<tr id="row-0">
<td id="0,0"></td>
<td id="0,1"></td>
<td id="0,2"></td>
<td id="0,3"></td>
<td id="0,4"></td>
<td id="0,5"></td>
<td id="0,6"></td>
<td id="0,7"></td>
<td id="0,8"></td>
</tr>
<tr id="row-1">
<td id="1,0"></td>
<td id="1,1"></td>
<td id="1,2"></td>
<td id="1,3"></td>
<td id="1,4"></td>
<td id="1,5"></td>
<td id="1,6"></td>
<td id="1,7"></td>
<td id="1,8"></td>
<td id="1,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="1,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-2">
<td id="2,0"></td>
<td id="2,1"></td>
<td id="2,2"></td>
<td id="2,3"></td>
<td id="2,4"></td>
<td id="2,5"></td>
<td id="2,6"></td>
<td id="2,7"></td>
<td id="2,8"></td>
<td id="2,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="2,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-3">
<td id="3,0"></td>
<td id="3,1"></td>
<td id="3,2"></td>
<td id="3,3"></td>
<td id="3,4"></td>
<td id="3,5"></td>
<td id="3,6"></td>
<td id="3,7"></td>
<td id="3,8"></td>
<td id="3,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="3,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-4">
<td id="4,0"></td>
<td id="4,1"></td>
<td id="4,2"></td>
<td id="4,3"></td>
<td id="4,4"></td>
<td id="4,5"></td>
<td id="4,6"></td>
<td id="4,7"></td>
<td id="4,8"></td>
<td id="4,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="4,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-5">
<td id="5,0"></td>
<td id="5,1"></td>
<td id="5,2"></td>
<td id="5,3"></td>
<td id="5,4"></td>
<td id="5,5"></td>
<td id="5,6"></td>
<td id="5,7"></td>
<td id="5,8"></td>
<td id="5,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="5,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-6">
<td id="6,0"></td>
<td id="6,1"></td>
<td id="6,2"></td>
<td id="6,3"></td>
<td id="6,4"></td>
<td id="6,5"></td>
<td id="6,6"></td>
<td id="6,7"></td>
<td id="6,8"></td>
<td id="6,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="6,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-7">
<td id="7,0"></td>
<td id="7,1"></td>
<td id="7,2"></td>
<td id="7,3"></td>
<td id="7,4"></td>
<td id="7,5"></td>
<td id="7,6"></td>
<td id="7,7"></td>
<td id="7,8"></td>
<td id="7,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="7,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-8">
<td id="8,0"></td>
<td id="8,1"></td>
<td id="8,2"></td>
<td id="8,3"></td>
<td id="8,4"></td>
<td id="8,5"></td>
<td id="8,6"></td>
<td id="8,7"></td>
<td id="8,8"></td>
<td id="8,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="8,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
<tr id="row-9">
<td id="9,1">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,2">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,3">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,4">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,5">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,6">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,7">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,8">
<div class="stone"><div class="dot"></div></div>
</td>
<td id="9,9">
<div class="stone"><div class="dot"></div></div>
</td>
</tr>
</table>
</div>

View file

@ -1,17 +1,33 @@
/*----- 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: {
@ -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 } ]];
[ [ 3, 3 ], [ 7, 7 ] ],
[ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ] ],
[ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ] ];
/*----- app's state (variables) -----*/
/*----- app's state (variables) -----*/
// define initial game state
let boardState;
// define initial game state
// Class Point {
// rPos: 1,
// cPos: 1,
// neighbors: {
// top: null,
// btm: null,
// lft: null,
// rgt: null
// }
// checkLegal: function() {
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
// 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