PolyCity
56bf3fa2a2
- Procedural island maps, RCI zoning, demand-driven growth - City-wide power grid with brownouts; wind coastal bonus - Land value, upgrades, services, pollution, fires & fire spread - Budget/taxes, happiness, milestones, quest onboarding - Traffic agents, day/night cycle, adaptive render scale - Saves: autosave + 3 slots + JSON export/import - PWA (offline), GitHub Pages/Netlify deploy configs - Tests: 40-assertion engine suite + headless E2E
75 lines
3.7 KiB
HTML
75 lines
3.7 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
|
|
<title>PolyCity — 3D City Builder</title>
|
|
<meta name="description" content="PolyCity is a free full-featured 3D city-builder simulation: zone districts, manage power and services, balance the budget, survive fires and grow a tiny village into a sprawling metropolis — right in your browser." />
|
|
<meta name="theme-color" content="#0b1020" />
|
|
<meta property="og:title" content="PolyCity — 3D City Builder" />
|
|
<meta property="og:description" content="Zone it, power it, grow it. A full SimCity-style simulation running in your browser." />
|
|
<meta property="og:type" content="website" />
|
|
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%230b1020'/%3E%3Crect x='12' y='30' width='10' height='22' fill='%2348d597'/%3E%3Crect x='26' y='20' width='12' height='32' fill='%235aa9ff'/%3E%3Crect x='42' y='34' width='10' height='18' fill='%23ffb454'/%3E%3Crect x='28' y='24' width='3' height='3' fill='%230b1020'/%3E%3Crect x='33' y='24' width='3' height='3' fill='%230b1020'/%3E%3Crect x='28' y='31' width='3' height='3' fill='%230b1020'/%3E%3Crect x='33' y='31' width='3' height='3' fill='%230b1020'/%3E%3C/svg%3E" />
|
|
<link rel="manifest" href="./manifest.webmanifest" />
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
|
|
<!-- ============ HUD skeleton (populated by ui.js) ============ -->
|
|
<div id="hud">
|
|
<header id="topbar">
|
|
<div class="tb-left">
|
|
<div id="cityBadge">
|
|
<span id="cityName">New City</span>
|
|
<span id="milestoneTitle" class="muted"></span>
|
|
</div>
|
|
<div class="stat" title="City funds"><span class="ico">💰</span><b id="statFunds">$0</b></div>
|
|
<div class="stat" title="Population"><span class="ico">👥</span><b id="statPop">0</b></div>
|
|
<div class="stat" title="Happiness"><span class="ico" id="happyFace">🙂</span><b id="statHappy">—</b></div>
|
|
<div class="stat" title="Date"><span class="ico">📅</span><b id="statDate">Jan 2026</b></div>
|
|
<canvas id="rciBars" width="66" height="30" title="Demand: Residential / Commercial / Industrial"></canvas>
|
|
</div>
|
|
<div class="tb-right">
|
|
<div id="speedControls">
|
|
<button class="spd" data-speed="0" title="Pause (Space)">⏸</button>
|
|
<button class="spd active" data-speed="1" title="Normal speed">▶</button>
|
|
<button class="spd" data-speed="2" title="Fast speed">▶▶</button>
|
|
<button class="spd" data-speed="3" title="Fastest speed">▶▶▶</button>
|
|
</div>
|
|
<button id="btnBudget" class="tbtn" title="Budget & taxes">🏦</button>
|
|
<button id="btnStats" class="tbtn" title="City statistics">📊</button>
|
|
<button id="btnHelp" class="tbtn" title="Help / guide">❓</button>
|
|
<button id="btnMenu" class="tbtn" title="Menu (save / load / new city / settings)">☰</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div id="questBox" class="card hidden"></div>
|
|
|
|
<div id="toasts"></div>
|
|
|
|
<div id="tooltip" class="hidden"></div>
|
|
<div id="infoPopup" class="card hidden"></div>
|
|
|
|
<div id="toolbar"></div>
|
|
|
|
<aside id="sidePanelRight" class="hidden"></aside>
|
|
|
|
<div id="minimapWrap" class="hidden">
|
|
<canvas id="minimap" width="160" height="160"></canvas>
|
|
</div>
|
|
|
|
<div id="modalRoot"></div>
|
|
|
|
<div id="bootScreen">
|
|
<div class="boot-inner">
|
|
<h1>POLY<span>CITY</span></h1>
|
|
<p>Building your world…</p>
|
|
<div class="boot-bar"><i></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|