doctype html
head
  meta(charset='utf-8')
  meta(http-equiv='X-UA-Compatible' content='IE=edge,chrome=1')
  meta(name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui, shrink-to-fit=no')
  meta(name='apple-mobile-web-app-capable' content='yes')
  // The above 4 meta tags *must* come first in the head; any other head content must come *after* these tags
  title ChromaShift 3.2.0
  style(type='text/css').
    /* Disable user selection to avoid strange bug in Chrome on Windows:
    * Selecting a text outside the canvas, then clicking+draging would
    * drag the selected text but block mouse down/up events to the engine.
    */
    body {
    position: fixed; /* Prevent overscroll */
    margin:0;
    padding:0;
    }
    .canvas-app-container {
    width: 100%;
    height: 100%;
    position: absolute;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    }
    .canvas-app-container:-webkit-full-screen {
    /* Auto width and height in Safari/Chrome fullscreen. */
    width: auto;
    height: auto;
    }
    #canvas {
    outline: none;
    border: 0;
    width: 100%;
    vertical-align: bottom;
    }
    canvas:focus, canvas:active {
    outline: none;
    border: 0;
    ie-dummy: expression(this.hideFocus=true);
    -moz-outline-style: none;
    }
    div {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }
    .canvas-app-progress {
    position: absolute;
    background-color: #394046;
    height: 6px;
    margin-top: -6px;
    width: 100%;
    }
    .canvas-app-progress-bar {
    font-size: 12px;
    height: 6px;
    color: rgb(255, 255, 255);
    background-color: #1a72eb;
    text-align: center;
    line-height: 20px;
    }
    .button {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8' standalone='yes'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16px' height='16px' viewBox='0 0 16 16' version='1.1' style='zoom: 32;'%3E%3Ctitle%3Eic-16-fullscreen%3C/title%3E%3Cg id='ic-16-fullscreen' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpath d='M3,11.5 C3,11.776 3.224,12 3.5,12 L12.5,12 C12.776,12 13,11.776 13,11.5 L13,4.5 C13,4.224 12.776,4 12.5,4 L3.5,4 C3.224,4 3,4.224 3,4.5 L3,11.5 Z M14,11 L14,13 L12,13 C11.724,13 11.5,13.224 11.5,13.5 C11.5,13.776 11.724,14 12,14 L14.5,14 C14.776,14 15,13.776 15,13.5 L15,11 C15,10.724 14.776,10.5 14.5,10.5 C14.224,10.5 14,10.724 14,11 Z M12,2 C11.724,2 11.5,2.224 11.5,2.5 C11.5,2.776 11.724,3 12,3 L14,3 L14,5 C14,5.276 14.224,5.5 14.5,5.5 C14.776,5.5 15,5.276 15,5 L15,2.5 C15,2.224 14.776,2 14.5,2 L12,2 Z M2,13 L2,11 C2,10.724 1.776,10.5 1.5,10.5 C1.224,10.5 1,10.724 1,11 L1,13.5 C1,13.776 1.224,14 1.5,14 L4,14 C4.276,14 4.5,13.776 4.5,13.5 C4.5,13.224 4.276,13 4,13 L2,13 Z M1,2.5 C1,2.224 1.224,2 1.5,2 L4,2 C4.276,2 4.5,2.224 4.5,2.5 C4.5,2.776 4.276,3 4,3 L2,3 L2,5 C2,5.276 1.776,5.5 1.5,5.5 C1.224,5.5 1,5.276 1,5 L1,2.5 Z ' id='fill_1' fill='%23fafcff'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    border-color: transparent;
    float: left;
    color: #fafcff;
    padding-left: 50%;
    padding: 0px 0px 0px 20px;
    cursor:pointer;
    background-position: left bottom;
    margin-left: 2px;
    }
    .link, .button {
    font-family: sans-serif;
    font-size: 14px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0px;
    padding-top: 12px;
    }
    .buttons-background {
    background-color: #1e2226;
    width: 100%;
    height: 42px;
    }
    body {
    background-color: #1e2226;
    }
    .canvas-app-container {
    background: rgba(36,41,46,1);
    background: -moz-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(36,41,46,1)), color-stop(49%, rgba(36,41,46,1)), color-stop(50%, rgba(38,43,49,1)), color-stop(100%, rgba(38,43,49,1)));
    background: -webkit-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
    background: linear-gradient(135deg, rgba(36,41,46,1) 0%, rgba(36,41,46,1) 49%, rgba(38,43,49,1) 50%, rgba(38,43,49,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#24292e', endColorstr='#262b31', GradientType=1 );
    }
    .canvas-app-canvas {
    background-repeat:no-repeat;
    background-position: center center;
    background-size: 70%;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 19.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='300px' height='64px' viewBox='-2467.5 2469 300 64' style='enable-background:new -2467.5 2469 300 64;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23fafcff;%7D .st1%7Bfill:url(%23SVGID_1_);%7D .st2%7Bfill:url(%23SVGID_2_);%7D .st3%7Bfill:%2315244A;%7D%0A%3C/style%3E%3Ctitle%3Edefold-logo-html5-splash%3C/title%3E%3Cpolygon class='st0' points='-2177,2482.9 -2175.5,2482.9 -2175.5,2486.7 -2174.4,2486.7 -2174.4,2482.9 -2173.2,2482.9 -2173.2,2481.9 -2177,2481.9 '/%3E%3Cpolygon class='st0' points='-2169.8,2484.1 -2171,2482.1 -2172.1,2482.1 -2172.1,2486.7 -2171,2486.7 -2171,2483.5 -2169.7,2485.6 -2169.7,2485.6 -2168.5,2483.5 -2168.5,2486.7 -2167.5,2486.7 -2167.5,2482.1 -2168.6,2482.1 '/%3E%3Cpath class='st0' d='M-2376,2482h-13.8v38h13.6c6.6,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2354.5,2489.3-2362.9,2482-2376,2482z M-2364,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9 L-2364,2501.2z'/%3E%3Cpolygon class='st0' points='-2340.9,2505 -2325.1,2505 -2325.1,2497.4 -2340.9,2497.4 -2340.9,2489.6 -2322.4,2489.6 -2322.4,2481.9 -2350.1,2481.9 -2350.1,2520 -2322.2,2520 -2322.2,2512.4 -2340.9,2512.4 '/%3E%3Cpolygon class='st0' points='-2317.1,2481.9 -2317.1,2520 -2307.9,2520 -2307.9,2505.9 -2293,2505.9 -2293,2498.4 -2307.9,2498.4 -2307.9,2489.9 -2289.6,2489.9 -2289.6,2481.9 '/%3E%3Cpolygon class='st0' points='-2233,2482.1 -2242.2,2482.1 -2242.2,2520 -2216.3,2520 -2216.3,2512.2 -2233,2512.2 '/%3E%3Cpath class='st0' d='M-2197.1,2482h-13.7v38h13.5c6.7,0,12.2-1.9,16.1-5.5c3.8-3.5,5.8-8.5,5.7-13.7v-0.1 C-2175.5,2489.3-2184,2482-2197.1,2482z M-2185.1,2501.2c0,6.7-4.5,10.9-11.8,10.9h-4.7v-22h4.7c7.3,0,11.8,4.2,11.8,10.9V2501.2z' /%3E%3Cpath class='st0' d='M-2267.5,2481.7c-10.8,0-19.6,8.8-19.6,19.7c0,10.8,8.8,19.6,19.7,19.6c10.8,0,19.6-8.8,19.6-19.6l0,0 C-2247.8,2490.5-2256.6,2481.7-2267.5,2481.7C-2267.5,2481.7-2267.5,2481.7-2267.5,2481.7z M-2258,2507.9l-8.8,5.1 c-0.5,0.3-1.2,0.3-1.8,0l-8.8-5.1c-0.5-0.3-0.9-0.9-0.9-1.5v-10.2c0-0.6,0.3-1.2,0.9-1.5l8.8-5.1c0.5-0.3,1.2-0.3,1.8,0l8.8,5.1 c0.5,0.3,0.9,0.9,0.9,1.5v10.2C-2257.1,2507-2257.4,2507.6-2258,2507.9z'/%3E%3Cpath class='st3' d='M-2423.2,2494.6l-11.1,6.4l-11.1-6.4l11.1-6.4L-2423.2,2494.6z M-2412.1,2501v12.8l11.1-6.4L-2412.1,2501z M-2467.5,2507.4l11.1,6.4V2501L-2467.5,2507.4z M-2434.3,2526.6l11.1,6.4l11.1-6.4l-11.1-6.4l11.1-6.4l-11.1-6.4l-11.1,6.4 l-11.1-6.4l-11.1,6.4l11.1,6.4l-11.1,6.4l11.1,6.4L-2434.3,2526.6z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='-2451.2178' y1='2525.4604' x2='-2406.2178' y2='2499.6304' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%231C68EC'/%3E%3Cstop offset='1' style='stop-color:%2300E9DF'/%3E%3C/linearGradient%3E%3Cpath class='st1' d='M-2412.1,2513.8v12.8l-11.1-6.4L-2412.1,2513.8z M-2434.3,2513.8V2501l-11.1-6.4v12.8L-2434.3,2513.8z M-2445.4,2469v12.8l11.1-6.4L-2445.4,2469z M-2412.1,2488.2L-2412.1,2488.2 M-2423.2,2507.4l11.1,6.4V2501l11.1,6.4v-12.8 l-11.1-6.4v-12.8l0,0l-11.1-6.4v12.8l-11.1-6.4v12.8l11.1,6.4V2507.4z'/%3E%3ClinearGradient id='SVGID_2_' gradientUnits='userSpaceOnUse' x1='-2465.9385' y1='2521.2493' x2='-2423.5085' y2='2496.7893' gradientTransform='matrix(1 0 0 -1 0 5004)'%3E%3Cstop offset='0' style='stop-color:%23FF3C2A'/%3E%3Cstop offset='1' style='stop-color:%23FFD215'/%3E%3C/linearGradient%3E%3Cpath class='st2' d='M-2434.3,2513.8V2501l11.1-6.4v12.8L-2434.3,2513.8z M-2434.3,2475.4l11.1,6.4V2469L-2434.3,2475.4z M-2456.5,2488.2L-2456.5,2488.2 M-2445.4,2494.6l11.1-6.4v-12.8l-11.1,6.4V2469l-11.1,6.4l0,0v12.8l-11.1,6.4v12.8l11.1-6.4v12.8 l11.1-6.4V2494.6z M-2456.5,2513.8v12.8l11.1-6.4L-2456.5,2513.8z'/%3E%3C/svg%3E%0A");
    }
#app-container.canvas-app-container
  canvas#canvas.canvas-app-canvas(tabindex='1' width='1280' height='800')
  .buttons-background
    .button(onclick='Module.toggleFullscreen();') Fullscreen
//
script#engine-loader(type='text/javascript' src='dmloader.js')
//
script#engine-setup(type='text/javascript').
  var extra_params = {
  archive_location_filter: function( path ) {
  return ("archive" + path + "");
  },
  engine_arguments: [],
  custom_heap_size: 536870912,
  disable_context_menu: true
  }
  Module['onRuntimeInitialized'] = function() {
  Module.runApp("canvas", extra_params);
  };
  Module["locateFile"] = function(path, scriptDirectory)
  {
  // dmengine*.wasm is hardcoded in the built JS loader for WASM,
  // we need to replace it here with the correct project name.
  if (path == "dmengine.wasm" || path == "dmengine_release.wasm" || path == "dmengine_headless.wasm") {
  path = "ChromaShift.wasm";
  }
  return scriptDirectory + path;
  };
  var is_iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  var buttonHeight = 0;
  buttonHeight = 42;
  // Resize on init, screen resize and orientation change
  function resize_game_canvas() {
  // Hack for iOS when exit from Fullscreen mode
  if (is_iOS) {
  window.scrollTo(0, 0);
  }
  var app_container = document.getElementById('app-container');
  var game_canvas = document.getElementById('canvas');
  var innerWidth = window.innerWidth;
  var innerHeight = window.innerHeight - buttonHeight;
  var width = 1280;
  var height = 800;
  var targetRatio = width / height;
  var actualRatio = innerWidth / innerHeight;
  //Downscale fit
  if (innerWidth < width || innerHeight < height) {
  if (actualRatio > targetRatio) {
  width = innerHeight * targetRatio;
  height = innerHeight;
  app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
  app_container.style.marginTop = "0px";
  }
  else {
  width = innerWidth;
  height = innerWidth / targetRatio;
  app_container.style.marginLeft = "0px";
  app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
  }
  }
  else {
  app_container.style.marginLeft = ((innerWidth - width) / 2) + "px";
  app_container.style.marginTop = ((innerHeight - height) / 2) + "px";
  }
  app_container.style.width = width + "px";
  app_container.style.height = height + buttonHeight + "px";
  game_canvas.width = width;
  game_canvas.height = height;
  }
  resize_game_canvas();
  window.addEventListener('resize', resize_game_canvas, false);
  window.addEventListener('orientationchange', resize_game_canvas, false);
  function load_engine() {
  var engineJS = document.createElement('script');
  engineJS.type = 'text/javascript';
  if (Module['isWASMSupported']) {
  engineJS.src = 'ChromaShift_wasm.js';
  } else {
  engineJS.src = 'ChromaShift_asmjs.js';
  }
  document.head.appendChild(engineJS);
  }
script#engine-start(type='text/javascript').
  load_engine();