LifeSimulator/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ecosystem Life Simulator — Wolves, Sheep & Flora</title>
  <meta name="description" content="A pixelated life simulator ecosystem featuring sheep grazing, wolf predation, carcass decomposition, floral blooms, and weather cycles.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="app-layout">
    <!-- Top Navigation & Global Header -->
    <header class="top-nav">
      <div class="brand">
        <div class="logo-icon">🌿</div>
        <div>
          <h1>Life Simulator</h1>
          <span class="tagline">Ecological Flora & Fauna Simulation</span>
        </div>
      </div>

      <!-- Live Global Metrics Badges -->
      <div class="stats-ribbon">
        <div class="stat-badge badge-sheep" title="Active Sheep Population">
          <span class="badge-icon">🐑</span>
          <span class="badge-val" id="hudSheep">0</span>
          <span class="badge-label">Sheep</span>
        </div>
        <div class="stat-badge badge-wolf" title="Active Wolf Population">
          <span class="badge-icon">🐺</span>
          <span class="badge-val" id="hudWolves">0</span>
          <span class="badge-label">Wolves</span>
        </div>
        <div class="stat-badge badge-plant" title="Active Plants & Flower Tufts">
          <span class="badge-icon">🌸</span>
          <span class="badge-val" id="hudPlants">0</span>
          <span class="badge-label">Plants</span>
        </div>
        <div class="stat-badge badge-weather" title="Current Atmosphere">
          <span class="badge-val" id="hudWeather">☀️ Sunny</span>
        </div>
        <div class="stat-badge badge-time" title="Simulated Elapsed Time">
          <span class="badge-icon">⏱️</span>
          <span class="badge-val" id="hudTime">00:00</span>
        </div>
      </div>

      <!-- Quick Action Controls -->
      <div class="header-actions">
        <button id="btnPlayPause" class="btn btn-primary" aria-label="Toggle Play/Pause">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
          <span>Play</span>
        </button>
        <button id="btnRestart" class="btn btn-secondary" title="Restart Simulation">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
          <span>Restart</span>
        </button>
        <button id="btnFullscreen" class="btn btn-secondary" title="Fullscreen Screen Saver Mode">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>
          <span>Fullscreen</span>
        </button>
      </div>
    </header>

    <!-- Floating Fullscreen Exit Button (Screen Saver Mode) -->
    <button id="btnExitFullscreen" class="btn-fullscreen-exit hidden" title="Exit Fullscreen & Show Controls">
      <svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-14v3h3v2h-5V5h2z"/></svg>
      <span>Show Controls</span>
    </button>

    <!-- Main Workspace Area -->
    <div class="main-workspace">
      <!-- Left Sidebar: Sliders & Controls -->
      <aside class="sidebar-panel">
        <div class="sidebar-scroll">
          
          <!-- Simulation Speed -->
          <div class="control-group">
            <label class="group-title">Simulation Speed</label>
            <div class="speed-selector">
              <button class="speed-btn active" data-speed="1">1x</button>
              <button class="speed-btn" data-speed="2">2x</button>
              <button class="speed-btn" data-speed="4">4x</button>
            </div>
          </div>

          <!-- Defaults & Persistence Action Bar -->
          <div class="control-group config-actions-group">
            <div class="group-title-row">
              <span class="group-title">Preset Config</span>
            </div>
            <div class="preset-buttons-row">
              <button id="btnSetDefaults" class="btn btn-sm btn-accent" title="Save current slider values as your custom defaults">💾 Save As Defaults</button>
              <button id="btnDefaults" class="btn btn-sm btn-secondary" title="Reset sliders to defaults">↺ Reset</button>
              <button id="btnCopyJson" class="btn btn-sm btn-secondary" title="Copy configuration as JSON">📋 Copy JSON</button>
            </div>
            <div id="toastMsg" class="toast-text hidden">Settings Saved!</div>
          </div>

          <!-- Continuous Screen Saver Mode -->
          <div class="control-group continuous-group">
            <div class="group-title-row">
              <span class="group-title">📺 Continuous Mode</span>
              <label class="toggle-switch" title="Endless screen saver: continuously spawns animals from screen edges">
                <input type="checkbox" id="checkContinuous">
                <span class="toggle-slider"></span>
              </label>
            </div>
            <div class="group-subtitle">Spawns wolves & sheep from screen edges on random intervals for endless background play.</div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🐑 Sheep Influx Interval</span>
                <span class="slider-val" id="valContinuousSheep">14s</span>
              </div>
              <input type="range" id="sliderContinuousSheep" min="4" max="45" step="1" value="14">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🐺 Wolf Influx Interval</span>
                <span class="slider-val" id="valContinuousWolf">32s</span>
              </div>
              <input type="range" id="sliderContinuousWolf" min="10" max="90" step="1" value="32">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🐾 Influx Wave Size</span>
                <span class="slider-val" id="valContinuousGroup">3</span>
              </div>
              <input type="range" id="sliderContinuousGroup" min="1" max="5" step="1" value="3">
            </div>
          </div>

          <!-- Section 1: Populations & Caps -->
          <div class="control-group">
            <div class="group-title-row">
              <span class="group-title">Populations & Limits</span>
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🐑 Initial Sheep</span>
                <span class="slider-val" id="valSheep">25</span>
              </div>
              <input type="range" id="sliderSheep" min="2" max="80" step="1" value="25">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🐺 Initial Wolves</span>
                <span class="slider-val" id="valWolves">3</span>
              </div>
              <input type="range" id="sliderWolves" min="1" max="20" step="1" value="3">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🌿 Initial Plants</span>
                <span class="slider-val" id="valPlants">35</span>
              </div>
              <input type="range" id="sliderPlants" min="5" max="100" step="1" value="35">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🛡️ Max Plant Cap (CPU Guard)</span>
                <span class="slider-val" id="valMaxPlantCap">90</span>
              </div>
              <input type="range" id="sliderMaxPlantCap" min="20" max="300" step="5" value="90">
            </div>
          </div>

          <!-- Section 2: Sheep Dynamics -->
          <div class="control-group">
            <div class="group-title-row">
              <span class="group-title">🐑 Sheep Grazing & Herd</span>
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🍽️ Hunger Depletion Rate</span>
                <span class="slider-val" id="valSheepHunger">1.2/s</span>
              </div>
              <input type="range" id="sliderSheepHunger" min="0.2" max="3.0" step="0.1" value="1.2">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">📏 Grazing Reach</span>
                <span class="slider-val" id="valSheepReach">18px</span>
              </div>
              <input type="range" id="sliderSheepReach" min="10" max="35" step="1" value="18">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">⏱️ Mating Cooldown</span>
                <span class="slider-val" id="valSheepMating">22s</span>
              </div>
              <input type="range" id="sliderSheepMating" min="10" max="60" step="2" value="22">
            </div>
          </div>

          <!-- Section 3: Wolf Dynamics & Combat Exertion -->
          <div class="control-group">
            <div class="group-title-row">
              <span class="group-title">🐺 Wolf Predation & Exertion</span>
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">⚡ Lunge Health Cost (Exertion)</span>
                <span class="slider-val" id="valWolfLunge">7 HP</span>
              </div>
              <input type="range" id="sliderWolfLunge" min="0" max="20" step="1" value="7">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🥩 Wolf Hunger Rate</span>
                <span class="slider-val" id="valWolfHunger">1.3/s</span>
              </div>
              <input type="range" id="sliderWolfHunger" min="0.5" max="3.5" step="0.1" value="1.3">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🩸 Attack Bite Damage</span>
                <span class="slider-val" id="valWolfDamage">38</span>
              </div>
              <input type="range" id="sliderWolfDamage" min="15" max="80" step="5" value="38">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">⏱️ Wolf Mating Cooldown</span>
                <span class="slider-val" id="valWolfMating">35s</span>
              </div>
              <input type="range" id="sliderWolfMating" min="15" max="80" step="5" value="35">
            </div>
          </div>

          <!-- Section 4: Flora & Atmosphere -->
          <div class="control-group">
            <div class="group-title-row">
              <span class="group-title">🌸 Flora & Environment</span>
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🌾 Seed Spread Chance</span>
                <span class="slider-val" id="valSeedRate">8%</span>
              </div>
              <input type="range" id="sliderSeedRate" min="0" max="40" step="1" value="8">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">☀️ Plant Withering Speed</span>
                <span class="slider-val" id="valDryRate">2.2/s</span>
              </div>
              <input type="range" id="sliderDryRate" min="0.5" max="6.0" step="0.5" value="2.2">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">🌧️ Rain Frequency</span>
                <span class="slider-val" id="valRain">45%</span>
              </div>
              <input type="range" id="sliderRain" min="0" max="100" step="5" value="45">
            </div>

            <div class="slider-item">
              <div class="slider-header">
                <span class="slider-title">💀 Carcass Decay Speed</span>
                <span class="slider-val" id="valDecay">1.0x</span>
              </div>
              <input type="range" id="sliderDecay" min="0.2" max="3.0" step="0.2" value="1.0">
            </div>

            <button id="btnRain" class="btn btn-action-weather" title="Summon an immediate rain shower">
              <span>🌧️ Make It Rain Now!</span>
            </button>
          </div>

          <!-- Interaction / Click Spawn Tools -->
          <div class="control-group">
            <label class="group-title">Field Click Tool</label>
            <div class="tools-grid">
              <button class="tool-btn active" data-tool="inspect" title="Click any entity on field to inspect detailed biology">
                🔍 Inspect
              </button>
              <button class="tool-btn" data-tool="sheep" title="Click meadow to spawn a Sheep">
                🐑 Sheep
              </button>
              <button class="tool-btn" data-tool="wolf" title="Click meadow to spawn a Wolf">
                🐺 Wolf
              </button>
              <button class="tool-btn" data-tool="plant" title="Click meadow to plant Grass">
                🌿 Grass
              </button>
              <button class="tool-btn" data-tool="flower" title="Click meadow to plant a Flower Tuft">
                🌸 Flower
              </button>
            </div>
          </div>

          <!-- Live Population Dynamics Mini-Chart -->
          <div class="control-group">
            <div class="chart-header">
              <span class="group-title">Population Curve</span>
              <div class="chart-legend-mini">
                <span class="leg-dot sheep-dot"></span> Sheep
                <span class="leg-dot wolf-dot"></span> Wolves
                <span class="leg-dot plant-dot"></span> Plants
              </div>
            </div>
            <div class="mini-chart-wrapper">
              <canvas id="miniChart" width="280" height="90"></canvas>
            </div>
          </div>

        </div>
      </aside>

      <!-- Center: Simulation Canvas Arena -->
      <main class="canvas-viewport">
        <div class="canvas-container">
          <canvas id="simCanvas"></canvas>

          <!-- Floating Entity Inspector Card -->
          <div id="inspectorPanel" class="inspector-card hidden">
            <button id="btnCloseInspector" class="insp-close">&times;</button>
            <div id="inspectorDetails"></div>
          </div>
        </div>
      </main>
    </div>

    <!-- Extinction Event Modal Overlay -->
    <div id="extinctionModal" class="modal-backdrop hidden">
      <div class="modal-card">
        <div class="modal-header">
          <div class="modal-badge-skull">💀</div>
          <h2>Extinction Event</h2>
          <p class="modal-subtitle">All active animal species have perished. The meadow has fallen quiet.</p>
        </div>

        <!-- History Chart -->
        <div class="modal-chart-section">
          <h3>Ecosystem Population Timeline</h3>
          <div class="extinction-chart-wrapper">
            <canvas id="extinctionChart" width="620" height="220"></canvas>
          </div>
        </div>

        <!-- Metric Summary Cards -->
        <div class="stats-grid">
          <div class="stat-card">
            <span class="sc-label">Time Survived</span>
            <span class="sc-val" id="extTimeSurv">0m 00s</span>
          </div>
          <div class="stat-card">
            <span class="sc-label">Peak Populations</span>
            <div class="sc-subvals">
              <span>🐑 <strong id="extPeakSheep">0</strong></span>
              <span>🐺 <strong id="extPeakWolves">0</strong></span>
              <span>🌿 <strong id="extPeakPlants">0</strong></span>
            </div>
          </div>
          <div class="stat-card">
            <span class="sc-label">Total Born</span>
            <span class="sc-val" id="extTotalBorn">0</span>
          </div>
          <div class="stat-card">
            <span class="sc-label">Predation & Mortality</span>
            <span class="sc-val" id="extWolfKills">0</span>
          </div>
          <div class="stat-card">
            <span class="sc-label">Decay Fertilizer Blooms</span>
            <span class="sc-val" id="extDecayBlooms">0</span>
          </div>
          <div class="stat-card">
            <span class="sc-label">Airborne Seeds Sprouted</span>
            <span class="sc-val" id="extSeeds">0</span>
          </div>
        </div>

        <!-- Modal Actions -->
        <div class="modal-actions">
          <button id="btnModalRestart" class="btn btn-primary btn-lg">Restart Simulation</button>
          <button id="btnModalReview" class="btn btn-secondary btn-lg">Review Meadow Field</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Application Entry Script (ES Modules) -->
  <script type="module" src="js/main.js"></script>
</body>
</html>