oxaliq/browser-go-proto
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity
browser-go-proto/index.html
Sorrel Bri dcc21638e8 add menu styling and begin form submission
2019-08-06 11:22:43 -07:00

388 lines
No EOL
14 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<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="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>
<div class="modal">
<div>
<form id="menu">
<div id="game-meta">
<div class="menu-subblock"><span class="menu-heading">Date:</span><input type="text" name="date"></div>
<div class="menu-subblock"><span class="menu-heading">Komi:</span><span id="komi"></span></div>
<input type="range" min="-21.5" max="7.5" step="1" value="5.5" name="komi-slider">
<div class="menu-subblock"><span class="menu-heading">Handicap:</span><span id="handicap"></span></div>
<input type="range" min="0" max="5" step="1" value="0" name="handicap-slider">
</div>
<div id="player-meta">
<div data-player-meta="black">
<h4 class="menu-heading">Black</h4>
<span class="menu-heading">Name:</span><input type="text" name="black-name">
<span class="menu-heading">Rank:</span><input type="number" id="black-rank" max="38" steps="1" placeholder="15" name="black-rank">
<!-- <div id=> -->
<!-- <datalist class="rank-tick">
<span>30k</span>
<span>29k</span>
<span>28k</span>
<span>27k</span>
<span>26k</span>
<span>25k</span>
<span>24k</span>
<span>23k</span>
<span>22k</span>
<span>21k</span>
<span>20k</span>
<span>19k</span>
<span>18k</span>
<span>17k</span>
<span>16k</span>
<span>15k</span>
<span>14k</span>
<span>13k</span>
<span>12k</span>
<span>11k</span>
<span>10k</span>
<span>9k</span>
<span>8k</span>
<span>7k</span>
<span>6k</span>
<span>5k</span>
<span>4k</span>
<span>3k</span>
<span>2k</span>
<span>1k</span>
<span>1d</span>
<span>2d</span>
<span>3d</span>
<span>4d</span>
<span>5d</span>
<span>6d</span>
<span>7d</span>
<span>8d</span>
<span>9d</span>
</ul>
</div> -->
<input type="checkbox" name="black-rank-certain"><label for="black-rank-certain">Rank Certainty</label>
</div>
<div data-player-meta="white">
<h4 class="menu-heading">White</h4>
<span class="menu-heading">Name:</span><input type="text" name="white-name">
<span class="menu-heading">Rank:</span><input type="text" name="white-rank">
<input type="checkbox" name="white-rank-certain"><label for="white-rank-certain">Rank Certainty</label>
</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
<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>For now, Browser Go only supports games on a small board.
I've got great things planned for the future, though! Lookout for new releases on <a href="https://github.com/sorrelbri/browser-go">the GitHub page!</a></p>
<p id="game-record"></p>
</div>
<div id="game-update-space">
<input type="submit" name="komi-suggest" value="Suggest Komi"><input type="submit" name="game-start" value="Start!">
</div>
</form>
</div>
</div>
<content>
<div id="white-pos" class="player-pos">
<div id="white-bowl" class="bowl"><p>Pass?</p></div>
<div id="white-player-space" class="name-space">
<p id="white-player-name">Test Name rk</p>
<div id="white-caps-space" class="caps-space"><p id="white-caps"></p></div>
</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>
<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">
<p id="black-player-name">Test Name rk</p>
<div id="black-caps-space" class="caps-space"><p id="black-caps"></p></div>
</div> <div id="kifu">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</div>
</content>
</body>
</html>
Reference in a new issue View git blame Copy permalink