Mercurial > maze-src
diff lab.html @ 0:1eef88068f9f tip
initial commit of maze game source
| author | ferencd |
|---|---|
| date | Sun, 15 Sep 2019 11:46:47 +0200 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/lab.html Sun Sep 15 11:46:47 2019 +0200 @@ -0,0 +1,404 @@ +<!DOCTYPE html> +<html> +<head> +<link rel="image_src" href="/img/dung.png"/> +<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> +<meta name="google-site-verification" content="gvy0h6qHfZoCWcfyIilhOm_Kifle93a-bt_xk7zXJp0" /> +<meta name="msvalidate.01" content="2211C2467FF4056C4317EC99FD76DCD7" /> +<meta name="description" content="Dungeons of Perish: a tiny online maze game for those who love labyrinths"> +<meta property="og:image" content="/img/dung.png" /> +<meta property="og:url" content="http://dungeons.sh" /> +<meta property="og:type" content="game" /> +<meta property="og:title" content="Dungeons of Perish" /> +<meta charset="UTF-8"> +<style> + .newgametable td { background-color:black; cursor: pointer; } + .newgametable td:hover { background-color: lightslategray; }; + + /* unvisited link */ + a:link { + color: white; + } + + /* visited link */ + a:visited { + color: white; + } + + /* mouse over link */ + a:hover { + color: blue; + } + + /* selected link */ + a:active { + color: blue; + } +</style> + <script type="text/javascript" src="/js/requester.js"></script> + <!-- <script type="text/javascript" src="progress.js"></script> --> + <script type="application/javascript"> + + function get_browser() { + var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; + if(/trident/i.test(M[1])) + { + tem=/\brv[ :]+(\d+)/g.exec(ua) || []; + return {name:'IE',version:(tem[1]||'')}; + } + if(M[1] === 'Chrome') + { + tem = ua.match(/\bOPR|Edge\/(\d+)/); + if(tem!==null) + { + if(tem[1] !== undefined) + { + return {name:'Opera', version:tem[1]}; + } + else + { + if(tem[0] === 'OPR') + { + var ver = tem.input[tem.index + 3 + 1]; // skip OPR and / + ver += tem.input[tem.index + 3 + 1 + 1]; // till Opera reaches 100 this should work ok. + return {name:'Opera', varsion:ver}; + } + } + + } + } + M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; + if((tem=ua.match(/version\/(\d+)/i))!==null) {M.splice(1,1,tem[1]);} + return { + name: M[0], + version: M[1] + }; + } + + var browser=get_browser(); + if(browser.name !== "Firefox" && browser.name !== "Chrome" && browser.name !== "Opera" || + (browser.name === 'Opera' && browser.version < 45 + || browser.name === "Chrome" && browser.version < 56 + || browser.name === "Firefox" && browser.version < 52) ) + { + 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."; + window.alert(message); + } + + function on_new_game(e, loc) + { + window.location.href = loc; + } + function new_story_game(e) + { + // Yup, next release will contain a story too :) + on_new_game(e, '${story_game_loc}') + } + function new_adventure_game(e) + { + on_new_game(e, '${adv_game_loc}') + } + function new_timechaser_game(e) + { + on_new_game(e, '${timer_game_loc}') + } + function page_loader(e) + {} + function upon_page_load() + { + requestjss("/js/graphics.js"); + } + </script> +</head> +<body style="margin: 0; height: 100%; overflow: hidden; " bgcolor="black" onload="${page_loader}"> +<div id="fb-root"></div> +<script>(function(d, s, id) { + var js, fjs = d.getElementsByTagName(s)[0]; + if (d.getElementById(id)) return; + js = d.createElement(s); js.id = id; + js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.10"; + fjs.parentNode.insertBefore(js, fjs); +}(document, 'script', 'facebook-jssdk'));</script> + +<div id="menu" style=" + background-color: black; + width: 100%; + min-height: 31px; + max-height: 31px; + position: absolute; + border-color: black; + top: 0; + left: 0; + margin: 0 auto; + visibility: ${menu_line_visible}; +"> + <font color="white" face="Arial"> + + <table style="border: 0;table-layout: fixed; max-height: 24px; height: 24px;" cellspacing="0" cellpadding="0"> + <tr> + + <!-- Game ID --> + <td style="border: 0; background-color: rgb(136,139,40); visibility: ${gameid_visible};"> + <div style="width: ${gameid_size}; visibility: ${gameid_visible};"> + GameID: + </div> + </td> + <td style="border: 0; background-color: rgb(136,139,40); width: ${gameid_size}; visibility: ${gameid_visible};" align="right"> + <div style="width: ${gameid_size}; visibility: ${gameid_visible};"> + <span style="margin: 0;padding: 0; visibility: ${gameid_visible}" id="gameid" title="${level_statistics}"></span> + </div> + </td> + + <!-- Day/Level counter --> + <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};"> + <div style="width: 55px; visibility: ${levelctr_visible};"> + ${day_or_level}: + </div> + </td> + <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};" align="right"> + <div style="width: 125px; visibility: ${levelctr_visible};"> + <span style="margin: 0;padding: 0; visibility: ${levelctr_visible};" id="levelctr"> </span> + </div> + </td> + <td style="border: 0; background-color: rgb(22,127,169); visibility: ${levelctr_visible};"> + <div style="width: 30px;"> + + </div> + </td> + + <!-- Health --> + <td style="border: 0; background-color: green; visibility: ${health_visible};"> + <div style="width: 30px; visibility: ${health_visible};"> + <img src="/img/player/heart.png" width="24px" height="24px" title="How much health you have left"> + </div> + </td> + <td style="border: 0 solid black; background-color: green; visibility: ${health_visible};"> + <div style="width: 102px; visibility: ${health_visible};"> + <progress id="lifeprg" value="100" max="100" style=" + border-radius: 1px; + height: 23px; + width: 100px; + padding: 0; + background-color: black; + color: green; + -webkit-appearance: none; + "> + </progress> + </div> + </td> + <td style="border: 0; background-color: green; visibility: ${health_visible};"> + <div style="width: 30px; visibility: ${health_visible};"> + <span style="margin: 0;padding: 0;" id="energy">100</span> + </div> + </td> + + <!-- Skeleton --> + <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; "> + <div style="width: 30px;"> + + </div> + </td> + <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; "> + <div style="width: 24px; visibility: ${skeletons_visible};"> + <img src="/img/skel/wl/d_wl_1.png" width="24px" height="24px" title="How many skeletons have you killed"> + </div> + </td> + <td style="border: 0; background-color: rgb(122,27,69); visibility: ${skeletons_visible}; "> + <div style="width: 20px; visibility: ${skeletons_visible};"> + <p style="margin: 0;padding: 0;" id="skels_killed">0</p> + </div> + </td> + + <!-- Gold --> + <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};"> + <div style="width: 3px; visibility: ${gold_visible};"> + + </div> + </td> + <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};"> + <div style="width: 24px; visibility: ${gold_visible};"> + <img src="/img/gold.png" width="20px" height="20px" alt="Gold" title="Your accumulated gold"> + </div> + </td> + <td style="border: 0; background-color: rgb(39,71,122); visibility: ${gold_visible};"> + <div style="width: 20px; visibility: ${gold_visible};"> + <p style="margin: 0;padding: 0;" id="gold">0</p> + </div> + </td> + + + <!-- Ring Indicator --> + <td style="border: 0; background-color: black; "> + <div style="width: 24px; visibility:${equipment_visible};" id = "ring_of_health_div"> + <img src="/img/weapons/ring.png" width="24px" height="24px" title="The Ring of Health is yours"> + </div> + </td> + + <!-- Shoes indicator --> + <td style="border: 0; background-color: black;"> + <div style="width: 24px; visibility:${equipment_visible};" id="boots_of_light_div"> + <img src="/img/weapons/shoe.png" width="24px" height="24px" title="The Boots of Lightness are yours"> + </div> + </td> + + <!-- Loading indicator --> + <td style="border: 0; background-color: black;" valign="center"> + <div style="width: 100%; visibility:"visible";" id="loader_div"> + <img src="/img/loader.gif" width="128x" height="15px" title="Loading"> + </div> + </td> + + + <!-- Maze statistics counter --> + <td style="height:24px; border: 0; background-color: rgb(0,0,0); text-align:right; visibility: ${statis_visible};"> + <div style="margin: 0;padding: 0; width: 100px; visibility: ${statis_visible};" id="steps_passed">0</div> + </td> + <!-- Time counter --> + <td style="height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; visibility: ${timer_visible};"> + <span style="margin: 0;padding: 0; visibility: ${timer_visible};" id="time_passed">0:0:0</span> + </td> + + <!-- Menu --> + <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; "> + <img src="/img/menu.png" height="24px" width="24px" onclick="show_menu();" title="Play a new game"> + </td> + <!-- Help --> + <td style="cursor: pointer; height:24px; border: 0; width: 100%; background-color: rgb(0,0,0); text-align:right; "> + <script type="text/javascript"> + 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>"); + </script> + </td> + <!-- FB --> + <td> + <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"> + </div> + </td> + </tr> + </table> + </font> +</div> + +<div id="canvasdiv" style="width: calc(100% - 2px); + height: calc(100% - 34px); overflow: hidden; + position: absolute; + top: 32px; + left: 0; + border-color: black; + margin: 0 auto;"> + <canvas id="canvas" width="10px" height="10px"></canvas> +</div> +<script type="application/javascript"> + //var bar = new ProgressBar.Line('#canvasdiv', {easing: 'easeInOut'}); +</script> +<div id="messages" style=" + position:fixed; + top:60px; + left:calc(50% - 320px); + width:640px; + height: 480px; + z-index: 55; + background-color: black; + border:1px solid black; + border-radius: 25px; + visibility: ${messages_visible}; +"> + <img id="goimg" src="/img/dungeonslogo.png"> + <center> + <font face="Arial" color="white"><strong> + <div id="sysmenu" style="visibility: ${sysmenu_visible}; height:100%; display:${sysmenu_display};"> + <center> + You are ... + </center> + <p> + <table class="newgametable" style="width:400px; height:100%; border: 1px solid white "> + <tr> + <!-- + <td onclick="new_story_game(event);"> + <center> + <img src="/img/tavern.png" width="48px" height="48px"> + <p> + ... having a drink at the tavern while a funny fellow stares at you + </center> + </td> + --> + <td onclick="new_adventure_game(event);"> + <center> + <img src="/img/business.png" width="48px" height="48px"> + <p> + ... a fearless adventurer in search for fame and fortune + </center> + </td> + <td onclick="new_timechaser_game(event);"> + <center> + <img src="/img/clock.png" width="48px" height="48px"> + <p> + ... determined to get out from here as fast as possible + </center> + </td> + </tr> + </table> + (PS: You will need a decent browser for this to work) + </p> + <!-- + <table style="width:100%; height:100%; border: 1px solid black "> + <tr> + <td> + ...the owner of a GameID: + </td> + <td> + <input type="text"> + </td> + <td> + <button type="button">Continue</button> + </td> + </tr> + </table> + --> + </div> + <div id="badbrowser" style="visibility: ${badbrowser_visible}; height:100%; display:${badbrowser_display};"> + Seems your browser is not in the list of supported browsers... + We recommend using one of the following browsers:<p> + <ul> + <li>Firefox > 53</li> + <li>Chrome > 56</li> + <li>Opera > 44</li> + </ul> + otherwise you might encounter performance issues... or simply, the game will not work.<p> + </div> + <span id="gotext1" style="visibility: hidden;"> + ${gotext1} + <p id="gotext2" style="visibility: hidden;"> + ${gotext2} + </p> + <p id="gotext3" style="visibility: hidden;"> + ${gotext3} + </p> + <p id="gotext4" style="visibility: hidden;"> + ${gotext4} + </p> + <p id="gotext5" style="visibility: hidden;"> + ${gotext5} + </p> + </span> + </strong></font> + <center> + <p> <p align="center"> + <span id="gospan"> + <button id="gobutton" onclick="setup_labyrinth();" style="visibility: hidden;"> + Let's get out + </button> + </span> + <p> + <span id="goexploremore" style="visibility: hidden;"> + <button id="gonextlevel" onclick="${new_game_type}(window.event);"> + New game + </button> + </span> + </center> + </center> + + </div> + <form name="n"> + <input type=hidden id="gid" name="gid" value="${gid}"/> + <input type=hidden id="lid" name="lid" value="${lid}"/> + </form>