adrien
91dfedf7ec
- Each nation has a currency and each region a private-sector cash basket, borrowing from its central bank at the bank's rate; the government may always pay, going into central-bank debt when its budget runs red. - Resources are bought from reachable stores only: the region itself first, then same-nation regions, then foreign ones, paid for out of private cash or, for government orders, the treasury. Drawn national stores are paid to their owning region. - A grid in deficit imports power from a reachable surplus grid instead of a market fallback; downgrading a building no longer refunds anything. - The monthly budget lists each resource's economic value, expands to a resource-to-source tree and keeps a cash figure beside it. - Regions report what their people went short of over the day; starved research buildings and power-starved works raise a private daily notice. - The city panel gains a Resources tab: reserves per resource, their market value and the private sector's daily consumption.
389 lines
17 KiB
HTML
389 lines
17 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-join" class="aero big">Join game</button>
|
|
<div class="row">
|
|
<button id="menu-credits" class="aero">Credits</button>
|
|
<button id="menu-devlog" class="aero">Devlog</button>
|
|
<button id="menu-audio" class="aero">Sound: On</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Credits, opened from the main menu -->
|
|
<div id="modal-credits" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span>Credits</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="credits-list" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Devlog: the latest commits, opened from the main menu -->
|
|
<div id="modal-devlog" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span>Devlog</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="devlog-list" class="modal-body"></div>
|
|
</div>
|
|
</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-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-terrain"></div>
|
|
<div class="layer" id="layer-roads"></div>
|
|
<div class="layer" id="layer-borders"></div>
|
|
<div class="layer" id="layer-fog"></div>
|
|
<!-- Country names sit under every icon layer: first here, above the
|
|
ground fill but below the selection, paths, targets and sprites. -->
|
|
<div class="layer country-label-layer" id="layer-political-labels"></div>
|
|
<div class="layer" id="layer-highlight"></div>
|
|
<div class="layer" id="layer-paths"></div>
|
|
<div class="layer" id="layer-targets"></div>
|
|
<div class="layer" id="layer-resources"></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">Popularity</span><span id="stat-approval" class="stat-value approval-neutral">—</span></div>
|
|
</div>
|
|
</div>
|
|
<div id="fps-label">60 FPS</div>
|
|
|
|
<!-- Colour scale for the economic map modes, hidden otherwise. -->
|
|
<div id="map-legend" class="map-legend hidden">
|
|
<div id="map-legend-title" class="map-legend-title"></div>
|
|
<div id="map-legend-bar" class="map-legend-bar"></div>
|
|
<div class="map-legend-scale">
|
|
<span id="map-legend-min"></span>
|
|
<span id="map-legend-mid"></span>
|
|
<span id="map-legend-max"></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tile-panel" class="panel hidden">
|
|
<div id="tile-info" class="info-section hidden">
|
|
<div id="tile-desc" class="info-title"></div>
|
|
<div id="tile-coords" class="tile-coords"></div>
|
|
<div id="tile-production"></div>
|
|
<div id="tile-ethnicity"></div>
|
|
<div id="tile-gdp"></div>
|
|
<div id="tile-improvements"></div>
|
|
<div id="tile-works"></div>
|
|
<div id="tile-improvement-actions" class="tile-improvement-actions"></div>
|
|
</div>
|
|
<div id="city-info" class="info-section hidden">
|
|
<div id="city-name" class="info-title"></div>
|
|
<div id="city-production"></div>
|
|
<div class="row">
|
|
<button id="city-manage" class="aero">City</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The stat tooltip sits outside #hud on purpose: the unit panel lives in
|
|
#left-dock, a sibling with its own z-index, so a tooltip trapped in
|
|
the HUD's stacking context would paint behind it. -->
|
|
<div id="stat-tooltip" class="tooltip hidden"></div>
|
|
|
|
<!-- Right-click menu listing the units sharing a tile -->
|
|
<div id="stack-menu" class="stack-menu hidden"></div>
|
|
|
|
<!-- Lower-left dock: the news feed sits above the selected-unit panel. -->
|
|
<div id="left-dock">
|
|
<div class="game-corner">
|
|
<div id="game-feed" class="game-feed"></div>
|
|
<div class="dock-buttons">
|
|
<button id="news-button" class="aero news-button" title="News">News</button>
|
|
<button id="map-modes-button" class="aero news-button" title="Map modes">Map modes</button>
|
|
<button id="audio-button" class="aero news-button" title="Sound">Sound on</button>
|
|
<!-- Opens directly above its button. -->
|
|
<div id="map-modes-popover" class="map-modes-popover hidden">
|
|
<div class="map-modes-title">Map mode</div>
|
|
<label class="map-mode-option">
|
|
<input type="radio" name="map-mode" value="terrain" checked><span>Terrain</span>
|
|
</label>
|
|
<label class="map-mode-option">
|
|
<input type="radio" name="map-mode" value="political"><span>Political</span>
|
|
</label>
|
|
<label class="map-mode-option">
|
|
<input type="radio" name="map-mode" value="gdp"><span>GDP per capita</span>
|
|
</label>
|
|
<label class="map-mode-option">
|
|
<input type="radio" name="map-mode" value="population"><span>Population</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="unit-panel" class="panel hidden">
|
|
<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 id="unit-cargo" class="unit-cargo hidden"></div>
|
|
<div id="unit-stack-list" class="unit-stack-list hidden"></div>
|
|
<div class="row">
|
|
<button id="unit-pillage" class="aero hidden">Pillage</button>
|
|
<button id="unit-trench" class="aero hidden">Dig trench</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</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="resources">Resources</button>
|
|
<button class="tab" data-tab="budget">Budget</button>
|
|
<button class="tab" data-tab="economy">Economy</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-resources">
|
|
<div id="city-resources-sub" class="modal-sub"></div>
|
|
<div id="city-resources-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 class="tab-page" id="city-tab-economy">
|
|
<div id="city-economy-sub" class="modal-sub"></div>
|
|
<div id="city-economy-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>
|
|
|
|
<!-- Graphics compatibility report: shown when the GPU (WebGL) map
|
|
renderer is unavailable and the DOM renderer takes over. -->
|
|
<div id="modal-capabilities" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="capabilities-title">Graphics compatibility report</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="capabilities-summary" class="modal-sub"></div>
|
|
<div id="capabilities-list" class="modal-body"></div>
|
|
<div class="modal-sub">Minimum requirements for the GPU map renderer</div>
|
|
<ul id="capabilities-min" class="modal-body capability-requirements"></ul>
|
|
<div class="row">
|
|
<button id="capabilities-ok" class="aero primary">Continue</button>
|
|
</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>
|
|
<button class="tab" data-tab="economy">Economy</button>
|
|
<button class="tab" data-tab="resources">Resources</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-themes" class="subtabs"></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-months" class="budget-months"></div>
|
|
<div id="budget-list" class="modal-body"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-economy">
|
|
<div id="economy-sub" class="modal-sub"></div>
|
|
<div id="economy-subtabs" class="subtabs"></div>
|
|
<div id="economy-summary" class="modal-body"></div>
|
|
<div id="economy-consumption" class="modal-body hidden"></div>
|
|
<div id="economy-currency" class="modal-body hidden"></div>
|
|
<div id="economy-central-bank" class="modal-body hidden"></div>
|
|
<div id="economy-rates" class="modal-body hidden"></div>
|
|
</div>
|
|
<div class="tab-page" id="tab-resources">
|
|
<div id="resources-sub" class="modal-sub"></div>
|
|
<div id="resources-subtabs" class="subtabs"></div>
|
|
<div id="resources-list" class="modal-body"></div>
|
|
<div id="resource-trade-list" class="modal-body hidden"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="disconnect-banner" class="banner hidden"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Boot-style log shown while a game's world is generated and uploaded. -->
|
|
<div id="loading-overlay" class="loading-overlay hidden">
|
|
<div class="loading-panel">
|
|
<div class="loading-title">Battle for 'Tismo — loading</div>
|
|
<div class="loading-log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="vendor/jquery.min.js"></script>
|
|
<script type="module" src="js/app.js"></script>
|
|
</body>
|
|
</html>
|