Mercurial > maze-src

comparison lab.html @ 0:1eef88068f9f tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initial commit of maze game source
author ferencd
date Sun, 15 Sep 2019 11:46:47 +0200
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1eef88068f9f
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="image_src" href="/img/dung.png"/>
5 <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
6 <meta name="google-site-verification" content="gvy0h6qHfZoCWcfyIilhOm_Kifle93a-bt_xk7zXJp0" />
7 <meta name="msvalidate.01" content="2211C2467FF4056C4317EC99FD76DCD7" />
8 <meta name="description" content="Dungeons of Perish: a tiny online maze game for those who love labyrinths">
9 <meta property="og:image" content="/img/dung.png" />
10 <meta property="og:url" content="http://dungeons.sh" />
11 <meta property="og:type" content="game" />
12 <meta property="og:title" content="Dungeons of Perish" />
13 <meta charset="UTF-8">
14 <style>
15 .newgametable td { background-color:black; cursor: pointer; }
16 .newgametable td:hover { background-color: lightslategray; };
17
18 /* unvisited link */
19 a:link {
20 color: white;
21 }
22
23 /* visited link */
24 a:visited {
25 color: white;
26 }
27
28 /* mouse over link */
29 a:hover {
30 color: blue;
31 }
32
33 /* selected link */
34 a:active {
35 color: blue;
36 }
37 </style>
38 <script type="text/javascript" src="/js/requester.js"></script>
39 <!-- <script type="text/javascript" src="progress.js"></script> -->
40 <script type="application/javascript">
41
42 function get_browser() {
43 var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
44 if(/trident/i.test(M[1]))
45 {
46 tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
47 return {name:'IE',version:(tem[1]||'')};
48 }
49 if(M[1] === 'Chrome')
50 {
51 tem = ua.match(/\bOPR|Edge\/(\d+)/);
52 if(tem!==null)
53 {
54 if(tem[1] !== undefined)
55 {
56 return {name:'Opera', version:tem[1]};
57 }
58 else
59 {
60 if(tem[0] === 'OPR')
61 {
62 var ver = tem.input[tem.index + 3 + 1]; // skip OPR and /
63 ver += tem.input[tem.index + 3 + 1 + 1]; // till Opera reaches 100 this should work ok.
64 return {name:'Opera', varsion:ver};
65 }
66 }
67
68 }
69 }
70 M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
71 if((tem=ua.match(/version\/(\d+)/i))!==null) {M.splice(1,1,tem[1]);}
72 return {
73 name: M[0],
74 version: M[1]
75 };
76 }
77
78 var browser=get_browser();
79 if(browser.name !== "Firefox" && browser.name !== "Chrome" && browser.name !== "Opera" ||
80 (browser.name === 'Opera' && browser.version < 45
81 || browser.name === "Chrome" && browser.version < 56
82 || browser.name === "Firefox" && browser.version < 52) )
83 {
84 var message = browser.name + " version " + browser.version +" is not really supported.\n\nWe recommend using one of the following browsers:\n\n \u2022 Firefox > 53 \n \u2022 Chrome > 56 \n \u2022 Opera > 45\n\notherwise you might encounter performance issues.";
85 window.alert(message);
86 }
87
88 function on_new_game(e, loc)
89 {
90 window.location.href = loc;
91 }
92 function new_story_game(e)
93 {
94 // Yup, next release will contain a story too :)
95 on_new_game(e, '${story_game_loc}')
96 }
97 function new_adventure_game(e)
98 {
99 on_new_game(e, '${adv_game_loc}')
100 }
101 function new_timechaser_game(e)
102 {
103 on_new_game(e, '${timer_game_loc}')
104 }
105 function page_loader(e)
106 {}
107 function upon_page_load()
108 {
109 requestjss("/js/graphics.js");
110 }
111 </script>
112 </head>
113 <body style="margin: 0; height: 100%; overflow: hidden; " bgcolor="black" onload="${page_loader}">
114 <div id="fb-root"></div>
115 <script>(function(d, s, id) {
116 var js, fjs = d.getElementsByTagName(s)[0];
117 if (d.getElementById(id)) return;
118 js = d.createElement(s); js.id = id;
119 js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10";
120 fjs.parentNode.insertBefore(js, fjs);
121 }(document, 'script', 'facebook-jssdk'));</script>
122
123 <div id="menu" style="
124 background-color: black;
125 width: 100%;
126 min-height: 31px;
127 max-height: 31px;
128 position: absolute;
129 border-color: black;
130 top: 0;
131 left: 0;
132 margin: 0 auto;
133 visibility: ${menu_line_visible};
134 ">
135 <font color="white" face="Arial">
136
137 <table style="border: 0;table-layout: fixed; max-height: 24px; height: 24px;" cellspacing="0" cellpadding="0">
138 <tr>
139
140 <!-- Game ID -->
141 <td style="border: 0; background-color: rgb(136,139,40); visibility: ${gameid_visible};">
142 <div style="width: ${gameid_size}; visibility: ${gameid_visible};">
143 GameID:
144 </div>
145 </td>
146 <td style="border: 0; background-color: rgb(136,139,40); width: ${gameid_size}; visibility: ${gameid_visible};" align="right">
147 <div style="width: ${gameid_size}; visibility: ${gameid_visible};">
148 <span style="margin: 0;padding: 0; visibility: ${gameid_visible}" id="gameid" title="${level_statistics}"></span>
149 </div>
150 </td>
151
152 <!-- Day/Level counter -->
153 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};">
154 <div style="width: 55px; visibility: ${levelctr_visible};">
155 ${day_or_level}:
156 </div>
157 </td>
158 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};" align="right">
159 <div style="width: 125px; visibility: ${levelctr_visible};">
160 <span style="margin: 0;padding: 0; visibility: ${levelctr_visible};" id="levelctr"> </span>
161 </div>
162 </td>
163 <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};">
164 <div style="width: 30px;">
165 &nbsp;
166 </div>
167 </td>
168
169 <!-- Health -->
170 <td style="border: 0; background-color: green; visibility: ${health_visible};">
171 <div style="width: 30px; visibility: ${health_visible};">
172 <img src="/img/player/heart.png" width="24px" height="24px" title="How much health you have left">
173 </div>
174 </td>
175 <td style="border: 0 solid black; background-color: green; visibility: ${health_visible};">
176 <div style="width: 102px; visibility: ${health_visible};">
177 <progress id="lifeprg" value="100" max="100" style="
178 border-radius: 1px;
179 height: 23px;
180 width: 100px;
181 padding: 0;
182 background-color: black;
183 color: green;
184 -webkit-appearance: none;
185 ">
186 </progress>
187 </div>
188 </td>
189 <td style="border: 0; background-color: green; visibility: ${health_visible};">
190 <div style="width: 30px; visibility: ${health_visible};">
191 <span style="margin: 0;padding: 0;" id="energy">100</span>
192 </div>
193 </td>
194
195 <!-- Skeleton -->
196 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
197 <div style="width: 30px;">
198 &nbsp;
199 </div>
200 </td>
201 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
202 <div style="width: 24px; visibility: ${skeletons_visible};">
203 <img src="/img/skel/wl/d_wl_1.png" width="24px" height="24px" title="How many skeletons have you killed">
204 </div>
205 </td>
206 <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; ">
207 <div style="width: 20px; visibility: ${skeletons_visible};">
208 <p style="margin: 0;padding: 0;" id="skels_killed">0</p>
209 </div>
210 </td>
211
212 <!-- Gold -->
213 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
214 <div style="width: 3px; visibility: ${gold_visible};">
215 &nbsp;
216 </div>
217 </td>
218 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
219 <div style="width: 24px; visibility: ${gold_visible};">
220 <img src="/img/gold.png" width="20px" height="20px" alt="Gold" title="Your accumulated gold">
221 </div>
222 </td>
223 <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};">
224 <div style="width: 20px; visibility: ${gold_visible};">
225 <p style="margin: 0;padding: 0;" id="gold">0</p>
226 </div>
227 </td>
228
229
230 <!-- Ring Indicator -->
231 <td style="border: 0; background-color: black; ">
232 <div style="width: 24px; visibility:${equipment_visible};" id = "ring_of_health_div">
233 <img src="/img/weapons/ring.png" width="24px" height="24px" title="The Ring of Health is yours">
234 </div>
235 </td>
236
237 <!-- Shoes indicator -->
238 <td style="border: 0; background-color: black;">
239 <div style="width: 24px; visibility:${equipment_visible};" id="boots_of_light_div">
240 <img src="/img/weapons/shoe.png" width="24px" height="24px" title="The Boots of Lightness are yours">
241 </div>
242 </td>
243
244 <!-- Loading indicator -->
245 <td style="border: 0; background-color: black;" valign="center">
246 <div style="width: 100%; visibility:"visible";" id="loader_div">
247 <img src="/img/loader.gif" width="128x" height="15px" title="Loading">
248 </div>
249 </td>
250
251
252 <!-- Maze statistics counter -->
253 <td style="height:24px; border: 0; background-color: rgb(0,0,0); text-align:right; visibility: ${statis_visible};">
254 <div style="margin: 0;padding: 0; width: 100px; visibility: ${statis_visible};" id="steps_passed">0</div>
255 </td>
256 <!-- Time counter -->
257 <td style="height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; visibility: ${timer_visible};">
258 <span style="margin: 0;padding: 0; visibility: ${timer_visible};" id="time_passed">0:0:0</span>
259 </td>
260
261 <!-- Menu -->
262 <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; ">
263 <img src="/img/menu.png" height="24px" width="24px" onclick="show_menu();" title="Play a new game">
264 </td>
265 <!-- Help -->
266 <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; ">
267 <script type="text/javascript">
268 document.write("<a href=\"mail" + "to:" + new Array("dungeons.sh","gmail.com").join("@") + "\">" + "<img src=\"/img/question.png\" height=\"24px\" width=\"24px\" title=\"Send a raven\">" + "</" + "a>");
269 </script>
270 </td>
271 <!-- FB -->
272 <td>
273 <div class="fb-like" data-href="http://dungeons.sh" data-width="24" data-layout="button" data-action="like" data-size="small" data-show-faces="false" data-share="true">
274 </div>
275 </td>
276 </tr>
277 </table>
278 </font>
279 </div>
280
281 <div id="canvasdiv" style="width: calc(100% - 2px);
282 height: calc(100% - 34px); overflow: hidden;
283 position: absolute;
284 top: 32px;
285 left: 0;
286 border-color: black;
287 margin: 0 auto;">
288 <canvas id="canvas" width="10px" height="10px"></canvas>
289 </div>
290 <script type="application/javascript">
291 //var bar = new ProgressBar.Line('#canvasdiv', {easing: 'easeInOut'});
292 </script>
293 <div id="messages" style="
294 position:fixed;
295 top:60px;
296 left:calc(50% - 320px);
297 width:640px;
298 height: 480px;
299 z-index: 55;
300 background-color: black;
301 border:1px solid black;
302 border-radius: 25px;
303 visibility: ${messages_visible};
304 ">
305 <img id="goimg" src="/img/dungeonslogo.png">
306 <center>
307 <font face="Arial" color="white"><strong>
308 <div id="sysmenu" style="visibility: ${sysmenu_visible}; height:100%; display:${sysmenu_display};">
309 <center>
310 You are ...
311 </center>
312 <p>
313 <table class="newgametable" style="width:400px; height:100%; border: 1px solid white ">
314 <tr>
315 <!--
316 <td onclick="new_story_game(event);">
317 <center>
318 <img src="/img/tavern.png" width="48px" height="48px">
319 <p>
320 ... having a drink at the tavern while a funny fellow stares at you
321 </center>
322 </td>
323 -->
324 <td onclick="new_adventure_game(event);">
325 <center>
326 <img src="/img/business.png" width="48px" height="48px">
327 <p>
328 ... a fearless adventurer in search for fame and fortune
329 </center>
330 </td>
331 <td onclick="new_timechaser_game(event);">
332 <center>
333 <img src="/img/clock.png" width="48px" height="48px">
334 <p>
335 ... determined to get out from here as fast as possible
336 </center>
337 </td>
338 </tr>
339 </table>
340 (PS: You will need a decent browser for this to work)
341 </p>
342 <!--
343 <table style="width:100%; height:100%; border: 1px solid black ">
344 <tr>
345 <td>
346 ...the owner of a GameID:
347 </td>
348 <td>
349 <input type="text">
350 </td>
351 <td>
352 <button type="button">Continue</button>
353 </td>
354 </tr>
355 </table>
356 -->
357 </div>
358 <div id="badbrowser" style="visibility: ${badbrowser_visible}; height:100%; display:${badbrowser_display};">
359 Seems your browser is not in the list of supported browsers...
360 We recommend using one of the following browsers:<p>
361 <ul>
362 <li>Firefox &gt; 53</li>
363 <li>Chrome &gt; 56</li>
364 <li>Opera &gt; 44</li>
365 </ul>
366 otherwise you might encounter performance issues... or simply, the game will not work.<p>
367 </div>
368 <span id="gotext1" style="visibility: hidden;">
369 ${gotext1}
370 <p id="gotext2" style="visibility: hidden;">
371 ${gotext2}
372 </p>
373 <p id="gotext3" style="visibility: hidden;">
374 ${gotext3}
375 </p>
376 <p id="gotext4" style="visibility: hidden;">
377 ${gotext4}
378 </p>
379 <p id="gotext5" style="visibility: hidden;">
380 ${gotext5}
381 </p>
382 </span>
383 </strong></font>
384 <center>
385 <p>&nbsp;<p align="center">
386 <span id="gospan">
387 <button id="gobutton" onclick="setup_labyrinth();" style="visibility: hidden;">
388 Let's get out
389 </button>
390 </span>
391 <p>
392 <span id="goexploremore" style="visibility: hidden;">
393 <button id="gonextlevel" onclick="${new_game_type}(window.event);">
394 New game
395 </button>
396 </span>
397 </center>
398 </center>
399
400 </div>
401 <form name="n">
402 <input type=hidden id="gid" name="gid" value="${gid}"/>
403 <input type=hidden id="lid" name="lid" value="${lid}"/>
404 </form>