js/pad.js synthesizes the same KeyboardEvents the keyboard produces — one input path, zero new handler code. Stick/dpad steer (+variants), R2 push, CROSS ollie, SQUARE/CIRCLE/TRIANGLE flip/heel/shove, R1 tre, L1 fs shove, L2 hardflip, OPTIONS start, CREATE reset. Dual-rumble on bails and bonks. Title screen: dpad cycles discipline, CROSS drops in (Space now works there for keyboards too). Verified with a stubbed DualSense through __step: push 7.6m/s, steer, ollie->kickflip x2 (220). Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
81 lines
3.6 KiB
HTML
81 lines
3.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>BOOKQUOY — a brisbane sesh</title>
|
|
<style>
|
|
body{margin:0;overflow:hidden;background:#111;font:14px/1.3 monospace;color:#dde}
|
|
#hudbar{position:fixed;top:10px;left:14px;z-index:5;text-shadow:0 2px 4px #0009}
|
|
#score{font-size:30px;font-weight:bold;color:#fff}
|
|
#combo{color:#ffd93b;min-height:18px;margin-top:2px}
|
|
#right{position:fixed;top:10px;right:16px;z-index:5;text-align:right;text-shadow:0 2px 4px #0009}
|
|
#timer{font-size:28px;font-weight:bold}
|
|
#letters span{display:inline-block;margin-left:4px;font-size:20px;font-weight:bold;
|
|
color:#ffffff33;transition:color .2s, transform .2s}
|
|
#letters span.lit{color:#ffd93b;transform:scale(1.15)}
|
|
#modeline span{color:#8b95a3;cursor:default}
|
|
#modeline span.lit{color:#ffd93b;font-weight:bold}
|
|
#flash{position:fixed;top:22%;width:100%;text-align:center;z-index:5;font-size:26px;
|
|
font-weight:bold;opacity:0;transition:opacity .4s;text-shadow:0 2px 6px #000c}
|
|
#bigflash{position:fixed;top:34%;width:100%;text-align:center;z-index:6;font-size:64px;
|
|
font-weight:bold;color:#ffd93b;opacity:0;transition:opacity .5s;
|
|
text-shadow:0 4px 0 #b8860b,0 8px 22px #000d;letter-spacing:4px}
|
|
.panel{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;
|
|
align-items:center;justify-content:center;background:#0008;text-align:center}
|
|
.panel h1{font-size:64px;margin:0 0 6px;color:#ffd93b;letter-spacing:6px;
|
|
text-shadow:0 4px 0 #b8860b,0 8px 24px #000}
|
|
.panel h2{font-weight:normal;color:#cfe;margin:0 0 22px}
|
|
.panel .keys{color:#9fb;line-height:1.9;font-size:13px}
|
|
.panel .go{margin-top:26px;font-size:20px;color:#fff;animation:pulse 1.2s infinite}
|
|
@keyframes pulse{50%{opacity:.35}}
|
|
#over{display:none}
|
|
#over .final{font-size:44px;color:#ffd93b;margin:8px 0}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="hudbar">
|
|
<div id="score">0</div>
|
|
<div id="combo"></div>
|
|
</div>
|
|
<div id="right">
|
|
<div id="timer">2:00</div>
|
|
<div id="letters"></div>
|
|
<div id="modelabel" style="color:#9fb;font-size:12px;margin-top:2px">SKATE</div>
|
|
</div>
|
|
<div id="flash"></div>
|
|
<div id="bigflash"></div>
|
|
|
|
<div id="title" class="panel">
|
|
<h1>BOOKQUOY</h1>
|
|
<h2>a brisbane sesh — level 01: PADDO (Caxton St)</h2>
|
|
<div id="modeline" style="margin-bottom:18px;font-size:17px">
|
|
<span id="mode-skate">1 SKATE</span> ·
|
|
<span id="mode-bmx">2 BMX</span> ·
|
|
<span id="mode-blades">3 BLADES</span>
|
|
<span style="color:#889;font-size:12px"> (blades cop rubbish thrown at you. tradition.)</span>
|
|
</div>
|
|
<div class="keys">
|
|
W / ↑ push · A D / ← → steer · S brake · SPACE ollie / hop off a grind<br>
|
|
J kickflip K heelflip L pop shove (hold ↑ or ↓ for varials + specials)<br>
|
|
T tre flip Y laser H hardflip N impossible F fs shove<br>
|
|
land on rails and ledges to grind · hit the gaps · collect B·O·O·K·Q·U·O·Y<br>
|
|
R reset to the tennis-court entrance
|
|
</div>
|
|
<div class="go">press ENTER (or ✕ on a controller) to drop in</div>
|
|
</div>
|
|
|
|
<div id="over" class="panel">
|
|
<h1>SESH OVER</h1>
|
|
<div class="final" id="finalScore">0</div>
|
|
<div>best: <span id="bestScore">0</span></div>
|
|
<div class="go">ENTER to run it back</div>
|
|
</div>
|
|
|
|
<script type="importmap">
|
|
{"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js",
|
|
"three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"}}
|
|
</script>
|
|
<script type="module" src="js/main.js"></script>
|
|
</body>
|
|
</html>
|