// VOID: one WebGL canvas, three modes on top of a showroom home screen.
// Watch: a 48 s film whose clock is the music. Play: drive it, fly it, land it. Build: paint it.
import * as THREE from "three";
import { mergeGeometries } from "three/addons/utils/BufferGeometryUtils.js";
// every material draws in one pass. three.js draws see-through double-sided ones twice (back faces, then front) and
// rebuilds the material's whole shader setup both times, every frame: two dozen beacons, clouds and glass made 70 KB of garbage a frame
Object.defineProperty(THREE.Material.prototype, "forceSinglePass", { get: () => true, set() {} });
const V = new URL(import.meta.url).search;
const $ = id => document.getElementById(id);
const LT = window.__loadTimes = [], lt = k => LT.push([k, Math.round(performance.now())]); // where the loading time goes (window.__loadTimes)
const setLoad = p => { $("ldbar").style.width = p + "%"; $("ldpct").textContent = Math.round(p); lt(p); };
setLoad(15);
const [{ createWorld, clamp, lerp, smooth, frame, PAD_R, ZONES }, { buildCar, MODELS }, { addInterior, HEAD }, { Sound, BAR }, { createWatch, TOTAL, CHAPTERS }, { createGame }, { createLife, personGeo }] = await Promise.all(
["world", "car", "interior", "sound", "watch", "game", "npc"].map(n => import(`./${n}.js${V}`)));
const [{ createPolice }, { createRaces }, { createNet, EMOTES }, { createNav }, { createVehicles }, { createAtmos, WEATHERS }, { createGoals, GOALS }, { createExtras }, { createContracts }, { createDealer }] = await Promise.all(["police", "race", "net", "nav", "vehicles", "atmos", "goals", "extras", "contracts", "dealer"].map(n => import(`./${n}.js${V}`)));
setLoad(40);
const COARSE = matchMedia("(pointer: coarse)").matches, REDUCED = matchMedia("(prefers-reduced-motion: reduce)").matches;
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 { } } };
// a quick look at the machine before anything is built: built-in graphics or a small CPU (an i3 has 4 threads) gets the light build:
// fewer cars, people and trees, a shorter view, no shadows or glow. Anyone can switch it in Settings (Graphics: Lite).
const PROBE_GPU = (() => { try { const c = document.createElement("canvas").getContext("webgl2") || document.createElement("canvas").getContext("webgl"), e = c && c.getExtension("WEBGL_debug_renderer_info"); return e ? c.getParameter(e.UNMASKED_RENDERER_WEBGL) : ""; } catch { return ""; } })();
const SAVED_Q = (store.get("void.settings") || {}).q;
const WEAK_GPU = /Intel|UHD|Iris|HD Graphics|Radeon\(TM\) Graphics|Vega \d|SwiftShader|llvmpipe|Basic Render|Mali|Adreno|PowerVR/i.test(PROBE_GPU) && !/RTX|GTX|Radeon RX|Arc A/i.test(PROBE_GPU);
const LITE = SAVED_Q === "lite" || (SAVED_Q == null && (WEAK_GPU || (navigator.hardwareConcurrency || 8) <= 4 || (navigator.deviceMemory || 8) <= 4));
const W = await createWorld($("gl"), COARSE || LITE), { renderer, scene, camera, composer, bloom, camLight, fx } = W;
setLoad(55);
// the car you drive: a fixed root the game and the film move around, with the chosen model swapped inside it
const carRoot = new THREE.Group(); scene.add(carRoot);
const car = { group: carRoot, wheels: [] };
const carMats = new Set();
let inner = null, glowL = null;
function useModel(id, force) {
if (inner && inner.model === id && !force) return;
if (inner) carRoot.remove(inner.group);
inner = buildCar(id); carRoot.add(inner.group);
if (glowL) scene.remove(glowL); glowL = inner.glowLight || null; if (glowL) scene.add(glowL); // the thruster glow lives in the scene too
for (const k of Object.keys(inner)) if (typeof inner[k] === "function") car[k] = inner[k];
Object.assign(car, { wheels: inner.wheels, clip: car.clip || inner.clip, materials: inner.materials, model: id, name: inner.name });
carMats.clear();
inner.group.traverse(o => { if (o.isMesh) { o.castShadow = true; if (o.material && o.material.isMeshStandardMaterial) carMats.add(o.material); } });
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
}
// live reflections on the paint: a small cube camera that rides with the car
const carEnv = new THREE.WebGLCubeRenderTarget(COARSE ? 64 : 128, { type: THREE.HalfFloatType, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter });
const carCube = new THREE.CubeCamera(.5, 320, carEnv);
for (const c of carCube.children) c.layers.set(0);
camera.layers.enable(1); // layer 1: the crowds, seen by the main camera only
let cubeN = 0;
useModel((store.get("void.build3") || {}).model != null ? Object.keys(MODELS)[(store.get("void.build3") || {}).model] || "hydra" : "hydra");
setLoad(80);
const interior = addInterior(car, renderer);
const sound = new Sound();
const watch = createWatch(W, car, interior);
const DENSITY = { few: .55, normal: 1, busy: 1.3 }[(store.get("void.settings") || {}).crowd || (LITE ? "few" : "normal")] || 1;
const life = createLife(scene, W.roads, W.walkways, COARSE || LITE, DENSITY); lt("life");
const TIMES = ["night", "sunset", "day"];
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; }
let police, races, nav;
const net = createNet(); lt("net");
setInterval(() => { if (document.hidden) net.tick(.5, null); }, 500); // a hosting tab in the background still relays everyone
// settings: graphics quality, look speed, auto gas, touch steering (kept on this device)
// a strong graphics card starts on High; everything else starts on Medium (it can be raised in the Menu)
const GPU = (() => { try { const c = renderer.getContext(), e = c.getExtension("WEBGL_debug_renderer_info"); return e ? c.getParameter(e.UNMASKED_RENDERER_WEBGL) : ""; } catch { return ""; } })();
const STRONG = /RTX|GTX 1[06-9]|GTX 9[78]|Radeon RX|Radeon Pro|Apple M[1-9]/i.test(GPU) && !COARSE;
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
const SET = Object.assign({ q: LITE ? "lite" : TOP ? "ultra" : STRONG ? "high" : COARSE ? "low" : "medium", sens: 1, autogas: "off", steer: "stick", weather: "clear", radio: "score", cycle: "off", handling: "arcade", motion: "on", text: "normal", board: "ion", crowd: LITE ? "few" : "normal", fps: "off" }, store.get("void.settings") || {});
const gameOpts = {
handling: () => SET.handling, buyFood: () => { if (cash < 10) return false; cash -= 10; store.set("void.cash", cash); earn(0); return true; }, heroOwned: () => !!store.get("void.hero"), starter: () => { const m = life.models.find(m => m.id === "compact-3") || life.models.find(m => m.kind.id === "compact"); return { model: { ...m, top: 31, acc: .7, grip: .9 }, color: 0x6b5a44, rust: .75, owned: true }; }, onSteal: c => { police && police.event("steal"); goals.stats.steals = (goals.stats.steals || 0) + 1; },
garage: () => openGarage(true), cycleTime, hornType: () => build.horn, autoGas: () => SET.autogas === "on", onRepair: () => car.repair && car.repair(),
onScore: (n, why, pts) => { if (why === "Drift") goals.drift(n); if (/^(π₯|π₯|π₯)/.test(why)) goals.stats.meds = (goals.stats.meds || 0) + 1; { const gm = /^Grind (\d+) m/.exec(why); if (gm) goals.stats.grind = (goals.stats.grind || 0) + +gm[1]; const sp = /^(\d+)( |$)/.exec(why); if (sp && +sp[1] >= 720) goals.stats.b720 = 1; if (/Kickflip|Heelflip/.test(why) && / \+ /.test(why)) goals.stats.combo = (goals.stats.combo || 0) + 1; } goals.note(why); earn(pts ?? n); },
onSmash: kind => police && police.event("smash", kind), policeClear: () => police && police.clear(),
autopilot: (g, dt, over) => nav ? nav.controls(g, dt, over) : null, openGps: () => document.getElementById("gGpsBtn").click(),
mapExtra(mx, g, MM) {
const P = (x, z) => [(x - g.x) / MM, (z - g.z) / MM];
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(); }
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(); }
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(); }
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(); }
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(); } }
},
};
const game = createGame(W, car, sound, life, gameOpts); lt("game");
const vehicles = createVehicles(scene, game.api, W); gameOpts.vehicles = vehicles; lt("vehicles");
const atmos = createAtmos(W, sound, COARSE); lt("atmos");
// trophies: a banner slides in at the top when a challenge is done
const goals = createGoals(gl => { const t = document.getElementById("gTrophy"); t.innerHTML = `${gl.icon}Challenge complete${gl.name}+1000
`; t.classList.remove("on"); void t.offsetWidth; t.classList.add("on"); if (game.state) { game.state.score += 1000; } sound.win(); renderGoals(); });
function renderGoals() {
const S = goals.stats;
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 `${g.icon}${g.name}${g.text}
${ok ? "π" : `
${Math.floor(v * 100)}%`}
`; }).join("");
document.getElementById("gStatsRow").innerHTML = `${(S.best || 0).toLocaleString()}Best score
${Math.round(S.top)}Top km/h
${S.km.toFixed(1)}km travelled
${goals.done.size}/${GOALS.length}Trophies
$${cash.toLocaleString()}Cash Β· spend in Garage
`;
}
const WX_ICON = { clear: "βοΈ Clear", rain: "π§ Rain", storm: "β Storm", fog: "π« Fog", snow: "βοΈ Snow" }, RADIO = { score: "π΅ VOID Score", voidfm: "π» VOID FM", off: "π Radio off" };
function chips() { document.getElementById("gChips").innerHTML = `${{ night: "π", sunset: "π", day: "βοΈ" }[W.timeOfDay]} ${W.timeOfDay}${WX_ICON[atmos.weather]}`; document.getElementById("gWeather").innerHTML = `${WX_ICON[SET.weather].split(" ")[0]}${WX_ICON[SET.weather].split(" ").slice(1).join(" ")}`; document.getElementById("gRadio").innerHTML = `${RADIO[SET.radio].split(" ")[0]}${RADIO[SET.radio].split(" ").slice(1).join(" ")}`; }
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]); };
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]); };
// ---------- the menu (β° or Esc): everything that isn't driving lives here ----------
const menuEl = document.getElementById("gMenu");
function menu(open) {
if (open == null) open = menuEl.hidden;
menuEl.hidden = !open; document.body.classList.toggle("g-menu-open", open); if (open) { renderGoals(); chips(); }
if (open) { renderContracts(); races.renderList(); renderDaily(); }
if (open && document.pointerLockElement) document.exitPointerLock();
if (!net.online()) game.pause(open);
}
document.getElementById("gMenuBtn").onclick = () => menu(true);
document.getElementById("gMenuClose").onclick = () => menu(false);
document.getElementById("gExit").onclick = () => { menu(false); go("home"); };
menuEl.addEventListener("click", e => { const t = e.target.closest(".tile"); if ((t && !t.closest(".set")) || e.target.closest("[data-rgo]")) setTimeout(() => menu(false), 60); if (e.target === menuEl) menu(false); });
menuEl.querySelectorAll("[data-veh]").forEach(b => b.onclick = () => game.api.setVehicle(b.dataset.veh));
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 }); };
function applySettings(save = true) {
document.body.classList.toggle("show-fps", SET.fps === "on");
if (typeof boardMesh !== "undefined") paintBoard();
if (typeof life !== "undefined" && life.setVoidDetail) life.setVoidDetail(SET.q !== "lite"); // Lite: simple flying VOID cars
document.body.classList.toggle("big-ui", SET.text === "large");
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);
const weak = /Intel|UHD|Iris|Radeon\(TM\) Graphics|Vega|SwiftShader|llvmpipe|Basic Render/i.test(GPU);
const masked = !/ANGLE|NVIDIA|Intel|AMD|Radeon|Apple|Mali|Adreno/i.test(GPU); // Brave and some others hide the chip name for privacy
const name = (GPU || "unknown").replace(/^ANGLE \([^,]+, /, "").replace(/ \(0x[0-9A-Fa-f]+\).*$/, "").replace(/ Direct3D.*$/, "").replace(/, D3D.*$/, "");
document.getElementById("gGpu").innerHTML = `${masked ? "Your browser hides which graphics chip it uses" : `Running on: ${name}`} Β· ${fpsNow ? fpsNow + " fps" : "measuringβ¦"}${weak ? '
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.' : masked ? '
Smooth is 60 fps or more. Under 40, check the browser is set to your RTX in Windows graphics settings.' : ""}`;
document.getElementById("gSens").value = SET.sens; game.api.sens = +SET.sens;
document.body.classList.toggle("steer-buttons", SET.steer === "buttons");
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();
if (save) store.set("void.settings", SET);
}
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 === "crowd") toast("Traffic & crowds change after a reload (F5)"); if (seg.dataset.set === "q") { perf.pr = W.QUALITY[b.dataset.v].pr; perf.down = 0; } applySettings();
atmos.setWeather(SET.weather);
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); } }));
document.getElementById("gSens").addEventListener("input", e => { SET.sens = +e.target.value; applySettings(); });
// the touch joystick: drag the knob; left/right steers, up/down pitches when flying
{
const st = document.getElementById("gStick"), knob = st.querySelector("i"); let id = null, cx = 0, cy = 0;
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); };
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(); });
st.addEventListener("pointermove", e => { if (e.pointerId === id) set(e.clientX - cx, e.clientY - cy); });
const end = e => { if (e.pointerId !== id) return; id = null; knob.style.transform = ""; game.api.setStick(0, 0); };
st.addEventListener("pointerup", end); st.addEventListener("pointercancel", end);
}
// headlights that light the road at night
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); scene.add(heads, heads.target); // in the scene (it follows the car each frame), so it never disappears with the car
police = createPolice(scene, game.api, sound, life); lt("police");
races = createRaces(scene, game.api, sound, W.canvasTex, net); lt("races");
nav = createNav(scene, game.api, W, ZONES, races.starts, () => clock.elapsedTime); lt("nav");
// every light now exists (they are part of each shader), so build all the shaders on the graphics driver's own threads
// while the rest loads; the first city render would otherwise compile them one at a time (about 3 s)
function precompile() {
const rt0 = renderer.getRenderTarget(); renderer.setRenderTarget(composer.renderTarget1); // the game always draws into the composer's target
let p = null; try { p = renderer.compileAsync(scene, camera); } catch (e) { console.warn("precompile", e); }
renderer.setRenderTarget(rt0); return Promise.race([p || Promise.resolve(), new Promise(r => setTimeout(r, 8000))]);
}
const shadersReady = precompile();
const extras = createExtras(W, game.api, nav, sound); lt("extras");
document.getElementById("gTaxi").onclick = () => extras.toggle();
// people knocked over: a thud, a shake, and the police notice; they bounce off walls instead of flying through them
life.onHit = sp => { sound.thud && sound.thud(Math.min(1, sp / 22)); if (game.state) game.state.shake = Math.min(1, (game.state.shake || 0) + .25); police && police.event("ped"); };
life.collide = (x, z) => !!game.api.hitBox(x, z, .8, .3);
// crashes between other cars: you hear them, and close ones shake the camera
life.onCrash = (x, z, power) => { const s = game.state; if (!s || mode !== "play") return; const d = Math.hypot(x - s.x, z - s.z); if (d < 170) { sound.crash(); if (d < 70) s.shake = Math.min(1, (s.shake || 0) + .35 * (1 - d / 70)); } };
// VOID Motors: 50 cars for sale
const dealer = createDealer(W, game, life, nav, sound, store, toast, { cash: () => cash, spend: n => { if (cash < n) return false; cash -= n; store.set("void.cash", cash); earn(0); return true; }, heroOwned: () => !!store.get("void.hero"), unlockHero: () => unlockHero() });
document.getElementById("gDealer").onclick = () => dealer.menu();
// the secret code box: one word unlocks the best car, nothing else does anything
function unlockHero() { store.set("void.hero", 1); game.api.useHero(); }
document.getElementById("gCodeGo").onclick = () => {
const el = document.getElementById("gCode"), code = el.value.trim().toLowerCase(); el.value = "";
if (code === "aws") { if (store.get("void.hero")) toast("You already have the VOID car"); else { unlockHero(); sound.win(); toast("π Secret unlocked: the VOID car is yours. 330 km/h, and it flies"); } menu(false); }
else toast(code ? "Nothing happensβ¦" : "Type a code first");
};
document.getElementById("gCode").addEventListener("keydown", e => { e.stopPropagation(); if (e.key === "Enter") document.getElementById("gCodeGo").click(); });
document.getElementById("gFootBtn").onclick = () => game.api.foot();
// you on foot: the same build as the people in the street, legs that swing as you walk or run
const walker = (() => {
const pg = personGeo(), g = new THREE.Group();
const shirt = new THREE.MeshStandardMaterial({ vertexColors: true, color: 0x22252d, roughness: .8 }), pants = new THREE.MeshStandardMaterial({ vertexColors: true, color: 0x2b3a55, roughness: .85 });
g.add(new THREE.Mesh(pg.body, shirt), new THREE.Mesh(pg.head, new THREE.MeshStandardMaterial({ color: 0xc68a5e, roughness: .7 })), new THREE.Mesh(pg.hair, new THREE.MeshStandardMaterial({ color: 0x18120e, roughness: .9 })));
const stripe = new THREE.Mesh(new THREE.BoxGeometry(.46, .06, .28), new THREE.MeshBasicMaterial({ color: new THREE.Color(0xffd23d).multiplyScalar(1.4), toneMapped: false })); stripe.position.y = 1.32; g.add(stripe);
const legs = [1, -1].map(s => { const p = new THREE.Group(); p.position.set(0, .88, s * .1); p.add(new THREE.Mesh(pg.leg, pants)); g.add(p); return p; });
const arms = [1, -1].map(s => { const p = new THREE.Group(); p.position.set(0, 1.45, s * .245); p.add(new THREE.Mesh(pg.arm, shirt)); g.add(p); return p; });
g.traverse(o => { if (o.isMesh) o.castShadow = true; }); g.visible = false; scene.add(g);
return { g, legs, arms };
})();
// the hoverboard
const boardMesh = (() => {
const g = new THREE.Group(), glow = new THREE.MeshBasicMaterial({ color: new THREE.Color(.3, 2.2, 2.6), toneMapped: false });
const deck = new THREE.Mesh(new THREE.BoxGeometry(1.3, .07, .4), new THREE.MeshStandardMaterial({ color: 0x15161a, roughness: .35, metalness: .6 })); deck.position.y = .05; deck.castShadow = true; g.add(deck);
for (const x of [-.62, .62]) { const tip = new THREE.Mesh(new THREE.CylinderGeometry(.2, .2, .07, 16, 1, false, 0, Math.PI), deck.material); tip.position.set(x, .05, 0); tip.rotation.y = x > 0 ? Math.PI / 2 : -Math.PI / 2; g.add(tip); }
const under = new THREE.Mesh(new THREE.PlaneGeometry(1.2, .3).rotateX(Math.PI / 2), glow); under.position.y = .005; g.add(under);
for (const x of [-.4, .4]) { const pod = new THREE.Mesh(new THREE.CylinderGeometry(.11, .09, .1, 12), new THREE.MeshStandardMaterial({ color: 0x2a2c32, metalness: .7, roughness: .3 })); pod.position.set(x, -.03, 0); g.add(pod); const ring = new THREE.Mesh(new THREE.TorusGeometry(.1, .02, 6, 16).rotateX(Math.PI / 2), glow); ring.position.set(x, -.08, 0); g.add(ring); }
const strip = new THREE.Mesh(new THREE.BoxGeometry(1.32, .015, .02), glow); strip.position.set(0, .085, .19); g.add(strip); const strip2 = strip.clone(); strip2.position.z = -.19; g.add(strip2);
g.visible = false; scene.add(g); g.userData = { glow, deck: deck.material }; return g;
})();
const BOARDS = { ion: [[.3, 2.2, 2.6], 0x15161a], blaze: [[2.6, .9, .2], 0x1a1210], toxic: [[.8, 2.6, .3], 0x111a12], violet: [[1.6, .6, 2.6], 0x15121c], gold: [[2.6, 1.9, .5], 0x2a2418], ghost: [[2.4, 2.4, 2.4], 0xe8e8ea] };
function paintBoard() { const b = BOARDS[SET.board] || BOARDS.ion; boardMesh.userData.glow.color.setRGB(...b[0]); boardMesh.userData.deck.color.setHex(b[1]); }
const qSide = new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), Math.PI / 2), boardUp = new THREE.Vector3();
// cars that aren't your VOID car: the one you're driving and the one you left parked, drawn from the traffic shapes
const rideMesh = () => { const g = new THREE.Group(); g.visible = false; scene.add(g); return { g, key: "" }; };
const RIDE = rideMesh(), RPARK = rideMesh();
function dressRide(R, ride) {
const key = ride.model.id + ":" + ride.color + ":" + (ride.rust || 0); if (R.key === key) return; R.key = key;
for (const c of [...R.g.children]) R.g.remove(c);
const geo = life.geoOf(ride.model.kind), rust = ride.rust || 0;
R.g.add(new THREE.Mesh(geo.body, new THREE.MeshStandardMaterial({ vertexColors: true, color: new THREE.Color(ride.color).multiplyScalar(1 - rust * .45), roughness: .3 + rust * .6, metalness: .55 * (1 - rust) })), new THREE.Mesh(geo.lights, new THREE.MeshBasicMaterial({ vertexColors: true, toneMapped: false, color: new THREE.Color(2.2, 2.2, 2.2) })));
R.g.children[0].castShadow = true; R.g.scale.set(ride.model.sl, ride.model.sh, ride.model.sw);
}
// settings that change how it plays and looks
function motionOK() { return !REDUCED && SET.motion !== "off"; }
// ---------- the first two minutes: a short guided start (skippable, once per device) ----------
const TUT = [
[COARSE ? "Hold Gas to drive" : "Hold W to drive", s => s.speed > 40],
[COARSE ? "Steer, then hold Drift in a turn" : "Steer with A and D, hold Space in a turn to drift", (s, g) => g.drift > 25],
[COARSE ? "Tap Nitro for a boost" : "Hold Shift for nitro", (s, g) => g.nitroOn > .5],
[COARSE ? "Tap Fly to take off" : "Press F to fly", (s, g) => g.mode === "air"],
[COARSE ? "Tap Land to come down" : "Press L to land", (s, g, T) => g.mode === "drive" && T.flew],
[COARSE ? "Stop, then tap πΆ to get out" : "Stop, then press E to get out and walk", (s, g) => g.veh === "foot"],
[COARSE ? "Walk to any car and tap πΆ to drive it" : "Walk up to any car and press E to drive it", (s, g) => g.veh === "car"],
[COARSE ? "Open the Menu (β°): contracts, races, VOID Motors" : "Press Esc for the Menu: contracts, races, VOID Motors", () => !menuEl.hidden],
];
const tut = { on: !store.get("void.tut"), k: 0, flew: false };
function tutUpdate() {
const el = document.getElementById("gTut"), g = game.state;
if (!tut.on || !g || !g.started) { el.hidden = true; return; }
if (g.mode === "air") tut.flew = true;
if (TUT[tut.k][1](lastS || {}, g, tut)) { tut.k++; sound.pop(); if (tut.k >= TUT.length) { tut.on = false; store.set("void.tut", 1); cash += 1000; earn(0); toast("Tutorial done: +$1,000. Have fun!"); el.hidden = true; return; } }
el.hidden = false; el.innerHTML = `${tut.k + 1}/${TUT.length} ${TUT[tut.k][0]} `;
document.getElementById("gTutSkip").onclick = () => { tut.on = false; store.set("void.tut", 1); el.hidden = true; };
}
let lastS = null;
// ---------- daily challenges: three a day, the same for everyone on that date, $2,500 each ----------
const DAILY = [["smashed", 15, "π₯ Smash 15 cars"], ["km", 10, "π£οΈ Travel 10 km"], ["air", 180, "βοΈ Fly for 3 minutes"], ["fares", 3, "π Complete 3 taxi fares"], ["coins", 2, "πͺ Find 2 hidden coins"], ["escapes", 1, "π Escape the police"],
["wins", 1, "π Win a race"], ["rings", 5, "π Fly through 5 rings"], ["pads", 2, "π¬ Land on 2 helipads"], ["steals", 3, "π Take 3 cars from the traffic"], ["meds", 1, "π
Earn a contract medal"], ["refuels", 1, "β½ Fill up at a station"]];
const daily = (() => {
const day = new Date().toISOString().slice(0, 10); let d = store.get("void.daily");
if (!d || d.day !== day) { let h = 0; for (const ch of day) h = (h * 31 + ch.charCodeAt(0)) >>> 0; const picks = []; while (picks.length < 3) { h = (h * 1103515245 + 12345) >>> 0; const k = h % DAILY.length; if (!picks.includes(k)) picks.push(k); } d = { day, picks, base: {}, done: [] }; for (const k of picks) d.base[DAILY[k][0]] = goals.stats[DAILY[k][0]] || 0; store.set("void.daily", d); }
return d;
})();
function dailyProg(k) { const [stat, need] = DAILY[k]; return Math.min(1, ((goals.stats[stat] || 0) - (daily.base[stat] || 0)) / need); }
function dailyCheck() { for (const k of daily.picks) if (!daily.done.includes(k) && dailyProg(k) >= 1) { daily.done.push(k); store.set("void.daily", daily); cash += 2500; earn(0); toast(`Daily challenge done: ${DAILY[k][2]} Β· +$2,500`); sound.win(); } }
function renderDaily() { document.getElementById("gDaily").innerHTML = daily.picks.map(k => { const v = dailyProg(k), ok = daily.done.includes(k); return `${DAILY[k][2].split(" ")[0]}${DAILY[k][2].split(" ").slice(1).join(" ")}$2,500
${ok ? "β
" : `
${Math.floor(v * 100)}%`}
`; }).join(""); }
// contracts: hybrid drive + fly jobs and pursuits with medals
const contracts = createContracts(W, game.api, nav, sound, police); lt("contracts");
function renderContracts() { document.getElementById("gContracts").innerHTML = contracts.CONTRACTS.map(c => ``).join("") + (contracts.active ? `` : ""); }
document.getElementById("gContracts").addEventListener("click", e => { const b = e.target.closest("[data-con]"); if (b) { if (extras.job.on) extras.toggle(false); contracts.start(b.dataset.con); } else if (e.target.closest("#gConStop")) contracts.cancel(); });
// backups: every void.* key in one code, so progress survives a new browser or device
document.getElementById("gSaveOut").onclick = async () => {
const o = {}; try { for (let k = 0; k < localStorage.length; k++) { const key = localStorage.key(k); if (key.startsWith("void.") && !key.startsWith("void.ghost.")) o[key] = localStorage.getItem(key); } } catch { }
const code = "VOID1:" + btoa(unescape(encodeURIComponent(JSON.stringify(o))));
try { await navigator.clipboard.writeText(code); toast("Backup code copied. Keep it somewhere safe"); } catch { prompt("Copy your backup code", code); }
};
document.getElementById("gSaveIn").onclick = () => {
const code = (prompt("Paste your VOID backup code") || "").trim(); if (!code) return;
try {
if (!code.startsWith("VOID1:")) throw 0; const o = JSON.parse(decodeURIComponent(escape(atob(code.slice(6)))));
const keys = Object.keys(o).filter(k => /^void\.[\w.-]{1,40}$/.test(k) && typeof o[k] === "string" && o[k].length < 200000);
if (!keys.length) throw 0; for (const k of keys) { JSON.parse(o[k]); localStorage.setItem(k, o[k]); }
toast(`Restored ${keys.length} saved items. Reloadingβ¦`); setTimeout(() => location.reload(), 900);
} catch { toast("That code didn't work. Copy the whole code, starting with VOID1:"); }
};
// ---------- online: other real players' cars, name tags, emotes, proximity voice ----------
const remotes = new Map();
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); });
function remoteFor(p) {
let r = remotes.get(p.id);
const model = Object.keys(MODELS)[p.model | 0] || "hydra";
if (r && r.model !== model) { scene.remove(r.root); remotes.delete(p.id); r = null; }
if (!r) {
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);
c.group.traverse(o => { if (o.isMesh) o.castShadow = true; });
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);
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);
scene.add(root); r = { root, car: c, tag, emo, model, name: p.name, paint: null, emoT: 0 }; remotes.set(p.id, r);
}
if (r.name !== p.name) { r.name = p.name; r.tag.material.map = tagTex(p.name); }
if (p.paint && r.paint !== p.paint) { r.paint = p.paint; r.car.setPaint(p.paint); }
return r;
}
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(); });
net.on("status", t => { document.getElementById("gNetStatus").textContent = t; document.getElementById("gNetBtn").classList.toggle("on", net.online()); });
net.on("mic", on => { const b = document.getElementById("gMic"); b.classList.toggle("on", on); b.textContent = on ? "π Mic on" : "π Voice chat"; });
net.on("emote", (m, from) => { const r = remotes.get(from), e = EMOTES[m.e | 0]; if (!e) return; if (r) { r.emo.material.map = tagTex(e, "#ffd23d"); r.emo.visible = true; r.emoT = 4; } feed(`${net.nameOf(from)}: ${e}`); });
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(); }
function renderPlayers() { document.getElementById("gPlayers").innerHTML = net.online() ? [`${net.name} (you)`, ...net.players().map(p => `${p.vc ? "π " : ""}${p.name}`)].join("") : ""; }
{
const $ = id => document.getElementById(id), panel = $("gNetPanel");
$("gNetName").value = store.get("void.name") || "";
$("gNetBtn").onclick = () => { panel.hidden = !panel.hidden; };
$("gNetClose").onclick = () => panel.hidden = true;
const go = room => { const nm = $("gNetName").value; store.set("void.name", nm); net.join(room, nm); panel.hidden = true; };
$("gNetPublic").onclick = () => go("public-1");
$("gNetCreate").onclick = () => { const code = Math.random().toString(36).slice(2, 7); $("gNetCode").value = code; go("room-" + code); toast(`Room code: ${code}. Tell your friends!`); };
$("gNetJoin").onclick = () => { const code = $("gNetCode").value.trim().toLowerCase(); if (code) go("room-" + code); };
$("gNetLeave").onclick = () => { net.leave(); panel.hidden = true; };
$("gMic").onclick = () => net.setMic(!net.mic);
$("gEmotes").innerHTML = EMOTES.map((e, k) => ``).join("");
$("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]}`); };
}
await shadersReady; lt("shaders");
W.setTime(store.get("void.time") || "night"); lt("setTime");
// fill the car's reflection cube once before the first frame, so the paint never samples an empty one
$("osmCredit").textContent = W.credit;
// the garage: the Build panel over the game, the game paused underneath
function openGarage(on) { if (on) renderUpg(); document.body.classList.toggle("garage", on); game.pause(on); if (on && car.repair) { car.repair(); applyBuild(); if (game.state) game.state.hp = 100; } }
$("gGarageClose").onclick = () => openGarage(false);
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));
// ---------- configurator ----------
const OPTS = {
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"]] },
finish: { label: "Finish", seg: true, items: [["Gloss", "gloss"], ["Satin", "satin"], ["Matte", "matte"]] },
rim: { label: "Wheels", items: [["Black", "#121215"], ["Gunmetal", "#3a3d44"], ["Silver", "#b8bcc4"], ["Bronze", "#7a5a32"], ["Gold", "#c9a227"], ["Red", "#b0141f"], ["White", "#e8e8ea"], ["Ion", "#2ad8e8"]] },
cal: { label: "Calipers", items: [["Red", "#c1121f"], ["Black", "#2a2a30"], ["Yellow", "#e0b000"], ["White", "#e8e8e8"], ["Ion", "#3df5ff"]] },
trim: { label: "Accents", items: [["Red", "#c1121f"], ["Black", "#16161a"], ["White", "#e8e8e8"], ["Gold", "#b8912e"], ["Ion", "#3df5ff"]] },
light: { label: "Lights", items: [["Ice", "#e8fbff"], ["Amber", "#ffb347"], ["Ion", "#6ad8ff"], ["Violet", "#b38cff"]] },
glow: { label: "Underglow", items: [["Off", ""], ["White", "#ffffff"], ["Red", "#ff2233"], ["Ion", "#3df5ff"], ["Violet", "#9b5cff"]] },
spoiler: { label: "Spoiler", seg: true, items: [["Stock", "none"], ["Ducktail", "ducktail"], ["GT wing", "gt"], ["Swan neck", "swan"], ["Rally", "rally"]] },
livery: { label: "Livery", seg: true, items: [["Clean", "none"], ["Twin stripes", "stripes"], ["Centre stripe", "center"], ["Side stripe", "side"], ["Race #42", "race"]] },
livc: { label: "Livery colour", items: [["White", "#f2f2f2"], ["Red", "#c1121f"], ["Black", "#101012"], ["Gold", "#c9a227"], ["Ion", "#3df5ff"], ["Orange", "#ff6a00"]] },
tint: { label: "Windows", seg: true, items: [["Light", "light"], ["Dark", "dark"], ["Limo", "limo"], ["Mirror", "mirror"]] },
flame: { label: "Nitro flames", items: [["Blue", "#4fa8ff"], ["Orange", "#ff7a1a"], ["Green", "#3dff6a"], ["Purple", "#b05cff"], ["Pink", "#ff4fd8"]] },
horn: { label: "Horn", seg: true, items: [["Classic", 0], ["Air horn", 1], ["Tune", 2]] },
};
OPTS.model = { label: "Car", seg: true, items: Object.entries(MODELS).map(([k, m]) => [m.name, k]) };
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 };
let build = { ...DEFAULT, ...(store.get("void.build2") || {}), ...(store.get("void.build3") || {}) };
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 { }
function applyBuild() {
useModel(OPTS.model.items[build.model][1]);
car.setSpoiler(OPTS.spoiler.items[build.spoiler][1]); car.setLivery(OPTS.livery.items[build.livery][1], OPTS.livc.items[build.livc][1]);
car.setTint(OPTS.tint.items[build.tint][1]); car.setFlameColor(OPTS.flame.items[build.flame][1]);
car.setPaint(OPTS.paint.items[build.paint][1]); car.setFinish(OPTS.finish.items[build.finish][1]);
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]);
const gl = OPTS.glow.items[build.glow][1]; if (gl) fx.glow.material.color.set(gl).multiplyScalar(1.4);
store.set("void.build3", build);
$("sum").innerHTML = `${car.name.toUpperCase()} · ${OPTS.paint.items[build.paint][0]}${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" : ""}`;
for (const b of document.querySelectorAll("#cfgBody button")) b.setAttribute("aria-pressed", String(build[b.dataset.k] === +b.dataset.i));
for (const k in OPTS) { const n = document.querySelector(`[data-name="${k}"]`); if (n) n.textContent = OPTS[k].items[build[k]][0]; }
}
const ORDER = ["model", "paint", "finish", "livery", "livc", "spoiler", "rim", "cal", "trim", "tint", "light", "glow", "flame", "horn"];
$("cfgBody").innerHTML = `` + ORDER.map(k => [k, OPTS[k]]).map(([k, o]) => `${o.label}
${o.items.map(([n, c], i) => o.seg
? ``
: ``).join("")}
Performance$${cash.toLocaleString()}
${Object.entries(UPG).map(([k, [ic, name, txt]]) => { const lv = upg[k], p = PRICE[lv]; return `
${ic}${name}${txt}${[0, 1, 2].map(i => ``).join("")}
${p ? `
` : "
MAX"}
`; }).join("")}
Every point you score is also cash. Fully upgraded is about 20% faster and takes 40% less damage.