add resign and pass endgame
This commit is contained in:
Sorrel Bri
parent
3d9aca00f9
commit
589053dc8d
3 changed files with 346 additions and 294 deletions
38
css/main.css
38
css/main.css
|
|
@ -96,6 +96,10 @@ div[data-player-meta] input {
|
|||
margin: 1vmin;
|
||||
}
|
||||
|
||||
#confirm {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
div[data-player-meta] label {
|
||||
margin: .25em;
|
||||
font-size: 100%;
|
||||
|
|
@ -109,6 +113,8 @@ div[data-player-meta] label {
|
|||
padding: .5em;
|
||||
line-height: 1.5;
|
||||
overflow: scroll;
|
||||
height: 100%;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#instructions, #game-record{
|
||||
|
|
@ -228,6 +234,18 @@ content {
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
.caps-space :first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bowl[data-turn] + .name-space .caps-space:hover :first-child {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background-color: rgba(0,0,0,0.7);
|
||||
padding: .5em;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.name-space {
|
||||
order: 1;
|
||||
display: flex;
|
||||
|
|
@ -240,12 +258,29 @@ content {
|
|||
color: rgb(255,240,230)
|
||||
}
|
||||
|
||||
#board-container {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-areas: 100%;
|
||||
grid-template-columns: 100%;
|
||||
grid-template-areas:
|
||||
"board";
|
||||
}
|
||||
|
||||
#board-underlay {
|
||||
grid-area: board;
|
||||
background-color: rgb(255, 255, 255);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#board-space {
|
||||
grid-area: board;
|
||||
margin: 0 auto;
|
||||
/* grid-area: board-space; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: #EAB24E;
|
||||
background-color: rgba(234, 178, 78, 1);
|
||||
/* width: 90vmin; */
|
||||
/* height: 90vmin; */
|
||||
padding: 1vmin;
|
||||
|
|
@ -254,6 +289,7 @@ content {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
|
||||
#board-space table {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
|
|
|||
546
index.html
546
index.html
|
|
@ -38,7 +38,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="game-record-space">
|
||||
<p id="instructions">Welcome to Browser Go!<br><br>If this is your first time playing Go, please see
|
||||
<p id="instructions"><span class="menu-heading">Welcome to Browser Go!</span><br><br>If this is your first time playing Go, please see
|
||||
<a href="https://www.youtube.com/watch?v=gECcsSeRcNo" target="_blank">this great tutorial video.</a><br><br>
|
||||
To begin a game enter player names and ranks above, then click "Suggest Komi" Browser Go will calculate the appropriate komi based on AGA guidelines.
|
||||
To override Browser Go's suggestion, use the sliders above. Be sure to check the 'rank certainty' box if you're club-rated.<br><br>
|
||||
|
|
@ -60,280 +60,288 @@
|
|||
<div id="white-bowl" class="bowl"><p>Pass?</p><div id="stone-image"></div></div>
|
||||
<div id="white-player-space" class="name-space">
|
||||
<h4 id="white-player-name">Test Name rk</h4>
|
||||
<div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
|
||||
<div id="white-caps-space" class="caps-space"><p>Resign?</p><p id="white-caps"></p></div>
|
||||
</div>
|
||||
<div id="game-hud">
|
||||
<p></p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="board-space">
|
||||
<table id="board">
|
||||
<tr id="row-1">
|
||||
<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-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-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-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-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-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-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-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 id="board-container">
|
||||
<div id="board-space">
|
||||
<table id="board">
|
||||
<tr id="row-1">
|
||||
<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-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-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-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-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-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-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-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>
|
||||
<div id="table-underlay">
|
||||
</div>
|
||||
</div>
|
||||
<div id="black-pos" class="player-pos">
|
||||
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
||||
<div id="black-player-space" class="name-space">
|
||||
<h4 id="black-player-name">Test Name rk</h4>
|
||||
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
||||
</div> <div id="kifu">
|
||||
<h4 id="black-player-name">Test Name rk</h4>
|
||||
<div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div>
|
||||
</div>
|
||||
<div id="kifu">
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
56
js/main.js
56
js/main.js
|
|
@ -107,13 +107,10 @@ class Point {
|
|||
for (let frn of frns) {
|
||||
this.groupMembers.push(frn);
|
||||
}
|
||||
console.log(this);
|
||||
console.log(this.groupMembers)
|
||||
// this.groupMembers = Array.from(new Set(this.groupMembers));
|
||||
if (!this.groupMembers.length) return;
|
||||
for (let grpMem in this.groupMembers) {
|
||||
debugger;
|
||||
console.log(this);
|
||||
this.groupMembers = Array.from(new Set(this.groupMembers.concat(this.groupMembers[grpMem].groupMembers)));
|
||||
}
|
||||
for (let grpMem in this.groupMembers) {
|
||||
|
|
@ -126,8 +123,6 @@ class Point {
|
|||
&& nbr.getLiberties().every(liberty => liberty === this));
|
||||
for (let opp of opps) {
|
||||
if (opp.groupMembers.every(stone => stone.getLiberties().filter(liberty => liberty !== this).length === 0)) {
|
||||
console.log(opp);
|
||||
console.log(opp.groupMembers);
|
||||
this.capturing = this.capturing.concat(opp.groupMembers);
|
||||
};
|
||||
}
|
||||
|
|
@ -163,8 +158,10 @@ const blackRankDownEl = document.getElementById("black-rank-down");
|
|||
const whiteRankEl = document.getElementById("white-rank");
|
||||
const whiteRankUpEl = document.getElementById("black-rank-up");
|
||||
const whiteRankDownEl = document.getElementById("black-rank-down");
|
||||
const blackNameEl = document.querySelector("input[name='black-name']")
|
||||
const whiteNameEl = document.querySelector("input[name='white-name']")
|
||||
const blackNameInputEl = document.querySelector("input[name='black-name']")
|
||||
const whiteNameInputEl = document.querySelector("input[name='white-name']")
|
||||
const blackNameDisplayEl = document.querySelector("h4#black-player-name");
|
||||
const whiteNameDisplayEl = document.querySelector("h4#white-player-name");
|
||||
|
||||
// store modal #menu for displaying game info
|
||||
// store
|
||||
|
|
@ -206,7 +203,6 @@ function changeUpdateHandicap() {
|
|||
}
|
||||
|
||||
function clickUpdatePlayerMeta(evt) {
|
||||
evt.stopPropagation;
|
||||
switch (evt.target.id) {
|
||||
case 'black-rank-up':
|
||||
gameState.playerMeta.b.rank++;
|
||||
|
|
@ -221,16 +217,25 @@ function clickUpdatePlayerMeta(evt) {
|
|||
gameState.playerMeta.w.rank--;
|
||||
break;
|
||||
}
|
||||
console.log(evt);
|
||||
if (evt.target.name = 'black-rank-certain') gameState.playerMeta.b.rankCertain = !gameState.playerMeta.b.rankCertain;
|
||||
if (evt.target.name = 'white-rank-certain') gameState.playerMeta.w.rankCertain = !gameState.playerMeta.w.rankCertain;
|
||||
if (evt.target.name = 'black-name') gameState.playerMeta.b.name = blackNameEl.value;
|
||||
if (evt.target.name = 'white-name') gameState.playerMeta.w.name = whiteNameEl.value;
|
||||
|
||||
blackRankEl.textContent = RANKS[gameState.playerMeta.b.rank];
|
||||
whiteRankEl.textContent = RANKS[gameState.playerMeta.w.rank];
|
||||
|
||||
}
|
||||
|
||||
function clickKomiSuggestion() {
|
||||
//
|
||||
}
|
||||
|
||||
function clickSubmitStart() {
|
||||
|
||||
gameState.playerMeta.b.name = blackNameInputEl.value;
|
||||
gameState.playerMeta.w.name = whiteNameInputEl.value;
|
||||
blackNameDisplayEl.textContent = gameState.playerMeta.b.name;
|
||||
whiteNameDisplayEl.textContent = gameState.playerMeta.w.name;
|
||||
}
|
||||
|
||||
function clickPass(evt) {
|
||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
||||
}
|
||||
|
|
@ -264,7 +269,10 @@ function clickResign(evt) {
|
|||
|
||||
function playerResign() {
|
||||
// display confirmation message
|
||||
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: resign`)
|
||||
if (!confirm('Do you want to resign?')) return;
|
||||
|
||||
gameState.gameRecord.push(`${STONES_DATA[gameState.turn]}: resign`);
|
||||
gameState.winner = STONES_DATA[gameState.turn * -1];
|
||||
endGame();
|
||||
}
|
||||
|
||||
|
|
@ -316,11 +324,6 @@ function resolveCaptures(point) {
|
|||
}
|
||||
|
||||
function checkKo(point, cap) {
|
||||
console.log(point);
|
||||
console.log(point.getLiberties());
|
||||
console.log(cap);
|
||||
console.log(cap.checkNeighbors());
|
||||
console.log(`${STONES_DATA[gameState.turn]}: ${point.pos[0]},${point.pos[1]}`)
|
||||
if (!point.getLiberties().length && cap.checkNeighbors().filter(stone => stone.stone === gameState.turn * -1)
|
||||
&& point.capturing.length === 1) return true;
|
||||
}
|
||||
|
|
@ -488,20 +491,22 @@ function init() {
|
|||
function render(hoverPoint) {
|
||||
if (gameState.winner || gameState.pass > 1) {
|
||||
renderTerritory();
|
||||
renderMessage();
|
||||
}
|
||||
gameState.gameRecord.length? renderTurn() : renderFirstTurn();
|
||||
renderBoard();
|
||||
renderCaps();
|
||||
}
|
||||
|
||||
function renderMessage() {
|
||||
|
||||
}
|
||||
|
||||
function renderTerritory() {
|
||||
console.log('rendering territory')
|
||||
boardState.forEach(val => {
|
||||
let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0];
|
||||
console.log(stoneElem)
|
||||
stoneElem.setAttribute("data-dot", DOTS_DATA[val.territory]);
|
||||
})
|
||||
console.log('rendering finished')
|
||||
}
|
||||
|
||||
function renderFirstTurn() {
|
||||
|
|
@ -537,18 +542,21 @@ function renderPreview(hoverPoint) {
|
|||
}
|
||||
|
||||
function endGameSetTerritory() {
|
||||
console.log('ending game');
|
||||
boardState.forEach(pt => {
|
||||
pt.territory = pt.stone ? 'd' : 'd'
|
||||
console.log(pt);
|
||||
pt.territory = pt.stone ? pt.stone : 'd'
|
||||
});
|
||||
boardState.filter(pt => {
|
||||
return pt.groupMembers.length < 6 && pt.stone
|
||||
}).forEach(pt => pt.territory = pt.stone * -1);
|
||||
}
|
||||
|
||||
function endGame() {
|
||||
if (!gameState.winner)
|
||||
endGameSetTerritory()
|
||||
|
||||
// join all remaining groups
|
||||
// check remaining groups life
|
||||
|
||||
// search empty spaces on board for deadShapes
|
||||
// compare spaces to rotations of deadShapes[...]
|
||||
// 'd' if empty spaces
|
||||
|
|
|
|||
Loading…
Reference in a new issue