Subversion Repositories Kolibri OS

Rev

Blame | Last modification | View Log | RSS feed

  1. <!doctype html>
  2. <html lang="en-us">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.     <title>Hydra Castle Labyrinth</title>
  7.     <style type="text/css">
  8.       html, body {
  9.         margin: 0;
  10.       }
  11.       .emscripten {
  12.         width: 100%;
  13.         height: 100%;
  14.         display: flex;
  15.         position: absolute;
  16.         align-items: center;
  17.         justify-content: center;
  18.       }
  19.       .game {
  20.         width: auto;
  21.         height: 100%;
  22.       }
  23.       .portrait{
  24.         width: 100%;
  25.         height: auto;
  26.       }
  27.       .loading {
  28.         position: absolute;
  29.       }
  30.       .game[width] + .loading {
  31.         display: none;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="emscripten">
  37.       <canvas class="game portrait" oncontextmenu="event.preventDefault()"></canvas>
  38.       <div class="loading">Loading...</div>
  39.     </div>
  40.     <script type="text/javascript">
  41.         const $game = document.querySelector('.game');
  42.         const widthToHeight = 640 / 480;
  43.         const resize = () => {
  44.             if(window.innerWidth / window.innerHeight > widthToHeight === $game.classList.contains('portrait')) {
  45.             $game.classList.toggle('portrait');
  46.             }
  47.         }
  48.         var Module = {
  49.             print(text) {
  50.             console.log(Array.prototype.slice.call(arguments).join(' '));
  51.             },
  52.             printErr() {
  53.             console.error(Array.prototype.slice.call(arguments).join(' '));
  54.             },
  55.             canvas: $game
  56.         };
  57.         window.addEventListener('resize', resize, false);
  58.         resize();
  59.         // Work-around chromium autoplay policy
  60.         // https://github.com/emscripten-core/emscripten/issues/6511
  61.         function resumeAudio(e) {
  62.             if (typeof Module === 'undefined'
  63.                 || typeof Module.SDL2 == 'undefined'
  64.                 || typeof Module.SDL2.audioContext == 'undefined')
  65.                 return;
  66.             if (Module.SDL2.audioContext.state == 'suspended') {
  67.                 Module.SDL2.audioContext.resume();
  68.             }
  69.             if (Module.SDL2.audioContext.state == 'running') {
  70.                 $game.removeEventListener('click', resumeAudio);
  71.                 document.removeEventListener('keydown', resumeAudio);
  72.             }
  73.         }
  74.         $game.addEventListener('click', resumeAudio);
  75.         document.addEventListener('keydown', resumeAudio);
  76.     </script>
  77.     {{{ SCRIPT }}}
  78.   </body>
  79. </html>