Neale Pickett
·
2024-11-05
debugger.html.m4
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Tank Debugger</title>
5 <link rel="stylesheet" href="style.css" type="text/css">
6 <script type="application/javascript" src="tanks.js"></script>
7 <script type="application/javascript" src="jstanks.js"></script>
8 <style type="text/css">
9 body {
10 max-width: 100%;
11 }
12 #preview {
13 float: left;
14 }
15 #config {
16 float: left;
17 }
18 #sensors input {
19 width: 5em;
20 }
21 #code {
22 float: left;
23 }
24 #submit {
25 width: 40em;
26 }
27 textarea {
28 min-width: 50em;
29 min-height: 20em;
30 }
31 td {
32 text-align: left;
33 }
34 </style>
35 <script type="application/javascript" src="designer.js"></script>
36 <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
37 <script type="application/javascript">
38 window.onload = function() { design(); update(); };
39 function onSubmit() {
40 if ($('[name="name"]').val() === "") {
41 $('#submit-feedback').html("No name?");
42 return;
43 }
44 $('#submit-feedback').html("Submitting...");
45
46 // http://stackoverflow.com/questions/169506/obtain-form-input-fields-using-jquery
47 var values = {};
48 $.each($('#form').serializeArray(), function(i, field) {
49 values[field.name] = field.value;
50 });
51
52 var request = $.ajax({
53 accept: "text/plain",
54 url: "upload.cgi",
55 type: "POST",
56 dataType: "text",
57 data: values
58 });
59
60 request.done(function(msg) {
61 $('#submit-feedback').html(msg);
62 });
63 request.fail(function(jqXHR, status) {
64 // TODO: red on error?
65 $('#submit-feedback').html(jqXHR.responseText);
66 });
67 };
68 function onRetrieve() {
69 $('#submit-feedback').html("Retrieving...");
70
71 var tokenprefix = "state/" + $('[name="token"]').val() + "/";
72
73 var makerequest = function(name) {
74 return $.ajax({
75 accept: "text/plain",
76 url: tokenprefix + name,
77 dataType: "text",
78 cache: false
79 });
80 };
81 var setval = function(name, val) {
82 $('[name="' + name + '"]').val(val);
83 };
84
85 var finishedreqs = 0;
86 var request = makerequest("name");
87 request.done(function(msg) {
88 setval("name", msg);
89
90 var gotreq = function() {
91 finishedreqs++;
92 if (finishedreqs == 13) {
93 $('#submit-feedback').html("Retrieved.");
94 }
95 };
96 request = makerequest("author");
97 request.done(function(msg) { gotreq(); setval("author", msg); } );
98 request = makerequest("color");
99 request.done(function(msg) { gotreq(); setval("color", msg.replace(/[\r\n]/g, '')); update(); } );
100 request = makerequest("program");
101 request.done(function(msg) { gotreq(); setval("program", msg); } );
102 var sensorfunc = function(id) {
103 return function(msg) {
104 gotreq();
105 var vals = msg.replace(/[\r\n]/g, '').split(" ");
106 setval("s"+id+"r", vals[0]);
107 setval("s"+id+"a", vals[1]);
108 setval("s"+id+"w", vals[2]);
109 $('[name="' + "s"+id+"t" + '"]').attr('checked', vals[3] != 0);
110 update();
111 };
112 };
113 for (var i = 0; i < 10; i++) {
114 request = makerequest("sensor" + i);
115 request.done(sensorfunc(i));
116 }
117 });
118
119 request.fail(function(jqXHR, status) {
120 // TODO: red on error?
121 $('#submit-feedback').html("error (bad token?)");
122 });
123 };
124 </script>
125 </head>
126 <body style="background: #222; color: #bbb;">
127 <h1>Tank Debugger</h1>
128 <div id="game_box"><canvas id="battlefield" style="border: 2px solid green;" width="450" height="450"></canvas></div>
129 <p>
130 <input type="button" onclick="resetTanks();" value="Run"> (Remember to submit (below) when you're done!)
131 </p>
132 <p id="debug">[<tt>debug!</tt> puts things here, remember to remove it before submitting]</p>
133 <form id="form">
134 <div id="stuff">
135 <div id="code">
136 <textarea id="program" name="program" rows="20" cols="80">get-turret 12 + set-turret! ( Rotate turret )
13737 40 set-speed! ( Go in circles )
1380 sensor? { fire! } if ( Fire if turret sensor triggered )
1391 sensor? { -50 50 set-speed! } if ( Turn if collision sensor triggered )
140 </textarea><br>
141 <fieldset id="submit">
142 <p>
143 <input type="button" value="Submit" onclick="onSubmit();">
144 <input type="button" value="Retrieve" onclick="onRetrieve();">
145 <span id="submit-feedback"> </span>
146 </p>
147
148 <p>
149 Before you can get going with a tank, you need a token. If you
150 need a token, just ask one of the dirtbags.
151 </p>
152
153 <legend>Information</legend>
154 <table>
155 <tr>
156 <td>Token:</td>
157 <td><input name="token" type="password"></td>
158 </tr>
159 <tr>
160 <td>Tank name:</td>
161 <td><input name="name"></td>
162 </tr>
163 <tr>
164 <td>Author:</td>
165 <td><input name="author"> (eg. Joe Cool
166 <joe@cool.cc>)</td>
167 </tr>
168 </table>
169 </fieldset>
170 </div>
171 <div id="preview"><canvas id="design"></canvas><p id="debug"></p></div>
172 <div id="config">
173 <fieldset id="metadata">
174 <legend>Information</legend>
175 <table>
176 <tr>
177 <td>Color:</td>
178 <td><input name="color" type="color" value="#c0c0c0"
179 onchange="update();"> (eg. #c7e148)</td>
180 </tr>
181 </table>
182 </fieldset>
183
184 <fieldset id="sensors">
185 <legend>Sensors</legend>
186 <table>
187 <thead>
188 <tr>
189 <td>#</td>
190 <td>Range</td>
191 <td>Angle</td>
192 <td>Width</td>
193 <td>Turret?</td>
194 </tr>
195 </thead>
196 <tbody>
197
198 <tr>
199 <td>0</td>
200 <td><input name="s0r" type="number" min="0" max="100" onchange="update();" value="50"></td>
201 <td><input name="s0a" type="number" min="-359" max="359" onchange="update();" value="0"></td>
202 <td><input name="s0w" type="number" min="-359" max="359" onchange="update();" value="7"></td>
203 <td><input name="s0t" type="checkbox" onchange="update();" checked="1"></td>
204 </tr>
205
206 <tr>
207 <td>1</td>
208 <td><input name="s1r" type="number" min="0" max="100" onchange="update();" value="30"></td>
209 <td><input name="s1a" type="number" min="-359" max="359" onchange="update();" value="0"></td>
210 <td><input name="s1w" type="number" min="-359" max="359" onchange="update();" value="90"></td>
211 <td><input name="s1t" type="checkbox" onchange="update();"></td>
212 </tr>
213
214 <tr>
215 <td>2</td>
216 <td><input name="s2r" type="number" min="0" max="100" onchange="update();"></td>
217 <td><input name="s2a" type="number" min="-359" max="359" onchange="update();"></td>
218 <td><input name="s2w" type="number" min="-359" max="359" onchange="update();"></td>
219 <td><input name="s2t" type="checkbox" onchange="update();"></td>
220 </tr>
221
222 <tr>
223 <td>3</td>
224 <td><input name="s3r" type="number" min="0" max="100" onchange="update();"></td>
225 <td><input name="s3a" type="number" min="-359" max="359" onchange="update();"></td>
226 <td><input name="s3w" type="number" min="-359" max="359" onchange="update();"></td>
227 <td><input name="s3t" type="checkbox" onchange="update();"></td>
228 </tr>
229
230 <tr>
231 <td>4</td>
232 <td><input name="s4r" type="number" min="0" max="100" onchange="update();"></td>
233 <td><input name="s4a" type="number" min="-359" max="359" onchange="update();"></td>
234 <td><input name="s4w" type="number" min="-359" max="359" onchange="update();"></td>
235 <td><input name="s4t" type="checkbox" onchange="update();"></td>
236 </tr>
237
238 <tr>
239 <td>5</td>
240 <td><input name="s5r" type="number" min="0" max="100" onchange="update();"></td>
241 <td><input name="s5a" type="number" min="-359" max="359" onchange="update();"></td>
242 <td><input name="s5w" type="number" min="-359" max="359" onchange="update();"></td>
243 <td><input name="s5t" type="checkbox" onchange="update();"></td>
244 </tr>
245
246 <tr>
247 <td>6</td>
248 <td><input name="s6r" type="number" min="0" max="100" onchange="update();"></td>
249 <td><input name="s6a" type="number" min="-359" max="359" onchange="update();"></td>
250 <td><input name="s6w" type="number" min="-359" max="359" onchange="update();"></td>
251 <td><input name="s6t" type="checkbox" onchange="update();"></td>
252 </tr>
253
254 <tr>
255 <td>7</td>
256 <td><input name="s7r" type="number" min="0" max="100" onchange="update();"></td>
257 <td><input name="s7a" type="number" min="-359" max="359" onchange="update();"></td>
258 <td><input name="s7w" type="number" min="-359" max="359" onchange="update();"></td>
259 <td><input name="s7t" type="checkbox" onchange="update();"></td>
260 </tr>
261
262 <tr>
263 <td>8</td>
264 <td><input name="s8r" type="number" min="0" max="100" onchange="update();"></td>
265 <td><input name="s8a" type="number" min="-359" max="359" onchange="update();"></td>
266 <td><input name="s8w" type="number" min="-359" max="359" onchange="update();"></td>
267 <td><input name="s8t" type="checkbox" onchange="update();"></td>
268 </tr>
269
270 <tr>
271 <td>9</td>
272 <td><input name="s9r" type="number" min="0" max="100" onchange="update();"></td>
273 <td><input name="s9a" type="number" min="-359" max="359" onchange="update();"></td>
274 <td><input name="s9w" type="number" min="-359" max="359" onchange="update();"></td>
275 <td><input name="s9t" type="checkbox" onchange="update();"></td>
276 </tr>
277
278 </tbody>
279 </table>
280 </fieldset>
281 </div>
282 </div>
283 </form>
284include(nav.html.inc)
285 </body>
286</html>
287