add board index, click and hover listeners
This commit is contained in:
Sorrel Bri
parent
ff6d72a1ba
commit
39eb90be67
3 changed files with 404 additions and 140 deletions
60
css/main.css
60
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%);
|
||||
}
|
||||
}
|
||||
|
||||
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 {
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
336
index.html
336
index.html
|
|
@ -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>
|
||||
|
|
|
|||
148
js/main.js
148
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue