Static site
Browse files- index.html +3 -2
- static/main.js +504 -500
- static/style.css +2 -0
index.html
CHANGED
|
@@ -8,7 +8,7 @@
|
|
| 8 |
<meta name="theme-color" content="#10131b">
|
| 9 |
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800;900&family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@700&display=swap" rel="stylesheet">
|
| 11 |
-
<link rel="stylesheet" href="/static/style.css?v=
|
| 12 |
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%23050506%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%2716%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%275%27/%3E%3C/svg%3E">
|
| 13 |
<script type="importmap">
|
| 14 |
{ "imports": {
|
|
@@ -148,6 +148,7 @@
|
|
| 148 |
<button class="tile" id="gTime"><b>🌗</b>Time of day</button><button class="tile" id="gView"><b>🎥</b>Front seat</button><button class="tile" id="gPhoto"><b>📷</b>Photo mode</button><button class="tile" id="gHorn"><b>📯</b>Horn</button><button class="tile" id="gWeather"><b>☀️</b>Weather</button><button class="tile" id="gRadio"><b>🎵</b>Radio</button></div></section>
|
| 149 |
<section><h4>Settings</h4>
|
| 150 |
<label class="set">Graphics<span class="seg" data-set="q"><button data-v="low">Low</button><button data-v="medium">Medium</button><button data-v="high">High</button><button data-v="ultra">Ultra</button></span></label>
|
|
|
|
| 151 |
<label class="set">Look speed<input type="range" id="gSens" min="0.4" max="2.5" step="0.1"></label>
|
| 152 |
<label class="set">Auto gas<span class="seg" data-set="autogas"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
|
| 153 |
<label class="set">Living city (day/night + weather change)<span class="seg" data-set="cycle"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
|
|
@@ -201,6 +202,6 @@
|
|
| 201 |
<div id="toast" role="status"></div>
|
| 202 |
<noscript><p style="position:fixed;inset:auto 0 0;padding:16px;background:#111;color:#fff;text-align:center">VOID needs JavaScript for the 3D car.</p></noscript>
|
| 203 |
<script src="/static/hub.js" data-app="void" defer></script>
|
| 204 |
-
<script type="module" src="/static/main.js?v=
|
| 205 |
</body>
|
| 206 |
</html>
|
|
|
|
| 8 |
<meta name="theme-color" content="#10131b">
|
| 9 |
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
<link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@500;800;900&family=Inter:wght@400;500;600;700&family=Noto+Kufi+Arabic:wght@700&display=swap" rel="stylesheet">
|
| 11 |
+
<link rel="stylesheet" href="/static/style.css?v=1792907015">
|
| 12 |
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 64 64%27%3E%3Crect width=%2764%27 height=%2764%27 rx=%2714%27 fill=%27%23050506%27/%3E%3Ccircle cx=%2732%27 cy=%2732%27 r=%2716%27 fill=%27none%27 stroke=%27%23fff%27 stroke-width=%275%27/%3E%3C/svg%3E">
|
| 13 |
<script type="importmap">
|
| 14 |
{ "imports": {
|
|
|
|
| 148 |
<button class="tile" id="gTime"><b>🌗</b>Time of day</button><button class="tile" id="gView"><b>🎥</b>Front seat</button><button class="tile" id="gPhoto"><b>📷</b>Photo mode</button><button class="tile" id="gHorn"><b>📯</b>Horn</button><button class="tile" id="gWeather"><b>☀️</b>Weather</button><button class="tile" id="gRadio"><b>🎵</b>Radio</button></div></section>
|
| 149 |
<section><h4>Settings</h4>
|
| 150 |
<label class="set">Graphics<span class="seg" data-set="q"><button data-v="low">Low</button><button data-v="medium">Medium</button><button data-v="high">High</button><button data-v="ultra">Ultra</button></span></label>
|
| 151 |
+
<p class="small gpu" id="gGpu"></p>
|
| 152 |
<label class="set">Look speed<input type="range" id="gSens" min="0.4" max="2.5" step="0.1"></label>
|
| 153 |
<label class="set">Auto gas<span class="seg" data-set="autogas"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
|
| 154 |
<label class="set">Living city (day/night + weather change)<span class="seg" data-set="cycle"><button data-v="off">Off</button><button data-v="on">On</button></span></label>
|
|
|
|
| 202 |
<div id="toast" role="status"></div>
|
| 203 |
<noscript><p style="position:fixed;inset:auto 0 0;padding:16px;background:#111;color:#fff;text-align:center">VOID needs JavaScript for the 3D car.</p></noscript>
|
| 204 |
<script src="/static/hub.js" data-app="void" defer></script>
|
| 205 |
+
<script type="module" src="/static/main.js?v=1792907015"></script>
|
| 206 |
</body>
|
| 207 |
</html>
|
static/main.js
CHANGED
|
@@ -1,500 +1,504 @@
|
|
| 1 |
-
// VOID: one WebGL canvas, three modes on top of a showroom home screen.
|
| 2 |
-
// Watch: a 48 s film whose clock is the music. Play: drive it, fly it, land it. Build: paint it.
|
| 3 |
-
import * as THREE from "three";
|
| 4 |
-
|
| 5 |
-
const V = new URL(import.meta.url).search;
|
| 6 |
-
const $ = id => document.getElementById(id);
|
| 7 |
-
const setLoad = p => { $("ldbar").style.width = p + "%"; $("ldpct").textContent = Math.round(p); };
|
| 8 |
-
setLoad(15);
|
| 9 |
-
const [{ createWorld, clamp, lerp, smooth, frame, PAD_R, ZONES }, { buildCar, MODELS }, { addInterior, HEAD }, { Sound, BAR }, { createWatch, TOTAL, CHAPTERS }, { createGame }, { createLife }] = await Promise.all(
|
| 10 |
-
["world", "car", "interior", "sound", "watch", "game", "npc"].map(n => import(`./${n}.js${V}`)));
|
| 11 |
-
const [{ createPolice }, { createRaces }, { createNet, EMOTES }, { createNav }, { createVehicles }, { createAtmos, WEATHERS }, { createGoals, GOALS }, { createExtras }] = await Promise.all(["police", "race", "net", "nav", "vehicles", "atmos", "goals", "extras"].map(n => import(`./${n}.js${V}`)));
|
| 12 |
-
setLoad(40);
|
| 13 |
-
|
| 14 |
-
const COARSE = matchMedia("(pointer: coarse)").matches, REDUCED = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
| 15 |
-
const store = { get(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { } } };
|
| 16 |
-
const W = await createWorld($("gl"), COARSE), { renderer, scene, camera, composer, bloom, camLight, fx } = W;
|
| 17 |
-
setLoad(55);
|
| 18 |
-
|
| 19 |
-
// the car you drive: a fixed root the game and the film move around, with the chosen model swapped inside it
|
| 20 |
-
const carRoot = new THREE.Group(); scene.add(carRoot);
|
| 21 |
-
const car = { group: carRoot, wheels: [] };
|
| 22 |
-
const carMats = new Set();
|
| 23 |
-
let inner = null;
|
| 24 |
-
function useModel(id, force) {
|
| 25 |
-
if (inner && inner.model === id && !force) return;
|
| 26 |
-
if (inner) carRoot.remove(inner.group);
|
| 27 |
-
inner = buildCar(id); carRoot.add(inner.group);
|
| 28 |
-
for (const k of Object.keys(inner)) if (typeof inner[k] === "function") car[k] = inner[k];
|
| 29 |
-
Object.assign(car, { wheels: inner.wheels, clip: car.clip || inner.clip, materials: inner.materials, model: id, name: inner.name });
|
| 30 |
-
carMats.clear();
|
| 31 |
-
inner.group.traverse(o => { if (o.isMesh) { o.castShadow = true; if (o.material && o.material.isMeshStandardMaterial) carMats.add(o.material); } });
|
| 32 |
-
for (const m of carMats) { m.envMap = null; m.needsUpdate = true; } // the paint reflects the city capture (scene.environment) // phones skip the live cube and use the city reflection
|
| 33 |
-
}
|
| 34 |
-
// live reflections on the paint: a small cube camera that rides with the car
|
| 35 |
-
const carEnv = new THREE.WebGLCubeRenderTarget(COARSE ? 64 : 128, { type: THREE.HalfFloatType, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
|
| 36 |
-
const carCube = new THREE.CubeCamera(.5, 320, carEnv);
|
| 37 |
-
for (const c of carCube.children) c.layers.set(0);
|
| 38 |
-
camera.layers.enable(1); // layer 1: the crowds, seen by the main camera only
|
| 39 |
-
let cubeN = 0;
|
| 40 |
-
useModel((store.get("void.build3") || {}).model != null ? Object.keys(MODELS)[(store.get("void.build3") || {}).model] || "hydra" : "hydra");
|
| 41 |
-
setLoad(80);
|
| 42 |
-
const interior = addInterior(car, renderer);
|
| 43 |
-
const sound = new Sound();
|
| 44 |
-
const watch = createWatch(W, car, interior);
|
| 45 |
-
const life = createLife(scene, W.roads, W.walkways, COARSE);
|
| 46 |
-
const TIMES = ["night", "sunset", "day"];
|
| 47 |
-
function cycleTime() { const k = TIMES[(TIMES.indexOf(W.timeOfDay) + 1) % 3]; W.setTime(k); store.set("void.time", k); toast({ night: "Night in the city", sunset: "Golden hour", day: "Daytime" }[k]); cubeN = 0; }
|
| 48 |
-
let police, races, nav;
|
| 49 |
-
const net = createNet();
|
| 50 |
-
setInterval(() => { if (document.hidden) net.tick(.5, null); }, 500); // a hosting tab in the background still relays everyone
|
| 51 |
-
// settings: graphics quality, look speed, auto gas, touch steering (kept on this device)
|
| 52 |
-
// a strong graphics card starts on High; everything else starts on Medium (it can be raised in the Menu)
|
| 53 |
-
const GPU = (() => { try { const c = renderer.getContext(), e = c.getExtension("WEBGL_debug_renderer_info"); return e ? c.getParameter(e.UNMASKED_RENDERER_WEBGL) : ""; } catch { return ""; } })();
|
| 54 |
-
const STRONG = /RTX|GTX 1[06-9]|GTX 9[78]|Radeon RX|Radeon Pro|Apple M[1-9]/i.test(GPU) && !COARSE;
|
| 55 |
-
const
|
| 56 |
-
const
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
if (
|
| 65 |
-
if (
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
}
|
| 70 |
-
|
| 71 |
-
const
|
| 72 |
-
const
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
document.getElementById("
|
| 79 |
-
}
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
document.getElementById("
|
| 83 |
-
document.getElementById("
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
if (open
|
| 90 |
-
if (
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
document.getElementById("
|
| 94 |
-
document.getElementById("
|
| 95 |
-
|
| 96 |
-
menuEl.
|
| 97 |
-
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
|
| 106 |
-
|
| 107 |
-
|
| 108 |
-
|
| 109 |
-
|
| 110 |
-
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
const
|
| 115 |
-
st.
|
| 116 |
-
}
|
| 117 |
-
|
| 118 |
-
const
|
| 119 |
-
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
const
|
| 123 |
-
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
const
|
| 127 |
-
|
| 128 |
-
|
| 129 |
-
|
| 130 |
-
|
| 131 |
-
|
| 132 |
-
|
| 133 |
-
|
| 134 |
-
|
| 135 |
-
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
}
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
|
| 146 |
-
|
| 147 |
-
|
| 148 |
-
|
| 149 |
-
{
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
const
|
| 155 |
-
$("
|
| 156 |
-
$("
|
| 157 |
-
$("
|
| 158 |
-
$("
|
| 159 |
-
$("
|
| 160 |
-
$("
|
| 161 |
-
$("
|
| 162 |
-
}
|
| 163 |
-
|
| 164 |
-
|
| 165 |
-
|
| 166 |
-
|
| 167 |
-
|
| 168 |
-
|
| 169 |
-
|
| 170 |
-
|
| 171 |
-
|
| 172 |
-
|
| 173 |
-
|
| 174 |
-
|
| 175 |
-
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
|
| 179 |
-
|
| 180 |
-
|
| 181 |
-
|
| 182 |
-
|
| 183 |
-
|
| 184 |
-
|
| 185 |
-
|
| 186 |
-
|
| 187 |
-
}
|
| 188 |
-
|
| 189 |
-
|
| 190 |
-
|
| 191 |
-
|
| 192 |
-
|
| 193 |
-
|
| 194 |
-
|
| 195 |
-
|
| 196 |
-
|
| 197 |
-
|
| 198 |
-
|
| 199 |
-
|
| 200 |
-
|
| 201 |
-
|
| 202 |
-
|
| 203 |
-
|
| 204 |
-
|
| 205 |
-
|
| 206 |
-
|
| 207 |
-
|
| 208 |
-
|
| 209 |
-
$("
|
| 210 |
-
$
|
| 211 |
-
|
| 212 |
-
|
| 213 |
-
};
|
| 214 |
-
|
| 215 |
-
|
| 216 |
-
|
| 217 |
-
|
| 218 |
-
|
| 219 |
-
|
| 220 |
-
$("
|
| 221 |
-
|
| 222 |
-
|
| 223 |
-
|
| 224 |
-
|
| 225 |
-
|
| 226 |
-
|
| 227 |
-
|
| 228 |
-
|
| 229 |
-
|
| 230 |
-
|
| 231 |
-
|
| 232 |
-
|
| 233 |
-
|
| 234 |
-
if (
|
| 235 |
-
if (
|
| 236 |
-
|
| 237 |
-
|
| 238 |
-
|
| 239 |
-
}
|
| 240 |
-
|
| 241 |
-
$("
|
| 242 |
-
|
| 243 |
-
|
| 244 |
-
|
| 245 |
-
|
| 246 |
-
|
| 247 |
-
|
| 248 |
-
|
| 249 |
-
|
| 250 |
-
|
| 251 |
-
|
| 252 |
-
|
| 253 |
-
|
| 254 |
-
|
| 255 |
-
|
| 256 |
-
function
|
| 257 |
-
|
| 258 |
-
|
| 259 |
-
|
| 260 |
-
|
| 261 |
-
|
| 262 |
-
$("
|
| 263 |
-
|
| 264 |
-
|
| 265 |
-
|
| 266 |
-
|
| 267 |
-
|
| 268 |
-
|
| 269 |
-
|
| 270 |
-
|
| 271 |
-
|
| 272 |
-
|
| 273 |
-
|
| 274 |
-
|
| 275 |
-
|
| 276 |
-
|
| 277 |
-
|
| 278 |
-
|
| 279 |
-
|
| 280 |
-
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
|
| 288 |
-
const
|
| 289 |
-
|
| 290 |
-
|
| 291 |
-
|
| 292 |
-
|
| 293 |
-
|
| 294 |
-
|
| 295 |
-
|
| 296 |
-
|
| 297 |
-
if (
|
| 298 |
-
|
| 299 |
-
const
|
| 300 |
-
|
| 301 |
-
|
| 302 |
-
}
|
| 303 |
-
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
|
| 314 |
-
const
|
| 315 |
-
gx.
|
| 316 |
-
gx.
|
| 317 |
-
gx.
|
| 318 |
-
|
| 319 |
-
gx.
|
| 320 |
-
gx.
|
| 321 |
-
|
| 322 |
-
}
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
if (perf.
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
if (
|
| 356 |
-
|
| 357 |
-
$("
|
| 358 |
-
|
| 359 |
-
|
| 360 |
-
|
| 361 |
-
|
| 362 |
-
|
| 363 |
-
|
| 364 |
-
|
| 365 |
-
|
| 366 |
-
|
| 367 |
-
|
| 368 |
-
|
| 369 |
-
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
if (
|
| 376 |
-
|
| 377 |
-
|
| 378 |
-
|
| 379 |
-
|
| 380 |
-
|
| 381 |
-
|
| 382 |
-
|
| 383 |
-
|
| 384 |
-
|
| 385 |
-
|
| 386 |
-
|
| 387 |
-
|
| 388 |
-
|
| 389 |
-
|
| 390 |
-
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
|
| 397 |
-
|
| 398 |
-
|
| 399 |
-
|
| 400 |
-
|
| 401 |
-
|
| 402 |
-
|
| 403 |
-
|
| 404 |
-
|
| 405 |
-
|
| 406 |
-
|
| 407 |
-
|
| 408 |
-
|
| 409 |
-
|
| 410 |
-
|
| 411 |
-
|
| 412 |
-
|
| 413 |
-
|
| 414 |
-
|
| 415 |
-
|
| 416 |
-
|
| 417 |
-
|
| 418 |
-
|
| 419 |
-
|
| 420 |
-
for (const
|
| 421 |
-
|
| 422 |
-
|
| 423 |
-
/
|
| 424 |
-
const
|
| 425 |
-
|
| 426 |
-
|
| 427 |
-
|
| 428 |
-
|
| 429 |
-
|
| 430 |
-
|
| 431 |
-
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
|
| 436 |
-
|
| 437 |
-
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
| 442 |
-
|
| 443 |
-
|
| 444 |
-
}
|
| 445 |
-
|
| 446 |
-
|
| 447 |
-
|
| 448 |
-
|
| 449 |
-
|
| 450 |
-
|
| 451 |
-
|
| 452 |
-
|
| 453 |
-
|
| 454 |
-
|
| 455 |
-
|
| 456 |
-
|
| 457 |
-
|
| 458 |
-
|
| 459 |
-
|
| 460 |
-
|
| 461 |
-
|
| 462 |
-
|
| 463 |
-
|
| 464 |
-
|
| 465 |
-
|
| 466 |
-
|
| 467 |
-
|
| 468 |
-
|
| 469 |
-
|
| 470 |
-
|
| 471 |
-
|
| 472 |
-
|
| 473 |
-
|
| 474 |
-
|
| 475 |
-
camera.
|
| 476 |
-
|
| 477 |
-
|
| 478 |
-
|
| 479 |
-
|
| 480 |
-
// the car's own
|
| 481 |
-
|
| 482 |
-
|
| 483 |
-
|
| 484 |
-
|
| 485 |
-
|
| 486 |
-
|
| 487 |
-
|
| 488 |
-
|
| 489 |
-
|
| 490 |
-
|
| 491 |
-
|
| 492 |
-
|
| 493 |
-
|
| 494 |
-
|
| 495 |
-
|
| 496 |
-
|
| 497 |
-
|
| 498 |
-
|
| 499 |
-
});
|
| 500 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
// VOID: one WebGL canvas, three modes on top of a showroom home screen.
|
| 2 |
+
// Watch: a 48 s film whose clock is the music. Play: drive it, fly it, land it. Build: paint it.
|
| 3 |
+
import * as THREE from "three";
|
| 4 |
+
|
| 5 |
+
const V = new URL(import.meta.url).search;
|
| 6 |
+
const $ = id => document.getElementById(id);
|
| 7 |
+
const setLoad = p => { $("ldbar").style.width = p + "%"; $("ldpct").textContent = Math.round(p); };
|
| 8 |
+
setLoad(15);
|
| 9 |
+
const [{ createWorld, clamp, lerp, smooth, frame, PAD_R, ZONES }, { buildCar, MODELS }, { addInterior, HEAD }, { Sound, BAR }, { createWatch, TOTAL, CHAPTERS }, { createGame }, { createLife }] = await Promise.all(
|
| 10 |
+
["world", "car", "interior", "sound", "watch", "game", "npc"].map(n => import(`./${n}.js${V}`)));
|
| 11 |
+
const [{ createPolice }, { createRaces }, { createNet, EMOTES }, { createNav }, { createVehicles }, { createAtmos, WEATHERS }, { createGoals, GOALS }, { createExtras }] = await Promise.all(["police", "race", "net", "nav", "vehicles", "atmos", "goals", "extras"].map(n => import(`./${n}.js${V}`)));
|
| 12 |
+
setLoad(40);
|
| 13 |
+
|
| 14 |
+
const COARSE = matchMedia("(pointer: coarse)").matches, REDUCED = matchMedia("(prefers-reduced-motion: reduce)").matches;
|
| 15 |
+
const store = { get(k) { try { return JSON.parse(localStorage.getItem(k)); } catch { return null; } }, set(k, v) { try { localStorage.setItem(k, JSON.stringify(v)); } catch { } } };
|
| 16 |
+
const W = await createWorld($("gl"), COARSE), { renderer, scene, camera, composer, bloom, camLight, fx } = W;
|
| 17 |
+
setLoad(55);
|
| 18 |
+
|
| 19 |
+
// the car you drive: a fixed root the game and the film move around, with the chosen model swapped inside it
|
| 20 |
+
const carRoot = new THREE.Group(); scene.add(carRoot);
|
| 21 |
+
const car = { group: carRoot, wheels: [] };
|
| 22 |
+
const carMats = new Set();
|
| 23 |
+
let inner = null;
|
| 24 |
+
function useModel(id, force) {
|
| 25 |
+
if (inner && inner.model === id && !force) return;
|
| 26 |
+
if (inner) carRoot.remove(inner.group);
|
| 27 |
+
inner = buildCar(id); carRoot.add(inner.group);
|
| 28 |
+
for (const k of Object.keys(inner)) if (typeof inner[k] === "function") car[k] = inner[k];
|
| 29 |
+
Object.assign(car, { wheels: inner.wheels, clip: car.clip || inner.clip, materials: inner.materials, model: id, name: inner.name });
|
| 30 |
+
carMats.clear();
|
| 31 |
+
inner.group.traverse(o => { if (o.isMesh) { o.castShadow = true; if (o.material && o.material.isMeshStandardMaterial) carMats.add(o.material); } });
|
| 32 |
+
for (const m of carMats) { m.envMap = null; m.needsUpdate = true; } // the paint reflects the city capture (scene.environment) // phones skip the live cube and use the city reflection
|
| 33 |
+
}
|
| 34 |
+
// live reflections on the paint: a small cube camera that rides with the car
|
| 35 |
+
const carEnv = new THREE.WebGLCubeRenderTarget(COARSE ? 64 : 128, { type: THREE.HalfFloatType, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
|
| 36 |
+
const carCube = new THREE.CubeCamera(.5, 320, carEnv);
|
| 37 |
+
for (const c of carCube.children) c.layers.set(0);
|
| 38 |
+
camera.layers.enable(1); // layer 1: the crowds, seen by the main camera only
|
| 39 |
+
let cubeN = 0;
|
| 40 |
+
useModel((store.get("void.build3") || {}).model != null ? Object.keys(MODELS)[(store.get("void.build3") || {}).model] || "hydra" : "hydra");
|
| 41 |
+
setLoad(80);
|
| 42 |
+
const interior = addInterior(car, renderer);
|
| 43 |
+
const sound = new Sound();
|
| 44 |
+
const watch = createWatch(W, car, interior);
|
| 45 |
+
const life = createLife(scene, W.roads, W.walkways, COARSE);
|
| 46 |
+
const TIMES = ["night", "sunset", "day"];
|
| 47 |
+
function cycleTime() { const k = TIMES[(TIMES.indexOf(W.timeOfDay) + 1) % 3]; W.setTime(k); store.set("void.time", k); toast({ night: "Night in the city", sunset: "Golden hour", day: "Daytime" }[k]); cubeN = 0; }
|
| 48 |
+
let police, races, nav;
|
| 49 |
+
const net = createNet();
|
| 50 |
+
setInterval(() => { if (document.hidden) net.tick(.5, null); }, 500); // a hosting tab in the background still relays everyone
|
| 51 |
+
// settings: graphics quality, look speed, auto gas, touch steering (kept on this device)
|
| 52 |
+
// a strong graphics card starts on High; everything else starts on Medium (it can be raised in the Menu)
|
| 53 |
+
const GPU = (() => { try { const c = renderer.getContext(), e = c.getExtension("WEBGL_debug_renderer_info"); return e ? c.getParameter(e.UNMASKED_RENDERER_WEBGL) : ""; } catch { return ""; } })();
|
| 54 |
+
const STRONG = /RTX|GTX 1[06-9]|GTX 9[78]|Radeon RX|Radeon Pro|Apple M[1-9]/i.test(GPU) && !COARSE;
|
| 55 |
+
const TOP = /RTX\s?(40[6-9]0|50[5-9]0)|RTX\s?A?[45]\d{3}/i.test(GPU) && !COARSE; // recent RTX cards start on Ultra
|
| 56 |
+
const SET = Object.assign({ q: TOP ? "ultra" : STRONG ? "high" : COARSE ? "low" : "medium", sens: 1, autogas: "off", steer: "stick", weather: "clear", radio: "score", cycle: "off" }, store.get("void.settings") || {});
|
| 57 |
+
const gameOpts = {
|
| 58 |
+
garage: () => openGarage(true), cycleTime, hornType: () => build.horn, autoGas: () => SET.autogas === "on", onRepair: () => car.repair && car.repair(),
|
| 59 |
+
onScore: (n, why) => { if (why === "Drift") goals.drift(n); goals.note(why); },
|
| 60 |
+
onSmash: kind => police && police.event("smash", kind), policeClear: () => police && police.clear(),
|
| 61 |
+
autopilot: (g, dt, over) => nav ? nav.controls(g, dt, over) : null, openGps: () => document.getElementById("gGpsBtn").click(),
|
| 62 |
+
mapExtra(mx, g, MM) {
|
| 63 |
+
const P = (x, z) => [(x - g.x) / MM, (z - g.z) / MM];
|
| 64 |
+
if (nav && nav.pts.length > 1) { mx.strokeStyle = "#3dfcff"; mx.lineWidth = 3; mx.beginPath(); nav.pts.forEach(([x, z], k) => { const [a, b] = P(x, z); k ? mx.lineTo(a, b) : mx.moveTo(a, b); }); mx.stroke(); }
|
| 65 |
+
if (police) for (const c of police.cops) if (c.on) { const [a, b] = P(c.x, c.z); mx.fillStyle = Math.sin(performance.now() / 90) > 0 ? "#ff3040" : "#3060ff"; mx.beginPath(); mx.arc(a, b, 4, 0, 7); mx.fill(); }
|
| 66 |
+
if (races && races.race && races.race.next) { const [a, b] = P(races.race.next[0], races.race.next[2]); mx.strokeStyle = "#ffd23d"; mx.lineWidth = 3; mx.beginPath(); mx.arc(a, b, 7, 0, 7); mx.stroke(); }
|
| 67 |
+
for (const r of remotes.values()) if (r.at) { const [a, b] = P(r.at.x, r.at.z); mx.fillStyle = "#c07dff"; mx.beginPath(); mx.arc(a, b, 4.5, 0, 7); mx.fill(); }
|
| 68 |
+
mx.font = "bold 12px sans-serif"; mx.textAlign = "center"; for (const st of W.city.stations) { const [a, b] = P(st.x, st.z); if (Math.abs(a) < 90 && Math.abs(b) < 90) { mx.save(); mx.translate(a, b); mx.rotate(g.yaw + Math.PI / 2); mx.fillText("⛽", 0, 4); mx.restore(); } }
|
| 69 |
+
},
|
| 70 |
+
};
|
| 71 |
+
const game = createGame(W, car, sound, life, gameOpts);
|
| 72 |
+
const vehicles = createVehicles(scene, game.api, W); gameOpts.vehicles = vehicles;
|
| 73 |
+
const atmos = createAtmos(W, sound, COARSE);
|
| 74 |
+
// trophies: a banner slides in at the top when a challenge is done
|
| 75 |
+
const goals = createGoals(gl => { const t = document.getElementById("gTrophy"); t.innerHTML = `<b>${gl.icon}</b><div><span>Challenge complete</span>${gl.name}<em>+1000</em></div>`; t.classList.remove("on"); void t.offsetWidth; t.classList.add("on"); if (game.state) { game.state.score += 1000; } sound.win(); renderGoals(); });
|
| 76 |
+
function renderGoals() {
|
| 77 |
+
const S = goals.stats;
|
| 78 |
+
document.getElementById("gGoals").innerHTML = GOALS.map(g => { const v = Math.min(1, (S[g.stat] || 0) / g.need), ok = goals.done.has(g.id); return `<div class="goal${ok ? " ok" : ""}"><b>${g.icon}</b><div><span>${g.name}</span><small>${g.text}</small><i style="--v:${v}"></i></div>${ok ? "🏆" : `<em>${Math.floor(v * 100)}%</em>`}</div>`; }).join("");
|
| 79 |
+
document.getElementById("gStatsRow").innerHTML = `<div><b>${(S.best || 0).toLocaleString()}</b><span>Best score</span></div><div><b>${Math.round(S.top)}</b><span>Top km/h</span></div><div><b>${S.km.toFixed(1)}</b><span>km travelled</span></div><div><b>${goals.done.size}/${GOALS.length}</b><span>Trophies</span></div>`;
|
| 80 |
+
}
|
| 81 |
+
const WX_ICON = { clear: "☀️ Clear", rain: "🌧 Rain", storm: "⛈ Storm", fog: "🌫 Fog", snow: "❄️ Snow" }, RADIO = { score: "🎵 VOID Score", voidfm: "📻 VOID FM", off: "🔇 Radio off" };
|
| 82 |
+
function chips() { document.getElementById("gChips").innerHTML = `<span>${{ night: "🌙", sunset: "🌇", day: "☀️" }[W.timeOfDay]} ${W.timeOfDay}</span><span>${WX_ICON[atmos.weather]}</span>`; document.getElementById("gWeather").innerHTML = `<b>${WX_ICON[SET.weather].split(" ")[0]}</b>${WX_ICON[SET.weather].split(" ").slice(1).join(" ")}`; document.getElementById("gRadio").innerHTML = `<b>${RADIO[SET.radio].split(" ")[0]}</b>${RADIO[SET.radio].split(" ").slice(1).join(" ")}`; }
|
| 83 |
+
document.getElementById("gWeather").onclick = () => { SET.weather = WEATHERS[(WEATHERS.indexOf(SET.weather) + 1) % WEATHERS.length]; atmos.setWeather(SET.weather); store.set("void.settings", SET); chips(); toast(WX_ICON[SET.weather]); };
|
| 84 |
+
document.getElementById("gRadio").onclick = () => { const k = Object.keys(RADIO); SET.radio = k[(k.indexOf(SET.radio) + 1) % k.length]; if (!sound.on) setSound(true); sound.setRadio(SET.radio); store.set("void.settings", SET); chips(); toast(RADIO[SET.radio]); };
|
| 85 |
+
// ---------- the menu (☰ or Esc): everything that isn't driving lives here ----------
|
| 86 |
+
const menuEl = document.getElementById("gMenu");
|
| 87 |
+
function menu(open) {
|
| 88 |
+
if (open == null) open = menuEl.hidden;
|
| 89 |
+
menuEl.hidden = !open; document.body.classList.toggle("g-menu-open", open); if (open) { renderGoals(); chips(); }
|
| 90 |
+
if (open && document.pointerLockElement) document.exitPointerLock();
|
| 91 |
+
if (!net.online()) game.pause(open);
|
| 92 |
+
}
|
| 93 |
+
document.getElementById("gMenuBtn").onclick = () => menu(true);
|
| 94 |
+
document.getElementById("gMenuClose").onclick = () => menu(false);
|
| 95 |
+
document.getElementById("gExit").onclick = () => { menu(false); go("home"); };
|
| 96 |
+
menuEl.addEventListener("click", e => { const t = e.target.closest(".tile"); if (t && !t.closest(".set")) setTimeout(() => menu(false), 60); if (e.target === menuEl) menu(false); });
|
| 97 |
+
menuEl.querySelectorAll("[data-veh]").forEach(b => b.onclick = () => game.api.setVehicle(b.dataset.veh));
|
| 98 |
+
document.getElementById("gFuelNav").onclick = () => { const st = game.state; if (!st) return; const best = W.city.stations.slice().sort((a, b) => Math.hypot(a.x - st.x, a.z - st.z) - Math.hypot(b.x - st.x, b.z - st.z))[0]; nav.setDest({ name: "⛽ Fuel station", x: best.x, z: best.z }); };
|
| 99 |
+
function applySettings(save = true) {
|
| 100 |
+
for (const seg of menuEl.querySelectorAll(".seg[data-set]")) for (const b of seg.children) b.classList.toggle("on", SET[seg.dataset.set] === b.dataset.v);
|
| 101 |
+
const weak = /Intel|UHD|Iris|Radeon\(TM\) Graphics|Vega|SwiftShader|llvmpipe|Basic Render/i.test(GPU);
|
| 102 |
+
document.getElementById("gGpu").innerHTML = `Running on: <b>${(GPU || "unknown").replace(/^ANGLE \([^,]+, /, "").replace(/ \(0x[0-9A-Fa-f]+\).*$/, "").replace(/ Direct3D.*$/, "").replace(/, D3D.*$/, "")}</b>${weak ? '<br><span class="warn">This is the built-in laptop graphics. For full speed, make your browser use the RTX: Windows Settings → System → Display → Graphics → your browser → High performance, then restart the browser.</span>' : ""}`;
|
| 103 |
+
document.getElementById("gSens").value = SET.sens; game.api.sens = +SET.sens;
|
| 104 |
+
document.body.classList.toggle("steer-buttons", SET.steer === "buttons");
|
| 105 |
+
const cap = W.setQuality(SET.q); perf.max = cap; perf.pr = Math.min(perf.pr, cap); if (renderer.getPixelRatio() > cap) { renderer.setPixelRatio(cap); composer.setPixelRatio(cap); } lastW = 0; resize();
|
| 106 |
+
if (save) store.set("void.settings", SET);
|
| 107 |
+
}
|
| 108 |
+
menuEl.querySelectorAll(".seg[data-set]").forEach(seg => seg.addEventListener("click", e => { const b = e.target.closest("button"); if (!b) return; e.preventDefault(); SET[seg.dataset.set] = b.dataset.v; if (seg.dataset.set === "q") { perf.pr = W.QUALITY[b.dataset.v].pr; perf.down = 0; } applySettings();
|
| 109 |
+
atmos.setWeather(SET.weather);
|
| 110 |
+
if (/Intel|UHD|Iris/i.test(GPU) && !COARSE && !store.get("void.gpuWarned")) { store.set("void.gpuWarned", 1); setTimeout(() => toast("Running on built-in graphics: see Menu → Settings to switch to your RTX"), 4000); } }));
|
| 111 |
+
document.getElementById("gSens").addEventListener("input", e => { SET.sens = +e.target.value; applySettings(); });
|
| 112 |
+
// the touch joystick: drag the knob; left/right steers, up/down pitches when flying
|
| 113 |
+
{
|
| 114 |
+
const st = document.getElementById("gStick"), knob = st.querySelector("i"); let id = null, cx = 0, cy = 0;
|
| 115 |
+
const set = (x, y) => { const r = st.clientWidth / 2 - 10, l = Math.min(1, Math.hypot(x, y) / r), a = Math.atan2(y, x), kx = Math.cos(a) * l * r, ky = Math.sin(a) * l * r; knob.style.transform = `translate(${kx}px, ${ky}px)`; game.api.setStick(kx / r, ky / r); };
|
| 116 |
+
st.addEventListener("pointerdown", e => { id = e.pointerId; const b = st.getBoundingClientRect(); cx = b.left + b.width / 2; cy = b.top + b.height / 2; try { st.setPointerCapture(id); } catch { } set(e.clientX - cx, e.clientY - cy); e.preventDefault(); });
|
| 117 |
+
st.addEventListener("pointermove", e => { if (e.pointerId === id) set(e.clientX - cx, e.clientY - cy); });
|
| 118 |
+
const end = e => { if (e.pointerId !== id) return; id = null; knob.style.transform = ""; game.api.setStick(0, 0); };
|
| 119 |
+
st.addEventListener("pointerup", end); st.addEventListener("pointercancel", end);
|
| 120 |
+
}
|
| 121 |
+
// headlights that light the road at night
|
| 122 |
+
const heads = new THREE.SpotLight(0xfff1d6, 0, 70, .55, .6, 1.2); heads.position.set(2.2, .7, 0); heads.target.position.set(18, -1.5, 0); carRoot.add(heads, heads.target);
|
| 123 |
+
police = createPolice(scene, game.api, sound, life);
|
| 124 |
+
races = createRaces(scene, game.api, sound, W.canvasTex, net);
|
| 125 |
+
nav = createNav(scene, game.api, W, ZONES, races.starts);
|
| 126 |
+
const extras = createExtras(W, game.api, nav, sound);
|
| 127 |
+
document.getElementById("gTaxi").onclick = () => extras.toggle();
|
| 128 |
+
|
| 129 |
+
// ---------- online: other real players' cars, name tags, emotes, proximity voice ----------
|
| 130 |
+
const remotes = new Map();
|
| 131 |
+
const tagTex = (text, col = "#ffffff") => W.canvasTex(512, 96, (g, w, h) => { g.fillStyle = "rgba(0,0,0,.55)"; g.fillRect(0, 0, w, h); g.fillStyle = col; g.font = "800 50px Inter, sans-serif"; g.textAlign = "center"; g.fillText(text, w / 2, 66); });
|
| 132 |
+
function remoteFor(p) {
|
| 133 |
+
let r = remotes.get(p.id);
|
| 134 |
+
const model = Object.keys(MODELS)[p.model | 0] || "hydra";
|
| 135 |
+
if (r && r.model !== model) { scene.remove(r.root); remotes.delete(p.id); r = null; }
|
| 136 |
+
if (!r) {
|
| 137 |
+
const c = buildCar(model), root = new THREE.Group(); root.add(c.group); c.setReveal(1); c.setThrust(0, 0, 0, 0); c.setWings(0, 0);
|
| 138 |
+
c.group.traverse(o => { if (o.isMesh) o.castShadow = true; });
|
| 139 |
+
const tag = new THREE.Sprite(new THREE.SpriteMaterial({ map: tagTex(p.name), depthTest: false, toneMapped: false })); tag.scale.set(5, .95, 1); tag.position.y = 2.6; root.add(tag);
|
| 140 |
+
const emo = new THREE.Sprite(new THREE.SpriteMaterial({ map: tagTex(""), depthTest: false, toneMapped: false })); emo.scale.set(6, 1.15, 1); emo.position.y = 3.8; emo.visible = false; root.add(emo);
|
| 141 |
+
scene.add(root); r = { root, car: c, tag, emo, model, name: p.name, paint: null, emoT: 0 }; remotes.set(p.id, r);
|
| 142 |
+
}
|
| 143 |
+
if (r.name !== p.name) { r.name = p.name; r.tag.material.map = tagTex(p.name); }
|
| 144 |
+
if (p.paint && r.paint !== p.paint) { r.paint = p.paint; r.car.setPaint(p.paint); }
|
| 145 |
+
return r;
|
| 146 |
+
}
|
| 147 |
+
net.on("change", () => { for (const id of [...remotes.keys()]) if (!net.players().some(p => p.id === id)) { scene.remove(remotes.get(id).root); remotes.delete(id); } renderPlayers(); });
|
| 148 |
+
net.on("status", t => { document.getElementById("gNetStatus").textContent = t; document.getElementById("gNetBtn").classList.toggle("on", net.online()); });
|
| 149 |
+
net.on("mic", on => { const b = document.getElementById("gMic"); b.classList.toggle("on", on); b.textContent = on ? "🎙 Mic on" : "🎙 Voice chat"; });
|
| 150 |
+
net.on("emote", (m, from) => { const r = remotes.get(from), e = EMOTES[m.e | 0]; if (r) { r.emo.material.map = tagTex(e, "#ffd23d"); r.emo.visible = true; r.emoT = 4; } feed(`${net.nameOf(from)}: ${e}`); });
|
| 151 |
+
function feed(t) { const f = document.getElementById("gFeed"); const d = document.createElement("div"); d.textContent = t; f.prepend(d); setTimeout(() => d.remove(), 7000); while (f.children.length > 5) f.lastChild.remove(); }
|
| 152 |
+
function renderPlayers() { document.getElementById("gPlayers").innerHTML = net.online() ? [`<b>${net.name} (you)</b>`, ...net.players().map(p => `<span>${p.vc ? "🎙 " : ""}${p.name}</span>`)].join("") : ""; }
|
| 153 |
+
{
|
| 154 |
+
const $ = id => document.getElementById(id), panel = $("gNetPanel");
|
| 155 |
+
$("gNetName").value = store.get("void.name") || "";
|
| 156 |
+
$("gNetBtn").onclick = () => { panel.hidden = !panel.hidden; };
|
| 157 |
+
$("gNetClose").onclick = () => panel.hidden = true;
|
| 158 |
+
const go = room => { const nm = $("gNetName").value; store.set("void.name", nm); net.join(room, nm); panel.hidden = true; };
|
| 159 |
+
$("gNetPublic").onclick = () => go("public-1");
|
| 160 |
+
$("gNetCreate").onclick = () => { const code = Math.random().toString(36).slice(2, 7); $("gNetCode").value = code; go("room-" + code); toast(`Room code: ${code}. Tell your friends!`); };
|
| 161 |
+
$("gNetJoin").onclick = () => { const code = $("gNetCode").value.trim().toLowerCase(); if (code) go("room-" + code); };
|
| 162 |
+
$("gNetLeave").onclick = () => { net.leave(); panel.hidden = true; };
|
| 163 |
+
$("gMic").onclick = () => net.setMic(!net.mic);
|
| 164 |
+
$("gEmotes").innerHTML = EMOTES.map((e, k) => `<button class="pill" data-e="${k}">${e}</button>`).join("");
|
| 165 |
+
$("gEmotes").onclick = ev => { const b = ev.target.closest("[data-e]"); if (!b || !net.online()) return; net.send({ t: "emote", e: +b.dataset.e }); feed(`You: ${EMOTES[+b.dataset.e]}`); };
|
| 166 |
+
}
|
| 167 |
+
W.setTime(store.get("void.time") || "night");
|
| 168 |
+
// fill the car's reflection cube once before the first frame, so the paint never samples an empty one
|
| 169 |
+
|
| 170 |
+
$("osmCredit").textContent = W.credit;
|
| 171 |
+
// the garage: the Build panel over the game, the game paused underneath
|
| 172 |
+
function openGarage(on) { document.body.classList.toggle("garage", on); game.pause(on); if (on && car.repair) { car.repair(); applyBuild(); if (game.state) game.state.hp = 100; } }
|
| 173 |
+
$("gGarageClose").onclick = () => openGarage(false);
|
| 174 |
+
const nozzles = (car.nozzles || [[.9, .3, 1], [.9, .3, -1], [-.95, .38, 1], [-.95, .38, -1]]).map(([x, y, s]) => new THREE.Vector3(x, y - .5, s));
|
| 175 |
+
|
| 176 |
+
// ---------- configurator ----------
|
| 177 |
+
const OPTS = {
|
| 178 |
+
paint: { label: "Paint", items: [["Void Black", "#0a0a0c"], ["Stealth Grey", "#2b2d32"], ["Liquid Silver", "#9fa3aa"], ["Ghost White", "#e9e9ea"], ["Blood Red", "#6f0a12"], ["Ember Orange", "#c9480c"], ["Ion Blue", "#123a8c"], ["Venom Green", "#2d6a1e"], ["Candy Purple", "#4a1270"], ["Sunset Gold", "#b8862a"], ["Pearl Pink", "#e8a6c0"], ["Arctic Teal", "#1f8a8a"], ["Lime Rush", "#8acb1a"], ["Cherry Pop", "#d2163c"], ["Midnight Navy", "#0d1838"], ["Chrome", "#d8dadd"]] },
|
| 179 |
+
finish: { label: "Finish", seg: true, items: [["Gloss", "gloss"], ["Satin", "satin"], ["Matte", "matte"]] },
|
| 180 |
+
rim: { label: "Wheels", items: [["Black", "#121215"], ["Gunmetal", "#3a3d44"], ["Silver", "#b8bcc4"], ["Bronze", "#7a5a32"], ["Gold", "#c9a227"], ["Red", "#b0141f"], ["White", "#e8e8ea"], ["Ion", "#2ad8e8"]] },
|
| 181 |
+
cal: { label: "Calipers", items: [["Red", "#c1121f"], ["Black", "#2a2a30"], ["Yellow", "#e0b000"], ["White", "#e8e8e8"], ["Ion", "#3df5ff"]] },
|
| 182 |
+
trim: { label: "Accents", items: [["Red", "#c1121f"], ["Black", "#16161a"], ["White", "#e8e8e8"], ["Gold", "#b8912e"], ["Ion", "#3df5ff"]] },
|
| 183 |
+
light: { label: "Lights", items: [["Ice", "#e8fbff"], ["Amber", "#ffb347"], ["Ion", "#6ad8ff"], ["Violet", "#b38cff"]] },
|
| 184 |
+
glow: { label: "Underglow", items: [["Off", ""], ["White", "#ffffff"], ["Red", "#ff2233"], ["Ion", "#3df5ff"], ["Violet", "#9b5cff"]] },
|
| 185 |
+
spoiler: { label: "Spoiler", seg: true, items: [["Stock", "none"], ["Ducktail", "ducktail"], ["GT wing", "gt"], ["Swan neck", "swan"], ["Rally", "rally"]] },
|
| 186 |
+
livery: { label: "Livery", seg: true, items: [["Clean", "none"], ["Twin stripes", "stripes"], ["Centre stripe", "center"], ["Side stripe", "side"], ["Race #42", "race"]] },
|
| 187 |
+
livc: { label: "Livery colour", items: [["White", "#f2f2f2"], ["Red", "#c1121f"], ["Black", "#101012"], ["Gold", "#c9a227"], ["Ion", "#3df5ff"], ["Orange", "#ff6a00"]] },
|
| 188 |
+
tint: { label: "Windows", seg: true, items: [["Light", "light"], ["Dark", "dark"], ["Limo", "limo"], ["Mirror", "mirror"]] },
|
| 189 |
+
flame: { label: "Nitro flames", items: [["Blue", "#4fa8ff"], ["Orange", "#ff7a1a"], ["Green", "#3dff6a"], ["Purple", "#b05cff"], ["Pink", "#ff4fd8"]] },
|
| 190 |
+
horn: { label: "Horn", seg: true, items: [["Classic", 0], ["Air horn", 1], ["Tune", 2]] },
|
| 191 |
+
};
|
| 192 |
+
OPTS.model = { label: "Car", seg: true, items: Object.entries(MODELS).map(([k, m]) => [m.name, k]) };
|
| 193 |
+
const DEFAULT = { model: 0, paint: 0, finish: 0, rim: 0, cal: 0, trim: 0, light: 0, glow: 0, spoiler: 0, livery: 0, livc: 0, tint: 1, flame: 0, horn: 0 };
|
| 194 |
+
let build = { ...DEFAULT, ...(store.get("void.build2") || {}), ...(store.get("void.build3") || {}) };
|
| 195 |
+
try { const h = new URLSearchParams(location.hash.slice(1)).get("b"); if (h) { const v = h.split(".").map(Number); Object.keys(DEFAULT).forEach((k, i) => { if (OPTS[k].items[v[i]]) build[k] = v[i]; }); } } catch { }
|
| 196 |
+
function applyBuild() {
|
| 197 |
+
useModel(OPTS.model.items[build.model][1]);
|
| 198 |
+
car.setSpoiler(OPTS.spoiler.items[build.spoiler][1]); car.setLivery(OPTS.livery.items[build.livery][1], OPTS.livc.items[build.livc][1]);
|
| 199 |
+
car.setTint(OPTS.tint.items[build.tint][1]); car.setFlameColor(OPTS.flame.items[build.flame][1]);
|
| 200 |
+
car.setPaint(OPTS.paint.items[build.paint][1]); car.setFinish(OPTS.finish.items[build.finish][1]);
|
| 201 |
+
car.setRim(OPTS.rim.items[build.rim][1]); car.setAccent(OPTS.cal.items[build.cal][1]); car.setTrim(OPTS.trim.items[build.trim][1]); car.setLight(OPTS.light.items[build.light][1]);
|
| 202 |
+
const gl = OPTS.glow.items[build.glow][1]; if (gl) fx.glow.material.color.set(gl).multiplyScalar(1.4);
|
| 203 |
+
store.set("void.build3", build);
|
| 204 |
+
$("sum").innerHTML = `<b>${car.name.toUpperCase()} · ${OPTS.paint.items[build.paint][0]}</b>${OPTS.spoiler.items[build.spoiler][0]} spoiler, ${OPTS.livery.items[build.livery][0].toLowerCase()} livery, ${OPTS.finish.items[build.finish][0]} paint, ${OPTS.rim.items[build.rim][0].toLowerCase()} wheels, ${OPTS.cal.items[build.cal][0].toLowerCase()} calipers, ${OPTS.trim.items[build.trim][0].toLowerCase()} accents, ${OPTS.light.items[build.light][0].toLowerCase()} lights${gl ? ", " + OPTS.glow.items[build.glow][0].toLowerCase() + " underglow" : ""}`;
|
| 205 |
+
for (const b of document.querySelectorAll("#cfgBody button")) b.setAttribute("aria-pressed", String(build[b.dataset.k] === +b.dataset.i));
|
| 206 |
+
for (const k in OPTS) { const n = document.querySelector(`[data-name="${k}"]`); if (n) n.textContent = OPTS[k].items[build[k]][0]; }
|
| 207 |
+
}
|
| 208 |
+
const ORDER = ["model", "paint", "finish", "livery", "livc", "spoiler", "rim", "cal", "trim", "tint", "light", "glow", "flame", "horn"];
|
| 209 |
+
$("cfgBody").innerHTML = ORDER.map(k => [k, OPTS[k]]).map(([k, o]) => `<div class="grp"><div class="grp-h">${o.label}<b data-name="${k}"></b></div><div class="${o.seg ? "seg" : "sw"}">${o.items.map(([n, c], i) => o.seg
|
| 210 |
+
? `<button data-k="${k}" data-i="${i}">${n}</button>`
|
| 211 |
+
: `<button data-k="${k}" data-i="${i}" title="${n}" aria-label="${o.label}: ${n}" style="background:${c || "repeating-linear-gradient(45deg,#222 0 4px,#111 4px 8px)"}"></button>`).join("")}</div></div>`).join("");
|
| 212 |
+
$("cfgBody").addEventListener("click", e => { const b = e.target.closest("button"); if (!b) return; build[b.dataset.k] = +b.dataset.i; applyBuild(); });
|
| 213 |
+
$("reset").onclick = () => { build = { ...DEFAULT, model: build.model }; applyBuild(); toast("Back to black and red"); };
|
| 214 |
+
$("share").onclick = async () => {
|
| 215 |
+
const url = location.origin + location.pathname + "#b=" + Object.keys(DEFAULT).map(k => build[k]).join(".");
|
| 216 |
+
try { await navigator.clipboard.writeText(url); toast("Link to your build copied"); } catch { prompt("Copy your build link", url); }
|
| 217 |
+
};
|
| 218 |
+
applyBuild();
|
| 219 |
+
let toastT;
|
| 220 |
+
function toast(t) { const el = $("toast"); el.textContent = t; el.classList.add("on"); clearTimeout(toastT); toastT = setTimeout(() => el.classList.remove("on"), 2200); }
|
| 221 |
+
|
| 222 |
+
// ---------- sound ----------
|
| 223 |
+
function setSound(on) { sound.setOn(on); $("snd").setAttribute("aria-pressed", String(on)); $("snd").textContent = on ? "Sound on" : "Sound off"; if (on && mode === "watch" && w.playing) sound.startSong(w.t); }
|
| 224 |
+
$("snd").onclick = () => setSound(!sound.on);
|
| 225 |
+
$("rev").onclick = () => { if (!sound.on) setSound(true); sound.rev(); };
|
| 226 |
+
|
| 227 |
+
// ---------- modes ----------
|
| 228 |
+
let mode = "home";
|
| 229 |
+
const w = { t: 0, playing: false, dragging: false };
|
| 230 |
+
function go(next) {
|
| 231 |
+
if (next === mode) return;
|
| 232 |
+
$("fade").classList.add("on");
|
| 233 |
+
setTimeout(() => {
|
| 234 |
+
if (mode === "play") { game.exit(); openGarage(false); }
|
| 235 |
+
if (mode === "watch") { sound.stopSong(); w.playing = false; }
|
| 236 |
+
mode = next; document.body.dataset.mode = next;
|
| 237 |
+
if (next === "home") scrollTo(0, 0);
|
| 238 |
+
if (next === "watch") { if (!sound.on) setSound(true); playFrom(0); }
|
| 239 |
+
if (next === "play") { game.enter(); if (SET.radio !== "score") sound.setRadio(SET.radio); }
|
| 240 |
+
if (mode !== "play" && sound.radio && sound.radio !== "score") sound.setRadio("score");
|
| 241 |
+
$("fade").classList.remove("on");
|
| 242 |
+
}, 320);
|
| 243 |
+
}
|
| 244 |
+
document.addEventListener("click", e => { const b = e.target.closest("[data-go]"); if (b) { e.preventDefault(); go(b.dataset.go); } });
|
| 245 |
+
$("exit").onclick = () => go("home");
|
| 246 |
+
addEventListener("keydown", e => {
|
| 247 |
+
if (e.code === "Escape" && mode === "play" && !document.body.classList.contains("garage")) { menu(); return; }
|
| 248 |
+
if (e.code === "Escape" && mode !== "home") go("home");
|
| 249 |
+
if (mode === "watch") {
|
| 250 |
+
if (e.code === "Space") { e.preventDefault(); togglePlay(); }
|
| 251 |
+
if (e.code === "ArrowRight") seek(w.t + 4); if (e.code === "ArrowLeft") seek(w.t - 4);
|
| 252 |
+
}
|
| 253 |
+
});
|
| 254 |
+
|
| 255 |
+
// watch player
|
| 256 |
+
function playFrom(t) { w.t = clamp(t, 0, TOTAL); w.playing = true; $("wEnd").classList.remove("on"); if (sound.on) sound.startSong(w.t); setPlayIcon(); }
|
| 257 |
+
function pause() { w.playing = false; sound.stopSong(); setPlayIcon(); }
|
| 258 |
+
function togglePlay() { if (w.playing) pause(); else playFrom(w.t >= TOTAL - .05 ? 0 : w.t); }
|
| 259 |
+
function seek(t) { w.t = clamp(t, 0, TOTAL); if (w.playing) playFrom(w.t); }
|
| 260 |
+
function setPlayIcon() { $("wPlay").innerHTML = w.playing ? "❚❚" : "▶"; $("wPlay").setAttribute("aria-label", w.playing ? "Pause" : "Play"); }
|
| 261 |
+
$("wPlay").onclick = togglePlay;
|
| 262 |
+
$("wAgain").onclick = () => playFrom(0);
|
| 263 |
+
const scrub = $("wScrub"); scrub.max = TOTAL;
|
| 264 |
+
scrub.addEventListener("input", () => { w.dragging = true; w.t = +scrub.value; if (w.playing) { sound.stopSong(); } });
|
| 265 |
+
scrub.addEventListener("change", () => { w.dragging = false; if (w.playing) playFrom(+scrub.value); });
|
| 266 |
+
$("wTicks").innerHTML = CHAPTERS.filter(c => c[1]).map(c => `<button style="left:${c[0] * BAR / TOTAL * 100}%" data-t="${c[0] * BAR}">${c[1]}</button>`).join("");
|
| 267 |
+
$("wTicks").addEventListener("click", e => { const b = e.target.closest("button"); if (b) { seek(+b.dataset.t); if (!w.playing) playFrom(+b.dataset.t); } });
|
| 268 |
+
const fmt = s => `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, "0")}`;
|
| 269 |
+
|
| 270 |
+
// drag to turn the car on the home and build screens
|
| 271 |
+
const orbit = { a: .7, v: 0, drag: false, x: 0 };
|
| 272 |
+
addEventListener("pointerdown", e => { if ((mode !== "build" && mode !== "home") || e.target !== $("gl") && !e.target.closest(".drag-hint, #buildUI") || e.target.closest(".cfg, button")) return; orbit.drag = true; orbit.x = e.clientX; });
|
| 273 |
+
addEventListener("pointermove", e => { if (!orbit.drag) return; orbit.v = (e.clientX - orbit.x) * -.006; orbit.a += orbit.v; orbit.x = e.clientX; });
|
| 274 |
+
addEventListener("pointerup", () => { orbit.drag = false; });
|
| 275 |
+
|
| 276 |
+
// ---------- resize: ignore the phone address bar sliding, follow rotation and folding ----------
|
| 277 |
+
let lastW = 0, lastH = 0;
|
| 278 |
+
function resize() {
|
| 279 |
+
const ww = innerWidth, hh = Math.max(innerHeight, document.documentElement.clientHeight);
|
| 280 |
+
if (!ww || !hh) return;
|
| 281 |
+
if (ww === lastW && Math.abs(hh - lastH) < 140 && lastW) return;
|
| 282 |
+
lastW = ww; lastH = hh; renderer.setSize(ww, hh, false); composer.setSize(ww, hh);
|
| 283 |
+
bloom.resolution.set(Math.max(1, ww * W.bloomRes), Math.max(1, hh * W.bloomRes)); camera.aspect = ww / hh;
|
| 284 |
+
}
|
| 285 |
+
addEventListener("resize", resize); addEventListener("orientationchange", () => setTimeout(resize, 200));
|
| 286 |
+
if (window.visualViewport) visualViewport.addEventListener("resize", resize);
|
| 287 |
+
resize();
|
| 288 |
+
const fovFor = f => { const a = camera.aspect; if (a >= 1.5) return f; const h = 2 * Math.atan(Math.tan(f * Math.PI / 360) * 1.5); return Math.min(88, 2 * Math.atan(Math.tan(h / 2) / a) * 180 / Math.PI); };
|
| 289 |
+
|
| 290 |
+
// ---------- the showroom pose (home and build) ----------
|
| 291 |
+
const showFr = frame(); W.track.sample(W.track.D[W.track.idxX(0)], showFr);
|
| 292 |
+
const intro = { t: -1 }; // the car drives in once the loader lifts
|
| 293 |
+
function showroom(dt, time) {
|
| 294 |
+
let introX = 0, introV = 0;
|
| 295 |
+
if (intro.t >= 0 && intro.t < 3.2) { intro.t += dt; const u = Math.min(1, intro.t / 3.2); introX = -46 * Math.pow(1 - u, 3); introV = 46 * 3 * Math.pow(1 - u, 2) / 3.2; }
|
| 296 |
+
else if (intro.t < 0) introX = -46;
|
| 297 |
+
if (!orbit.drag) { orbit.v *= .94; orbit.a += orbit.v + (REDUCED ? 0 : dt * (mode === "home" ? .16 : .1)); }
|
| 298 |
+
const hf = 2 * Math.atan(Math.tan(fovFor(38) * Math.PI / 360) * camera.aspect), fit = 3.1 / Math.tan(hf / 2); // fit the whole car across the screen
|
| 299 |
+
const scrolled = mode === "home" ? clamp(scrollY / innerHeight) : 0, dist = Math.max(mode === "build" ? 8.8 : 8.2, fit) + scrolled * 2;
|
| 300 |
+
const cam = { pos: new THREE.Vector3(Math.cos(orbit.a) * dist, 1.5 + scrolled * 4, Math.sin(orbit.a) * dist), look: new THREE.Vector3(0, .5 - scrolled * .4, 0), fov: 38 };
|
| 301 |
+
if (camera.aspect < 1) cam.look.y = mode === "build" ? -1.1 : -.2;
|
| 302 |
+
else if (mode === "build") { const right = new THREE.Vector3().subVectors(cam.look, cam.pos).cross(new THREE.Vector3(0, 1, 0)).normalize(); cam.look.addScaledVector(right, 1.7); }
|
| 303 |
+
const pos = showFr.p.clone(); pos.x += introX; const fr = { ...showFr, p: pos };
|
| 304 |
+
if (introX < -.01) cam.look.x = Math.max(introX * .35, -8);
|
| 305 |
+
return { pos, quat: new THREE.Quaternion(), fr, speed: introV * 3.6, g: 1, alt: 0, vs: 0, thrust: { power: 0, angle: 0, deploy: 0 }, wings: 0, air: false, cam, inside: false, screenOn: false, reveal: 1, rpm: 900, gear: 1, load: .1, engine: .6, mode: "PARK", zones: [] };
|
| 306 |
+
}
|
| 307 |
+
|
| 308 |
+
// ---------- per frame ----------
|
| 309 |
+
const clock = new THREE.Clock();
|
| 310 |
+
let lastGauge = 0, lastChips = 0, cycleT = 0;
|
| 311 |
+
// the speedometer: a dial with a glowing arc, the speed, the gear (or altitude when flying) and what you're in
|
| 312 |
+
const gauge = document.getElementById("gGauge"), gx = gauge.getContext("2d");
|
| 313 |
+
function drawGauge(S) {
|
| 314 |
+
const W2 = gauge.width, c = W2 / 2, r = c - 22, a0 = Math.PI * .75, a1 = Math.PI * 2.25, max = S.veh === "plane" ? 600 : S.veh === "boat" ? 140 : 360, f = Math.min(1, S.speed / max);
|
| 315 |
+
gx.clearRect(0, 0, W2, W2);
|
| 316 |
+
gx.beginPath(); gx.arc(c, c, r + 14, 0, 7); gx.fillStyle = "rgba(6,8,14,.62)"; gx.fill();
|
| 317 |
+
gx.lineCap = "round"; gx.lineWidth = 14; gx.beginPath(); gx.arc(c, c, r, a0, a1); gx.strokeStyle = "rgba(255,255,255,.12)"; gx.stroke();
|
| 318 |
+
const grd = gx.createLinearGradient(0, W2, W2, 0); grd.addColorStop(0, "#3df5ff"); grd.addColorStop(.6, "#ffffff"); grd.addColorStop(1, "#ff2a3a");
|
| 319 |
+
gx.beginPath(); gx.arc(c, c, r, a0, a0 + (a1 - a0) * f); gx.strokeStyle = grd; gx.shadowColor = "#3df5ff"; gx.shadowBlur = 16; gx.stroke(); gx.shadowBlur = 0;
|
| 320 |
+
gx.lineWidth = 2; gx.strokeStyle = "rgba(255,255,255,.5)"; for (let k = 0; k <= 12; k++) { const a = a0 + (a1 - a0) * k / 12, i = r - 18, o = r - (k % 3 ? 24 : 30); gx.beginPath(); gx.moveTo(c + Math.cos(a) * i, c + Math.sin(a) * i); gx.lineTo(c + Math.cos(a) * o, c + Math.sin(a) * o); gx.stroke(); }
|
| 321 |
+
gx.fillStyle = "#fff"; gx.textAlign = "center"; gx.font = `900 ${W2 * .22}px Unbounded, Inter, sans-serif`; gx.fillText(Math.round(S.speed), c, c + W2 * .06);
|
| 322 |
+
gx.font = `700 ${W2 * .055}px Inter, sans-serif`; gx.fillStyle = "rgba(255,255,255,.6)"; gx.fillText("KM/H", c, c + W2 * .14);
|
| 323 |
+
gx.font = `800 ${W2 * .07}px Unbounded, Inter, sans-serif`; gx.fillStyle = S.air ? "#3df5ff" : "#ffd23d";
|
| 324 |
+
gx.fillText(S.air || S.veh === "plane" || S.veh === "heli" ? `${Math.round(S.alt)} m` : S.veh === "boat" ? "BOAT" : `GEAR ${S.gear}`, c, c + W2 * .3);
|
| 325 |
+
if (S.nitro > .1) { gx.font = `800 ${W2 * .05}px Inter, sans-serif`; gx.fillStyle = "#3df5ff"; gx.fillText("NITRO", c, c - W2 * .16); }
|
| 326 |
+
}
|
| 327 |
+
let wasWrecked = false, wreckPose = null; const wrecks = [];
|
| 328 |
+
const perf = { t: 0, n: 0, pr: renderer.getPixelRatio(), max: renderer.getPixelRatio(), down: 0 };
|
| 329 |
+
applySettings();
|
| 330 |
+
let lastHud = 0, prevGear = 1, feedFlip = 0;
|
| 331 |
+
function frameLoop(fixed) {
|
| 332 |
+
const raw = fixed ? 0 : clock.getDelta(), dt = fixed || Math.min(.05, raw), time = clock.elapsedTime;
|
| 333 |
+
// adaptive resolution: drop the pixel count when frames run slow, bring it back when there is headroom
|
| 334 |
+
if (!fixed && raw < .5) {
|
| 335 |
+
perf.t += raw; perf.n++;
|
| 336 |
+
if (perf.t > 1.5) {
|
| 337 |
+
const avg = perf.t / perf.n, was = perf.pr;
|
| 338 |
+
if (avg > 1 / 45 && perf.pr > .6) perf.pr = Math.max(.6, perf.pr - (avg > 1 / 25 ? .25 : .12));
|
| 339 |
+
else if (avg > 1 / 40 && mode === "play" && ++perf.down >= 3 && SET.q !== "low") { // still slow at the lowest resolution: drop a quality level
|
| 340 |
+
perf.down = 0; SET.q = { ultra: "high", high: "medium", medium: "low" }[SET.q]; perf.pr = W.QUALITY[SET.q].pr; applySettings(false); toast(`Graphics set to ${SET.q} to keep it smooth`);
|
| 341 |
+
}
|
| 342 |
+
else if (avg < 1 / 58 && perf.pr < perf.max) perf.pr = Math.min(perf.max, perf.pr + .08);
|
| 343 |
+
if (perf.pr !== was) { renderer.setPixelRatio(perf.pr); composer.setPixelRatio(perf.pr); lastW = 0; resize(); }
|
| 344 |
+
perf.t = perf.n = 0;
|
| 345 |
+
}
|
| 346 |
+
}
|
| 347 |
+
let S;
|
| 348 |
+
if (mode === "watch") {
|
| 349 |
+
if (w.playing && !w.dragging) {
|
| 350 |
+
const st = sound.on ? sound.songTime() : null;
|
| 351 |
+
w.t = st != null ? st : w.t + dt;
|
| 352 |
+
if (w.t >= TOTAL) { w.t = TOTAL; pause(); $("wEnd").classList.add("on"); }
|
| 353 |
+
}
|
| 354 |
+
S = watch.at(w.t, time, camera.aspect, fovFor);
|
| 355 |
+
if (!w.dragging) scrub.value = w.t;
|
| 356 |
+
scrub.style.setProperty("--p", (w.t / TOTAL * 100) + "%");
|
| 357 |
+
$("wTime").textContent = `${fmt(w.t)} / ${fmt(TOTAL)}`;
|
| 358 |
+
const ch = S.chapter, cap = $("wCap");
|
| 359 |
+
if (cap.dataset.ch !== ch[1]) { cap.dataset.ch = ch[1]; cap.classList.add("hide"); setTimeout(() => { $("wNum").textContent = ch[1] ? String(CHAPTERS.indexOf(ch) + 1).padStart(2, "0") : ""; $("wTitle").textContent = ch[1]; $("wSub").textContent = ch[2]; cap.classList.toggle("hide", !ch[1]); }, 250); }
|
| 360 |
+
$("telem").style.opacity = S.bar > 2 && !S.inside && S.bar < 17.5 ? 1 : 0;
|
| 361 |
+
$("tSpd").textContent = Math.round(S.speed); $("tG").textContent = S.g.toFixed(1); $("tAlt").textContent = Math.round(S.alt);
|
| 362 |
+
$("dream").style.opacity = S.dream; $("fade").style.opacity = S.fade;
|
| 363 |
+
} else if (mode === "play") S = game.update(dt, time, camera.aspect);
|
| 364 |
+
else S = showroom(dt, time);
|
| 365 |
+
life.update(dt, time, mode === "play" ? S.player : null, camera.position);
|
| 366 |
+
if (mode === "play") {
|
| 367 |
+
police.update(dt, time); races.update(dt, time); nav.update();
|
| 368 |
+
const st = game.state, stars = police.stars;
|
| 369 |
+
document.getElementById("gStars").textContent = stars ? "★".repeat(stars) + "☆".repeat(5 - stars) : "";
|
| 370 |
+
document.getElementById("gStars").classList.toggle("bust", police.bust > .5);
|
| 371 |
+
const pr = races.progress();
|
| 372 |
+
net.tick(dt, { p: [st.x, st.y, st.z, st.yaw, st.pitch, st.roll].map(v => Math.round(v * 100) / 100), m: Object.keys(MODELS).indexOf(car.model), c: OPTS.paint.items[build.paint][1], v: Math.round(S.speed), a: S.air ? 1 : 0, r: pr ? pr.race : 0, rp: pr ? pr.rp : 0, rf: pr ? pr.rf : 0, w: stars });
|
| 373 |
+
for (const p of net.players()) {
|
| 374 |
+
const at = net.sample(p); const r = remoteFor(p); r.at = at;
|
| 375 |
+
if (!at || at.stale) { r.root.visible = false; continue; }
|
| 376 |
+
r.root.visible = true; r.root.position.set(at.x, at.y, at.z); r.root.rotation.set(0, -at.yaw, 0); r.car.group.rotation.set(at.roll, 0, at.pitch, "XYZ");
|
| 377 |
+
r.car.setThrust(at.air ? .6 : 0, at.air && at.v > 90 ? 1 : 0, at.air ? 1 : 0, time); r.car.setWings(at.air && at.v > 100 ? 1 : 0, time);
|
| 378 |
+
for (const wh of r.car.wheels) wh.rotation.z -= at.v / 3.6 * dt / .37;
|
| 379 |
+
if (r.emoT > 0 && (r.emoT -= dt) <= 0) r.emo.visible = false;
|
| 380 |
+
const dx = st.x - at.x, dz = st.z - at.z, d = Math.hypot(dx, dz);
|
| 381 |
+
net.setVolume(p.id, 1 - d / 260);
|
| 382 |
+
if (d < 3.4 && d > .01 && Math.abs(st.y - at.y) < 2) { st.x += dx / d * (3.4 - d) * .5; st.z += dz / d * (3.4 - d) * .5; st.vel.multiplyScalar(.9); }
|
| 383 |
+
}
|
| 384 |
+
} else { for (const r of remotes.values()) r.root.visible = false; net.tick(dt, null); } // the host keeps relaying from the menus
|
| 385 |
+
W.city.update(time, camera.position);
|
| 386 |
+
W.follow(S.pos);
|
| 387 |
+
if (mode !== "watch") $("fade").style.opacity = "";
|
| 388 |
+
|
| 389 |
+
// the car, or the plane / helicopter / boat
|
| 390 |
+
const veh = mode === "play" ? S.veh || "car" : "car";
|
| 391 |
+
carRoot.visible = veh === "car";
|
| 392 |
+
vehicles.show(veh === "car" ? null : veh, S.pos, S.quat, S, time, dt);
|
| 393 |
+
if (S.splash) for (let k = 0; k < 6; k++) { const pf = fx.puffs[fx.puffI++ % fx.puffs.length]; pf.s.position.copy(S.pos).add(new THREE.Vector3((Math.random() - .5) * 3, .3, (Math.random() - .5) * 3)); pf.life = 1; pf.s.visible = true; pf.grow = .8; pf.s.scale.setScalar(.8); pf.s.material.color.set(0xeaf6ff); pf.v.set((Math.random() - .5) * 6, 4 + Math.random() * 4, (Math.random() - .5) * 6); }
|
| 394 |
+
if (veh === "boat" && S.speed > 12 && Math.random() < .6) { const back = new THREE.Vector3(-3.6, .1, (Math.random() - .5) * 2).applyQuaternion(S.quat).add(S.pos); const pf = fx.puffs[fx.puffI++ % fx.puffs.length]; pf.s.position.copy(back); pf.life = 1; pf.s.visible = true; pf.grow = .5; pf.s.scale.setScalar(.5); pf.s.material.color.set(0xf4fbff); pf.v.set((Math.random() - .5) * 2, .6, (Math.random() - .5) * 2); }
|
| 395 |
+
const night = W.timeOfDay !== "day";
|
| 396 |
+
heads.intensity = night && veh === "car" ? (W.timeOfDay === "night" ? 260 : 120) : 0;
|
| 397 |
+
W.sky.position.copy(camera.position); W.grade.uniforms.time.value = time % 100;
|
| 398 |
+
W.grade.uniforms.blur.value = mode === "play" ? Math.max(0, Math.min(1, (S.speed - 160) / 220)) * .9 + (S.nitro || 0) * .5 : 0;
|
| 399 |
+
atmos.update(dt, time, S, mode === "play" ? game.state : null);
|
| 400 |
+
W.city.poolMat.opacity = W.timeOfDay === "night" ? 1 : W.timeOfDay === "sunset" ? .45 : 0; W.city.poolMat.visible = W.timeOfDay !== "day";
|
| 401 |
+
extras.sky(dt, time);
|
| 402 |
+
// the living city: when switched on, the day turns and the weather changes on its own
|
| 403 |
+
if (SET.cycle === "on" && mode === "play" && (cycleT += dt) > 150) { cycleT = 0; cycleTime(); if (Math.random() < .5) { const w = ["clear", "clear", "rain", "fog", "storm", "snow"][Math.floor(Math.random() * 6)]; atmos.setWeather(w); SET.weather = w; } }
|
| 404 |
+
if (mode === "play") { extras.update(dt, time); goals.stats.coins = extras.coins().got; goals.update(dt, game.state, S.speed); if (time - lastChips > 2) { lastChips = time; chips(); } }
|
| 405 |
+
if (mode === "play" && time - lastGauge > .05) { lastGauge = time; drawGauge(S); const fu = document.getElementById("gFuel"); if (fu && S.fuel != null) { fu.style.setProperty("--v", S.fuel); fu.classList.toggle("low", S.fuel < .2); } }
|
| 406 |
+
car.group.position.copy(S.pos); car.group.quaternion.copy(S.quat);
|
| 407 |
+
car.setReveal(S.reveal);
|
| 408 |
+
car.setThrust(S.thrust.power, S.thrust.angle, S.thrust.deploy, time);
|
| 409 |
+
car.setFlame(S.nitro || 0, time);
|
| 410 |
+
// damage: dent the model where it was hit; a destroyed car is left where it crashed and a fresh one is built for you
|
| 411 |
+
const gs = mode === "play" ? game.state : null;
|
| 412 |
+
if (gs && gs.impacts && gs.impacts.length && car.damage) { carRoot.updateMatrixWorld(true); for (const im of gs.impacts.splice(0)) car.damage(carRoot.worldToLocal(new THREE.Vector3(im.x, im.y, im.z)), im.p); }
|
| 413 |
+
if (S.wrecked && !wasWrecked) { car.wreck && car.wreck(); wreckPose = { p: carRoot.position.clone(), q: carRoot.quaternion.clone() }; }
|
| 414 |
+
if (!S.wrecked && wasWrecked && wreckPose && inner) {
|
| 415 |
+
const wg = inner.group; carRoot.remove(wg); wg.position.copy(wreckPose.p); wg.quaternion.copy(wreckPose.q); scene.add(wg);
|
| 416 |
+
wrecks.push({ g: wg, t: 30 }); if (wrecks.length > 4) { const o = wrecks.shift(); scene.remove(o.g); }
|
| 417 |
+
useModel(car.model, true); applyBuild(); wreckPose = null;
|
| 418 |
+
}
|
| 419 |
+
wasWrecked = !!S.wrecked;
|
| 420 |
+
for (const w of wrecks) { w.t -= dt; if (Math.random() < .25 && w.t > 10) { const pf = fx.puffs[fx.puffI++ % fx.puffs.length]; pf.s.position.copy(w.g.position).add(new THREE.Vector3((Math.random() - .5) * 2, 1, (Math.random() - .5) * 2)); pf.life = 1; pf.s.visible = true; pf.grow = .6; pf.s.scale.setScalar(.6); pf.s.material.color.set(0x2a2a2a); pf.v.set(0, 2, 0); } }
|
| 421 |
+
for (let k = wrecks.length - 1; k >= 0; k--) if (wrecks[k].t <= 0) { scene.remove(wrecks[k].g); wrecks.splice(k, 1); }
|
| 422 |
+
car.setWings(S.wings, time);
|
| 423 |
+
const roll = S.speed / 3.6 * dt / .37;
|
| 424 |
+
for (const wh of car.wheels) wh.rotation.z -= S.air ? roll * .15 : roll;
|
| 425 |
+
car.group.updateMatrixWorld(true);
|
| 426 |
+
|
| 427 |
+
// shadow, underglow, exhaust, speed lines
|
| 428 |
+
const fr = S.fr, ground = clamp(1 - S.pos.y / 3) * (fr.u.y > .8 ? 1 : 0);
|
| 429 |
+
fx.shadow.position.set(S.pos.x, S.pos.y > .5 ? .07 : S.pos.y + .07, S.pos.z); fx.shadow.material.opacity = veh === "car" ? ground : 0; fx.shadow.rotation.z = Math.atan2(-fr.f.z, fr.f.x);
|
| 430 |
+
const glowOn = !!OPTS.glow.items[build.glow][1];
|
| 431 |
+
fx.glow.position.copy(fx.shadow.position).y += .01; fx.glow.rotation.z = fx.shadow.rotation.z; fx.glow.material.opacity = glowOn ? ground * .85 : 0;
|
| 432 |
+
if (S.thrust.power > .3) for (const n of nozzles) if (Math.random() < .18) {
|
| 433 |
+
const pf = fx.puffs[fx.puffI++ % fx.puffs.length], wp = n.clone().applyMatrix4(car.group.matrixWorld);
|
| 434 |
+
pf.s.position.copy(wp); pf.life = 1; pf.s.visible = true; pf.s.scale.setScalar(.4); pf.grow = .4; pf.s.material.color.set(0xc8d2e1);
|
| 435 |
+
pf.v.copy(fr.u).multiplyScalar(-(1 - S.thrust.angle) * 7).addScaledVector(fr.f, -S.thrust.angle * 9 - S.speed / 3.6 * .2).add(new THREE.Vector3(Math.random() - .5, Math.random() - .5, Math.random() - .5).multiplyScalar(1.5));
|
| 436 |
+
}
|
| 437 |
+
const emit = (p, v, col, size, life = 1) => { const pf = fx.puffs[fx.puffI++ % fx.puffs.length]; pf.s.position.copy(p); pf.life = life; pf.s.visible = true; pf.s.scale.setScalar(size); pf.s.material.color.set(col); pf.v.copy(v); pf.grow = size; };
|
| 438 |
+
if (mode === "play" && S.hp != null) {
|
| 439 |
+
const eng = new THREE.Vector3(-1.2, .9, 0).applyMatrix4(car.group.matrixWorld);
|
| 440 |
+
if (S.hp < 55 && !S.wrecked && Math.random() < (S.hp < 25 ? .5 : .2)) emit(eng, new THREE.Vector3((Math.random() - .5), 1.5 + Math.random(), (Math.random() - .5)), S.hp < 25 ? 0x222222 : 0x9a9a9a, .5);
|
| 441 |
+
if (S.hp < 20 && !S.wrecked && Math.random() < .35) emit(eng, new THREE.Vector3(0, 2.5, 0), 0xff7a1a, .35, .5);
|
| 442 |
+
if (S.sparks > .5) for (let k = 0; k < 4; k++) emit(S.pos.clone().add(new THREE.Vector3(0, .5, 0)), new THREE.Vector3((Math.random() - .5) * 12, Math.random() * 6, (Math.random() - .5) * 12), 0xffd27a, .12, .35);
|
| 443 |
+
if (S.boom > .95) for (let k = 0; k < 40; k++) emit(S.pos.clone().add(new THREE.Vector3(0, 1, 0)), new THREE.Vector3((Math.random() - .5) * 18, Math.random() * 14, (Math.random() - .5) * 18), k % 3 ? 0xff7a1a : 0x333333, 1.2, 1.4);
|
| 444 |
+
}
|
| 445 |
+
for (const pf of fx.puffs) if (pf.life > 0) {
|
| 446 |
+
pf.life -= dt * .9; pf.s.position.addScaledVector(pf.v, dt); pf.v.multiplyScalar(.97);
|
| 447 |
+
pf.s.scale.setScalar((pf.grow || .4) + (1 - pf.life) * 4.5); pf.s.material.opacity = Math.max(0, pf.life) * .5; if (pf.life <= 0) pf.s.visible = false;
|
| 448 |
+
}
|
| 449 |
+
const lineA = smooth(240, 320, S.speed) * (S.inside ? 0 : 1);
|
| 450 |
+
fx.lines.material.opacity = lineA * .08;
|
| 451 |
+
if (lineA > .01) {
|
| 452 |
+
const d = new THREE.Object3D();
|
| 453 |
+
for (let i = 0; i < fx.LINES; i++) {
|
| 454 |
+
const sd = fx.lineSeed[i]; sd[0] -= S.speed / 3.6 * dt * 1.6; if (sd[0] < -40) sd[0] += 80;
|
| 455 |
+
d.position.copy(fr.p).addScaledVector(fr.f, sd[0]).addScaledVector(fr.u, sd[1]).addScaledVector(fr.s, sd[2]); d.quaternion.copy(S.quat); d.scale.set(1.5 + S.speed * .018, 1, 1);
|
| 456 |
+
d.updateMatrix(); fx.lines.setMatrixAt(i, d.matrix);
|
| 457 |
+
}
|
| 458 |
+
fx.lines.instanceMatrix.needsUpdate = true;
|
| 459 |
+
}
|
| 460 |
+
|
| 461 |
+
// the front seat and its screens
|
| 462 |
+
if (S.screenOn) {
|
| 463 |
+
if (!COARSE || (feedFlip++ & 1)) interior.renderFeed(scene);
|
| 464 |
+
if (time - lastHud > .1) {
|
| 465 |
+
lastHud = time;
|
| 466 |
+
const hud = { time, speed: S.speed, alt: S.alt, vs: S.vs, mode: S.mode, zones: S.zones, gear: S.gear, rpm: S.rpm };
|
| 467 |
+
interior.drawHud(hud); interior.drawCluster(hud);
|
| 468 |
+
}
|
| 469 |
+
}
|
| 470 |
+
interior.wheel.rotation.x = 0;
|
| 471 |
+
|
| 472 |
+
// camera
|
| 473 |
+
const c = S.cam, shake = REDUCED ? 0 : (Math.max(0, S.g - 2) * .004 + S.thrust.power * .01 + (S.shake || 0) * .25 + (S.nitro || 0) * .02) * (S.inside ? .25 : 1);
|
| 474 |
+
camera.position.copy(c.pos).add(new THREE.Vector3(Math.sin(time * 53) * shake, Math.sin(time * 61 + 1) * shake, Math.sin(time * 47 + 2) * shake));
|
| 475 |
+
camera.up.copy(c.up || new THREE.Vector3(0, 1, 0)); camera.lookAt(c.look);
|
| 476 |
+
camera.fov = fovFor(c.fov); camera.near = S.inside || S.screenOn ? .02 : .05; camera.updateProjectionMatrix();
|
| 477 |
+
camLight.position.copy(camera.position).add(new THREE.Vector3(0, 3, 0)); camLight.target.position.copy(S.pos);
|
| 478 |
+
scene.fog.far = lerp(950, 2600, smooth(20, 160, S.alt)) * W.weatherFog; scene.fog.near = lerp(120, 400, smooth(20, 160, S.alt)) * W.weatherFog;
|
| 479 |
+
camera.far = scene.fog.far * 1.1 + 150; camera.updateProjectionMatrix(); // nothing past the fog gets drawn
|
| 480 |
+
// refresh the car's reflections every few frames (the car hides from its own camera)
|
| 481 |
+
// (no shadows, no crowds, a short view: it only has to look right in the paint)
|
| 482 |
+
|
| 483 |
+
|
| 484 |
+
// the car's own sound
|
| 485 |
+
if (S.gear > prevGear && !S.air && S.speed > 20) sound.pop();
|
| 486 |
+
prevGear = S.gear;
|
| 487 |
+
sound.car({ rpm: S.rpm, load: S.load, engine: mode === "build" || mode === "home" ? .4 : S.engine, thrust: S.thrust.power, speed: S.speed, inside: S.inside });
|
| 488 |
+
|
| 489 |
+
composer.render();
|
| 490 |
+
}
|
| 491 |
+
|
| 492 |
+
setLoad(95);
|
| 493 |
+
renderer.compile(scene, camera);
|
| 494 |
+
let raf;
|
| 495 |
+
let frameErr = 0;
|
| 496 |
+
const loop = () => { raf = requestAnimationFrame(loop); try { frameLoop(); } catch (e) { if (frameErr++ < 3) console.error(e); } }; // one bad frame never stops the game
|
| 497 |
+
loop();
|
| 498 |
+
setLoad(100);
|
| 499 |
+
setTimeout(() => { $("loader").classList.add("done"); setTimeout(() => { intro.t = 0; if (sound.on) sound.rev(); }, 450); }, 900);
|
| 500 |
+
document.addEventListener("visibilitychange", () => {
|
| 501 |
+
if (document.hidden) { cancelAnimationFrame(raf); if (mode === "watch" && w.playing) pause(); if (sound.ctx) sound.ctx.suspend(); }
|
| 502 |
+
else { clock.getDelta(); loop(); if (sound.on && sound.ctx) sound.ctx.resume(); }
|
| 503 |
+
});
|
| 504 |
+
window.VOID = { step: (n = 1, dt = 1 / 30) => { for (let i = 0; i < n; i++) frameLoop(dt); }, W, car, life, carCube, carEnv, get police() { return police; }, get races() { return races; }, get nav() { return nav; }, net, orbit, go, seek: t => { w.t = t; if (w.playing) playFrom(t); }, pause, get w() { return w; }, game }; // handy for testing in the console
|
static/style.css
CHANGED
|
@@ -392,3 +392,5 @@ body[data-mode="play"] .hub-chip { display: none !important; }
|
|
| 392 |
/* the menu takes its own scrolling (it sits inside the click-through play layer) */
|
| 393 |
.g-menu { pointer-events: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
|
| 394 |
.g-panel { overscroll-behavior: contain; }
|
|
|
|
|
|
|
|
|
| 392 |
/* the menu takes its own scrolling (it sits inside the click-through play layer) */
|
| 393 |
.g-menu { pointer-events: auto !important; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
|
| 394 |
.g-panel { overscroll-behavior: contain; }
|
| 395 |
+
|
| 396 |
+
.gpu { margin: 4px 0 8px; } .gpu .warn { color: #ffb347; }
|