<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StarKingdoms</title>
</head>
<body class="bg-grid">
<div id="gamewindow">
<!-- Canvas gets added here by the game script -->
</div>
<div class="popup popup-center popup-max-width-300" id="server_selector">
<h1>StarKingdoms</h1>
<h2>Join Game</h2>
<form id="join-fm">
<label>Choose server</label>
<div class="fm-select">
<button
class="fm-select-button"
role="combobox"
aria-labelledby="server selector"
aria-haspopup="listbox"
aria-expanded="false"
aria-controls="fm-select-dropdown"
>
<span class="fm-selected-value">Loading servers list</span>
<span class="fm-arrow"></span>
</button>
<ul class="fm-select-dropdown" role="listbox" id="fm-select-dropdown">
<!-- Filled by TS -->
</ul>
</div>
<label for="username" class="username-label">Username</label>
<input class="username-box" id="username" required autocomplete="off" />
<button id="launch-btn" class="launch-btn">Launch!</button>
<span id="server-danger" class="server-danger hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
fill="currentColor"
class="server-danger-icon"
>
<path
fill-rule="evenodd"
d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
clip-rule="evenodd"
/>
</svg>
Here be dragons! You have a <b>prerelease server</b> selected. Expect
bugs, and save data on this server may be wiped at any time.
</span>
</form>
</div>
<div
class="popup popup-wmin log-hidden log-container popup-max-width-300"
id="packet_log"
>
<h1>Packet Log</h1>
<table class="log">
<thead>
<tr class="log-wfull">
<th class="log-wfull log-lalign log-header log-w50">#</th>
<th class="log-wfull log-lalign log-header">Dir</th>
<th class="log-wfull log-lalign log-header log-w240">Type</th>
<th class="log-wfull log-lalign log-header">Delta</th>
</tr>
</thead>
<tbody id="log_body"></tbody>
</table>
<hr />
<h1>Packet Explorer</h1>
<p id="explorer_selected" class="mono">Selected: --</p>
<table class="mono json" id="explorer_json"></table>
</div>
<div class="popup chat-container hidden" id="chat">
<h1>Chat</h1>
<div id="chatbox" class="chat-table mono">
<!-- Filled by script -->
</div>
<input
placeholder="Enter message or command here..."
class="chat-box"
id="chatentry"
required
autocomplete="off"
/>
</div>
<div class="hud hidden" id="hud">
<div class="popup" id="hud-content-wrapper">
<table>
<thead>
<tr>
<th class="hud-d">Position</th>
<th class="hud-d">Velocity</th>
<th class="hud-d">Track Angle</th>
</tr>
</thead>
<tbody>
<tr>
<td id="pos">
<span id="pos-val-x">--</span>, <span id="pos-val-y">--</span>
</td>
<td id="velocity">
<span id="velocity-val">--</span>
</td>
<td id="track">
<span id="track-val">--</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<span class="footer-left" id="footer-left"></span>
<span class="footer-right" id="footer-right"></span>
<script type="module" src="src/main.ts"></script>
</body>
</html>