index.html

index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <meta name="theme-color" content="#0f172a" />
    <meta name="color-scheme" content="dark light" />

    <!-- Primary SEO -->
    <title>2D Game Base — A Production-Grade PixiJS + TypeScript Starter</title>
    <meta
      name="description"
      content="A best-in-class TypeScript boilerplate for shipping high-quality 2D HTML5 games. PixiJS v8 rendering, Rapier physics, Howler audio, tween.js, PWA, and SEO out of the box."
    />
    <meta
      name="keywords"
      content="2d game, html5 game, pixijs, rapier physics, howler, typescript, vite, game boilerplate, browser game, game template"
    />
    <meta name="author" content="2D Game Base" />
    <meta name="robots" content="index, follow" />
    <link rel="canonical" href="https://example.com/" />

    <!-- Open Graph -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://example.com/" />
    <meta
      property="og:title"
      content="2D Game Base — A Production-Grade PixiJS + TypeScript Starter"
    />
    <meta
      property="og:description"
      content="A best-in-class TypeScript boilerplate for shipping high-quality 2D HTML5 games. PixiJS v8, Rapier physics, Howler audio."
    />
    <meta property="og:image" content="https://example.com/og-image.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:site_name" content="2D Game Base" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta
      name="twitter:title"
      content="2D Game Base — A Production-Grade PixiJS + TypeScript Starter"
    />
    <meta
      name="twitter:description"
      content="A best-in-class TypeScript boilerplate for shipping high-quality 2D HTML5 games."
    />
    <meta name="twitter:image" content="https://example.com/og-image.png" />

    <!-- Icons & PWA -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="alternate icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" href="/favicon.svg" />
    <link rel="manifest" href="/manifest.webmanifest" />

    <!-- JSON-LD: VideoGame schema -->
    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "VideoGame",
        "name": "2D Game Base",
        "description": "A best-in-class TypeScript boilerplate for shipping high-quality 2D HTML5 games. PixiJS v8 rendering, Rapier physics, Howler audio, tween.js, PWA, and SEO out of the box.",
        "url": "https://example.com/",
        "image": "https://example.com/og-image.png",
        "applicationCategory": "Game",
        "genre": ["Arcade", "Action"],
        "operatingSystem": "Web Browser",
        "gamePlatform": "Web Browser",
        "playMode": "SinglePlayer",
        "author": { "@type": "Organization", "name": "2D Game Base" },
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" }
      }
    </script>

    <style>
      :root {
        color-scheme: dark light;
        --bg: #0f172a;
        --fg: #f8fafc;
        --accent: #38bdf8;
      }
      * {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
        background: var(--bg);
        color: var(--fg);
        font-family:
          system-ui,
          -apple-system,
          'Segoe UI',
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
        overflow: hidden;
      }
      /* Pixi mounts its canvas inside #game. The canvas is positioned and
         sized by Pixi (resizeTo: window). We just give it a viewport-filling
         container and remove the default inline-baseline whitespace. */
      #game {
        position: fixed;
        inset: 0;
      }
      #game canvas {
        display: block;
      }
      /* Loading screen — PreloadScene removes it once assets are ready. */
      #loading {
        position: fixed;
        inset: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        background: var(--bg);
        z-index: 10;
        transition: opacity 0.4s ease;
      }
      #loading.hidden {
        opacity: 0;
        pointer-events: none;
      }
      .spinner {
        width: 48px;
        height: 48px;
        border: 4px solid rgba(255, 255, 255, 0.15);
        border-top-color: var(--accent);
        border-radius: 50%;
        animation: spin 0.9s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }
      /* Visually hidden but readable to screen readers / crawlers */
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }
    </style>
  </head>
  <body>
    <!-- Crawler-readable content. The game renders in <canvas> which crawlers can't
         index, so we mirror the game's identity here as plain text. -->
    <header class="sr-only">
      <h1>2D Game Base</h1>
      <p>
        A best-in-class TypeScript boilerplate for shipping high-quality 2D HTML5 games. Built on
        PixiJS v8, Rapier physics, Howler audio, tween.js, and Vite. Includes SEO, PWA, a
        responsive scene system, and a placeholder mini-game so the project runs out of the box.
      </p>
      <h2>Features</h2>
      <ul>
        <li>PixiJS v8 — best-in-class WebGL/WebGPU 2D renderer</li>
        <li>Rapier physics (Rust → WASM) — deterministic and fast</li>
        <li>Howler audio with Web Audio synth fallback</li>
        <li>tween.js animation</li>
        <li>TypeScript with strict mode</li>
        <li>Responsive scene system that adapts to any viewport</li>
        <li>PWA / offline support</li>
        <li>SEO meta tags, Open Graph, Twitter cards, JSON-LD VideoGame schema</li>
      </ul>
    </header>

    <noscript>
      <div style="padding: 2rem; text-align: center">
        <h1>JavaScript is required</h1>
        <p>This game needs JavaScript enabled to run. Please enable it and reload.</p>
      </div>
    </noscript>

    <div id="loading" data-loading>
      <div class="spinner" aria-hidden="true"></div>
      <p>Loading game…</p>
    </div>

    <main id="game" aria-label="Game viewport"></main>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>