<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>snej</title>
    <style>
      * { padding: 0; margin: 0; }
      body { background: black; color: white; font-family: monospace; }
      div { text-align: center; }
      canvas {
        background: magenta;
        display: block;
        margin: 0 auto;
        margin-top: 8px;
        margin-bottom: 8px;
        padding: 1px;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
        image-rendering: -moz-crisp-edges;
      }
    </style>
  </head>
  <body>
    <!-- The canvas drawing resolution is the SNES resolution: 256x224.
    JavaScript upscales the canvas (hopefully in a way that the browser
    doesn't antialias it.) -->
    <canvas id="canvas" width="256" height="224" style="display: none"></canvas>
    <div id="fps"></div>
    <div id="debug"></div>
    <button id="1x">1x</button>
    <button id="2x">2x</button>
    <button id="3x">3x</button>
    <button id="4x">4x</button>
    <button id="5x">5x</button>
    <button id="6x">6x</button>
    <button id="7x">7x</button>
    <button id="8x">8x</button>
    <img src="res/tf/atlantis/tf_atlantis_tiles.png" id="atlantis" style="display: none">
    <img src="res/tf/halloween/ghost1.png" id="ghost" style="display: none">
    <img src="res/tf/beasttribes/beast_tribe_2.png" id="cats" style="display: none">
    <script src="main.js"></script>
  </body>
</html>