194 lines
7.4 KiB
HTML
194 lines
7.4 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>
|
|
<select id="new-civ"></select>
|
|
</label>
|
|
<label class="field">
|
|
<span>Nations in the world</span>
|
|
<input id="new-count" type="number" min="1" max="9" value="4" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Player name</span>
|
|
<input id="new-name" type="text" autocomplete="off" />
|
|
</label>
|
|
<label class="field">
|
|
<span>Password</span>
|
|
<input id="new-password" type="password" />
|
|
</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>
|
|
|
|
<!-- 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-territory"></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-entities"></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>
|
|
</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-improvements"></div>
|
|
</div>
|
|
<div id="city-info" class="info-section hidden">
|
|
<div id="city-name" class="info-title"></div>
|
|
<div id="city-population"></div>
|
|
<div id="city-improvements"></div>
|
|
<div class="row">
|
|
<button id="city-train" class="aero">Train</button>
|
|
<button id="city-build" class="aero">Buildings</button>
|
|
</div>
|
|
</div>
|
|
<div id="unit-info" class="info-section hidden">
|
|
<div id="unit-name" class="info-title"></div>
|
|
<div class="health-bar"><div id="unit-health-fill"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Training modal -->
|
|
<div id="modal-train" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="train-title">Train</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="train-list" class="modal-body"></div>
|
|
<div id="train-status" class="training-status hidden">
|
|
<div id="train-label"></div>
|
|
<div class="progress"><div id="train-progress"></div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- City buildings modal -->
|
|
<div id="modal-buildings" class="modal hidden">
|
|
<div class="modal-card">
|
|
<div class="modal-head">
|
|
<span id="buildings-title">Buildings</span>
|
|
<button class="modal-close aero">✕</button>
|
|
</div>
|
|
<div id="buildings-budget" class="modal-sub"></div>
|
|
<div id="buildings-list" class="modal-body"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Nation modal: government and technology 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>
|
|
</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>
|
|
</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>
|