2026-02-20 08:16:43 -05:00
|
|
|
<!doctype html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
<title>Chat Grid</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<main class="app">
|
|
|
|
|
<h1>Chat Grid</h1>
|
|
|
|
|
<div id="nicknameContainer" class="nickname-row">
|
|
|
|
|
<label for="preconnectNickname">Nickname</label>
|
|
|
|
|
<input id="preconnectNickname" type="text" maxlength="32" autocomplete="nickname" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="controls" id="button-container">
|
|
|
|
|
<button id="connectButton">Connect</button>
|
|
|
|
|
<button id="settingsButton">Settings</button>
|
|
|
|
|
<button id="disconnectButton" class="hidden">Disconnect</button>
|
|
|
|
|
<button id="focusGridButton" class="hidden" aria-controls="gameCanvas">Chat Grid</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="deviceSummary">
|
|
|
|
|
<p id="audioInputCurrent" class="hidden"></p>
|
|
|
|
|
<p id="audioOutputCurrent" class="hidden"></p>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="status" role="region" aria-live="polite"></div>
|
|
|
|
|
<canvas
|
|
|
|
|
id="gameCanvas"
|
|
|
|
|
width="600"
|
|
|
|
|
height="600"
|
|
|
|
|
tabindex="0"
|
|
|
|
|
class="hidden"
|
|
|
|
|
aria-label="Chat Grid, press arrows to move."
|
|
|
|
|
></canvas>
|
|
|
|
|
<div id="instructions" class="hidden">
|
|
|
|
|
<h2>Help</h2>
|
|
|
|
|
|
|
|
|
|
<h3>Movement</h3>
|
|
|
|
|
<p><b>Arrow Keys:</b> Move</p>
|
2026-02-21 02:38:13 -05:00
|
|
|
<p><b>C:</b> Speak coordinates</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
<p><b>Escape:</b> Disconnect/cancel</p>
|
|
|
|
|
|
|
|
|
|
<h3>Users, Nickname, and Chat</h3>
|
|
|
|
|
<p><b>L:</b> Locate nearest user</p>
|
|
|
|
|
<p><b>Shift+L:</b> List users</p>
|
2026-02-21 02:38:13 -05:00
|
|
|
<p><b>Shift+U:</b> Speak connected users</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
<p><b>N:</b> Change nickname</p>
|
2026-02-21 15:28:46 -05:00
|
|
|
<p><b>Slash:</b> Start chat</p>
|
2026-02-21 02:38:13 -05:00
|
|
|
<p><b>Comma / Period:</b> Previous/next message</p>
|
|
|
|
|
<p><b>Less Than / Greater Than:</b> First/last message</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
|
|
|
|
|
<h3>Items</h3>
|
|
|
|
|
<p><b>I:</b> Locate nearest item</p>
|
|
|
|
|
<p><b>Shift+I:</b> List items</p>
|
|
|
|
|
<p><b>A:</b> Add item</p>
|
|
|
|
|
<p><b>O:</b> Edit item properties</p>
|
2026-02-20 16:50:12 -05:00
|
|
|
<p><b>Shift+O:</b> Read all item properties</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
<p><b>D:</b> Pick up/drop item</p>
|
|
|
|
|
<p><b>Shift+D:</b> Delete item</p>
|
|
|
|
|
<p><b>U:</b> Use item</p>
|
|
|
|
|
|
|
|
|
|
<h3>Audio</h3>
|
|
|
|
|
<p><b>P:</b> Ping server</p>
|
2026-02-21 02:38:13 -05:00
|
|
|
<p><b>M:</b> Mute/unmute yourself</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
<p><b>Shift+M:</b> Toggle stereo/mono output</p>
|
2026-02-20 16:43:14 -05:00
|
|
|
<p><b>! (Shift+1):</b> Toggle loopback monitor</p>
|
2026-02-21 02:06:32 -05:00
|
|
|
<p><b>E:</b> Select voice effect</p>
|
2026-02-20 08:16:43 -05:00
|
|
|
<p><b>Dash or Equals:</b> Lower/raise active effect value</p>
|
|
|
|
|
</div>
|
|
|
|
|
|
2026-02-21 02:19:33 -05:00
|
|
|
<footer id="appFooter">
|
|
|
|
|
<small id="appVersion">Another AI experiment with Jage. Version</small>
|
|
|
|
|
<section id="updatesSection" class="updates-section">
|
|
|
|
|
<h2>Latest Updates</h2>
|
|
|
|
|
<button id="updatesToggle" type="button" aria-expanded="false" aria-controls="updatesPanel">
|
|
|
|
|
Show updates
|
|
|
|
|
</button>
|
|
|
|
|
<div id="updatesPanel" class="hidden" hidden></div>
|
|
|
|
|
</section>
|
|
|
|
|
</footer>
|
2026-02-20 08:16:43 -05:00
|
|
|
|
|
|
|
|
<div id="settingsModal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="modalTitle">
|
|
|
|
|
<div class="modal-content">
|
|
|
|
|
<h2 id="modalTitle">Audio Settings</h2>
|
|
|
|
|
<label for="audioInputSelect">Microphone (Input)</label>
|
|
|
|
|
<select id="audioInputSelect"></select>
|
|
|
|
|
<label for="audioOutputSelect">Speakers (Output)</label>
|
|
|
|
|
<select id="audioOutputSelect"></select>
|
|
|
|
|
<button id="closeSettingsButton">Close</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</main>
|
|
|
|
|
<script src="%BASE_URL%version.js"></script>
|
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
