adrien
8a7db56b59
- the nation summary shows own-government approval, white in the neutral 40-60% band, red below and green above - the city and government panels keep a fixed size per tab, dock below the summary and no longer cover it, and their tab bar wraps instead of being clipped - propaganda campaigns grow exponentially harder near their opinion ceiling or floor, so the last percent are the hardest to win - memoised city, nation and matrix approval against the politics version, invalidated by territory redraws, so snapshots stop recomputing it every frame - extracted the duplicated modal tab wiring into modals/tabs.js - tests: campaign-difficulty, approval-colour and cache-invalidation cases (513 pass)
296 lines
12 KiB
HTML
296 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Battle for 'Tismo</title>
|
|
<link rel="icon" href="data:," />
|
|
<link rel="stylesheet" href="css/style.css" />
|
|
</head>
|
|
<body>
|
|
<div id="screens">
|
|
<!-- Main menu -->
|
|
<section id="screen-menu" class="screen active">
|
|
<div class="menu-card">
|
|
<h1>Battle for 'Tismo</h1>
|
|
<p class="tagline">A persistent, continuous-time strategy game.</p>
|
|
<button id="menu-create" class="aero big">Create game</button>
|
|
<button id="menu-join" class="aero big">Join game</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- New game setup -->
|
|
<section id="screen-new" class="screen">
|
|
<div class="menu-card">
|
|
<h1>New game</h1>
|
|
<label class="field">
|
|
<span>Your civilisation</span>
|
|
<ul id="new-civs" class="civ-list"></ul>
|
|
</label>
|
|
<label class="field">
|
|
<span>Nations in the world</span>
|
|
<input id="new-count" type="number" min="1" max="9" value="9" />
|
|
</label>
|
|
<label class="field hidden" id="new-testing-row">
|
|
<span>Testing mode</span>
|
|
<span class="inline">
|
|
<input id="new-testing" type="checkbox" />
|
|
Free & instant construction and training
|
|
</span>
|
|
</label>
|
|
<label class="field">
|
|
<span>Player name</span>
|
|
<input id="new-name" type="text" autocomplete="off" value="adrien" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Password</span>
|
|
<input id="new-password" type="password" value="admin" />
|
|
</label>
|
|
<div class="row">
|
|
<button id="new-back" class="aero">Back</button>
|
|
<button id="new-start" class="aero primary">Start game</button>
|
|
</div>
|
|
<p id="new-status" class="status"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Join screen -->
|
|
<section id="screen-join" class="screen">
|
|
<div class="menu-card wide">
|
|
<h1>Join game</h1>
|
|
<label class="field">
|
|
<span>Server</span>
|
|
<span class="inline">
|
|
<input id="join-server" type="text" autocomplete="off" />
|
|
<button id="join-refresh" class="aero">Refresh</button>
|
|
</span>
|
|
</label>
|
|
<ul id="join-games" class="game-list"></ul>
|
|
<label class="field">
|
|
<span>Player name</span>
|
|
<input id="join-name" type="text" autocomplete="off" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Password</span>
|
|
<input id="join-password" type="password" />
|
|
</label>
|
|
<div class="row">
|
|
<button id="join-back" class="aero">Back</button>
|
|
<button id="join-create" class="aero">Create game</button>
|
|
<button id="join-go" class="aero primary">Join</button>
|
|
</div>
|
|
<p id="join-status" class="status"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Civilisation picker for players joining an existing game -->
|
|
<section id="screen-choose" class="screen">
|
|
<div class="menu-card wide">
|
|
<h1>Choose your civilisation</h1>
|
|
<p class="tagline">Pick one of the nations no one has claimed.</p>
|
|
<ul id="choose-civs" class="civ-list"></ul>
|
|
<div class="row">
|
|
<button id="choose-back" class="aero">Back</button>
|
|
</div>
|
|
<p id="choose-status" class="status"></p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- World map -->
|
|
<section id="screen-game" class="screen">
|
|
<div id="map-viewport">
|
|
<div id="map-world">
|
|
<div class="layer" id="layer-overview"></div>
|
|
<div class="layer" id="layer-terrain"></div>
|
|
<div class="layer" id="layer-roads"></div>
|
|
<div class="layer" id="layer-borders"></div>
|
|
<div class="layer" id="layer-fog"></div>
|
|
<div class="layer" id="layer-paths"></div>
|
|
<div class="layer" id="layer-targets"></div>
|
|
<div class="layer" id="layer-entities"></div>
|
|
<div class="layer city-label-layer" id="layer-labels"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="hud">
|
|
<div id="top-panel" class="panel">
|
|
<button id="civ-flag" class="flag-button" title="Government and technology">
|
|
<img id="civ-flag-img" alt="" />
|
|
</button>
|
|
<div class="top-text">
|
|
<div id="civ-name" class="civ-name">—</div>
|
|
<div id="player-name" class="player-name"></div>
|
|
<div id="admin-label" class="admin-label">Admin</div>
|
|
</div>
|
|
<div class="top-stats">
|
|
<div class="stat"><span class="stat-label">Date</span><span id="stat-date" class="stat-value"></span></div>
|
|
<div class="stat"><span class="stat-label">Population</span><span id="stat-pop" class="stat-value">0</span></div>
|
|
<div class="stat"><span class="stat-label">GDP</span><span id="stat-gdp" class="stat-value">€0</span></div>
|
|
<div class="stat"><span class="stat-label">GDP/capita</span><span id="stat-gdppc" class="stat-value">€0</span></div>
|
|
<div class="stat"><span class="stat-label">Budget</span><span id="stat-budget" class="stat-value">€0</span></div>
|
|
<div class="stat"><span class="stat-label">Approval</span><span id="stat-approval" class="stat-value approval-neutral">—</span></div>
|
|
</div>
|
|
</div>
|
|
<div id="fps-label">60 FPS</div>
|
|
|
|
<div id="bottom-panel" class="panel hidden">
|
|
<div id="tile-info" class="info-section hidden">
|
|
<div id="tile-coords" class="info-title"></div>
|
|
<div id="tile-owner"></div>
|
|
<div id="tile-terrain"></div>
|
|
<div id="tile-population"></div>
|
|
<div id="tile-ethnicity"></div>
|
|
<div id="tile-gdp"></div>
|
|
<div id="tile-improvements"></div>
|
|
</div>
|
|
<div id="city-info" class="info-section hidden">
|
|
<div id="city-name" class="info-title"></div>
|
|
<div class="row">
|
|
<button id="city-manage" class="aero">City</button>
|
|
</div>
|
|
</div>
|
|
<div id="unit-info" class="info-section hidden">
|
|
<div id="unit-name" class="info-title"></div>
|
|
<div class="unit-stats">
|
|
<span id="unit-attack" class="unit-stat">Attack —</span>
|
|
<span id="unit-defense" class="unit-stat">Defense —</span>
|
|
</div>
|
|
<div class="health-row">
|
|
<div class="health-bar"><div id="unit-health-fill"></div></div>
|
|
<span id="unit-health-label" class="health-label"></span>
|
|
</div>
|
|
<div class="row">
|
|
<button id="unit-pillage" class="aero hidden">Pillage</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="stat-tooltip" class="tooltip hidden"></div>
|
|
</div>
|
|
|
|
<!-- Right-click menu listing the units sharing a tile -->
|
|
<div id="stack-menu" class="stack-menu hidden"></div>
|
|
|
|
<!-- Chat-like feed of short-lived news, pinned to the lower left -->
|
|
<div class="game-corner">
|
|
<div id="game-feed" class="game-feed"></div>
|
|
<button id="news-button" class="aero news-button" title="News">News</button>
|
|
</div>
|
|
|
|
<!-- City modal: train, buildings and the regional budget tabs -->
|
|
<div id="modal-city" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="city-title">City</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="train">Train</button>
|
|
<button class="tab" data-tab="buildings">Buildings</button>
|
|
<button class="tab" data-tab="people">People</button>
|
|
<button class="tab" data-tab="budget">Budget</button>
|
|
</div>
|
|
<div class="tab-page active" id="city-tab-train">
|
|
<div id="city-train-list" class="modal-body"></div>
|
|
<div id="city-train-status" class="training-status hidden">
|
|
<div id="city-train-label"></div>
|
|
<div class="progress"><div id="city-train-progress"></div></div>
|
|
</div>
|
|
<div id="city-train-queue" class="modal-body training-queue"></div>
|
|
</div>
|
|
<div class="tab-page" id="city-tab-buildings">
|
|
<div id="city-buildings-budget" class="modal-sub"></div>
|
|
<div id="city-buildings-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="city-tab-people">
|
|
<div id="city-people-sub" class="modal-sub"></div>
|
|
<div id="city-people-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="city-tab-budget">
|
|
<div id="city-budget-sub" class="modal-sub"></div>
|
|
<div id="city-budget-list" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Generic confirmation modal -->
|
|
<div id="modal-confirm" class="modal hidden">
|
|
<div class="modal-card modal-card-small">
|
|
<div class="modal-head">
|
|
<span id="confirm-title">Confirm</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="confirm-message" class="modal-body"></div>
|
|
<div class="row">
|
|
<button id="confirm-cancel" class="aero">Cancel</button>
|
|
<button id="confirm-ok" class="aero primary">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- News feed modal -->
|
|
<div id="modal-news" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="news-title">News</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="news-list" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nation modal: government, technology, diplomacy and budget tabs -->
|
|
<div id="modal-nation" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="nation-title">Nation</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="government">Government</button>
|
|
<button class="tab" data-tab="technology">Technology</button>
|
|
<button class="tab" data-tab="diplomacy">Diplomacy</button>
|
|
<button class="tab" data-tab="politics">Politics</button>
|
|
<button class="tab" data-tab="cities">Cities</button>
|
|
<button class="tab" data-tab="conflicts">Ongoing conflicts</button>
|
|
<button class="tab" data-tab="budget">Budget</button>
|
|
</div>
|
|
<div class="tab-page active" id="tab-government">
|
|
<div id="government-sub" class="modal-sub"></div>
|
|
<div id="government-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-technology">
|
|
<div id="technology-sub" class="modal-sub"></div>
|
|
<div id="technology-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-diplomacy">
|
|
<div id="diplomacy-sub" class="modal-sub"></div>
|
|
<div id="diplomacy-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-politics">
|
|
<div id="politics-sub" class="modal-sub"></div>
|
|
<div id="politics-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-cities">
|
|
<div id="cities-sub" class="modal-sub"></div>
|
|
<div id="cities-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-conflicts">
|
|
<div id="conflicts-sub" class="modal-sub"></div>
|
|
<div id="conflicts-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-budget">
|
|
<div id="budget-sub" class="modal-sub"></div>
|
|
<div id="budget-list" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="disconnect-banner" class="banner hidden"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<script src="vendor/jquery.min.js"></script>
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html>
|