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;
|
margin: 1vmin;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#confirm {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
div[data-player-meta] label {
|
div[data-player-meta] label {
|
||||||
margin: .25em;
|
margin: .25em;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
|
|
@ -109,6 +113,8 @@ div[data-player-meta] label {
|
||||||
padding: .5em;
|
padding: .5em;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
overflow: scroll;
|
overflow: scroll;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
#instructions, #game-record{
|
#instructions, #game-record{
|
||||||
|
|
@ -228,6 +234,18 @@ content {
|
||||||
justify-content: center;
|
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 {
|
.name-space {
|
||||||
order: 1;
|
order: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -240,12 +258,29 @@ content {
|
||||||
color: rgb(255,240,230)
|
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 {
|
#board-space {
|
||||||
|
grid-area: board;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
/* grid-area: board-space; */
|
/* grid-area: board-space; */
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
background-color: #EAB24E;
|
background-color: rgba(234, 178, 78, 1);
|
||||||
/* width: 90vmin; */
|
/* width: 90vmin; */
|
||||||
/* height: 90vmin; */
|
/* height: 90vmin; */
|
||||||
padding: 1vmin;
|
padding: 1vmin;
|
||||||
|
|
@ -254,6 +289,7 @@ content {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#board-space table {
|
#board-space table {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
|
|
||||||
546
index.html
546
index.html
|
|
@ -38,7 +38,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="game-record-space">
|
<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>
|
<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 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>
|
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-bowl" class="bowl"><p>Pass?</p><div id="stone-image"></div></div>
|
||||||
<div id="white-player-space" class="name-space">
|
<div id="white-player-space" class="name-space">
|
||||||
<h4 id="white-player-name">Test Name rk</h4>
|
<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>
|
</div>
|
||||||
<div id="board-space">
|
<div id="board-container">
|
||||||
<table id="board">
|
<div id="board-space">
|
||||||
<tr id="row-1">
|
<table id="board">
|
||||||
<td id="1-1">
|
<tr id="row-1">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="1-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="1-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-2">
|
</tr>
|
||||||
<td id="2-1">
|
<tr id="row-2">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="2-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="2-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-3">
|
</tr>
|
||||||
<td id="3-1">
|
<tr id="row-3">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="3-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="3-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-4">
|
</tr>
|
||||||
<td id="4-1">
|
<tr id="row-4">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="4-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="4-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-5">
|
</tr>
|
||||||
<td id="5-1">
|
<tr id="row-5">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="5-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="5-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-6">
|
</tr>
|
||||||
<td id="6-1">
|
<tr id="row-6">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="6-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="6-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-7">
|
</tr>
|
||||||
<td id="7-1">
|
<tr id="row-7">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="7-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="7-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-8">
|
</tr>
|
||||||
<td id="8-1">
|
<tr id="row-8">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="8-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="8-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
<tr id="row-9">
|
</tr>
|
||||||
<td id="9-1">
|
<tr id="row-9">
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-1">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-2">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-2">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-3">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-3">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-4">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-4">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-5">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-5">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-6">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-6">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-7">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-7">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-8">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-8">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
<td id="9-9">
|
</td>
|
||||||
<div class="stone"><div class="dot"></div></div>
|
<td id="9-9">
|
||||||
</td>
|
<div class="stone"><div class="dot"></div></div>
|
||||||
</tr>
|
</td>
|
||||||
</table>
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div id="table-underlay">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="black-pos" class="player-pos">
|
<div id="black-pos" class="player-pos">
|
||||||
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
<div id="black-bowl" class="bowl"><p>Pass?</p></div>
|
||||||
<div id="black-player-space" class="name-space">
|
<div id="black-player-space" class="name-space">
|
||||||
<h4 id="black-player-name">Test Name rk</h4>
|
<h4 id="black-player-name">Test Name rk</h4>
|
||||||
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
|
<div id="black-caps-space" class="caps-space"><p>Resign?</p><p id="black-caps"></p></div>
|
||||||
</div> <div id="kifu">
|
</div>
|
||||||
|
<div id="kifu">
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
||||||
56
js/main.js
56
js/main.js
|
|
@ -107,13 +107,10 @@ class Point {
|
||||||
for (let frn of frns) {
|
for (let frn of frns) {
|
||||||
this.groupMembers.push(frn);
|
this.groupMembers.push(frn);
|
||||||
}
|
}
|
||||||
console.log(this);
|
|
||||||
console.log(this.groupMembers)
|
|
||||||
// this.groupMembers = Array.from(new Set(this.groupMembers));
|
// this.groupMembers = Array.from(new Set(this.groupMembers));
|
||||||
if (!this.groupMembers.length) return;
|
if (!this.groupMembers.length) return;
|
||||||
for (let grpMem in this.groupMembers) {
|
for (let grpMem in this.groupMembers) {
|
||||||
debugger;
|
debugger;
|
||||||
console.log(this);
|
|
||||||
this.groupMembers = Array.from(new Set(this.groupMembers.concat(this.groupMembers[grpMem].groupMembers)));
|
this.groupMembers = Array.from(new Set(this.groupMembers.concat(this.groupMembers[grpMem].groupMembers)));
|
||||||
}
|
}
|
||||||
for (let grpMem in this.groupMembers) {
|
for (let grpMem in this.groupMembers) {
|
||||||
|
|
@ -126,8 +123,6 @@ class Point {
|
||||||
&& nbr.getLiberties().every(liberty => liberty === this));
|
&& nbr.getLiberties().every(liberty => liberty === this));
|
||||||
for (let opp of opps) {
|
for (let opp of opps) {
|
||||||
if (opp.groupMembers.every(stone => stone.getLiberties().filter(liberty => liberty !== this).length === 0)) {
|
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);
|
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 whiteRankEl = document.getElementById("white-rank");
|
||||||
const whiteRankUpEl = document.getElementById("black-rank-up");
|
const whiteRankUpEl = document.getElementById("black-rank-up");
|
||||||
const whiteRankDownEl = document.getElementById("black-rank-down");
|
const whiteRankDownEl = document.getElementById("black-rank-down");
|
||||||
const blackNameEl = document.querySelector("input[name='black-name']")
|
const blackNameInputEl = document.querySelector("input[name='black-name']")
|
||||||
const whiteNameEl = document.querySelector("input[name='white-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 modal #menu for displaying game info
|
||||||
// store
|
// store
|
||||||
|
|
@ -206,7 +203,6 @@ function changeUpdateHandicap() {
|
||||||
}
|
}
|
||||||
|
|
||||||
function clickUpdatePlayerMeta(evt) {
|
function clickUpdatePlayerMeta(evt) {
|
||||||
evt.stopPropagation;
|
|
||||||
switch (evt.target.id) {
|
switch (evt.target.id) {
|
||||||
case 'black-rank-up':
|
case 'black-rank-up':
|
||||||
gameState.playerMeta.b.rank++;
|
gameState.playerMeta.b.rank++;
|
||||||
|
|
@ -221,16 +217,25 @@ function clickUpdatePlayerMeta(evt) {
|
||||||
gameState.playerMeta.w.rank--;
|
gameState.playerMeta.w.rank--;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
console.log(evt);
|
|
||||||
if (evt.target.name = 'black-rank-certain') gameState.playerMeta.b.rankCertain = !gameState.playerMeta.b.rankCertain;
|
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 = '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];
|
blackRankEl.textContent = RANKS[gameState.playerMeta.b.rank];
|
||||||
whiteRankEl.textContent = RANKS[gameState.playerMeta.w.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) {
|
function clickPass(evt) {
|
||||||
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
if (evt.target.parentElement.id === `${STONES_DATA[gameState.turn]}-bowl`) playerPass();
|
||||||
}
|
}
|
||||||
|
|
@ -264,7 +269,10 @@ function clickResign(evt) {
|
||||||
|
|
||||||
function playerResign() {
|
function playerResign() {
|
||||||
// display confirmation message
|
// 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();
|
endGame();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -316,11 +324,6 @@ function resolveCaptures(point) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkKo(point, cap) {
|
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)
|
if (!point.getLiberties().length && cap.checkNeighbors().filter(stone => stone.stone === gameState.turn * -1)
|
||||||
&& point.capturing.length === 1) return true;
|
&& point.capturing.length === 1) return true;
|
||||||
}
|
}
|
||||||
|
|
@ -488,20 +491,22 @@ function init() {
|
||||||
function render(hoverPoint) {
|
function render(hoverPoint) {
|
||||||
if (gameState.winner || gameState.pass > 1) {
|
if (gameState.winner || gameState.pass > 1) {
|
||||||
renderTerritory();
|
renderTerritory();
|
||||||
|
renderMessage();
|
||||||
}
|
}
|
||||||
gameState.gameRecord.length? renderTurn() : renderFirstTurn();
|
gameState.gameRecord.length? renderTurn() : renderFirstTurn();
|
||||||
renderBoard();
|
renderBoard();
|
||||||
renderCaps();
|
renderCaps();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderMessage() {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
function renderTerritory() {
|
function renderTerritory() {
|
||||||
console.log('rendering territory')
|
|
||||||
boardState.forEach(val => {
|
boardState.forEach(val => {
|
||||||
let stoneElem = document.getElementById(`${val.pos[0]}-${val.pos[1]}`).childNodes[1].childNodes[0];
|
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]);
|
stoneElem.setAttribute("data-dot", DOTS_DATA[val.territory]);
|
||||||
})
|
})
|
||||||
console.log('rendering finished')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function renderFirstTurn() {
|
function renderFirstTurn() {
|
||||||
|
|
@ -537,18 +542,21 @@ function renderPreview(hoverPoint) {
|
||||||
}
|
}
|
||||||
|
|
||||||
function endGameSetTerritory() {
|
function endGameSetTerritory() {
|
||||||
console.log('ending game');
|
|
||||||
boardState.forEach(pt => {
|
boardState.forEach(pt => {
|
||||||
pt.territory = pt.stone ? 'd' : 'd'
|
pt.territory = pt.stone ? pt.stone : 'd'
|
||||||
console.log(pt);
|
|
||||||
});
|
});
|
||||||
|
boardState.filter(pt => {
|
||||||
|
return pt.groupMembers.length < 6 && pt.stone
|
||||||
|
}).forEach(pt => pt.territory = pt.stone * -1);
|
||||||
}
|
}
|
||||||
|
|
||||||
function endGame() {
|
function endGame() {
|
||||||
|
if (!gameState.winner)
|
||||||
endGameSetTerritory()
|
endGameSetTerritory()
|
||||||
|
|
||||||
// join all remaining groups
|
// join all remaining groups
|
||||||
// check remaining groups life
|
// check remaining groups life
|
||||||
|
|
||||||
// search empty spaces on board for deadShapes
|
// search empty spaces on board for deadShapes
|
||||||
// compare spaces to rotations of deadShapes[...]
|
// compare spaces to rotations of deadShapes[...]
|
||||||
// 'd' if empty spaces
|
// 'd' if empty spaces
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue