2010-10-26 13:02:26 -06:00
|
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>Tank Designer</title>
|
2010-10-26 16:43:51 -06:00
|
|
|
<link rel="stylesheet" href="style.css" type="text/css">
|
2010-10-26 13:02:26 -06:00
|
|
|
<style type="text/css">
|
|
|
|
#preview {
|
|
|
|
float: right;
|
|
|
|
}
|
|
|
|
#sensors input {
|
|
|
|
width: 5em;
|
|
|
|
}
|
|
|
|
#program textarea {
|
|
|
|
width: 100%;
|
|
|
|
min-height: 20em;
|
|
|
|
}
|
|
|
|
td {
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script type="application/javascript" src="tanks.js"></script>
|
|
|
|
<script type="application/javascript" src="designer.js"></script>
|
|
|
|
<script type="application/javascript">
|
|
|
|
window.onload = design;
|
|
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Tank Designer</h1>
|
|
|
|
<div id="preview"><canvas id="design"></canvas><p id="debug"></p></div>
|
|
|
|
|
|
|
|
<form action="designer.cgi" method="post">
|
|
|
|
<fieldset id="metadata">
|
|
|
|
<legend>Information</legend>
|
|
|
|
<table>
|
|
|
|
<tr>
|
|
|
|
<td>Team hash:</td>
|
|
|
|
<td><input name="token"></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Tank name:</td>
|
|
|
|
<td><input name="name"></td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Author:</td>
|
|
|
|
<td>
|
|
|
|
<input name="author">
|
|
|
|
(eg. Joe Cool <joe@cool.cc>)
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>Color:</td>
|
|
|
|
<td>
|
|
|
|
<input name="color" type="color" value="#c0c0c0" onchange="update();">
|
|
|
|
(eg. #c7e148)
|
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
<fieldset id="sensors">
|
|
|
|
<legend>Sensors</legend>
|
|
|
|
<table>
|
|
|
|
<thead>
|
|
|
|
<tr>
|
|
|
|
<td>#</td>
|
|
|
|
<td>Range</td>
|
|
|
|
<td>Angle</td>
|
|
|
|
<td>Width</td>
|
|
|
|
<td>Turret?</td>
|
|
|
|
</tr>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>0</td>
|
|
|
|
<td><input name="s0r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s0a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s0w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s0t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>1</td>
|
|
|
|
<td><input name="s1r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s1a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s1w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s1t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>2</td>
|
|
|
|
<td><input name="s2r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s2a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s2w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s2t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>3</td>
|
|
|
|
<td><input name="s3r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s3a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s3w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s3t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>4</td>
|
|
|
|
<td><input name="s4r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s4a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s4w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s4t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>5</td>
|
|
|
|
<td><input name="s5r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s5a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s5w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s5t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>6</td>
|
|
|
|
<td><input name="s6r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s6a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s6w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s6t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>7</td>
|
|
|
|
<td><input name="s7r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s7a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s7w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s7t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>8</td>
|
|
|
|
<td><input name="s8r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s8a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s8w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s8t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
<tr>
|
|
|
|
<td>9</td>
|
|
|
|
<td><input name="s9r" type="number" min="0" max="100" onchange="update();"></td>
|
|
|
|
<td><input name="s9a" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s9w" type="number" min="-360" max="360" onchange="update();"></td>
|
|
|
|
<td><input name="s9t" type="checkbox" onchange="update();"></td>
|
|
|
|
</tr>
|
|
|
|
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
<fieldset id="program">
|
|
|
|
<legend>Program</legend>
|
|
|
|
<textarea name="program"></textarea>
|
|
|
|
</fieldset>
|
|
|
|
|
|
|
|
<input type="submit" value="Submit">
|
|
|
|
</form>
|
|
|
|
<nav>
|
|
|
|
<h2>Resources</h2>
|
|
|
|
<ul>
|
|
|
|
<li><a href="summary.html">Summary</a></li>
|
|
|
|
<li><a href="intro.html">Introduction</a></li>
|
|
|
|
<li><a href="forf.html">Forf manual</a></li>
|
|
|
|
<li><a href="procs.html">Tanks procedures</a></li>
|
|
|
|
<li><a href="designer.html">Tanks designer</a></li>
|
|
|
|
</ul>
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|