nEngine/apps/dev/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@nengine/dev — walking skeleton</title>
    <style>
      html,
      body {
        margin: 0;
        height: 100%;
        background: #111;
        font-family: system-ui, sans-serif;
      }
      #app {
        display: flex;
        flex-direction: column;
        height: 100%;
      }
      #hud {
        display: flex;
        align-items: center;
        gap: 16px;
        padding: 10px 16px;
        background: #202020;
        color: #eee;
        font-size: 14px;
        flex-wrap: wrap;
      }
      #hud button {
        font: inherit;
        padding: 6px 14px;
        border: 1px solid #555;
        border-radius: 4px;
        background: #333;
        color: #eee;
        cursor: pointer;
      }
      #hud button:hover {
        background: #444;
      }
      #hud button.selected {
        background: #2e7d32;
        border-color: #66bb6a;
      }
      #stats-label {
        color: #b0bec5;
      }
      #feedback-label {
        min-width: 180px;
      }
      #seed-picker {
        display: flex;
        gap: 6px;
        align-items: center;
      }
      #seed-picker button {
        padding: 4px 10px;
        font-size: 12px;
      }
      #game {
        flex: 1;
        min-height: 0;
        position: relative;
      }
      #game canvas {
        display: block;
      }
      .panel {
        position: absolute;
        background: #263238;
        border: 1px solid #455a64;
        border-radius: 6px;
        color: #eceff1;
        padding: 14px 16px;
        font-size: 14px;
        max-width: 420px;
        z-index: 10;
      }
      #dialogue-panel {
        bottom: 90px;
        left: 50%;
        transform: translateX(-50%);
      }
      #dialogue-panel .dialogue-text {
        margin-bottom: 10px;
        line-height: 1.5;
      }
      #dialogue-panel button {
        display: block;
        margin: 6px 0;
      }
      #shop-panel {
        top: 80px;
        right: 16px;
      }
      #shop-panel h3 {
        margin: 0 0 8px;
        font-size: 14px;
        color: #ffd54f;
      }
      #shop-panel h4 {
        margin: 8px 0 4px;
        font-size: 12px;
        color: #90a4ae;
      }
      #shop-panel .row {
        display: flex;
        gap: 8px;
        align-items: center;
        margin: 4px 0;
      }
      #shop-panel .price {
        color: #ffd54f;
      }
      #shop-panel .owned {
        color: #90a4ae;
      }
      #shop-panel button {
        font: inherit;
        padding: 3px 10px;
        border: 1px solid #555;
        border-radius: 4px;
        background: #37474f;
        color: #eceff1;
        cursor: pointer;
      }
      #inventory-bar {
        display: flex;
        gap: 16px;
        align-items: center;
        padding: 6px 16px;
        background: #1a1a1a;
        color: #cfd8dc;
        font-size: 12px;
        flex-wrap: wrap;
      }
      #inventory-gold {
        color: #ffd54f;
      }
      #inventory-stamina {
        color: #a5d6a7;
      }
      #inventory-seed {
        color: #80cbc4;
      }
      .hidden {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div id="hud">
        <span id="time-label">booting…</span>
        <span id="stats-label"></span>
        <span id="feedback-label"></span>
        <div id="seed-picker" title="Selected seed for sowing (player.intent select-seed)"></div>
        <button id="tool-interact" type="button">Interact</button>
        <button id="tool-move" type="button">Move</button>
        <button id="advance-day" type="button">Advance day</button>
      </div>
      <div id="game">
        <div id="dialogue-panel" class="panel hidden">
          <div id="dialogue-text" class="dialogue-text"></div>
          <div id="dialogue-choices"></div>
        </div>
        <div id="shop-panel" class="panel hidden">
          <h3 id="shop-title"></h3>
          <h4>Shop sells (buy)</h4>
          <div id="shop-sells"></div>
          <h4>Shop buys (sell yours)</h4>
          <div id="shop-buys"></div>
          <button id="shop-close" type="button">Close</button>
        </div>
      </div>
      <div id="inventory-bar">
        <span id="inventory-items"></span>
        <span id="inventory-gold"></span>
        <span id="inventory-stamina"></span>
        <span id="inventory-seed"></span>
      </div>
    </div>
    <script type="module" src="/apps/dev/src/main.ts"></script>
  </body>
</html>