mirror of
https://github.com/IS1DI/x0gp.git
synced 2026-07-16 20:47:55 +00:00
135 lines
5.8 KiB
HTML
135 lines
5.8 KiB
HTML
<!doctype html>
|
|
<html lang="ru">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
|
<title>x0gp · PoC client</title>
|
|
<link rel="stylesheet" href="style.css" />
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div class="brand">
|
|
<span class="logo">x0gp</span>
|
|
<span class="tag">PoC client</span>
|
|
</div>
|
|
<div class="conn" id="connState">disconnected</div>
|
|
<div class="hud-top" id="hudTop">
|
|
<span>tick: <b id="tickHz">--</b> Hz</span>
|
|
<span>rtt: <b id="rtt">--</b> ms</span>
|
|
<span>seq: <b id="seq">0</b></span>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="layout">
|
|
<!-- Левая колонка: трасса -->
|
|
<section class="track-wrap">
|
|
<canvas id="track" width="640" height="420"></canvas>
|
|
<div class="legend">
|
|
<span><i class="dot me"></i> вы</span>
|
|
<span><i class="dot other"></i> другие</span>
|
|
<span><i class="dot ghost"></i> correction (если будет)</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Правая колонка: управление и телеметрия -->
|
|
<aside class="controls">
|
|
<div class="card">
|
|
<h3>Подключение</h3>
|
|
<label>WS URL
|
|
<input id="wsUrl" type="text" value="ws://localhost:8080/ws" />
|
|
</label>
|
|
<label>Ник / driver_id
|
|
<input id="driverId" type="text" placeholder="driver-1" value="driver-1" />
|
|
</label>
|
|
<label>Race ID
|
|
<input id="raceId" type="text" value="demo-race" />
|
|
</label>
|
|
<div class="btn-row">
|
|
<button id="btnConnect" class="btn primary">Connect</button>
|
|
<button id="btnDisconnect" class="btn" disabled>Disconnect</button>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button id="btnJoin" class="btn" disabled>Join race</button>
|
|
<button id="btnLeave" class="btn" disabled>Leave race</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Управление</h3>
|
|
<p class="hint">
|
|
W/S — газ/тормоз, A/D — руль, Space — ручник, R — сброс позиции (debug)
|
|
</p>
|
|
<div class="pedals">
|
|
<div class="bar">
|
|
<span>throttle</span>
|
|
<div class="bar-track"><div id="barThrottle" class="bar-fill green"></div></div>
|
|
<b id="lblThrottle">0.00</b>
|
|
</div>
|
|
<div class="bar">
|
|
<span>brake</span>
|
|
<div class="bar-track"><div id="barBrake" class="bar-fill red"></div></div>
|
|
<b id="lblBrake">0.00</b>
|
|
</div>
|
|
<div class="bar">
|
|
<span>steer</span>
|
|
<div class="bar-track"><div id="barSteer" class="bar-fill blue"></div></div>
|
|
<b id="lblSteer">0.00</b>
|
|
</div>
|
|
</div>
|
|
<div class="wheel">
|
|
<div class="wheel-disc" id="wheelDisc"></div>
|
|
</div>
|
|
|
|
<div class="control-extra" style="display: flex; gap: 10px; margin-top: 15px; justify-content: space-around; border-top: 1px solid #333; padding-top: 12px;">
|
|
<div class="gear-indicator" style="text-align: center;">
|
|
<div style="font-size: 0.8rem; color: #aaa;">GEAR</div>
|
|
<div style="display: flex; align-items: center; gap: 5px; margin-top: 4px;">
|
|
<button id="btnGearDown" class="btn" style="padding: 2px 8px; font-size: 0.8rem;">-</button>
|
|
<b id="lblGear" style="font-size: 1.3rem; min-width: 15px; display: inline-block;">N</b>
|
|
<button id="btnGearUp" class="btn" style="padding: 2px 8px; font-size: 0.8rem;">+</button>
|
|
</div>
|
|
<div style="font-size: 0.7rem; color: #888; margin-top: 2px;">(Z / X)</div>
|
|
</div>
|
|
<div class="sys-toggle" style="text-align: center;">
|
|
<div style="font-size: 0.8rem; color: #aaa;">DRS</div>
|
|
<button id="btnDrs" class="btn" style="padding: 2px 6px; font-size: 0.8rem; margin-top: 4px;">Toggle</button>
|
|
<div id="lblDrs" class="val" style="font-weight: bold; font-size: 0.95rem; margin-top: 4px; color: #ff3b30;">OFF</div>
|
|
<div style="font-size: 0.7rem; color: #888; margin-top: 2px;">(Q)</div>
|
|
</div>
|
|
<div class="sys-toggle" style="text-align: center;">
|
|
<div style="font-size: 0.8rem; color: #aaa;">PIT LIMIT</div>
|
|
<button id="btnPit" class="btn" style="padding: 2px 6px; font-size: 0.8rem; margin-top: 4px;">Toggle</button>
|
|
<div id="lblPit" class="val" style="font-weight: bold; font-size: 0.95rem; margin-top: 4px; color: #ff3b30;">OFF</div>
|
|
<div style="font-size: 0.7rem; color: #888; margin-top: 2px;">(E)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="margin-top: 15px; border-top: 1px solid #333; padding-top: 12px;">
|
|
<span style="font-size: 0.8rem; color: #aaa;">Пакет управления (JSON):</span>
|
|
<pre id="ctrlJson" style="font-family: monospace; font-size: 0.75rem; background: #111; border: 1px solid #222; padding: 8px; border-radius: 4px; color: #00ff66; margin: 6px 0 0 0; overflow-x: auto; max-height: 250px; text-align: left; line-height: 1.2;">{}</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<h3>Телеметрия</h3>
|
|
<dl class="tel">
|
|
<dt>speed</dt><dd id="tSpeed">0.00 m/s</dd>
|
|
<dt>heading</dt><dd id="tHeading">0.0°</dd>
|
|
<dt>lap</dt><dd id="tLap">0</dd>
|
|
<dt>sector</dt><dd id="tSector">-</dd>
|
|
<dt>pos</dt><dd id="tPos">(0.00, 0.00)</dd>
|
|
<dt>server_time</dt><dd id="tTsm">--</dd>
|
|
<dt>cars in race</dt><dd id="tCars">0</dd>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="card log-card">
|
|
<h3>Лог</h3>
|
|
<pre id="log" class="log"></pre>
|
|
</div>
|
|
</aside>
|
|
</main>
|
|
|
|
<script src="main.js"></script>
|
|
</body>
|
|
</html> |