browser-go-proto/index.html
2019-08-06 16:36:39 -07:00

356 lines
No EOL
14 KiB
HTML

<!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><span id="date"></span></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><span id="black-rank">9k</span><input type="button" id="black-rank-up" value="▲"><input type="button" id="black-rank-down" value="▼">
<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><span id="white-rank">9k</span><input type="button" id="white-rank-up" value="▲"><input type="button" id="white-rank-down" value="▼">
<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"><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>
When the game begins, click on a legal point on the board to make a move. The active player's bowl will be highlighted. To pass, click on your bowl.
This will only be possible on your turn. To resign click on your capture tray. To view the game record or adjust player settings, click the kifu on black's side.<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 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>Resign?</p><p id="white-caps"></p></div>
</div>
<div id="game-hud">
<p></p>
</div>
</div>
<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>Resign?</p><p id="black-caps"></p></div>
</div>
<div id="kifu">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</div>
</content>
</body>
</html>