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; 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%); 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%); 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%); 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%); 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%); 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%); 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%); 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%); 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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <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> <title>Browser Go</title>
</head> </head>
<body> <body>
@ -20,104 +24,266 @@
</div> </div>
<div id="board-space"> <div id="board-space">
<table id="board"> <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"> <tr id="row-1">
<td id="1,0"></td> <td id="1,1">
<td id="1,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="1,2"></td> </td>
<td id="1,3"></td> <td id="1,2">
<td id="1,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="1,5"></td> </td>
<td id="1,6"></td> <td id="1,3">
<td id="1,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="1,8"></td> </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>
<tr id="row-2"> <tr id="row-2">
<td id="2,0"></td> <td id="2,1">
<td id="2,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="2,2"></td> </td>
<td id="2,3"></td> <td id="2,2">
<td id="2,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="2,5"></td> </td>
<td id="2,6"></td> <td id="2,3">
<td id="2,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="2,8"></td> </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>
<tr id="row-3"> <tr id="row-3">
<td id="3,0"></td> <td id="3,1">
<td id="3,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="3,2"></td> </td>
<td id="3,3"></td> <td id="3,2">
<td id="3,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="3,5"></td> </td>
<td id="3,6"></td> <td id="3,3">
<td id="3,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="3,8"></td> </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>
<tr id="row-4"> <tr id="row-4">
<td id="4,0"></td> <td id="4,1">
<td id="4,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="4,2"></td> </td>
<td id="4,3"></td> <td id="4,2">
<td id="4,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="4,5"></td> </td>
<td id="4,6"></td> <td id="4,3">
<td id="4,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="4,8"></td> </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>
<tr id="row-5"> <tr id="row-5">
<td id="5,0"></td> <td id="5,1">
<td id="5,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="5,2"></td> </td>
<td id="5,3"></td> <td id="5,2">
<td id="5,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="5,5"></td> </td>
<td id="5,6"></td> <td id="5,3">
<td id="5,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="5,8"></td> </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>
<tr id="row-6"> <tr id="row-6">
<td id="6,0"></td> <td id="6,1">
<td id="6,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="6,2"></td> </td>
<td id="6,3"></td> <td id="6,2">
<td id="6,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="6,5"></td> </td>
<td id="6,6"></td> <td id="6,3">
<td id="6,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="6,8"></td> </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>
<tr id="row-7"> <tr id="row-7">
<td id="7,0"></td> <td id="7,1">
<td id="7,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="7,2"></td> </td>
<td id="7,3"></td> <td id="7,2">
<td id="7,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="7,5"></td> </td>
<td id="7,6"></td> <td id="7,3">
<td id="7,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="7,8"></td> </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>
<tr id="row-8"> <tr id="row-8">
<td id="8,0"></td> <td id="8,1">
<td id="8,1"></td> <div class="stone"><div class="dot"></div></div>
<td id="8,2"></td> </td>
<td id="8,3"></td> <td id="8,2">
<td id="8,4"></td> <div class="stone"><div class="dot"></div></div>
<td id="8,5"></td> </td>
<td id="8,6"></td> <td id="8,3">
<td id="8,7"></td> <div class="stone"><div class="dot"></div></div>
<td id="8,8"></td> </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> </tr>
</table> </table>
</div> </div>

View file

@ -1,23 +1,39 @@
/*----- constants -----*/ /*----- constants -----*/
// game state object {gameMeta object, playerMeta object, turn, pass, gameRecord, bCaptures, wCaptures} // 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 = { const gameState = {
winner: null, winner: null,
turn: null, // turn logic depends on handicap stones turn: null, // turn logic depends on handicap stones
pass: null, pass: null,
komi: null, // komi depends on handicap stones komi: null, // komi depends on handicap stones
handicap: null, handicap: null,
boardSize: 9,
playerState: { playerState: {
bCaptures: null, bCaptures: null,
wCaptures: null wCaptures: null
}, },
gameMeta: { // declared at game start and not editable after gameMeta: { // declared at game start and not editable after
date: null// contains metadata date: null // contains metadata
}, },
playerMeta: { // editable during game playerMeta: { // editable during game
b: { b: {
name: null, name: null,
rank: null, rank: null,
rankCertain: false rankCertain: false
}, },
w: { w: {
name: null, name: null,
@ -25,40 +41,56 @@ const gameState = {
rankCertain: false rankCertain: false
}, },
}, },
groups: {},
gameRecord : [] gameRecord : []
} }
// boardState [point objects-contain overlay] lastState (created from boardState)
// groups? // deadShapes{}
// deadShapes{}
// index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) } // index represents handicap placement, eg handiPlace[1] = { (3, 3), (7, 7) }
const handiPlace = [ 0, const handiPlace = [ 0,
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 } ], [ [ 3, 3 ], [ 7, 7 ] ],
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 } ], [ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ] ],
[ { rPos: 3, cPos: 3 }, { rPos: 7, cPos: 7 }, { rPos: 3, cPos: 7 }, { rPos: 7, cPos: 3 } ]]; [ [ 3, 3 ], [ 7, 7 ], [ 3, 7 ], [ 7, 3 ] ] ];
/*----- app's state (variables) -----*/ /*----- app's state (variables) -----*/
// define initial game state // define initial game state
let boardState;
class Point {
// Class Point { constructor(x, y) {
// rPos: 1, this.pos = [ x, y ]
// cPos: 1, this.stone = 0; // this is where move placement will go 0, 1, -1 'k'
// neighbors: { this.overlay = 0; // this is where 'chk', 'l'
// top: null, this.neighbors = {
// btm: null, top: {},
// lft: null, btm: {},
// rgt: null lft: {},
// } rgt: {}
// checkLegal: function() { },
// 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;
// modeling 1,1 point for // 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 // define boardState and overlay as 2d 9x9 arrays
// boardState accepts values of 0, 1, -1 // boardState accepts values of 0, 1, -1
// overlay accepts values of 0, 1, -1, 'k', 'd', 'chk', 'hold', 'l', 'x' // 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 listeners for player names, ranks, rank certainty (editable during game)
//input lister for handicap + komi (only editable pre-game) //input lister for handicap + komi (only editable pre-game)
// ::hover-over on board to preview move (with legal move logic) // ::hover-over on board to preview move (with legal move logic)
document.getElementById('board').addEventListener('mousemove', checkLegal);
// click on board to play move // 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) // ::hover-over on either bowl for pass, one-level undo options (CSS implementation)
// click on menu items // click on menu items
// click on kifu to display game menu // click on kifu to display game menu
/*----- functions -----*/ /*----- functions -----*/
init(); // init();
function init() { function checkLegal(evt) {
gameState.winner = null; let hover = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
// gameState.turn = ? : ; // get turn from consequences of player input console.log(hover);
gameState.pass = null;
// gameState.komi = ; // get komi from player input }
// gameState.handicap = ; // get handicap from player input
gameState.playerState.bCaptures = 0; function placeStone(evt) {
gameState.playerState.wCaptures = 0;
// gameState.gameMeta.date = // get from browser window console.log('click!');
// get any future meta from player input let placement = [ parseInt(evt.target.parentNode.id[0]), parseInt(evt.target.parentNode.id[2]) ];
// gameState.playerMeta.b // get from player input //checks that this placement was marked as legal
// gameState.playerMeta.w // get from player input // checks for placement and pushes to cell
gameState.gameRecord = []; // clear game record from previous game boardState.find( point => {
// gameState.boardState // create board from user input // 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 // functions