Neale Pickett
·
2024-12-05
index.html
1<!DOCTYPE html>
2<html>
3 <head>
4 <title>Tanks</title>
5 <link rel="stylesheet" href="style.css">
6 <script src="main.mjs" type="module"></script>
7 </head>
8 <body>
9 <h1>Tanks</h1>
10
11 <h2>Upload a tank</h2>
12 <form id="upload">
13 <fieldset>
14 <legend>Tank Designer</legend>
15 <fieldset>
16 <legend>Program</legend>
17 <textarea name="program">30 40 set-speed!
180 sensor? { fire! } if
19 </textarea>
20 </fieldset>
21
22 <fieldset>
23 <legend>Sensors</legend>
24 <table id="sensors">
25 <thead>
26 <tr>
27 <td>№</td>
28 <td>Range</td>
29 <td>Angle</td>
30 <td>Width</td>
31 <td>Turret?</td>
32 </tr>
33 </thead>
34 <tbody></tbody>
35 </table>
36 </fieldset>
37
38 <fieldset id="preview">
39 <legend>Preview</legend>
40 <div>
41 <canvas id="design"></canvas>
42 </div>
43 </fieldset>
44
45 <div>
46 <div>
47 <label>Token:
48 <input type="text" name="id" placeholder="Token provided by game owner" required>
49 </label>
50 </div>
51
52 <div>
53 <label>Name:
54 <input type="text" name="name" placeholder="Tank name" required>
55 </label>
56 </div>
57
58 <div>
59 <label>Author:
60 <input type="text" name="author" placeholder="Your name" required>
61 </label>
62 </div>
63
64 <div>
65 <input type="color" name="color" value="#cccccc" required>
66 </div>
67
68 <input type="submit" value="Upload">
69 <input type="submit" value="Copy upload script" data-script>
70
71 <div id="debug"></div>
72 </div>
73
74 </fieldset>
75 </form>
76
77 <fieldset>
78 <legend>
79 Game Replay
80 </legend>
81
82 <div>
83 <select id="game">
84 <option>latest</option>
85 </select>
86 <output id="date">moo</output>
87 </div>
88
89 <div id="game_box">
90 <canvas id="battlefield"></canvas>
91 </div>
92
93 <table id="results">
94 <thead>
95 <tr>
96 <th></th>
97 <th>Name</th>
98 <th>Kills</th>
99 <th>Death</th>
100 <th>Killer</th>
101 <th>Error</th>
102 </tr>
103 </thead>
104 <tbody></tbody>
105 </table>
106
107 </fieldset>
108
109 <fieldset>
110 <legend>
111 Statistics
112 </legend>
113
114 <table id="stats">
115 <thead>
116 <tr>
117 <th></th>
118 <th>Name</th>
119 <th>Games</th>
120 <th>Kills</th>
121 <th>Killed</th>
122 <th>Awards</th>
123 </tr>
124 </thead>
125 <tbody></tbody>
126 </table>
127
128 </fieldset>
129
130 </body>
131</html>