477 lines
21 KiB
HTML
477 lines
21 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-targeting"></div>
|
|
<div class="layer" id="layer-resources"></div>
|
|
<div class="layer" id="layer-entities"></div>
|
|
<!-- The ballistic arcs and shells of standing bombardments ride above
|
|
the unit icons; the target rings stay in layer-targets below them. -->
|
|
<div class="layer" id="layer-strike-arcs"></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 id="top-resources" class="top-resources hidden"></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 id="map-legend-graph" class="map-legend-graph hidden">
|
|
<div id="map-legend-graph-title" class="map-legend-title">Trade routes</div>
|
|
<div id="map-legend-resources" class="map-legend-resources"></div>
|
|
</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 class="row">
|
|
<button id="tile-manage" class="aero hidden">Management</button>
|
|
</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>
|
|
|
|
<!-- In-game chat, opened with T. Messages read bottom to top, newest by
|
|
the input, which sits at the bottom centre of the screen. -->
|
|
<div id="chat" class="chat hidden">
|
|
<div id="chat-log" class="chat-log"></div>
|
|
<div class="chat-compose">
|
|
<select id="chat-target" class="chat-target" title="Who hears this line"></select>
|
|
<input id="chat-input" class="chat-input" type="text" maxlength="240"
|
|
autocomplete="off" placeholder="Say something… (Enter to send, Esc to close)" />
|
|
</div>
|
|
</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>
|
|
<button id="unit-nuclear" class="aero hidden">Nuclear warhead</button>
|
|
<button id="unit-attack-order" class="aero attack hidden">Attack</button>
|
|
</div>
|
|
<!-- Covert operations for a selected spy, built from SPY_OPERATIONS. -->
|
|
<div id="unit-spy-actions" class="row hidden"></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>
|
|
|
|
<!-- Tile management panel: the works one tile can carry, opened from the
|
|
tile summary's Management button. -->
|
|
<div id="modal-tile" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="tile-manage-title">Tile</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div class="tabs">
|
|
<button class="tab active" data-tab="improvements">Improvements</button>
|
|
</div>
|
|
<div class="tab-page active" id="tile-tab-improvements">
|
|
<div id="tile-manage-sub" class="modal-sub"></div>
|
|
<div id="tile-manage-improvements" 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="intelligence">Intelligence</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-research" class="tech-research"></div>
|
|
<div id="technology-list" class="modal-body tech-tree-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>
|
|
<!-- Treaties live outside #diplomacy-list, which the snapshot
|
|
refresh rebuilds, so the compose controls keep their input. -->
|
|
<div id="treaty-panel" class="treaty-panel">
|
|
<div class="treaty-compose">
|
|
<span class="treaty-compose-title">Propose a treaty</span>
|
|
<select id="treaty-type"></select>
|
|
<select id="treaty-target"></select>
|
|
<span id="treaty-payload"></span>
|
|
<button id="treaty-propose" class="aero">Propose</button>
|
|
</div>
|
|
<div id="treaty-pending" class="treaty-list"></div>
|
|
<div class="treaty-heading">Active treaties</div>
|
|
<div id="treaty-active" class="treaty-list"></div>
|
|
<div class="treaty-heading">Past treaties</div>
|
|
<div id="treaty-past" class="treaty-list"></div>
|
|
</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-intelligence">
|
|
<div id="intelligence-sub" class="modal-sub"></div>
|
|
<div id="intelligence-subtabs" class="subtabs"></div>
|
|
<div id="intelligence-spies-view" class="modal-body"></div>
|
|
<div id="intelligence-propaganda-view" class="modal-body hidden"></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-taxes" 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>
|
|
|
|
<!-- Row template for the Resources tab's store table. A resource's name
|
|
cell keeps the icon; every numeric cell is filled by the unified
|
|
value display. -->
|
|
<template id="tpl-resource-store-row">
|
|
<tr>
|
|
<td class="name">
|
|
<img class="resource-icon" width="18" height="18" alt="">
|
|
<span></span>
|
|
</td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
<td class="numeric"></td>
|
|
</tr>
|
|
</template>
|
|
|
|
<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>
|