index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, viewport-fit=cover"
    />
    <meta name="theme-color" content="#3b2160" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="manifest" href="/manifest.webmanifest" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-title" content="Munch Manor" />
    <style>
      html {
        background: #160b24;
      }
      #splash {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
        background: radial-gradient(circle at 50% 42%, #3b2160, #160b24 70%);
        color: #f4f1de;
        font:
          bold 14px/1.2 ui-monospace,
          Menlo,
          Consolas,
          monospace;
        transition: opacity 0.2s linear;
      }
      #splash.is-gone {
        opacity: 0;
        pointer-events: none;
      }
      .splash-zombie {
        width: 66px;
        height: 72px;
        shape-rendering: crispEdges;
        animation: splash-chomp 0.5s steps(2) infinite;
      }
      .splash-word {
        margin: 0;
        font-size: clamp(26px, 7vmin, 48px);
        letter-spacing: 0.12em;
        text-shadow:
          3px 3px 0 #140c10,
          -2px -2px 0 #140c10;
      }
      .splash-munch {
        color: #9be36a;
      }
      .splash-manor {
        color: #c9a0f0;
      }
      .splash-line {
        margin: 0;
        color: #b8c2b0;
        font-size: 13px;
        letter-spacing: 0.08em;
      }
      .splash-bar {
        position: relative;
        width: 160px;
        height: 8px;
        overflow: hidden;
        border: 2px solid #140c10;
        background: #24123a;
      }
      /* The slide moves with transform, not left, so the compositor runs it
         and it keeps moving while the game's script holds the main thread. */
      .splash-fill {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 30%;
        background: #9be36a;
        animation: splash-slide 0.9s steps(8) infinite;
      }
      #splash[data-progress='Known'] .splash-fill {
        width: calc(var(--splash-progress, 0) * 100%);
        transform: none;
        animation: none;
      }
      @keyframes splash-chomp {
        to {
          transform: translateY(-3px);
        }
      }
      @keyframes splash-slide {
        from {
          transform: translateX(-100%);
        }
        to {
          transform: translateX(334%);
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .splash-zombie,
        .splash-fill {
          animation: none;
        }
      }
    </style>
    <link href="/src/styles.css" rel="stylesheet" />
    <title>Munch Manor</title>
    <meta
      name="description"
      content="A goofy, gory pixel zombie shooter. Hold a haunted manor through 8 waves, then face Uncle Chunk. Free in your browser on phone or computer."
    />
    <link
      rel="canonical"
      href="https://munch-manor.tanner-scadden.workers.dev/"
    />
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Munch Manor" />
    <meta property="og:title" content="Munch Manor" />
    <meta
      property="og:description"
      content="Survive 8 waves of zombies in a haunted manor. Try not to get eaten. Free in your browser."
    />
    <meta
      property="og:url"
      content="https://munch-manor.tanner-scadden.workers.dev/"
    />
    <meta
      property="og:image"
      content="https://munch-manor.tanner-scadden.workers.dev/og-image.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta
      property="og:image:alt"
      content="The dripping green and purple Munch Manor logo beside a chomping green zombie head on a purple glow, with the line Try not to get eaten."
    />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Munch Manor" />
    <meta
      name="twitter:description"
      content="Survive 8 waves of zombies in a haunted manor. Try not to get eaten. Free in your browser."
    />
    <meta
      name="twitter:image"
      content="https://munch-manor.tanner-scadden.workers.dev/og-image.png"
    />
    <meta
      name="twitter:image:alt"
      content="The dripping green and purple Munch Manor logo beside a chomping green zombie head on a purple glow, with the line Try not to get eaten."
    />
  </head>
  <body ontouchstart="">
    <div id="splash" role="status" aria-live="polite" aria-busy="true">
      <!-- splash-zombie: written by tools/audit/icons.ts -->
      <svg class="splash-zombie" viewBox="0 0 22 24" aria-hidden="true">
        <path
          fill="#140c10"
          d="M7 0h8v1h-8zM5 1h2v1h-2zM4 2h1v1h-1zM17 2h1v1h-1zM3 3h1v1h-1zM18 3h1v1h-1zM2 4h1v1h-1zM19 4h1v1h-1zM2 5h1v1h-1zM19 5h1v1h-1zM1 6h1v1h-1zM20 6h1v1h-1zM1 7h1v1h-1zM20 7h1v1h-1zM1 8h1v1h-1zM20 8h1v1h-1zM1 9h1v1h-1zM20 9h1v1h-1zM1 10h1v1h-1zM20 10h1v1h-1zM0 11h1v1h-1zM21 11h1v1h-1zM0 12h1v1h-1zM21 12h1v1h-1zM0 13h1v1h-1zM21 13h1v1h-1zM0 14h1v1h-1zM21 14h1v1h-1zM0 15h1v1h-1zM21 15h1v1h-1zM0 16h1v1h-1zM21 16h1v1h-1zM0 17h1v1h-1zM21 17h1v1h-1zM1 18h1v1h-1zM20 18h1v1h-1zM2 19h1v1h-1zM19 19h1v1h-1zM3 20h1v1h-1zM18 20h1v1h-1zM5 21h1v1h-1zM16 21h2v1h-2zM6 22h10v1h-10z"
        />
        <path
          fill="#d8f7b0"
          d="M7 1h4v1h-4zM5 2h3v1h-3zM4 3h2v1h-2zM3 4h1v1h-1zM3 5h1v1h-1zM2 6h1v1h-1zM2 7h1v1h-1zM2 8h1v1h-1zM2 9h1v1h-1zM2 10h1v1h-1zM1 11h1v1h-1zM1 12h1v1h-1zM1 13h1v1h-1zM1 14h1v1h-1zM1 15h1v1h-1zM1 16h1v1h-1zM1 17h1v1h-1zM2 18h1v1h-1z"
        />
        <path
          fill="#3f7f2a"
          d="M11 1h2v1h-2zM17 3h1v1h-1zM18 4h1v1h-1zM18 5h1v1h-1zM4 6h4v1h-4zM14 6h4v1h-4zM19 6h1v1h-1zM19 7h1v1h-1zM19 8h1v1h-1zM19 9h1v1h-1zM10 10h2v1h-2zM19 10h1v1h-1zM20 11h1v1h-1zM20 12h1v1h-1zM20 13h1v1h-1zM20 14h1v1h-1zM20 15h1v1h-1zM20 16h1v1h-1zM20 17h1v1h-1zM19 18h1v1h-1zM3 19h1v1h-1zM18 19h1v1h-1zM5 20h1v1h-1zM16 20h2v1h-2zM6 21h10v1h-10z"
        />
        <path
          fill="#f28fb0"
          d="M13 1h4v1h-4zM12 2h1v1h-1zM14 2h3v1h-3zM12 3h2v1h-2zM16 3h1v1h-1zM14 4h2v1h-2z"
        />
        <path
          fill="#8fdc5a"
          d="M8 2h4v1h-4zM6 3h6v1h-6zM4 4h9v1h-9zM16 4h2v1h-2zM4 5h14v1h-14zM3 6h1v1h-1zM8 6h6v1h-6zM18 6h1v1h-1zM3 7h1v1h-1zM8 7h6v1h-6zM18 7h1v1h-1zM3 8h1v1h-1zM8 8h6v1h-6zM18 8h1v1h-1zM3 9h1v1h-1zM8 9h6v1h-6zM18 9h1v1h-1zM3 10h7v1h-7zM12 10h7v1h-7zM2 11h18v1h-18zM2 12h1v1h-1zM19 12h1v1h-1zM2 13h1v1h-1zM19 13h1v1h-1zM2 14h1v1h-1zM19 14h1v1h-1zM2 15h1v1h-1zM19 15h1v1h-1zM2 16h1v1h-1zM19 16h1v1h-1zM2 17h1v1h-1zM19 17h1v1h-1zM3 18h1v1h-1zM5 18h14v1h-14zM5 19h13v1h-13zM6 20h10v1h-10z"
        />
        <path
          fill="#c0587a"
          d="M13 2h1v1h-1zM14 3h2v1h-2zM13 4h1v1h-1zM9 15h4v1h-4z"
        />
        <path
          fill="#f4f1de"
          d="M4 7h4v1h-4zM4 8h2v1h-2zM4 9h2v1h-2zM3 13h3v1h-3zM7 13h3v1h-3zM12 13h3v1h-3zM16 13h3v1h-3zM4 14h1v1h-1zM8 14h1v1h-1zM13 14h1v1h-1zM17 14h1v1h-1zM6 16h1v1h-1zM10 16h2v1h-2zM15 16h1v1h-1zM5 17h3v1h-3zM9 17h4v1h-4zM14 17h3v1h-3z"
        />
        <path
          fill="#2a1418"
          d="M14 7h4v1h-4zM14 8h1v1h-1zM17 8h1v1h-1zM14 9h1v1h-1zM17 9h1v1h-1zM3 12h16v1h-16zM6 13h1v1h-1zM10 13h2v1h-2zM15 13h1v1h-1zM3 14h1v1h-1zM5 14h3v1h-3zM9 14h4v1h-4zM14 14h3v1h-3zM18 14h1v1h-1zM3 15h6v1h-6zM13 15h6v1h-6zM3 16h3v1h-3zM7 16h3v1h-3zM12 16h3v1h-3zM16 16h3v1h-3zM3 17h2v1h-2zM8 17h1v1h-1zM13 17h1v1h-1zM17 17h2v1h-2z"
        />
        <path
          fill="#e8333a"
          d="M6 8h2v1h-2zM15 8h2v1h-2zM6 9h2v1h-2zM15 9h2v1h-2z"
        />
        <path
          fill="#c4232b"
          d="M4 18h1v1h-1zM4 19h1v1h-1zM4 20h1v1h-1zM3 21h2v1h-2zM3 22h1v1h-1zM3 23h1v1h-1z"
        />
        <path fill="#8c1f24" d="M4 22h1v1h-1z" />
      </svg>
      <!-- /splash-zombie -->
      <p class="splash-word">
        <span class="splash-munch">MUNCH</span>
        <span class="splash-manor">MANOR</span>
      </p>
      <p class="splash-line">Waking the dead...</p>
      <div class="splash-bar" aria-hidden="true">
        <div class="splash-fill"></div>
      </div>
      <noscript
        ><p class="splash-line">
          Munch Manor needs JavaScript to rise.
        </p></noscript
      >
    </div>
    <div id="root"></div>
    <script type="module" src="./src/entry.ts"></script>
  </body>
</html>