tanks/www/index.html

132 lines
2.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Tanks</title>
<link rel="stylesheet" href="style.css">
<script src="main.mjs" type="module"></script>
</head>
<body>
<h1>Tanks</h1>
<h2>Upload a tank</h2>
<form id="upload">
<fieldset>
<legend>Tank Designer</legend>
<fieldset>
<legend>Program</legend>
<textarea name="program">30 40 set-speed!
0 sensor? { fire! } if
</textarea>
</fieldset>
<fieldset>
<legend>Sensors</legend>
<table id="sensors">
<thead>
<tr>
<td></td>
<td>Range</td>
<td>Angle</td>
<td>Width</td>
<td>Turret?</td>
</tr>
</thead>
<tbody></tbody>
</table>
</fieldset>
<fieldset id="preview">
<legend>Preview</legend>
<div>
<canvas id="design"></canvas>
</div>
</fieldset>
<div>
<div>
<label>Token:
<input type="text" name="id" placeholder="Token provided by game owner" required>
</label>
</div>
<div>
<label>Name:
<input type="text" name="name" placeholder="Tank name" required>
</label>
</div>
<div>
<label>Author:
<input type="text" name="author" placeholder="Your name" required>
</label>
</div>
<div>
<input type="color" name="color" value="#cccccc" required>
</div>
<input type="submit" value="Upload">
<input type="submit" value="Copy upload script" data-script>
<div id="debug"></div>
</div>
</fieldset>
</form>
<fieldset>
<legend>
Game Replay
</legend>
<div>
<select id="game">
<option>latest</option>
</select>
<output id="date">moo</output>
</div>
<div id="game_box">
<canvas id="battlefield"></canvas>
</div>
<table id="results">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Score</th>
<th>Death</th>
<th>Killer</th>
<th>Error</th>
</tr>
</thead>
<tbody></tbody>
</table>
</fieldset>
<fieldset>
<legend>
Statistics
</legend>
<table id="stats">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>Games</th>
<th>Kills</th>
<th>Killed</th>
<th>Awards</th>
</tr>
</thead>
<tbody></tbody>
</table>
</fieldset>
</body>
</html>