280 lines
13 KiB
HTML
280 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>VillSim - Village Economy Simulation</title>
|
|
<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=Crimson+Pro:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<header id="header">
|
|
<div class="header-left">
|
|
<h1 class="title">VillSim</h1>
|
|
<span class="subtitle">Village Economy Simulation</span>
|
|
</div>
|
|
<div class="header-center">
|
|
<div class="time-display">
|
|
<span id="day-display">Day 1</span>
|
|
<span class="separator">·</span>
|
|
<span id="time-display">☀️ Day</span>
|
|
<span class="separator">·</span>
|
|
<span id="turn-display">Turn 0</span>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="connection-status" id="connection-status">
|
|
<span class="status-dot disconnected"></span>
|
|
<span class="status-text">Disconnected</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="main-content">
|
|
<aside id="left-panel" class="panel">
|
|
<div class="panel-section">
|
|
<h3 class="section-title">Population</h3>
|
|
<div class="stat-grid" id="population-stats">
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="stat-alive">0</span>
|
|
<span class="stat-label">Alive</span>
|
|
</div>
|
|
<div class="stat-item">
|
|
<span class="stat-value" id="stat-dead">0</span>
|
|
<span class="stat-label">Dead</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-section">
|
|
<h3 class="section-title">Professions</h3>
|
|
<div class="profession-list" id="profession-list">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-section">
|
|
<h3 class="section-title">Economy</h3>
|
|
<div class="economy-stats" id="economy-stats">
|
|
<div class="economy-item">
|
|
<span class="economy-label">Money in Circulation</span>
|
|
<span class="economy-value" id="stat-money">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<div id="game-container">
|
|
<!-- Phaser canvas will be inserted here -->
|
|
</div>
|
|
|
|
<aside id="right-panel" class="panel">
|
|
<div class="panel-section agent-section scrollable-section">
|
|
<h3 class="section-title">Selected Agent</h3>
|
|
<div id="agent-details" class="agent-details">
|
|
<p class="no-selection">Click an agent to view details</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-section">
|
|
<h3 class="section-title">Market Prices</h3>
|
|
<div class="market-prices" id="market-prices">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="panel-section">
|
|
<h3 class="section-title">Activity Log</h3>
|
|
<div class="activity-log" id="activity-log">
|
|
<!-- Filled by JS -->
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<footer id="footer">
|
|
<div class="controls">
|
|
<button id="btn-initialize" class="btn btn-secondary" title="Reset Simulation">
|
|
<span class="btn-icon">⟳</span> Reset
|
|
</button>
|
|
<button id="btn-step" class="btn btn-primary" title="Advance one turn">
|
|
<span class="btn-icon">▶</span> Step
|
|
</button>
|
|
<button id="btn-auto" class="btn btn-toggle" title="Toggle auto mode">
|
|
<span class="btn-icon">⏯</span> Auto
|
|
</button>
|
|
<button id="btn-stats" class="btn btn-secondary" title="View Statistics">
|
|
<span class="btn-icon">📊</span> Stats
|
|
</button>
|
|
</div>
|
|
<div class="speed-control">
|
|
<label for="speed-slider">Speed</label>
|
|
<input type="range" id="speed-slider" min="50" max="1000" value="150" step="50">
|
|
<span id="speed-display">150ms</span>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Stats Screen (Full View) -->
|
|
<div id="stats-screen" class="stats-screen hidden">
|
|
<div class="stats-header">
|
|
<div class="stats-header-left">
|
|
<h2>📊 Simulation Statistics</h2>
|
|
<span class="stats-subtitle">Real-time metrics and charts</span>
|
|
</div>
|
|
<div class="stats-header-center">
|
|
<div class="stats-tabs">
|
|
<button class="tab-btn active" data-tab="prices">Prices</button>
|
|
<button class="tab-btn" data-tab="wealth">Wealth</button>
|
|
<button class="tab-btn" data-tab="population">Population</button>
|
|
<button class="tab-btn" data-tab="professions">Professions</button>
|
|
<button class="tab-btn" data-tab="resources">Resources</button>
|
|
<button class="tab-btn" data-tab="market">Market</button>
|
|
<button class="tab-btn" data-tab="agents">Agents</button>
|
|
</div>
|
|
</div>
|
|
<div class="stats-header-right">
|
|
<button id="btn-close-stats" class="btn btn-secondary">
|
|
<span class="btn-icon">◀</span> Back to Game
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="stats-body">
|
|
<!-- Prices Tab -->
|
|
<div id="tab-prices" class="tab-panel active">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-prices"></canvas>
|
|
</div>
|
|
</div>
|
|
<!-- Wealth Tab -->
|
|
<div id="tab-wealth" class="tab-panel">
|
|
<div class="chart-grid three-col">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-wealth-dist"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-wealth-prof"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-wealth-time"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Population Tab -->
|
|
<div id="tab-population" class="tab-panel">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-population"></canvas>
|
|
</div>
|
|
</div>
|
|
<!-- Professions Tab -->
|
|
<div id="tab-professions" class="tab-panel">
|
|
<div class="chart-grid two-col">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-prof-pie"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-prof-time"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Resources Tab -->
|
|
<div id="tab-resources" class="tab-panel">
|
|
<div class="chart-grid four-col">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-produced"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-consumed"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-spoiled"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-stock"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="chart-grid four-col" style="margin-top: 16px;">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-cum-produced"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-cum-consumed"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-cum-spoiled"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-res-cum-traded"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Market Tab -->
|
|
<div id="tab-market" class="tab-panel">
|
|
<div class="chart-grid two-col">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-market-supply"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-market-activity"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Agents Tab -->
|
|
<div id="tab-agents" class="tab-panel">
|
|
<div class="chart-grid four-col">
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-stat-energy"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-stat-hunger"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-stat-thirst"></canvas>
|
|
</div>
|
|
<div class="chart-wrapper">
|
|
<canvas id="chart-stat-heat"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stats-footer">
|
|
<div class="stats-summary-bar">
|
|
<div class="summary-item">
|
|
<span class="summary-label">Turn</span>
|
|
<span class="summary-value" id="stats-turn">0</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Living</span>
|
|
<span class="summary-value highlight" id="stats-living">0</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Deaths</span>
|
|
<span class="summary-value danger" id="stats-deaths">0</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Total Gold</span>
|
|
<span class="summary-value gold" id="stats-gold">0</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Avg Wealth</span>
|
|
<span class="summary-value" id="stats-avg-wealth">0</span>
|
|
</div>
|
|
<div class="summary-item">
|
|
<span class="summary-label">Gini Index</span>
|
|
<span class="summary-value" id="stats-gini">0.00</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load game modules -->
|
|
<script type="module" src="src/main.js"></script>
|
|
</body>
|
|
</html>
|
|
|