SKATEMAKER PRO v1 — stand-alone park builder/editor for BOOKQUOY
Data-driven parks: one heightAt(x,z) evaluated from element JSON drives the editor viewport, collision, test ride, and exported game levels. Ships with Paddo ported from bookquoy, a MODELBEAST panel (gen images, cut bg, image->3D, place farm GLBs as props), image decals + reference underlay tracing, a park design linter (docs/DESIGN_PRINCIPLES.md), THPS-style instant test ride, and a level.js codegen that drops straight into bookquoy. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
type-two
commit
db40f433fe
11
.claude/launch.json
Normal file
11
.claude/launch.json
Normal file
@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "skatemakerpro",
|
||||
"runtimeExecutable": "python3",
|
||||
"runtimeArgs": ["serve.py", "8093"],
|
||||
"port": 8093
|
||||
}
|
||||
]
|
||||
}
|
||||
3
.gitignore
vendored
Normal file
3
.gitignore
vendored
Normal file
@ -0,0 +1,3 @@
|
||||
.DS_Store
|
||||
assets/uploads/
|
||||
__pycache__/
|
||||
59
README.md
Normal file
59
README.md
Normal file
@ -0,0 +1,59 @@
|
||||
# SKATEMAKER PRO — stand-alone park builder
|
||||
|
||||
The park editor for **BOOKQUOY** (and whatever comes after it). Born from bookquoy's one
|
||||
rule: **`heightAt(x,z)` is the single source of truth** — the same element data drives the
|
||||
editor viewport, the collision, the test ride, and the exported game level. Shape it in the
|
||||
editor and it *is* the real thing.
|
||||
|
||||
## Run it
|
||||
|
||||
```
|
||||
python3 serve.py # http://localhost:8093
|
||||
```
|
||||
|
||||
`serve.py` is static hosting **plus** the MODELBEAST proxy (token read from
|
||||
`~/Documents/backnforth/.env` server-side — never shipped to the browser) and park/asset
|
||||
persistence (`parks/`, `assets/uploads/`).
|
||||
|
||||
## The editor
|
||||
|
||||
- **BUILD palette** — quarter, bank, funbox, pyramid, ledge, stairs, spine, mogul, bowl,
|
||||
island. Click a piece, click the ground. Drag to move, `[` `]` rotate, `D` dupe,
|
||||
`⌫` delete, `⌘Z` undo, optional 0.5m grid snap (THPS style).
|
||||
- **SPOTS** — rails/ledge-caps (two clicks, draggable end-balls), named score gaps,
|
||||
B·O·O·K·Q·U·O·Y letters, spawn point.
|
||||
- **SURFACE** — paint zones (rect/ellipse, any color), **image decals** (drop any image on
|
||||
the window, or generate one on the farm), and a **reference underlay** for tracing a real
|
||||
park from an aerial photo.
|
||||
- **MODELBEAST panel** — browse farm assets, one-click **PLACE** any GLB as a park prop,
|
||||
use any farm image as a decal, **GEN IMAGE** (flux_local, ~9s), **MAKE 3D**
|
||||
(hunyuan3d_mlx image→GLB). Everything free and local on the m3ultra queue.
|
||||
- **PARK CHECK** — live design linter encoding `docs/DESIGN_PRINCIPLES.md`: pumping
|
||||
geometry, run-out clearance, crossing lines, skill tiering, buried/floating steel.
|
||||
- **▶ TEST RIDE** (`Enter`) — instant Create-A-Park-style build↔skate toggle with
|
||||
bookquoy's physics constants over the live data. W push, A/D steer, Space ollie.
|
||||
|
||||
## Park format
|
||||
|
||||
`parks/*.json` — bounds, spawn, `elements` (parametric primitives evaluated by
|
||||
`js/parkmath.js`), `rails`, `gaps`, `letters`, `zones`, `decals`, `props`, optional
|
||||
`underlay`. `parks/paddo.json` is Paddington Skatepark ported from bookquoy — load it,
|
||||
ride it, remix it.
|
||||
|
||||
## Export → BOOKQUOY
|
||||
|
||||
**⬇ LEVEL.JS** generates `level.<name>.js` exporting bookquoy's exact `level.js` contract
|
||||
(`heightAt, normalAt, BOUNDS, RAILS, GAPS, LETTERS, SPAWN, buildLevel`). To ship a park:
|
||||
|
||||
1. copy `js/parkmath.js` + `js/parkbuild.js` + the generated `level.<name>.js` into
|
||||
`bookquoy/js/`, and any `assets/uploads/` files it references
|
||||
2. point the two imports (`main.js`, `player.js`) at the new level file
|
||||
|
||||
**⬇ JSON** downloads the raw park data; **SAVE/LOAD…** persist to `parks/` on disk.
|
||||
|
||||
## Lineage
|
||||
|
||||
- bookquoy (`../bookquoy`) — the game this feeds; level 01 PADDO
|
||||
- `~/Documents/thwk/THPS_STUDY.md` — Neversoft architecture study (technique only,
|
||||
no extracted assets ever ship)
|
||||
- THPS Create-A-Park — inspiration for the palette/test-loop/themes/premade-parks shape
|
||||
36
docs/DESIGN_PRINCIPLES.md
Normal file
36
docs/DESIGN_PRINCIPLES.md
Normal file
@ -0,0 +1,36 @@
|
||||
# What makes a great skatepark
|
||||
|
||||
The design brief behind PARK CHECK (`js/parkcheck.js`). World units are metres;
|
||||
bookquoy scale maps 1:1 (a 1.8 radius quarter = a 6ft quarter).
|
||||
|
||||
## Flow & line architecture
|
||||
- **Collision-free traffic paths** — no intersecting lines; nothing drops in across
|
||||
another feature's run.
|
||||
- **Adequate flatland & run-outs** — 10–15ft (3–4.5m) of clear flat for setup and landing
|
||||
recovery. Tight squeezes kill speed and create bottleneck bail zones.
|
||||
- **Pumping geometry** — transition radii that feel natural: 6–8ft (1.8–2.4m) for
|
||||
street-flow sections, 9–11ft+ (2.7–3.4m) for deep bowls.
|
||||
|
||||
## Obstacle variety & progression
|
||||
- **Skill tiering** — 8–10in (0.2–0.25m) micro-ledges and mellow banks alongside the
|
||||
14–18in (0.35–0.45m) standard ledges, handrails and hubbas, so beginners progress
|
||||
without occupying main lines.
|
||||
- **Terrain balance** — street (stairs, manual pads, flatbars, euro-gaps) paired with
|
||||
transition (spines, hips, speed bumps, open bowls).
|
||||
- **Coping mechanics** — consistent reveal (~3/8in proud above and in front of the lip)
|
||||
for predictable grinds; pool coping and tile in advanced bowls. *(Game mapping: rails
|
||||
hug the deck height — PARK CHECK flags buried or floating steel.)*
|
||||
|
||||
## Surface & build quality
|
||||
- Smooth high-PSI steel-trowelled concrete; prefab metal/wood deteriorates and seams at
|
||||
the transition base. *(Game mapping: one continuous heightfield — no seams by
|
||||
construction.)*
|
||||
- Expansion joints routed away from landings and slide paths.
|
||||
|
||||
## Drainage & sightlines
|
||||
- Drains and micro-slopes strictly outside trick lines; no puddle pockets.
|
||||
- Open sightlines across the footprint to spot traffic and clear landings.
|
||||
|
||||
## Amenities & community
|
||||
- Lighting for evenings, shaded perimeter seating clear of run-ups, water, bins, transit
|
||||
access. *(Game mapping: props/set dressing live outside the bounds slab.)*
|
||||
104
index.html
Normal file
104
index.html
Normal file
@ -0,0 +1,104 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>SKATEMAKER PRO — park builder</title>
|
||||
<style>
|
||||
:root{ --bg:#14181e; --panel:#1c222b; --panel2:#232b36; --ink:#dbe4ee; --dim:#7d8a99;
|
||||
--gold:#ffd93b; --gold2:#b8860b; --line:#2e3947; --danger:#ff6b6b; }
|
||||
*{box-sizing:border-box}
|
||||
body{margin:0;overflow:hidden;background:var(--bg);color:var(--ink);
|
||||
font:13px/1.4 "SF Mono",Menlo,monospace}
|
||||
#app{display:grid;height:100vh;
|
||||
grid-template-rows:46px 1fr 26px;
|
||||
grid-template-columns:170px 1fr 230px;
|
||||
grid-template-areas:"top top top" "pal view insp" "status status status"}
|
||||
#topbar{grid-area:top;display:flex;align-items:center;gap:8px;padding:0 12px;
|
||||
background:var(--panel);border-bottom:1px solid var(--line)}
|
||||
.logo{font-weight:bold;font-size:16px;letter-spacing:1px;margin-right:6px;color:var(--ink)}
|
||||
.logo b{color:var(--gold)}
|
||||
#palette{grid-area:pal;overflow-y:auto;background:var(--panel);
|
||||
border-right:1px solid var(--line);padding:10px}
|
||||
#viewport{grid-area:view;position:relative;min-width:0;min-height:0}
|
||||
#viewport canvas{display:block}
|
||||
#inspector{grid-area:insp;overflow-y:auto;background:var(--panel);
|
||||
border-left:1px solid var(--line);padding:10px}
|
||||
#status{grid-area:status;display:flex;align-items:center;padding:0 12px;
|
||||
background:var(--panel);border-top:1px solid var(--line);color:var(--dim);
|
||||
white-space:nowrap;overflow:hidden}
|
||||
#drawer{display:none;position:fixed;left:178px;bottom:34px;width:400px;max-height:56vh;
|
||||
flex-direction:column;gap:8px;overflow-y:auto;background:var(--panel2);
|
||||
border:1px solid var(--line);border-radius:8px;padding:12px;z-index:20;
|
||||
box-shadow:0 12px 40px #000a}
|
||||
.ptitle{color:var(--dim);font-size:11px;letter-spacing:2px;margin:14px 0 6px}
|
||||
.ptitle:first-child{margin-top:0}
|
||||
.ptitle .dim{letter-spacing:0;color:#5a6673}
|
||||
.pgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
|
||||
.pcol{display:flex;flex-direction:column;gap:5px}
|
||||
.pbtn{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
|
||||
font:inherit;font-size:11px;padding:7px 6px;border-radius:5px;cursor:pointer;
|
||||
letter-spacing:.5px}
|
||||
.pbtn:hover{border-color:var(--gold);color:var(--gold)}
|
||||
.pbtn.active{background:var(--gold);color:#1a1a1a;border-color:var(--gold);font-weight:bold}
|
||||
.pbtn.accent{border-color:var(--gold2);color:var(--gold)}
|
||||
.pbtn.danger{color:var(--danger)}
|
||||
.pbtn.wide{width:100%}
|
||||
.pbtn.test{font-weight:bold}
|
||||
.snaprow{display:flex;gap:6px;align-items:center;color:var(--dim);font-size:11px;
|
||||
padding:4px 2px;cursor:pointer}
|
||||
.ititle{font-weight:bold;color:var(--gold);letter-spacing:1px;margin-bottom:8px}
|
||||
.ihint{color:var(--dim);font-size:11px;margin:8px 0}
|
||||
.irow{display:flex;align-items:center;gap:6px;margin:5px 0}
|
||||
.irow>label{width:66px;flex-shrink:0;color:var(--dim);font-size:11px}
|
||||
.numwrap{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
|
||||
input[type=range]{flex:1;min-width:0;accent-color:var(--gold)}
|
||||
input.num{width:52px;background:var(--panel2);border:1px solid var(--line);
|
||||
color:var(--ink);font:inherit;font-size:11px;padding:2px 4px;border-radius:4px}
|
||||
input.text,select{background:var(--panel2);border:1px solid var(--line);color:var(--ink);
|
||||
font:inherit;font-size:12px;padding:4px 6px;border-radius:4px;min-width:0}
|
||||
input.parkname{width:150px;color:var(--gold);font-weight:bold}
|
||||
input[type=color]{background:none;border:1px solid var(--line);border-radius:4px;
|
||||
width:44px;height:24px;padding:1px}
|
||||
.ibtns{display:flex;gap:6px;margin-top:12px}
|
||||
.ibtns .pbtn{flex:1}
|
||||
.checklist{display:flex;flex-direction:column;gap:5px}
|
||||
.checkitem{background:var(--panel);border:1px solid var(--line);border-radius:5px;
|
||||
padding:7px 9px;font-size:12px;color:#f0c674}
|
||||
.checkitem.link{cursor:pointer}
|
||||
.checkitem.link:hover{border-color:var(--gold)}
|
||||
.checkok{color:#7bd88f;padding:8px}
|
||||
.mbgen{display:flex;flex-wrap:wrap;gap:6px}
|
||||
.mbgen input{flex:1 1 100%}
|
||||
.mbstatus{color:var(--dim);font-size:11px;flex:1;align-self:center}
|
||||
.mblist{display:flex;flex-direction:column;gap:4px;max-height:30vh;overflow-y:auto}
|
||||
.mbitem{display:flex;align-items:center;gap:6px;background:var(--panel);
|
||||
border:1px solid var(--line);border-radius:5px;padding:5px 8px}
|
||||
.mbname{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<div id="topbar"></div>
|
||||
<div id="palette"></div>
|
||||
<div id="viewport"></div>
|
||||
<div id="inspector"></div>
|
||||
<div id="status">booting…</div>
|
||||
</div>
|
||||
<div id="drawer"></div>
|
||||
|
||||
<script type="importmap">
|
||||
{"imports":{"three":"https://unpkg.com/three@0.160.0/build/three.module.js",
|
||||
"three/addons/":"https://unpkg.com/three@0.160.0/examples/jsm/"}}
|
||||
</script>
|
||||
<script type="module">
|
||||
import { initEditor } from './js/editor.js';
|
||||
import { initUI } from './js/ui.js';
|
||||
import { attachTestRide } from './js/testride.js';
|
||||
|
||||
const ed = initEditor(document.getElementById('viewport'));
|
||||
attachTestRide(ed);
|
||||
ed.boot().then(() => initUI(ed));
|
||||
window.__ed = ed; // headless testing hook
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
538
js/editor.js
Normal file
538
js/editor.js
Normal file
@ -0,0 +1,538 @@
|
||||
// SKATEMAKER PRO — editor core. Scene, picking, dragging, undo, rebuilds.
|
||||
// The park is DATA; every edit mutates park JSON and the world rebuilds from it —
|
||||
// so the editor can never lie about what the game will do.
|
||||
import * as THREE from 'three';
|
||||
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
|
||||
import { makeHeightAt, newElement, newId, elementHit, elementOutline, emptyPark }
|
||||
from './parkmath.js';
|
||||
import { buildGround, buildRails, buildProps, buildLetters, bakeGroundTexture,
|
||||
GRID_PAD } from './parkbuild.js';
|
||||
|
||||
const AUTOSAVE_KEY = 'smp_autosave_v1';
|
||||
|
||||
export function initEditor(container) {
|
||||
// ---------------------------------------------------------------- three
|
||||
const scene = new THREE.Scene();
|
||||
scene.background = new THREE.Color(0x1a2028);
|
||||
scene.fog = new THREE.Fog(0x1a2028, 90, 220);
|
||||
const cam = new THREE.PerspectiveCamera(55, 1, 0.1, 500);
|
||||
cam.position.set(0, 42, 46);
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true });
|
||||
renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
|
||||
container.appendChild(renderer.domElement);
|
||||
scene.add(new THREE.HemisphereLight(0xffffff, 0x3a4436, 1.05));
|
||||
const sun = new THREE.DirectionalLight(0xfff3d9, 1.5);
|
||||
sun.position.set(30, 46, 18); scene.add(sun);
|
||||
|
||||
const controls = new OrbitControls(cam, renderer.domElement);
|
||||
controls.enableDamping = true; controls.dampingFactor = 0.12;
|
||||
controls.maxPolarAngle = Math.PI * 0.49;
|
||||
controls.mouseButtons = { LEFT: -1, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.ROTATE };
|
||||
controls.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
|
||||
controls.keyPanSpeed = 20;
|
||||
|
||||
const resize = () => {
|
||||
const w = container.clientWidth, h = container.clientHeight;
|
||||
renderer.setSize(w, h); cam.aspect = w / h; cam.updateProjectionMatrix();
|
||||
};
|
||||
new ResizeObserver(resize).observe(container);
|
||||
|
||||
// ---------------------------------------------------------------- state
|
||||
const ed = {
|
||||
scene, cam, renderer, controls,
|
||||
park: null, heightAt: null,
|
||||
selection: null, // {type:'element'|'rail'|'gap'|'letter'|'spawn'|'prop'|'zone'|'decal', id}
|
||||
tool: null, // {mode:'place', kind} | {mode:'rail'} | {mode:'gap'}...
|
||||
testing: false,
|
||||
snapStep: 0, // 0 = free, 0.5 = THPS-style grid snap
|
||||
listeners: {},
|
||||
on(ev, fn) { (this.listeners[ev] ||= []).push(fn); },
|
||||
emit(ev, ...a) { for (const f of this.listeners[ev] || []) f(...a); },
|
||||
};
|
||||
|
||||
let ground = null, railsGrp = null, propsGrp = null, letterMeshes = [],
|
||||
markersGrp = new THREE.Group(), selGrp = new THREE.Group(),
|
||||
underlayMesh = null;
|
||||
scene.add(markersGrp, selGrp);
|
||||
|
||||
// ---------------------------------------------------------------- rebuilds
|
||||
function rebuildGround() {
|
||||
if (ground) {
|
||||
scene.remove(ground);
|
||||
ground.geometry.dispose(); ground.material.map?.dispose(); ground.material.dispose();
|
||||
}
|
||||
ground = buildGround(ed.park);
|
||||
scene.add(ground);
|
||||
}
|
||||
function rebakeTexture() {
|
||||
if (!ground) return;
|
||||
const B = ed.park.bounds;
|
||||
ground.material.map?.dispose();
|
||||
ground.material.map = bakeGroundTexture(ed.park,
|
||||
B.x0 - GRID_PAD, B.x1 + GRID_PAD, B.z0 - GRID_PAD, B.z1 + GRID_PAD);
|
||||
ground.material.needsUpdate = true;
|
||||
}
|
||||
function rebuildRails() {
|
||||
if (railsGrp) scene.remove(railsGrp);
|
||||
railsGrp = buildRails(ed.park); scene.add(railsGrp);
|
||||
}
|
||||
function rebuildProps() {
|
||||
if (propsGrp) scene.remove(propsGrp);
|
||||
propsGrp = buildProps(ed.park, ed.heightAt); scene.add(propsGrp);
|
||||
}
|
||||
function rebuildMarkers() {
|
||||
markersGrp.clear();
|
||||
for (const m of letterMeshes) scene.remove(m);
|
||||
letterMeshes = buildLetters(ed.park, ed.heightAt);
|
||||
for (const m of letterMeshes) scene.add(m);
|
||||
const ringMat = new THREE.LineBasicMaterial({ color: 0xffd93b, transparent: true, opacity: 0.75 });
|
||||
for (const g of ed.park.gaps) {
|
||||
const pts = [];
|
||||
for (let i = 0; i <= 32; i++) {
|
||||
const a = i / 32 * Math.PI * 2, x = g.x + Math.cos(a) * g.r, z = g.z + Math.sin(a) * g.r;
|
||||
pts.push(new THREE.Vector3(x, ed.heightAt(x, z) + 0.12, z));
|
||||
}
|
||||
markersGrp.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), ringMat));
|
||||
}
|
||||
const s = ed.park.spawn;
|
||||
const cone = new THREE.Mesh(new THREE.ConeGeometry(0.35, 1.1, 8),
|
||||
new THREE.MeshBasicMaterial({ color: 0xff8c3b }));
|
||||
cone.rotation.x = Math.PI / 2; cone.rotation.z = -s.heading;
|
||||
const holder = new THREE.Group(); holder.add(cone);
|
||||
cone.position.z = 0.4;
|
||||
holder.rotation.y = s.heading;
|
||||
holder.position.set(s.x, ed.heightAt(s.x, s.z) + 0.5, s.z);
|
||||
markersGrp.add(holder);
|
||||
}
|
||||
function rebuildUnderlay() {
|
||||
if (underlayMesh) { scene.remove(underlayMesh); underlayMesh.material.map?.dispose(); underlayMesh = null; }
|
||||
const u = ed.park.underlay;
|
||||
if (!u || !u.img || !u.visible) return;
|
||||
const tex = new THREE.TextureLoader().load(u.img, t => {
|
||||
t.colorSpace = THREE.SRGBColorSpace;
|
||||
const asp = t.image.height / t.image.width;
|
||||
underlayMesh.scale.set(u.w, u.w * asp, 1);
|
||||
});
|
||||
underlayMesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1),
|
||||
new THREE.MeshBasicMaterial({ map: tex, transparent: true, opacity: u.opacity ?? 0.5,
|
||||
depthWrite: false }));
|
||||
underlayMesh.rotation.x = -Math.PI / 2;
|
||||
underlayMesh.rotation.z = u.rot || 0;
|
||||
underlayMesh.position.set(u.x || 0, (u.y ?? 6), u.z || 0);
|
||||
underlayMesh.renderOrder = 5;
|
||||
scene.add(underlayMesh);
|
||||
}
|
||||
|
||||
// selection highlight
|
||||
function rebuildSelection() {
|
||||
selGrp.clear();
|
||||
const sel = ed.selection, obj = getSelected();
|
||||
if (!sel || !obj) return;
|
||||
const mat = new THREE.LineBasicMaterial({ color: 0xffd93b });
|
||||
const loop = pts2 => {
|
||||
const pts = pts2.map(([x, z]) => new THREE.Vector3(x, ed.heightAt(x, z) + 0.1, z));
|
||||
selGrp.add(new THREE.LineLoop(new THREE.BufferGeometry().setFromPoints(pts), mat));
|
||||
};
|
||||
const handle = (x, y, z, big) => {
|
||||
const m = new THREE.Mesh(new THREE.SphereGeometry(big ? 0.28 : 0.18, 12, 8),
|
||||
new THREE.MeshBasicMaterial({ color: 0xffd93b }));
|
||||
m.position.set(x, y, z); m.userData.handle = true; selGrp.add(m); return m;
|
||||
};
|
||||
if (sel.type === 'element') loop(elementOutline(obj));
|
||||
else if (sel.type === 'rail') {
|
||||
const a = new THREE.Vector3(obj.a[0], obj.ya, obj.a[1]);
|
||||
const b = new THREE.Vector3(obj.b[0], obj.yb, obj.b[1]);
|
||||
selGrp.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints([a, b]), mat));
|
||||
handle(a.x, a.y, a.z, true).userData.railEnd = 'a';
|
||||
handle(b.x, b.y, b.z, true).userData.railEnd = 'b';
|
||||
} else if (sel.type === 'gap') {
|
||||
const pts = [];
|
||||
for (let i = 0; i < 32; i++) {
|
||||
const a = i / 32 * Math.PI * 2;
|
||||
pts.push([obj.x + Math.cos(a) * obj.r, obj.z + Math.sin(a) * obj.r]);
|
||||
}
|
||||
loop(pts);
|
||||
} else if (sel.type === 'letter') {
|
||||
handle(obj.x, ed.heightAt(obj.x, obj.z) + obj.y, obj.z, true);
|
||||
} else if (sel.type === 'spawn') {
|
||||
handle(obj.x, ed.heightAt(obj.x, obj.z) + 0.5, obj.z, true);
|
||||
} else if (sel.type === 'prop') {
|
||||
const o = propsGrp?.children.find(c => c.userData.propId === obj.id);
|
||||
if (o) selGrp.add(new THREE.BoxHelper(o, 0xffd93b));
|
||||
} else if (sel.type === 'zone' || sel.type === 'decal') {
|
||||
const hw = sel.type === 'zone' ? obj.hw : obj.w / 2,
|
||||
hd = sel.type === 'zone' ? obj.hd : obj.h / 2;
|
||||
const c = Math.cos(obj.rot || 0), s = Math.sin(obj.rot || 0);
|
||||
const W = (u, v) => [obj.x + u * c - v * s, obj.z + u * s + v * c];
|
||||
loop([W(-hw, -hd), W(hw, -hd), W(hw, hd), W(-hw, hd)]);
|
||||
}
|
||||
}
|
||||
|
||||
let groundTimer = 0, groundDirty = false;
|
||||
function requestGround() {
|
||||
groundDirty = true;
|
||||
const now = performance.now();
|
||||
if (now - groundTimer > 90) { groundTimer = now; groundDirty = false; rebuildGround(); }
|
||||
}
|
||||
|
||||
function rebuildAll() {
|
||||
ed.heightAt = makeHeightAt(ed.park);
|
||||
rebuildGround(); rebuildRails(); rebuildProps(); rebuildMarkers();
|
||||
rebuildUnderlay(); rebuildSelection();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- undo / persistence
|
||||
const undoStack = [], redoStack = [];
|
||||
function snapshot() {
|
||||
undoStack.push(JSON.stringify(ed.park));
|
||||
if (undoStack.length > 120) undoStack.shift();
|
||||
redoStack.length = 0;
|
||||
}
|
||||
function autosave() {
|
||||
try { localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(ed.park)); } catch {}
|
||||
}
|
||||
// parts: {ground, rails, props, markers, tex, underlay} — default everything cheap
|
||||
ed.commit = (parts = {}) => {
|
||||
if (parts.snapshot !== false) snapshot();
|
||||
if (parts.ground) rebuildGround();
|
||||
if (parts.tex) rebakeTexture();
|
||||
if (parts.rails) rebuildRails();
|
||||
if (parts.props) rebuildProps();
|
||||
if (parts.markers !== false) rebuildMarkers();
|
||||
if (parts.underlay) rebuildUnderlay();
|
||||
rebuildSelection();
|
||||
autosave();
|
||||
ed.emit('change');
|
||||
};
|
||||
ed.undo = () => {
|
||||
if (!undoStack.length) return;
|
||||
redoStack.push(JSON.stringify(ed.park));
|
||||
ed.park = JSON.parse(undoStack.pop());
|
||||
ed.selection = null; rebuildAll(); autosave(); ed.emit('change'); ed.emit('select');
|
||||
};
|
||||
ed.redo = () => {
|
||||
if (!redoStack.length) return;
|
||||
undoStack.push(JSON.stringify(ed.park));
|
||||
ed.park = JSON.parse(redoStack.pop());
|
||||
ed.selection = null; rebuildAll(); autosave(); ed.emit('change'); ed.emit('select');
|
||||
};
|
||||
|
||||
ed.loadPark = json => {
|
||||
ed.park = json;
|
||||
for (const list of [json.elements, json.rails, json.gaps, json.letters,
|
||||
json.zones, json.decals, json.props])
|
||||
for (const o of list || []) if (!o.id) o.id = newId();
|
||||
ed.selection = null; undoStack.length = redoStack.length = 0;
|
||||
rebuildAll(); autosave(); ed.emit('change'); ed.emit('select');
|
||||
};
|
||||
ed.newPark = name => ed.loadPark(emptyPark(name));
|
||||
|
||||
// ---------------------------------------------------------------- selection helpers
|
||||
function getSelected() {
|
||||
const s = ed.selection;
|
||||
if (!s || !ed.park) return null;
|
||||
const P = ed.park;
|
||||
switch (s.type) {
|
||||
case 'element': return P.elements.find(e => e.id === s.id);
|
||||
case 'rail': return P.rails.find(e => e.id === s.id);
|
||||
case 'gap': return P.gaps.find(e => e.id === s.id);
|
||||
case 'letter': return P.letters.find(e => e.id === s.id);
|
||||
case 'prop': return P.props.find(e => e.id === s.id);
|
||||
case 'zone': return P.zones.find(e => e.id === s.id);
|
||||
case 'decal': return P.decals.find(e => e.id === s.id);
|
||||
case 'spawn': return P.spawn;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
ed.getSelected = getSelected;
|
||||
ed.select = sel => { ed.selection = sel; rebuildSelection(); ed.emit('select'); };
|
||||
|
||||
ed.deleteSelected = () => {
|
||||
const s = ed.selection;
|
||||
if (!s || s.type === 'spawn') return;
|
||||
const lists = { element: 'elements', rail: 'rails', gap: 'gaps', letter: 'letters',
|
||||
prop: 'props', zone: 'zones', decal: 'decals' };
|
||||
const arr = ed.park[lists[s.type]];
|
||||
const i = arr.findIndex(e => e.id === s.id);
|
||||
if (i < 0) return;
|
||||
snapshot(); arr.splice(i, 1); ed.selection = null;
|
||||
rebuildAll(); autosave(); ed.emit('change'); ed.emit('select');
|
||||
};
|
||||
ed.duplicateSelected = () => {
|
||||
const s = ed.selection, obj = getSelected();
|
||||
if (!obj || s.type === 'spawn') return;
|
||||
const lists = { element: 'elements', rail: 'rails', gap: 'gaps', letter: 'letters',
|
||||
prop: 'props', zone: 'zones', decal: 'decals' };
|
||||
const copy = structuredClone(obj); copy.id = newId();
|
||||
if (copy.x !== undefined) { copy.x += 2; copy.z += 2; }
|
||||
if (copy.a) { copy.a = [copy.a[0] + 2, copy.a[1] + 2]; copy.b = [copy.b[0] + 2, copy.b[1] + 2]; }
|
||||
snapshot(); ed.park[lists[s.type]].push(copy);
|
||||
ed.selection = { type: s.type, id: copy.id };
|
||||
rebuildAll(); autosave(); ed.emit('change'); ed.emit('select');
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------- picking
|
||||
const ray = new THREE.Raycaster();
|
||||
const ndc = new THREE.Vector2();
|
||||
const planeY0 = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
|
||||
|
||||
function groundPoint(ev) {
|
||||
const r = renderer.domElement.getBoundingClientRect();
|
||||
ndc.set((ev.clientX - r.left) / r.width * 2 - 1, -((ev.clientY - r.top) / r.height) * 2 + 1);
|
||||
ray.setFromCamera(ndc, cam);
|
||||
const hit = ground ? ray.intersectObject(ground)[0] : null;
|
||||
if (hit) return hit.point;
|
||||
const p = new THREE.Vector3();
|
||||
return ray.ray.intersectPlane(planeY0, p) ? p : null;
|
||||
}
|
||||
|
||||
const distSeg = (px, pz, a, b) => {
|
||||
const dx = b[0] - a[0], dz = b[1] - a[1];
|
||||
const t = Math.max(0, Math.min(1, ((px - a[0]) * dx + (pz - a[1]) * dz) / (dx * dx + dz * dz || 1)));
|
||||
return Math.hypot(px - (a[0] + t * dx), pz - (a[1] + t * dz));
|
||||
};
|
||||
|
||||
function pick(ev, p) {
|
||||
// 1. selection handles (rail endpoints)
|
||||
const hs = ray.intersectObjects(selGrp.children.filter(o => o.userData.handle));
|
||||
if (hs.length && hs[0].object.userData.railEnd)
|
||||
return { type: 'railEnd', end: hs[0].object.userData.railEnd };
|
||||
if (!p) return null;
|
||||
const P = ed.park, x = p.x, z = p.z;
|
||||
// 2. props (real raycast)
|
||||
if (propsGrp) {
|
||||
const ph = ray.intersectObjects(propsGrp.children, true)[0];
|
||||
if (ph) { const id = ph.object.userData.propId;
|
||||
if (id) return { type: 'prop', id }; }
|
||||
}
|
||||
// 3. letters
|
||||
for (const L of P.letters) if (Math.hypot(x - L.x, z - L.z) < 1.0)
|
||||
return { type: 'letter', id: L.id };
|
||||
// 4. spawn
|
||||
if (Math.hypot(x - P.spawn.x, z - P.spawn.z) < 1.0) return { type: 'spawn' };
|
||||
// 5. rails
|
||||
for (const r of P.rails) if (distSeg(x, z, r.a, r.b) < 0.6)
|
||||
return { type: 'rail', id: r.id };
|
||||
// 6. gaps (ring click — near the radius, not anywhere inside)
|
||||
for (const g of P.gaps) { const d = Math.hypot(x - g.x, z - g.z);
|
||||
if (Math.abs(d - g.r) < 0.5) return { type: 'gap', id: g.id }; }
|
||||
// 7. elements, topmost drawn last
|
||||
for (let i = P.elements.length - 1; i >= 0; i--)
|
||||
if (elementHit(P.elements[i], x, z)) return { type: 'element', id: P.elements[i].id };
|
||||
// 8. zones / decals
|
||||
const inRect = (o, hw, hd) => {
|
||||
const c = Math.cos(o.rot || 0), s = Math.sin(o.rot || 0);
|
||||
const dx = x - o.x, dz = z - o.z;
|
||||
return Math.abs(dx * c + dz * s) <= hw && Math.abs(-dx * s + dz * c) <= hd;
|
||||
};
|
||||
for (let i = (P.decals || []).length - 1; i >= 0; i--)
|
||||
if (inRect(P.decals[i], P.decals[i].w / 2, P.decals[i].h / 2))
|
||||
return { type: 'decal', id: P.decals[i].id };
|
||||
for (let i = (P.zones || []).length - 1; i >= 0; i--)
|
||||
if (inRect(P.zones[i], P.zones[i].hw, P.zones[i].hd))
|
||||
return { type: 'zone', id: P.zones[i].id };
|
||||
return null;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- tools & placement
|
||||
ed.setTool = tool => { ed.tool = tool; pendingRail = null; ed.emit('tool'); };
|
||||
let pendingRail = null; // first click of a rail placement
|
||||
|
||||
const snapV = v => ed.snapStep ? Math.round(v / ed.snapStep) * ed.snapStep : +v.toFixed(2);
|
||||
function place(p) {
|
||||
const t = ed.tool, P = ed.park;
|
||||
const x = snapV(p.x), z = snapV(p.z);
|
||||
if (t.mode === 'place') {
|
||||
const e = newElement(t.kind, x, z);
|
||||
snapshot(); P.elements.push(e);
|
||||
ed.selection = { type: 'element', id: e.id };
|
||||
rebuildGround(); ed.commit({ snapshot: false });
|
||||
} else if (t.mode === 'rail') {
|
||||
const y = ed.heightAt(x, z) + 0.4;
|
||||
if (!pendingRail) { pendingRail = { x, z, y }; ed.emit('status', 'rail: click the far end'); return; }
|
||||
const r = { id: newId(), name: 'Rail', a: [pendingRail.x, pendingRail.z], b: [x, z],
|
||||
ya: +pendingRail.y.toFixed(2), yb: +y.toFixed(2), kind: 'rail' };
|
||||
snapshot(); P.rails.push(r); pendingRail = null;
|
||||
ed.selection = { type: 'rail', id: r.id };
|
||||
ed.commit({ snapshot: false, rails: true });
|
||||
ed.setTool(null);
|
||||
} else if (t.mode === 'gap') {
|
||||
const g = { id: newId(), name: 'NEW GAP', x, z, r: 2.4 };
|
||||
snapshot(); P.gaps.push(g);
|
||||
ed.selection = { type: 'gap', id: g.id };
|
||||
ed.commit({ snapshot: false }); ed.setTool(null);
|
||||
} else if (t.mode === 'letter') {
|
||||
const used = P.letters.map(l => l.ch).join('');
|
||||
const next = 'BOOKQUOY'.split('').find((c, i) => 'BOOKQUOY'.slice(0, i + 1).split(c).length - 1 >
|
||||
used.split(c).length - 1) || 'O';
|
||||
const L = { id: newId(), ch: next, x, y: 1.8, z };
|
||||
snapshot(); P.letters.push(L);
|
||||
ed.selection = { type: 'letter', id: L.id };
|
||||
ed.commit({ snapshot: false }); ed.setTool(null);
|
||||
} else if (t.mode === 'spawn') {
|
||||
snapshot(); P.spawn.x = x; P.spawn.z = z;
|
||||
ed.selection = { type: 'spawn' };
|
||||
ed.commit({ snapshot: false }); ed.setTool(null);
|
||||
} else if (t.mode === 'zone') {
|
||||
const zn = { id: newId(), shape: 'rect', x, z, rot: 0, hw: 3, hd: 3,
|
||||
color: '#9aa0a2', opacity: 1 };
|
||||
snapshot(); P.zones.push(zn);
|
||||
ed.selection = { type: 'zone', id: zn.id };
|
||||
ed.commit({ snapshot: false, tex: true }); ed.setTool(null);
|
||||
} else if (t.mode === 'decal') {
|
||||
const d = { id: newId(), img: t.img, x, z, rot: 0, w: t.w || 6,
|
||||
h: (t.w || 6) * (t.aspect || 1), opacity: 1 };
|
||||
snapshot(); P.decals.push(d);
|
||||
ed.selection = { type: 'decal', id: d.id };
|
||||
ed.commit({ snapshot: false, tex: true }); ed.setTool(null);
|
||||
} else if (t.mode === 'prop') {
|
||||
const pr = { id: newId(), src: t.src, x, z, rot: 0, scale: t.scale || 1 };
|
||||
snapshot(); P.props.push(pr);
|
||||
ed.selection = { type: 'prop', id: pr.id };
|
||||
ed.commit({ snapshot: false, props: true }); ed.setTool(null);
|
||||
}
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- drag
|
||||
let drag = null; // {kind:'move'|'railEnd', grabDX, grabDZ, end, moved}
|
||||
renderer.domElement.addEventListener('pointerdown', ev => {
|
||||
if (ev.button !== 0 || ed.testing) return;
|
||||
const p = groundPoint(ev);
|
||||
if (ed.tool) { if (p) place(p); return; }
|
||||
const hit = pick(ev, p);
|
||||
if (!hit) { ed.select(null); return; }
|
||||
if (hit.type === 'railEnd') {
|
||||
drag = { kind: 'railEnd', end: hit.end, moved: false };
|
||||
controls.enabled = false; snapshot(); return;
|
||||
}
|
||||
ed.select({ type: hit.type, id: hit.id });
|
||||
const obj = getSelected();
|
||||
if (obj && p) {
|
||||
drag = { kind: 'move', moved: false,
|
||||
grabDX: (obj.x ?? obj.a?.[0] ?? 0) - p.x,
|
||||
grabDZ: (obj.z ?? obj.a?.[1] ?? 0) - p.z };
|
||||
controls.enabled = false; snapshot();
|
||||
}
|
||||
});
|
||||
renderer.domElement.addEventListener('pointermove', ev => {
|
||||
if (!drag || ed.testing) return;
|
||||
const p = groundPoint(ev); if (!p) return;
|
||||
const s = ed.selection, obj = getSelected(); if (!obj) return;
|
||||
drag.moved = true;
|
||||
if (drag.kind === 'railEnd') {
|
||||
const end = drag.end;
|
||||
obj[end] = [snapV(p.x), snapV(p.z)];
|
||||
obj[end === 'a' ? 'ya' : 'yb'] = +(ed.heightAt(p.x, p.z) + 0.4).toFixed(2);
|
||||
rebuildRails(); rebuildSelection(); return;
|
||||
}
|
||||
const nx = snapV(p.x + drag.grabDX), nz = snapV(p.z + drag.grabDZ);
|
||||
if (s.type === 'rail') {
|
||||
const dx = nx - obj.a[0], dz = nz - obj.a[1];
|
||||
obj.a = [obj.a[0] + dx, obj.a[1] + dz]; obj.b = [obj.b[0] + dx, obj.b[1] + dz];
|
||||
rebuildRails();
|
||||
} else { obj.x = nx; obj.z = nz; }
|
||||
if (s.type === 'element') requestGround();
|
||||
if (s.type === 'zone' || s.type === 'decal') rebakeTexture();
|
||||
if (s.type === 'prop') rebuildProps();
|
||||
if (s.type === 'letter' || s.type === 'gap' || s.type === 'spawn') rebuildMarkers();
|
||||
rebuildSelection();
|
||||
ed.emit('select'); // live-update inspector numbers
|
||||
});
|
||||
const endDrag = () => {
|
||||
if (!drag) return;
|
||||
const wasMoved = drag.moved, s = ed.selection;
|
||||
drag = null; controls.enabled = true;
|
||||
if (!wasMoved) { undoStack.pop(); return; } // click, no move — drop the snapshot
|
||||
if (s?.type === 'element') rebuildGround();
|
||||
ed.commit({ snapshot: false, rails: s?.type === 'rail' || s?.type === 'railEnd' });
|
||||
};
|
||||
renderer.domElement.addEventListener('pointerup', endDrag);
|
||||
renderer.domElement.addEventListener('pointerleave', endDrag);
|
||||
|
||||
// ---------------------------------------------------------------- param edits from UI
|
||||
ed.updateSelected = (key, value, opts = {}) => {
|
||||
const obj = getSelected(); if (!obj) return;
|
||||
obj[key] = value;
|
||||
const t = ed.selection.type;
|
||||
if (t === 'element') requestGround();
|
||||
if (t === 'zone' || t === 'decal') rebakeTexture();
|
||||
if (t === 'rail') rebuildRails();
|
||||
if (t === 'prop') rebuildProps();
|
||||
rebuildMarkers(); rebuildSelection();
|
||||
if (opts.done) { // slider released / field committed
|
||||
if (t === 'element') rebuildGround();
|
||||
ed.commit({ snapshot: true, rails: t === 'rail', props: t === 'prop' });
|
||||
}
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------- keys
|
||||
addEventListener('keydown', ev => {
|
||||
if (ed.testing) return;
|
||||
if (ev.target.tagName === 'INPUT' || ev.target.tagName === 'SELECT' ||
|
||||
ev.target.tagName === 'TEXTAREA') return;
|
||||
const obj = getSelected();
|
||||
if ((ev.metaKey || ev.ctrlKey) && ev.code === 'KeyZ') {
|
||||
ev.preventDefault(); ev.shiftKey ? ed.redo() : ed.undo(); return;
|
||||
}
|
||||
if ((ev.metaKey || ev.ctrlKey) && ev.code === 'KeyY') { ev.preventDefault(); ed.redo(); return; }
|
||||
switch (ev.code) {
|
||||
case 'Escape': ed.setTool(null); ed.select(null); break;
|
||||
case 'Backspace': case 'Delete': ed.deleteSelected(); break;
|
||||
case 'KeyD': if (!ev.metaKey) ed.duplicateSelected(); break;
|
||||
case 'BracketLeft': case 'BracketRight': {
|
||||
if (!obj || obj.rot === undefined) break;
|
||||
const step = (ev.code === 'BracketLeft' ? -1 : 1) * (ev.shiftKey ? 5 : 15) * Math.PI / 180;
|
||||
ed.updateSelected('rot', +(obj.rot + step).toFixed(3), { done: true });
|
||||
ed.emit('select');
|
||||
break;
|
||||
}
|
||||
case 'KeyT': ed.topView(); break;
|
||||
}
|
||||
});
|
||||
|
||||
ed.topView = () => {
|
||||
const B = ed.park.bounds;
|
||||
const cx = (B.x0 + B.x1) / 2, cz = (B.z0 + B.z1) / 2;
|
||||
controls.target.set(cx, 0, cz);
|
||||
cam.position.set(cx, Math.max(B.x1 - B.x0, B.z1 - B.z0) * 1.05, cz + 0.01);
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------- boot + loop
|
||||
let extraUpdate = null;
|
||||
ed.setExtraUpdate = fn => { extraUpdate = fn; };
|
||||
let last = performance.now();
|
||||
function frame(now) {
|
||||
requestAnimationFrame(frame);
|
||||
const dt = Math.min((now - last) / 1000, 0.05); last = now;
|
||||
if (groundDirty && now - groundTimer > 90) { groundTimer = now; groundDirty = false; rebuildGround(); }
|
||||
for (const m of letterMeshes) { m.rotation.y += dt * 2.2; }
|
||||
if (extraUpdate) extraUpdate(dt);
|
||||
else controls.update();
|
||||
renderer.render(scene, cam);
|
||||
}
|
||||
|
||||
// deterministic stepper for headless testing (browser pane throttles rAF when
|
||||
// hidden — same lesson, and same convention, as bookquoy's window.__step)
|
||||
ed.step = (seconds = 1) => {
|
||||
const n = Math.round(seconds * 60);
|
||||
for (let i = 0; i < n; i++) {
|
||||
const dt = 1 / 60;
|
||||
if (extraUpdate) extraUpdate(dt); else controls.update();
|
||||
}
|
||||
renderer.render(scene, cam);
|
||||
};
|
||||
|
||||
ed.boot = async () => {
|
||||
resize();
|
||||
let loaded = null;
|
||||
try { loaded = JSON.parse(localStorage.getItem(AUTOSAVE_KEY)); } catch {}
|
||||
if (!loaded) {
|
||||
try { loaded = await fetch('parks/paddo.json').then(r => r.json()); } catch {}
|
||||
}
|
||||
ed.loadPark(loaded || emptyPark('NEW PARK'));
|
||||
ed.topView();
|
||||
requestAnimationFrame(frame);
|
||||
};
|
||||
|
||||
return ed;
|
||||
}
|
||||
49
js/export.js
Normal file
49
js/export.js
Normal file
@ -0,0 +1,49 @@
|
||||
// SKATEMAKER PRO — exports. A park leaves here two ways:
|
||||
// 1. park.json — the native data format
|
||||
// 2. level.<name>.js — a drop-in for BOOKQUOY: exports the exact interface
|
||||
// bookquoy's js/level.js has (heightAt, normalAt, BOUNDS,
|
||||
// RAILS, GAPS, LETTERS, SPAWN, buildLevel). Ship it with
|
||||
// parkmath.js + parkbuild.js + assets/uploads/.
|
||||
|
||||
function download(name, text, type = 'application/octet-stream') {
|
||||
const a = document.createElement('a');
|
||||
a.href = URL.createObjectURL(new Blob([text], { type }));
|
||||
a.download = name;
|
||||
a.click();
|
||||
setTimeout(() => URL.revokeObjectURL(a.href), 5000);
|
||||
}
|
||||
|
||||
const slug = park => (park.name || 'park').toLowerCase().replace(/[^\w]+/g, '_');
|
||||
|
||||
export function downloadParkJSON(park) {
|
||||
download(slug(park) + '.json', JSON.stringify(park, null, 1), 'application/json');
|
||||
}
|
||||
|
||||
export function generateLevelJS(park) {
|
||||
return `// ${park.name} — generated by SKATEMAKER PRO ${new Date().toISOString().slice(0, 10)}
|
||||
// Drop-in for BOOKQUOY: copy this file + parkmath.js + parkbuild.js (+ assets/uploads/)
|
||||
// into bookquoy/js/ and point main.js/player.js imports at it. Same contract as level.js:
|
||||
// heightAt(x,z) is the single source of truth for visuals AND collision.
|
||||
import { makeHeightAt, makeNormalAt } from './parkmath.js';
|
||||
import { buildParkScene } from './parkbuild.js';
|
||||
|
||||
export const PARK = ${JSON.stringify(park, null, 1)};
|
||||
|
||||
export const BOUNDS = PARK.bounds;
|
||||
export const RAILS = PARK.rails;
|
||||
export const GAPS = PARK.gaps;
|
||||
export const LETTERS = PARK.letters;
|
||||
export const SPAWN = PARK.spawn;
|
||||
export const heightAt = makeHeightAt(PARK);
|
||||
export const normalAt = makeNormalAt(heightAt);
|
||||
|
||||
export function buildLevel(scene) {
|
||||
const { ground, letterMeshes } = buildParkScene(scene, PARK);
|
||||
return { ground, letterMeshes };
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
export function downloadLevelJS(park) {
|
||||
download('level.' + slug(park) + '.js', generateLevelJS(park), 'text/javascript');
|
||||
}
|
||||
69
js/modelbeast.js
Normal file
69
js/modelbeast.js
Normal file
@ -0,0 +1,69 @@
|
||||
// SKATEMAKER PRO — MODELBEAST client. Talks only to serve.py's /mb/ proxy;
|
||||
// the farm token never reaches the browser. Guest tier: max 4 active jobs.
|
||||
// Contract (mb_recon.py, verified 2026-07-16): submit {operator, asset_id?, params},
|
||||
// poll status, then find your output by parent_job in the assets list.
|
||||
|
||||
async function j(url, opts) {
|
||||
const r = await fetch(url, opts);
|
||||
const body = await r.json();
|
||||
if (body.error) throw new Error(body.error);
|
||||
return body;
|
||||
}
|
||||
|
||||
export async function listAssets() {
|
||||
const a = await j('/mb/assets');
|
||||
return Array.isArray(a) ? a : a.items || [];
|
||||
}
|
||||
|
||||
export const importAsset = (id, name) =>
|
||||
j(`/mb/import?asset=${encodeURIComponent(id)}&name=${encodeURIComponent(name)}`);
|
||||
|
||||
export const submitJob = (operator, params = {}, assetId = null) =>
|
||||
j('/mb/jobs', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(assetId ? { operator, asset_id: assetId, params }
|
||||
: { operator, params }),
|
||||
});
|
||||
|
||||
export async function pollJob(id, onStatus, timeoutS = 600) {
|
||||
const t0 = Date.now();
|
||||
for (;;) {
|
||||
await new Promise(res => setTimeout(res, 5000));
|
||||
const st = (await j(`/mb/jobs/${id}`)).status;
|
||||
onStatus?.(`job ${id}: ${st} (${((Date.now() - t0) / 1000) | 0}s)`);
|
||||
if (st === 'done') return;
|
||||
if (st === 'error' || st === 'cancelled') throw new Error('job ended ' + st);
|
||||
if (Date.now() - t0 > timeoutS * 1000) throw new Error('job timed out');
|
||||
}
|
||||
}
|
||||
|
||||
async function outputOf(jobId, extRe) {
|
||||
const assets = await listAssets();
|
||||
const mine = assets.filter(a => a.parent_job === jobId &&
|
||||
extRe.test(a.name || a.filename || ''));
|
||||
return mine[0] || null;
|
||||
}
|
||||
|
||||
// prompt -> image on the farm (flux_local, ~9s on the m3ultra)
|
||||
export async function generateImage(prompt, onStatus) {
|
||||
onStatus?.('submitting flux_local…');
|
||||
const job = await submitJob('flux_local', { prompt });
|
||||
await pollJob(job.id, onStatus);
|
||||
return outputOf(job.id, /\.(png|jpe?g|webp)$/i);
|
||||
}
|
||||
|
||||
// MB image asset -> same image with background removed (for clean decals)
|
||||
export async function removeBg(assetId, onStatus) {
|
||||
onStatus?.('submitting bg_remove_local…');
|
||||
const job = await submitJob('bg_remove_local', {}, assetId);
|
||||
await pollJob(job.id, onStatus);
|
||||
return outputOf(job.id, /\.(png|webp)$/i);
|
||||
}
|
||||
|
||||
// MB image asset -> GLB (hunyuan3d_mlx). Slow — minutes, not seconds.
|
||||
export async function imageTo3D(assetId, onStatus) {
|
||||
onStatus?.('submitting hunyuan3d_mlx…');
|
||||
const job = await submitJob('hunyuan3d_mlx', {}, assetId);
|
||||
await pollJob(job.id, onStatus, 1800);
|
||||
return outputOf(job.id, /\.glb$/i);
|
||||
}
|
||||
204
js/parkbuild.js
Normal file
204
js/parkbuild.js
Normal file
@ -0,0 +1,204 @@
|
||||
// SKATEMAKER PRO — park -> three.js scene. Shared by the editor AND exported levels,
|
||||
// so what you see in the editor is byte-for-byte what the game builds.
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
|
||||
import { makeHeightAt } from './parkmath.js';
|
||||
|
||||
export const GRID_RES = 0.5, GRID_PAD = 14;
|
||||
|
||||
// ---------------------------------------------------------------- ground texture
|
||||
// Zones + image decals bake into one canvas mapped planar over the grid.
|
||||
// Vertex colors carry height shading; three multiplies map * vertexColors.
|
||||
export function bakeGroundTexture(park, x0, x1, z0, z1) {
|
||||
const PX = 16; // texels per metre
|
||||
const cv = document.createElement('canvas');
|
||||
cv.width = Math.min(4096, Math.round((x1 - x0) * PX));
|
||||
cv.height = Math.min(4096, Math.round((z1 - z0) * PX));
|
||||
const sx = cv.width / (x1 - x0), sz = cv.height / (z1 - z0);
|
||||
const g = cv.getContext('2d');
|
||||
const px = (x, z) => [(x - x0) * sx, (z - z0) * sz];
|
||||
|
||||
g.fillStyle = park.grassColor || '#4d7c3c'; // parkland
|
||||
g.fillRect(0, 0, cv.width, cv.height);
|
||||
const B = park.bounds;
|
||||
const [bx, bz] = px(B.x0, B.z0);
|
||||
g.fillStyle = park.slabColor || '#7fae6f'; // the slab
|
||||
g.fillRect(bx, bz, (B.x1 - B.x0) * sx, (B.z1 - B.z0) * sz);
|
||||
|
||||
const drawShape = zn => {
|
||||
g.save();
|
||||
const [cx, cz] = px(zn.x, zn.z);
|
||||
g.translate(cx, cz); g.rotate(zn.rot || 0);
|
||||
g.beginPath();
|
||||
if (zn.shape === 'ellipse') g.ellipse(0, 0, zn.hw * sx, zn.hd * sz, 0, 0, Math.PI * 2);
|
||||
else g.rect(-zn.hw * sx, -zn.hd * sz, zn.hw * 2 * sx, zn.hd * 2 * sz);
|
||||
};
|
||||
for (const zn of park.zones || []) {
|
||||
drawShape(zn);
|
||||
g.fillStyle = zn.color || '#9aa0a2';
|
||||
g.globalAlpha = zn.opacity ?? 1;
|
||||
g.fill(); g.restore();
|
||||
}
|
||||
const jobs = []; // decals load async, re-bake per image
|
||||
for (const d of park.decals || []) {
|
||||
const img = new Image();
|
||||
jobs.push(new Promise(res => {
|
||||
img.onload = () => res({ d, img });
|
||||
img.onerror = () => res(null);
|
||||
img.src = d.img;
|
||||
}));
|
||||
}
|
||||
const tex = new THREE.CanvasTexture(cv);
|
||||
tex.colorSpace = THREE.SRGBColorSpace;
|
||||
tex.anisotropy = 4;
|
||||
Promise.all(jobs).then(loaded => {
|
||||
for (const hit of loaded) {
|
||||
if (!hit) continue;
|
||||
const { d, img } = hit;
|
||||
g.save();
|
||||
const [cx, cz] = px(d.x, d.z);
|
||||
g.translate(cx, cz); g.rotate(d.rot || 0);
|
||||
g.globalAlpha = d.opacity ?? 1;
|
||||
g.drawImage(img, -d.w / 2 * sx, -d.h / 2 * sz, d.w * sx, d.h * sz);
|
||||
g.restore();
|
||||
}
|
||||
tex.needsUpdate = true;
|
||||
});
|
||||
return tex;
|
||||
}
|
||||
|
||||
// height shading: darker in carves, subtle lift with elevation — cheap depth cueing
|
||||
function shade(h) {
|
||||
const s = h < -0.02 ? 0.72 + 0.1 * h : Math.min(1, 0.9 + h * 0.06);
|
||||
return Math.max(0.55, s);
|
||||
}
|
||||
|
||||
export function buildGround(park) {
|
||||
const heightAt = makeHeightAt(park);
|
||||
const B = park.bounds;
|
||||
const x0 = B.x0 - GRID_PAD, x1 = B.x1 + GRID_PAD, z0 = B.z0 - GRID_PAD, z1 = B.z1 + GRID_PAD;
|
||||
const nx = Math.round((x1 - x0) / GRID_RES) + 1, nz = Math.round((z1 - z0) / GRID_RES) + 1;
|
||||
const pos = new Float32Array(nx * nz * 3), col = new Float32Array(nx * nz * 3),
|
||||
uv = new Float32Array(nx * nz * 2), idx = [];
|
||||
let p = 0, q = 0;
|
||||
for (let j = 0; j < nz; j++) for (let i = 0; i < nx; i++) {
|
||||
const x = x0 + i * GRID_RES, z = z0 + j * GRID_RES, h = heightAt(x, z);
|
||||
pos[p] = x; pos[p + 1] = h; pos[p + 2] = z;
|
||||
const s = shade(h);
|
||||
col[p] = s; col[p + 1] = s; col[p + 2] = s;
|
||||
p += 3;
|
||||
uv[q++] = (x - x0) / (x1 - x0); uv[q++] = 1 - (z - z0) / (z1 - z0);
|
||||
}
|
||||
for (let j = 0; j < nz - 1; j++) for (let i = 0; i < nx - 1; i++) {
|
||||
const a = j * nx + i, b = a + 1, c = a + nx, d = c + 1;
|
||||
idx.push(a, c, b, b, c, d);
|
||||
}
|
||||
const geo = new THREE.BufferGeometry();
|
||||
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
|
||||
geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
|
||||
geo.setAttribute('uv', new THREE.BufferAttribute(uv, 2));
|
||||
geo.setIndex(idx); geo.computeVertexNormals();
|
||||
const tex = bakeGroundTexture(park, x0, x1, z0, z1);
|
||||
const mesh = new THREE.Mesh(geo,
|
||||
new THREE.MeshLambertMaterial({ map: tex, vertexColors: true }));
|
||||
mesh.receiveShadow = true;
|
||||
mesh.name = 'ground';
|
||||
return mesh;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- steel
|
||||
export function buildRails(park) {
|
||||
const grp = new THREE.Group(); grp.name = 'rails';
|
||||
const steel = new THREE.MeshStandardMaterial({ color: 0xb9bec4, metalness: 0.8, roughness: 0.35 });
|
||||
for (const r of park.rails || []) {
|
||||
const a = new THREE.Vector3(r.a[0], r.ya, r.a[1]);
|
||||
const b = new THREE.Vector3(r.b[0], r.yb, r.b[1]);
|
||||
const len = Math.max(a.distanceTo(b), 0.01);
|
||||
const bar = new THREE.Mesh(new THREE.CylinderGeometry(0.035, 0.035, len, 8), steel);
|
||||
bar.position.copy(a).add(b).multiplyScalar(0.5);
|
||||
bar.quaternion.setFromUnitVectors(new THREE.Vector3(0, 1, 0), b.clone().sub(a).normalize());
|
||||
bar.userData.railId = r.id;
|
||||
grp.add(bar);
|
||||
if (r.kind === 'rail') {
|
||||
for (const t of [0.12, 0.88]) {
|
||||
const p = a.clone().lerp(b, t);
|
||||
const post = new THREE.Mesh(new THREE.CylinderGeometry(0.025, 0.025, Math.max(p.y, 0.05), 6), steel);
|
||||
post.position.set(p.x, p.y / 2, p.z);
|
||||
post.userData.railId = r.id;
|
||||
grp.add(post);
|
||||
}
|
||||
}
|
||||
}
|
||||
return grp;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- props
|
||||
const fig = (s, trunkM, leafM) => { // builtin Moreton Bay fig
|
||||
const grp = new THREE.Group();
|
||||
const trunk = new THREE.Mesh(new THREE.CylinderGeometry(0.28 * s, 0.42 * s, 2.6 * s, 7), trunkM);
|
||||
trunk.position.y = 1.3 * s; grp.add(trunk);
|
||||
for (const [ox, oy, oz, r] of [[0, 3.1, 0, 2.4], [1.4, 2.6, 0.7, 1.7], [-1.3, 2.7, -0.6, 1.6]]) {
|
||||
const m = new THREE.Mesh(new THREE.SphereGeometry(r * s, 10, 8), leafM);
|
||||
m.position.set(ox * s, oy * s, oz * s); grp.add(m);
|
||||
}
|
||||
return grp;
|
||||
};
|
||||
|
||||
export function buildProps(park, heightAt, onLoaded) {
|
||||
const grp = new THREE.Group(); grp.name = 'props';
|
||||
const loader = new GLTFLoader();
|
||||
const trunkM = new THREE.MeshLambertMaterial({ color: 0x5b4632 });
|
||||
const leafM = new THREE.MeshLambertMaterial({ color: 0x2e5b2a });
|
||||
for (const pr of park.props || []) {
|
||||
const place = obj => {
|
||||
obj.position.set(pr.x, heightAt(pr.x, pr.z) + (pr.y || 0), pr.z);
|
||||
obj.rotation.y = pr.rot || 0;
|
||||
const s = pr.scale || 1;
|
||||
if (pr.src !== 'builtin:fig') obj.scale.setScalar(s);
|
||||
obj.userData.propId = pr.id;
|
||||
obj.traverse(o => { o.userData.propId = pr.id; });
|
||||
grp.add(obj);
|
||||
if (onLoaded) onLoaded(pr, obj);
|
||||
};
|
||||
if (pr.src === 'builtin:fig') place(fig(pr.scale || 1, trunkM, leafM));
|
||||
else loader.load(pr.src, g => place(g.scene),
|
||||
undefined, () => console.warn('prop failed', pr.src));
|
||||
}
|
||||
return grp;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- letters
|
||||
export function buildLetters(park, heightAt) {
|
||||
return (park.letters || []).map(L => {
|
||||
const cv = document.createElement('canvas'); cv.width = cv.height = 128;
|
||||
const cx = cv.getContext('2d');
|
||||
cx.fillStyle = '#ffd93b'; cx.strokeStyle = '#2b2b2b'; cx.lineWidth = 10;
|
||||
cx.font = 'bold 104px monospace'; cx.textAlign = 'center'; cx.textBaseline = 'middle';
|
||||
cx.strokeText(L.ch, 64, 70); cx.fillText(L.ch, 64, 70);
|
||||
const tex = new THREE.CanvasTexture(cv);
|
||||
const spr = new THREE.Mesh(new THREE.PlaneGeometry(0.9, 0.9),
|
||||
new THREE.MeshBasicMaterial({ map: tex, transparent: true, side: THREE.DoubleSide }));
|
||||
const base = heightAt(L.x, L.z);
|
||||
spr.position.set(L.x, Math.max(base, 0) + L.y, L.z);
|
||||
spr.userData = { ch: L.ch, taken: false, baseY: spr.position.y, letterId: L.id };
|
||||
return spr;
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- whole scene
|
||||
// Returns the same shape bookquoy's buildLevel returns, so exports are drop-ins.
|
||||
export function buildParkScene(scene, park, opts = {}) {
|
||||
const heightAt = makeHeightAt(park);
|
||||
const ground = buildGround(park);
|
||||
scene.add(ground);
|
||||
const rails = buildRails(park);
|
||||
scene.add(rails);
|
||||
const props = buildProps(park, heightAt, opts.onPropLoaded);
|
||||
scene.add(props);
|
||||
let letterMeshes = [];
|
||||
if (!opts.skipLetters) {
|
||||
letterMeshes = buildLetters(park, heightAt);
|
||||
for (const m of letterMeshes) scene.add(m);
|
||||
}
|
||||
return { ground, rails, props, letterMeshes };
|
||||
}
|
||||
98
js/parkcheck.js
Normal file
98
js/parkcheck.js
Normal file
@ -0,0 +1,98 @@
|
||||
// SKATEMAKER PRO — park design linter. Encodes the real-park design brief
|
||||
// (docs/DESIGN_PRINCIPLES.md) as live checks over the park data. World units are
|
||||
// metres: street trannies want r 1.8-2.4, bowls 2.7-3.4, run-outs 3-4.5m of flat.
|
||||
import { makeHeightAt, elementOutline } from './parkmath.js';
|
||||
|
||||
const STREET_KINDS = new Set(['ledge', 'funbox', 'stairs', 'pyramid']);
|
||||
const TRANNY_KINDS = new Set(['quarter', 'spine', 'bowl', 'bank', 'mogul']);
|
||||
|
||||
export function checkPark(park) {
|
||||
const out = [];
|
||||
const warn = (sel, msg) => out.push({ sel, msg });
|
||||
const heightAt = makeHeightAt(park);
|
||||
const els = park.elements || [];
|
||||
|
||||
// --- pumping geometry: transition radii in the natural-feel band
|
||||
for (const e of els) {
|
||||
if (e.kind === 'quarter') {
|
||||
const r = Math.min(e.r0, e.r1);
|
||||
if (r < 0.9) warn({ type: 'element', id: e.id },
|
||||
`tight quarter (r ${r}) — pumping geometry wants ~1.8–2.4m for street flow`);
|
||||
}
|
||||
if (e.kind === 'spine' && e.r < 0.9)
|
||||
warn({ type: 'element', id: e.id },
|
||||
`tight spine (r ${e.r}) — hard to pump; 1.2+ feels natural`);
|
||||
if (e.kind === 'bowl' && e.depth > 1.2 && e.depth > e.size * 0.45)
|
||||
warn({ type: 'element', id: e.id },
|
||||
`bowl walls near-vertical (depth ${e.depth} vs size ${e.size}) — deep bowls want 2.7–3.4m radii`);
|
||||
}
|
||||
|
||||
// --- run-outs: flat clear concrete along the facing direction of ramps
|
||||
const isObstacleAt = (x, z, ignore) => {
|
||||
const B = park.bounds;
|
||||
if (x < B.x0 || x > B.x1 || z < B.z0 || z > B.z1) return true; // grass = no run-out
|
||||
return heightAt(x, z) > 0.16;
|
||||
};
|
||||
for (const e of els) {
|
||||
if (!['quarter', 'bank', 'stairs'].includes(e.kind)) continue;
|
||||
const rot = e.rot || 0, c = Math.cos(rot), s = Math.sin(rot);
|
||||
const start = e.kind === 'quarter' ? Math.max(e.r0, e.r1)
|
||||
: e.kind === 'bank' ? e.run : e.steps * e.going;
|
||||
let clear = 0;
|
||||
for (let d = 0.5; d <= 4.5; d += 0.5) {
|
||||
const v = start + d;
|
||||
const x = e.x - v * s, z = e.z + v * c; // +v dir = (-sin, cos)
|
||||
if (isObstacleAt(x, z)) break;
|
||||
clear = d;
|
||||
}
|
||||
if (clear < 3) warn({ type: 'element', id: e.id },
|
||||
`short run-out (${clear.toFixed(1)}m clear) — landings want 3–4.5m of flat before the next thing`);
|
||||
}
|
||||
|
||||
// --- collision-free traffic: heavy footprint overlaps between big elements
|
||||
const boxes = els.filter(e => e.kind !== 'mogul' && e.kind !== 'dome').map(e => {
|
||||
const pts = elementOutline(e);
|
||||
const xs = pts.map(p => p[0]), zs = pts.map(p => p[1]);
|
||||
return { e, x0: Math.min(...xs), x1: Math.max(...xs), z0: Math.min(...zs), z1: Math.max(...zs) };
|
||||
});
|
||||
for (let i = 0; i < boxes.length; i++) for (let j = i + 1; j < boxes.length; j++) {
|
||||
const a = boxes[i], b = boxes[j];
|
||||
const ox = Math.min(a.x1, b.x1) - Math.max(a.x0, b.x0);
|
||||
const oz = Math.min(a.z1, b.z1) - Math.max(a.z0, b.z0);
|
||||
if (ox > 1.2 && oz > 1.2)
|
||||
warn({ type: 'element', id: a.e.id },
|
||||
`${a.e.kind} overlaps ${b.e.kind} — crossing lines create bail zones (intentional combos are fine)`);
|
||||
}
|
||||
|
||||
// --- skill tiering: someone has to be able to learn here
|
||||
const ledges = els.filter(e => e.kind === 'ledge');
|
||||
if (ledges.length >= 2 && !ledges.some(e => e.h <= 0.28))
|
||||
warn(null, 'no micro-ledge (≤0.25m) — beginners need low tier features off the main lines');
|
||||
const qs = els.filter(e => e.kind === 'quarter');
|
||||
if (qs.length >= 2 && !qs.some(e => Math.min(e.r0, e.r1) <= 1.0))
|
||||
warn(null, 'all quarters are big — add a mellow one so beginners can drop in');
|
||||
|
||||
// --- terrain balance: street vs transition
|
||||
const street = els.filter(e => STREET_KINDS.has(e.kind)).length;
|
||||
const tranny = els.filter(e => TRANNY_KINDS.has(e.kind)).length;
|
||||
if (street + tranny >= 6) {
|
||||
if (street === 0) warn(null, 'all transition, no street — add ledges/stairs/flat rails');
|
||||
if (tranny === 0) warn(null, 'all street, no transition — add quarters/banks/spines');
|
||||
}
|
||||
|
||||
// --- steel: rails floating or buried
|
||||
for (const r of park.rails || []) {
|
||||
const ha = heightAt(r.a[0], r.a[1]), hb = heightAt(r.b[0], r.b[1]);
|
||||
if (r.ya < ha - 0.05 || r.yb < hb - 0.05)
|
||||
warn({ type: 'rail', id: r.id }, `"${r.name}" is buried in concrete — raise ya/yb`);
|
||||
if (r.ya - ha > 1.6 || r.yb - hb > 1.6)
|
||||
warn({ type: 'rail', id: r.id }, `"${r.name}" floats way above the deck — grinds will feel wrong`);
|
||||
}
|
||||
|
||||
// --- spawn sanity
|
||||
const sp = park.spawn;
|
||||
if (heightAt(sp.x, sp.z) > 0.5)
|
||||
warn({ type: 'spawn' }, 'spawn is on top of an obstacle — riders drop in blind');
|
||||
|
||||
return out;
|
||||
}
|
||||
253
js/parkmath.js
Normal file
253
js/parkmath.js
Normal file
@ -0,0 +1,253 @@
|
||||
// SKATEMAKER PRO — park math. The whole religion in one file:
|
||||
// a park is DATA (elements list), and heightAt(x,z) evaluated from that data is the
|
||||
// single source of truth for the visual mesh AND the collision. Same lesson as BOOKQUOY.
|
||||
//
|
||||
// Every element lives in a rotated local frame: u along the element, v across it.
|
||||
// u_dir = ( cos rot, sin rot ) in (x,z)
|
||||
// v_dir = (-sin rot, cos rot ) — ramps descend toward +v ("facing").
|
||||
|
||||
const clamp = (v, a, b) => Math.min(b, Math.max(a, v));
|
||||
const sstep = t => { t = clamp(t, 0, 1); return t * t * (3 - 2 * t); };
|
||||
|
||||
// quarter-pipe transition: d = distance from the wall, r = radius. h(0)=r, h(r)=0.
|
||||
export function tranny(d, r) {
|
||||
if (d >= r) return 0;
|
||||
if (d <= 0) return r;
|
||||
const q = r - d;
|
||||
return r - Math.sqrt(Math.max(r * r - q * q, 0));
|
||||
}
|
||||
|
||||
function local(e, x, z) { // world (x,z) -> element-local (u,v)
|
||||
const dx = x - e.x, dz = z - e.z, c = Math.cos(e.rot || 0), s = Math.sin(e.rot || 0);
|
||||
return [dx * c + dz * s, -dx * s + dz * c];
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- element kinds
|
||||
// Each returns a height contribution (concrete = max of all). Bowls carve (override).
|
||||
export const ELEMENT_KINDS = {
|
||||
quarter: { // straight QP, escalating radius, optional lump + deck
|
||||
label: 'Quarter Pipe',
|
||||
defaults: { len: 8, r0: 1.2, r1: 1.2, lump: 0, deck: 0.6 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
if (Math.abs(u) > e.len / 2) return 0;
|
||||
let r = e.r0 + (e.r1 - e.r0) * sstep(u / e.len + 0.5);
|
||||
if (e.lump) r += e.lump * Math.sin(u * 0.9);
|
||||
if (v < -e.deck) return 0;
|
||||
if (v <= 0) return r; // deck behind the coping
|
||||
return tranny(v, r);
|
||||
},
|
||||
},
|
||||
bank: {
|
||||
label: 'Bank',
|
||||
defaults: { len: 6, h: 0.9, run: 2.4, deck: 0.5 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
if (Math.abs(u) > e.len / 2 || v < -e.deck || v >= e.run) return 0;
|
||||
return v <= 0 ? e.h : e.h * (1 - v / e.run);
|
||||
},
|
||||
},
|
||||
funbox: { // soft-skirted box (bookquoy funbox)
|
||||
label: 'Funbox',
|
||||
defaults: { hw: 2.5, hd: 1.2, h: 0.9, skirt: 1.6 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
const d = Math.max(Math.abs(u) - e.hw, Math.abs(v) - e.hd);
|
||||
if (d <= 0) return e.h;
|
||||
if (d >= e.skirt) return 0;
|
||||
return e.h * (1 - d / e.skirt);
|
||||
},
|
||||
},
|
||||
ledge: { // sharp-sided plateau / manual pad / grind ledge
|
||||
label: 'Ledge / Pad',
|
||||
defaults: { hw: 1.5, hd: 0.8, h: 0.45 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
return (Math.abs(u) <= e.hw && Math.abs(v) <= e.hd) ? e.h : 0;
|
||||
},
|
||||
},
|
||||
mogul: { // gaussian bump / volcano
|
||||
label: 'Mogul / Volcano',
|
||||
defaults: { h: 0.6, s: 2.4 },
|
||||
height(e, x, z) {
|
||||
const r2 = (x - e.x) ** 2 + (z - e.z) ** 2;
|
||||
return e.h * Math.exp(-r2 / (e.s * e.s));
|
||||
},
|
||||
},
|
||||
spine: { // back-to-back quarters along u
|
||||
label: 'Spine',
|
||||
defaults: { len: 8, r: 1.2 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
if (Math.abs(u) > e.len / 2) return 0;
|
||||
const d = Math.abs(v);
|
||||
return d >= e.r ? 0 : tranny(d, e.r);
|
||||
},
|
||||
},
|
||||
pyramid: { // 4-sided bank pyramid with flat top
|
||||
label: 'Pyramid',
|
||||
defaults: { hw: 3, hd: 3, h: 1.0, run: 2.2 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
const d = Math.max(Math.abs(u) - e.hw, Math.abs(v) - e.hd);
|
||||
if (d <= 0) return e.h;
|
||||
if (d >= e.run) return 0;
|
||||
return e.h * (1 - d / e.run);
|
||||
},
|
||||
},
|
||||
stairs: { // platform + steps descending toward +v
|
||||
label: 'Stairs',
|
||||
defaults: { width: 4.8, h: 0.6, steps: 4, going: 0.6, platDepth: 3.2 },
|
||||
height(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
if (Math.abs(u) > e.width / 2) return 0;
|
||||
if (v <= 0) return v >= -e.platDepth ? e.h : 0;
|
||||
const total = e.steps * e.going;
|
||||
if (v >= total) return 0;
|
||||
const rise = e.h / e.steps;
|
||||
const step = Math.floor(v / e.going);
|
||||
return e.h - rise * (step + 1);
|
||||
},
|
||||
},
|
||||
dome: { // elliptical pad (grass island, kerbed pad)
|
||||
label: 'Island Pad',
|
||||
defaults: { rx: 7, rz: 4.5, h: 0.14 },
|
||||
height(e, x, z) {
|
||||
const c = Math.cos(e.rot || 0), s = Math.sin(e.rot || 0);
|
||||
const dx = x - e.x, dz = z - e.z;
|
||||
const u = (dx * c + dz * s) / e.rx, v = (-dx * s + dz * c) / e.rz;
|
||||
return u * u + v * v < 1 ? e.h : 0;
|
||||
},
|
||||
},
|
||||
bowl: { // CARVES negative space. Override, not max.
|
||||
label: 'Bowl',
|
||||
defaults: { size: 4.2, depth: 1.5 },
|
||||
carve: true,
|
||||
height(e, x, z) { // returns carve value, caller checks inside()
|
||||
const [u, v] = local(e, x, z);
|
||||
const dw = Math.min(e.size - Math.abs(u), e.size - Math.abs(v));
|
||||
return -e.depth + tranny(Math.min(dw, e.depth), e.depth);
|
||||
},
|
||||
inside(e, x, z) {
|
||||
const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) < e.size && Math.abs(v) < e.size;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
// ---------------------------------------------------------------- evaluation
|
||||
export function elementHeight(e, x, z) {
|
||||
const k = ELEMENT_KINDS[e.kind];
|
||||
return k ? k.height(e, x, z) : 0;
|
||||
}
|
||||
|
||||
// makeHeightAt(park) -> heightAt(x,z). Closure over the data; rebuild-free (data is live).
|
||||
export function makeHeightAt(park) {
|
||||
return function heightAt(x, z) {
|
||||
const B = park.bounds;
|
||||
const inPark = x >= B.x0 && x <= B.x1 && z >= B.z0 && z <= B.z1;
|
||||
if (!inPark) { // parkland grass rising gently away
|
||||
const dx = Math.max(B.x0 - x, x - B.x1, 0);
|
||||
const dz = Math.max(B.z0 - z, z - B.z1, 0);
|
||||
return 0.25 + 0.09 * Math.hypot(dx, dz);
|
||||
}
|
||||
let h = 0;
|
||||
for (const e of park.elements) {
|
||||
const k = ELEMENT_KINDS[e.kind];
|
||||
if (!k) continue;
|
||||
if (k.carve) {
|
||||
if (k.inside(e, x, z)) return k.height(e, x, z); // bowls own their footprint
|
||||
continue;
|
||||
}
|
||||
const eh = k.height(e, x, z);
|
||||
if (eh > h) h = eh;
|
||||
}
|
||||
return h;
|
||||
};
|
||||
}
|
||||
|
||||
export function makeNormalAt(heightAt) {
|
||||
return function normalAt(x, z, out) {
|
||||
const e = 0.18;
|
||||
const hx = heightAt(x + e, z) - heightAt(x - e, z);
|
||||
const hz = heightAt(x, z + e) - heightAt(x, z - e);
|
||||
out.set(-hx, 2 * e, -hz).normalize();
|
||||
return out;
|
||||
};
|
||||
}
|
||||
|
||||
// footprint hit-test for the editor (generous margins so small things stay clickable)
|
||||
export function elementHit(e, x, z) {
|
||||
const M = 0.4;
|
||||
const k = ELEMENT_KINDS[e.kind];
|
||||
if (!k) return false;
|
||||
switch (e.kind) {
|
||||
case 'quarter': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.len / 2 + M && v >= -e.deck - M && v <= Math.max(e.r0, e.r1) + M; }
|
||||
case 'bank': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.len / 2 + M && v >= -e.deck - M && v <= e.run + M; }
|
||||
case 'funbox': case 'pyramid': { const [u, v] = local(e, x, z);
|
||||
const sk = e.skirt ?? e.run;
|
||||
return Math.abs(u) <= e.hw + sk + M && Math.abs(v) <= e.hd + sk + M; }
|
||||
case 'ledge': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.hw + M && Math.abs(v) <= e.hd + M; }
|
||||
case 'mogul': return Math.hypot(x - e.x, z - e.z) <= e.s + M;
|
||||
case 'spine': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.len / 2 + M && Math.abs(v) <= e.r + M; }
|
||||
case 'stairs': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.width / 2 + M && v >= -e.platDepth - M && v <= e.steps * e.going + M; }
|
||||
case 'dome': { const c = Math.cos(e.rot || 0), s = Math.sin(e.rot || 0);
|
||||
const dx = x - e.x, dz = z - e.z;
|
||||
const u = (dx * c + dz * s) / (e.rx + M), v = (-dx * s + dz * c) / (e.rz + M);
|
||||
return u * u + v * v < 1; }
|
||||
case 'bowl': { const [u, v] = local(e, x, z);
|
||||
return Math.abs(u) <= e.size + M && Math.abs(v) <= e.size + M; }
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// footprint outline (world-space [x,z] loop) for selection highlights
|
||||
export function elementOutline(e) {
|
||||
const rot = e.rot || 0, c = Math.cos(rot), s = Math.sin(rot);
|
||||
const W = (u, v) => [e.x + u * c - v * s, e.z + u * s + v * c];
|
||||
const rect = (u0, u1, v0, v1) => [W(u0, v0), W(u1, v0), W(u1, v1), W(u0, v1)];
|
||||
switch (e.kind) {
|
||||
case 'quarter': return rect(-e.len / 2, e.len / 2, -e.deck, Math.max(e.r0, e.r1));
|
||||
case 'bank': return rect(-e.len / 2, e.len / 2, -e.deck, e.run);
|
||||
case 'funbox': return rect(-e.hw - e.skirt, e.hw + e.skirt, -e.hd - e.skirt, e.hd + e.skirt);
|
||||
case 'pyramid': return rect(-e.hw - e.run, e.hw + e.run, -e.hd - e.run, e.hd + e.run);
|
||||
case 'ledge': return rect(-e.hw, e.hw, -e.hd, e.hd);
|
||||
case 'mogul': { const pts = []; for (let i = 0; i < 24; i++) {
|
||||
const a = i / 24 * Math.PI * 2; pts.push([e.x + Math.cos(a) * e.s, e.z + Math.sin(a) * e.s]); }
|
||||
return pts; }
|
||||
case 'spine': return rect(-e.len / 2, e.len / 2, -e.r, e.r);
|
||||
case 'stairs': return rect(-e.width / 2, e.width / 2, -e.platDepth, e.steps * e.going);
|
||||
case 'dome': { const pts = []; for (let i = 0; i < 24; i++) {
|
||||
const a = i / 24 * Math.PI * 2;
|
||||
pts.push(W(Math.cos(a) * e.rx, Math.sin(a) * e.rz)); }
|
||||
return pts; }
|
||||
case 'bowl': return rect(-e.size, e.size, -e.size, e.size);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- park scaffolding
|
||||
let idCounter = 1;
|
||||
export const newId = () => 'e' + (idCounter++) + '_' + ((Math.random() * 1e6) | 0).toString(36);
|
||||
|
||||
export function newElement(kind, x, z) {
|
||||
const k = ELEMENT_KINDS[kind];
|
||||
return { id: newId(), kind, x: +x.toFixed(2), z: +z.toFixed(2), rot: 0,
|
||||
...structuredClone(k.defaults) };
|
||||
}
|
||||
|
||||
export function emptyPark(name = 'NEW PARK') {
|
||||
return {
|
||||
name,
|
||||
bounds: { x0: -30, x1: 30, z0: -20, z1: 20 },
|
||||
slabColor: '#7fae6f',
|
||||
grassColor: '#4d7c3c',
|
||||
spawn: { x: -20, z: -12, heading: 0.8 },
|
||||
elements: [], rails: [], gaps: [], letters: [], zones: [], decals: [], props: [],
|
||||
};
|
||||
}
|
||||
120
js/testride.js
Normal file
120
js/testride.js
Normal file
@ -0,0 +1,120 @@
|
||||
// SKATEMAKER PRO — test ride. The Create-A-Park lesson: the instant build↔skate
|
||||
// toggle is what makes an editor sing. Simplified bookquoy physics over the live
|
||||
// park data — same heightAt, same constants, so speed and pop feel like the game.
|
||||
import * as THREE from 'three';
|
||||
import { makeHeightAt, makeNormalAt } from './parkmath.js';
|
||||
|
||||
const GRAV = 18, MAX_SPEED = 10.5, PUSH_ACC = 6.5, FRICTION = 0.28, STEER = 2.6;
|
||||
|
||||
export function attachTestRide(ed) {
|
||||
const keys = new Set();
|
||||
let rider = null, heightAt = null, normalAt = null;
|
||||
let pos, heading = 0, speed = 0, vy = 0, state = 'roll';
|
||||
const N = new THREE.Vector3();
|
||||
const camTarget = new THREE.Vector3();
|
||||
let savedCam = null;
|
||||
|
||||
function makeRider() {
|
||||
const g = new THREE.Group();
|
||||
const deck = new THREE.Mesh(new THREE.BoxGeometry(0.22, 0.03, 0.82),
|
||||
new THREE.MeshStandardMaterial({ color: 0xd8a13a, roughness: 0.6 }));
|
||||
deck.position.y = 0.1; g.add(deck);
|
||||
const wheelM = new THREE.MeshStandardMaterial({ color: 0xf5f0e6, roughness: 0.4 });
|
||||
for (const [dx, dz] of [[-0.08, 0.3], [0.08, 0.3], [-0.08, -0.3], [0.08, -0.3]]) {
|
||||
const w = new THREE.Mesh(new THREE.CylinderGeometry(0.045, 0.045, 0.04, 10), wheelM);
|
||||
w.rotation.z = Math.PI / 2; w.position.set(dx, 0.05, dz); g.add(w);
|
||||
}
|
||||
const body = new THREE.Mesh(new THREE.CapsuleGeometry(0.16, 0.75, 4, 10),
|
||||
new THREE.MeshStandardMaterial({ color: 0x3a86ff, roughness: 0.7 }));
|
||||
body.position.y = 0.75; g.add(body);
|
||||
const head = new THREE.Mesh(new THREE.SphereGeometry(0.13, 12, 10),
|
||||
new THREE.MeshStandardMaterial({ color: 0xe8b98a, roughness: 0.8 }));
|
||||
head.position.y = 1.42; g.add(head);
|
||||
return g;
|
||||
}
|
||||
|
||||
function start() {
|
||||
heightAt = makeHeightAt(ed.park);
|
||||
normalAt = makeNormalAt(heightAt);
|
||||
const s = ed.park.spawn;
|
||||
pos = new THREE.Vector3(s.x, heightAt(s.x, s.z), s.z);
|
||||
heading = s.heading; speed = 0; vy = 0; state = 'roll';
|
||||
rider = makeRider();
|
||||
ed.scene.add(rider);
|
||||
savedCam = { p: ed.cam.position.clone(), t: ed.controls.target.clone() };
|
||||
ed.controls.enabled = false;
|
||||
ed.testing = true;
|
||||
ed.emit('test', true);
|
||||
ed.emit('status', 'TEST RIDE — W push · A/D steer · S brake · SPACE ollie · R respawn · ENTER back to editing');
|
||||
}
|
||||
function stop() {
|
||||
if (rider) ed.scene.remove(rider);
|
||||
rider = null;
|
||||
ed.testing = false;
|
||||
ed.controls.enabled = true;
|
||||
if (savedCam) { ed.cam.position.copy(savedCam.p); ed.controls.target.copy(savedCam.t); }
|
||||
ed.setExtraUpdate(null);
|
||||
ed.emit('test', false);
|
||||
ed.emit('status', 'back to building');
|
||||
}
|
||||
|
||||
function update(dt) {
|
||||
const fwd = new THREE.Vector3(Math.sin(heading), 0, Math.cos(heading));
|
||||
if (state === 'roll') {
|
||||
if (keys.has('KeyA') || keys.has('ArrowLeft')) heading += STEER * dt;
|
||||
if (keys.has('KeyD') || keys.has('ArrowRight')) heading -= STEER * dt;
|
||||
if (keys.has('KeyW') || keys.has('ArrowUp')) speed = Math.min(speed + PUSH_ACC * dt, MAX_SPEED);
|
||||
if (keys.has('KeyS') || keys.has('ArrowDown')) speed = Math.max(speed - 14 * dt, 0);
|
||||
normalAt(pos.x, pos.z, N);
|
||||
speed += -(N.x * fwd.x + N.z * fwd.z) * GRAV * dt * 1.4; // slope pulls
|
||||
speed -= FRICTION * dt * speed * 0.4;
|
||||
speed = Math.max(0, Math.min(speed, 16));
|
||||
pos.x += fwd.x * speed * dt; pos.z += fwd.z * speed * dt;
|
||||
const h = heightAt(pos.x, pos.z);
|
||||
const dh = h - pos.y;
|
||||
if (dh < -0.12) { // rolled off something
|
||||
state = 'air'; vy = Math.max(-2, dh / dt * 0.2);
|
||||
} else {
|
||||
pos.y = h;
|
||||
if (keys.has('Space')) { state = 'air'; vy = 4.6 + speed * 0.12; }
|
||||
}
|
||||
} else {
|
||||
vy -= GRAV * dt;
|
||||
pos.x += fwd.x * speed * dt; pos.z += fwd.z * speed * dt; pos.y += vy * dt;
|
||||
const h = heightAt(pos.x, pos.z);
|
||||
if (pos.y <= h) { pos.y = h; state = 'roll'; vy = 0; }
|
||||
}
|
||||
if (keys.has('KeyR')) {
|
||||
const s = ed.park.spawn;
|
||||
pos.set(s.x, heightAt(s.x, s.z), s.z); heading = s.heading; speed = 0; state = 'roll';
|
||||
}
|
||||
rider.position.copy(pos);
|
||||
rider.rotation.y = heading;
|
||||
if (state === 'roll') {
|
||||
normalAt(pos.x, pos.z, N);
|
||||
const tilt = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 1, 0), N);
|
||||
rider.quaternion.slerp(tilt.multiply(new THREE.Quaternion()
|
||||
.setFromAxisAngle(new THREE.Vector3(0, 1, 0), heading)), 0.25);
|
||||
}
|
||||
// bookquoy chase cam
|
||||
const back = 5.2, up = 2.4;
|
||||
const cx = pos.x - Math.sin(heading) * back, cz = pos.z - Math.cos(heading) * back;
|
||||
const cy = Math.max(pos.y + up, heightAt(cx, cz) + 1.2);
|
||||
ed.cam.position.lerp(new THREE.Vector3(cx, cy, cz), 1 - Math.pow(0.0015, dt));
|
||||
camTarget.lerp(new THREE.Vector3(pos.x, pos.y + 1.1, pos.z), 1 - Math.pow(0.0005, dt));
|
||||
ed.cam.lookAt(camTarget);
|
||||
}
|
||||
|
||||
ed.toggleTest = () => {
|
||||
if (ed.testing) stop();
|
||||
else { start(); ed.setExtraUpdate(update); }
|
||||
};
|
||||
|
||||
addEventListener('keydown', e => {
|
||||
if (e.code === 'Enter' && !['INPUT', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) {
|
||||
ed.toggleTest(); return;
|
||||
}
|
||||
if (ed.testing) { keys.add(e.code); if (e.code === 'Space') e.preventDefault(); }
|
||||
});
|
||||
addEventListener('keyup', e => keys.delete(e.code));
|
||||
}
|
||||
459
js/ui.js
Normal file
459
js/ui.js
Normal file
@ -0,0 +1,459 @@
|
||||
// SKATEMAKER PRO — DOM panels. Everything talks to the editor through its tiny API:
|
||||
// setTool / select / updateSelected / commit / loadPark. No three.js in here.
|
||||
import { ELEMENT_KINDS } from './parkmath.js';
|
||||
import { checkPark } from './parkcheck.js';
|
||||
import { downloadParkJSON, downloadLevelJS } from './export.js';
|
||||
import * as MB from './modelbeast.js';
|
||||
|
||||
const $ = (sel, root = document) => root.querySelector(sel);
|
||||
const el = (tag, cls, html) => {
|
||||
const n = document.createElement(tag);
|
||||
if (cls) n.className = cls;
|
||||
if (html !== undefined) n.innerHTML = html;
|
||||
return n;
|
||||
};
|
||||
|
||||
// numeric param rows: [key, label, min, max, step]
|
||||
const DEG = Math.PI / 180;
|
||||
const COMMON_XZ = [['x', 'x', -60, 60, 0.1], ['z', 'z', -40, 40, 0.1]];
|
||||
const PARAMS = {
|
||||
quarter: [['len', 'length', 1, 80, 0.5], ['r0', 'radius a', 0.3, 4, 0.05],
|
||||
['r1', 'radius b', 0.3, 4, 0.05], ['lump', 'lumpiness', 0, 0.3, 0.01],
|
||||
['deck', 'deck', 0, 4, 0.1]],
|
||||
bank: [['len', 'length', 1, 80, 0.5], ['h', 'height', 0.1, 3, 0.05],
|
||||
['run', 'run', 0.5, 8, 0.1], ['deck', 'deck', 0, 4, 0.1]],
|
||||
funbox: [['hw', 'half width', 0.3, 10, 0.1], ['hd', 'half depth', 0.3, 10, 0.1],
|
||||
['h', 'height', 0.1, 2.5, 0.05], ['skirt', 'skirt', 0.2, 4, 0.1]],
|
||||
ledge: [['hw', 'half width', 0.2, 14, 0.1], ['hd', 'half depth', 0.2, 14, 0.1],
|
||||
['h', 'height', 0.05, 1.5, 0.01]],
|
||||
mogul: [['h', 'height', 0.1, 2, 0.05], ['s', 'spread', 0.5, 6, 0.1]],
|
||||
spine: [['len', 'length', 1, 30, 0.5], ['r', 'radius', 0.4, 3, 0.05]],
|
||||
pyramid: [['hw', 'half width', 0.5, 10, 0.1], ['hd', 'half depth', 0.5, 10, 0.1],
|
||||
['h', 'height', 0.2, 3, 0.05], ['run', 'run', 0.5, 6, 0.1]],
|
||||
stairs: [['width', 'width', 1, 12, 0.2], ['h', 'drop', 0.2, 2.4, 0.05],
|
||||
['steps', 'steps', 2, 12, 1], ['going', 'going', 0.3, 1.2, 0.05],
|
||||
['platDepth', 'platform', 0.5, 8, 0.1]],
|
||||
dome: [['rx', 'radius x', 0.5, 14, 0.1], ['rz', 'radius z', 0.5, 14, 0.1],
|
||||
['h', 'height', 0.05, 1, 0.01]],
|
||||
bowl: [['size', 'half size', 1.5, 10, 0.1], ['depth', 'depth', 0.5, 3.4, 0.05]],
|
||||
};
|
||||
const PALETTE = [
|
||||
['quarter', 'QUARTER'], ['bank', 'BANK'], ['funbox', 'FUNBOX'], ['pyramid', 'PYRAMID'],
|
||||
['ledge', 'LEDGE'], ['stairs', 'STAIRS'], ['spine', 'SPINE'], ['mogul', 'MOGUL'],
|
||||
['bowl', 'BOWL'], ['dome', 'ISLAND'],
|
||||
];
|
||||
const SPOTS = [
|
||||
['rail', 'RAIL', { mode: 'rail' }], ['gap', 'GAP', { mode: 'gap' }],
|
||||
['letter', 'LETTER', { mode: 'letter' }], ['spawn', 'SPAWN', { mode: 'spawn' }],
|
||||
['zone', 'PAINT', { mode: 'zone' }],
|
||||
];
|
||||
|
||||
export function initUI(ed) {
|
||||
const palette = $('#palette'), inspector = $('#inspector'),
|
||||
status = $('#status'), drawer = $('#drawer');
|
||||
|
||||
const setStatus = t => { status.textContent = t; };
|
||||
ed.on('status', setStatus);
|
||||
|
||||
// ---------------------------------------------------------------- palette
|
||||
function buildPalette() {
|
||||
palette.innerHTML = '<div class="ptitle">BUILD</div>';
|
||||
const grid = el('div', 'pgrid'); palette.append(grid);
|
||||
for (const [kind, label] of PALETTE) {
|
||||
const b = el('button', 'pbtn', label);
|
||||
b.dataset.tool = 'place:' + kind;
|
||||
b.onclick = () => ed.setTool(ed.tool?.kind === kind ? null : { mode: 'place', kind });
|
||||
grid.append(b);
|
||||
}
|
||||
palette.append(el('div', 'ptitle', 'SPOTS'));
|
||||
const grid2 = el('div', 'pgrid'); palette.append(grid2);
|
||||
for (const [key, label, tool] of SPOTS) {
|
||||
const b = el('button', 'pbtn', label);
|
||||
b.dataset.tool = tool.mode;
|
||||
b.onclick = () => ed.setTool(ed.tool?.mode === tool.mode ? null : { ...tool });
|
||||
grid2.append(b);
|
||||
}
|
||||
palette.append(el('div', 'ptitle', 'SURFACE'));
|
||||
const surf = el('div', 'pcol'); palette.append(surf);
|
||||
const decalBtn = el('button', 'pbtn wide', 'IMAGE DECAL…');
|
||||
decalBtn.onclick = () => pickFile('image/*', async f => {
|
||||
const path = await uploadFile(f);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ed.setTool({ mode: 'decal', img: path, w: 6, aspect: img.height / img.width });
|
||||
setStatus('decal loaded — click the ground to place it');
|
||||
};
|
||||
img.src = path;
|
||||
});
|
||||
surf.append(decalBtn);
|
||||
const underBtn = el('button', 'pbtn wide', 'REFERENCE UNDERLAY…');
|
||||
underBtn.onclick = () => pickFile('image/*', async f => {
|
||||
const path = await uploadFile(f);
|
||||
ed.park.underlay = { img: path, visible: true, opacity: 0.45, w: 90, x: 0, z: 0, rot: 0, y: 6 };
|
||||
ed.commit({ underlay: true });
|
||||
ed.select({ type: 'underlay' });
|
||||
});
|
||||
surf.append(underBtn);
|
||||
const snapRow = el('label', 'snaprow',
|
||||
'<input type="checkbox" id="snapbox"> grid snap 0.5m');
|
||||
surf.append(snapRow);
|
||||
$('#snapbox', snapRow).onchange = e => { ed.snapStep = e.target.checked ? 0.5 : 0; };
|
||||
|
||||
palette.append(el('div', 'ptitle', 'PANELS'));
|
||||
const pans = el('div', 'pcol'); palette.append(pans);
|
||||
const mbBtn = el('button', 'pbtn wide accent', 'MODELBEAST');
|
||||
mbBtn.onclick = () => toggleDrawer('mb');
|
||||
const ckBtn = el('button', 'pbtn wide', 'PARK CHECK');
|
||||
ckBtn.onclick = () => toggleDrawer('check');
|
||||
pans.append(mbBtn, ckBtn);
|
||||
}
|
||||
|
||||
ed.on('tool', () => {
|
||||
for (const b of palette.querySelectorAll('.pbtn[data-tool]')) {
|
||||
const t = b.dataset.tool;
|
||||
const active = ed.tool &&
|
||||
(t === 'place:' + (ed.tool.kind || '') || t === ed.tool.mode);
|
||||
b.classList.toggle('active', !!active);
|
||||
}
|
||||
setStatus(ed.tool ? 'click the ground to place — ESC to cancel'
|
||||
: 'click to select · drag to move · rightdrag orbit · [ ] rotate · D dupe · T top');
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------- inspector
|
||||
function row(label, input) {
|
||||
const r = el('div', 'irow');
|
||||
r.append(el('label', null, label), input);
|
||||
return r;
|
||||
}
|
||||
function numRow(obj, key, label, min, max, step, onInput) {
|
||||
const wrap = el('div', 'numwrap');
|
||||
const slider = el('input'); slider.type = 'range';
|
||||
slider.min = min; slider.max = max; slider.step = step; slider.value = obj[key] ?? 0;
|
||||
const num = el('input', 'num'); num.type = 'number';
|
||||
num.step = step; num.value = obj[key] ?? 0;
|
||||
const set = (v, done) => {
|
||||
v = +v; if (Number.isNaN(v)) return;
|
||||
slider.value = v; num.value = v;
|
||||
onInput(v, done);
|
||||
};
|
||||
slider.oninput = () => set(slider.value, false);
|
||||
slider.onchange = () => set(slider.value, true);
|
||||
num.onchange = () => set(num.value, true);
|
||||
wrap.append(slider, num);
|
||||
return row(label, wrap);
|
||||
}
|
||||
|
||||
function buildInspector() {
|
||||
inspector.innerHTML = '';
|
||||
const s = ed.selection, obj = ed.getSelected?.();
|
||||
if (s?.type === 'underlay') return buildUnderlayInspector();
|
||||
if (!s || !obj) {
|
||||
inspector.append(el('div', 'ihint',
|
||||
'nothing selected<br><br>· click a piece to edit it<br>· palette → click ground to add' +
|
||||
'<br>· ENTER to test ride<br>· ctrl-Z undo'));
|
||||
return buildParkInspector();
|
||||
}
|
||||
const title = s.type === 'element' ? ELEMENT_KINDS[obj.kind].label : s.type.toUpperCase();
|
||||
inspector.append(el('div', 'ititle', title));
|
||||
const upd = key => (v, done) => ed.updateSelected(key, v, { done });
|
||||
|
||||
if (s.type === 'element') {
|
||||
for (const [key, label, min, max, step] of COMMON_XZ)
|
||||
inspector.append(numRow(obj, key, label, min, max, step, upd(key)));
|
||||
inspector.append(numRow({ rot: (obj.rot || 0) / DEG }, 'rot', 'rotation°', -180, 180, 5,
|
||||
(v, done) => ed.updateSelected('rot', +(v * DEG).toFixed(4), { done })));
|
||||
for (const [key, label, min, max, step] of PARAMS[obj.kind] || [])
|
||||
inspector.append(numRow(obj, key, label, min, max, step, upd(key)));
|
||||
} else if (s.type === 'rail') {
|
||||
const name = el('input', 'text'); name.value = obj.name || '';
|
||||
name.onchange = () => ed.updateSelected('name', name.value, { done: true });
|
||||
inspector.append(row('name', name));
|
||||
const kind = el('select');
|
||||
kind.innerHTML = '<option value="rail">rail (posts)</option><option value="ledge">ledge cap</option>';
|
||||
kind.value = obj.kind;
|
||||
kind.onchange = () => ed.updateSelected('kind', kind.value, { done: true });
|
||||
inspector.append(row('type', kind));
|
||||
inspector.append(numRow(obj, 'ya', 'height a', 0, 4, 0.01, upd('ya')));
|
||||
inspector.append(numRow(obj, 'yb', 'height b', 0, 4, 0.01, upd('yb')));
|
||||
inspector.append(el('div', 'ihint', 'drag the yellow end-balls to move the ends'));
|
||||
} else if (s.type === 'gap') {
|
||||
const name = el('input', 'text'); name.value = obj.name;
|
||||
name.onchange = () => ed.updateSelected('name', name.value, { done: true });
|
||||
inspector.append(row('name', name));
|
||||
for (const [key, label, min, max, step] of COMMON_XZ)
|
||||
inspector.append(numRow(obj, key, label, min, max, step, upd(key)));
|
||||
inspector.append(numRow(obj, 'r', 'radius', 0.5, 8, 0.1, upd('r')));
|
||||
} else if (s.type === 'letter') {
|
||||
const ch = el('input', 'text'); ch.maxLength = 1; ch.value = obj.ch;
|
||||
ch.onchange = () => ed.updateSelected('ch', (ch.value || 'O').toUpperCase(), { done: true });
|
||||
inspector.append(row('letter', ch));
|
||||
inspector.append(numRow(obj, 'y', 'float height', 0.5, 6, 0.1, upd('y')));
|
||||
} else if (s.type === 'spawn') {
|
||||
inspector.append(numRow({ heading: (obj.heading || 0) / DEG }, 'heading', 'heading°', -180, 180, 5,
|
||||
(v, done) => ed.updateSelected('heading', +(v * DEG).toFixed(3), { done })));
|
||||
} else if (s.type === 'prop') {
|
||||
inspector.append(el('div', 'ihint', obj.src));
|
||||
inspector.append(numRow({ rot: (obj.rot || 0) / DEG }, 'rot', 'rotation°', -180, 180, 5,
|
||||
(v, done) => ed.updateSelected('rot', +(v * DEG).toFixed(4), { done })));
|
||||
inspector.append(numRow(obj, 'scale', 'scale', 0.05, 8, 0.05, upd('scale')));
|
||||
inspector.append(numRow({ y: obj.y || 0 }, 'y', 'lift', -2, 6, 0.05, upd('y')));
|
||||
} else if (s.type === 'zone') {
|
||||
const shape = el('select');
|
||||
shape.innerHTML = '<option value="rect">rect</option><option value="ellipse">ellipse</option>';
|
||||
shape.value = obj.shape;
|
||||
shape.onchange = () => ed.updateSelected('shape', shape.value, { done: true });
|
||||
inspector.append(row('shape', shape));
|
||||
const color = el('input'); color.type = 'color'; color.value = obj.color;
|
||||
color.oninput = () => ed.updateSelected('color', color.value, {});
|
||||
color.onchange = () => ed.updateSelected('color', color.value, { done: true });
|
||||
inspector.append(row('color', color));
|
||||
inspector.append(numRow(obj, 'hw', 'half width', 0.3, 40, 0.1, upd('hw')));
|
||||
inspector.append(numRow(obj, 'hd', 'half depth', 0.3, 40, 0.1, upd('hd')));
|
||||
inspector.append(numRow({ rot: (obj.rot || 0) / DEG }, 'rot', 'rotation°', -180, 180, 5,
|
||||
(v, done) => ed.updateSelected('rot', +(v * DEG).toFixed(4), { done })));
|
||||
inspector.append(numRow({ opacity: obj.opacity ?? 1 }, 'opacity', 'opacity', 0, 1, 0.05, upd('opacity')));
|
||||
} else if (s.type === 'decal') {
|
||||
inspector.append(numRow(obj, 'w', 'width', 0.5, 60, 0.1, (v, done) => {
|
||||
const asp = obj.h / obj.w; ed.updateSelected('w', v, {});
|
||||
ed.updateSelected('h', +(v * asp).toFixed(2), { done });
|
||||
}));
|
||||
inspector.append(numRow(obj, 'h', 'height', 0.5, 60, 0.1, upd('h')));
|
||||
inspector.append(numRow({ rot: (obj.rot || 0) / DEG }, 'rot', 'rotation°', -180, 180, 5,
|
||||
(v, done) => ed.updateSelected('rot', +(v * DEG).toFixed(4), { done })));
|
||||
inspector.append(numRow({ opacity: obj.opacity ?? 1 }, 'opacity', 'opacity', 0, 1, 0.05, upd('opacity')));
|
||||
}
|
||||
if (s.type !== 'spawn') {
|
||||
const btns = el('div', 'ibtns');
|
||||
const dup = el('button', 'pbtn', 'DUPE (D)'); dup.onclick = () => ed.duplicateSelected();
|
||||
const del = el('button', 'pbtn danger', 'DELETE'); del.onclick = () => ed.deleteSelected();
|
||||
btns.append(dup, del); inspector.append(btns);
|
||||
}
|
||||
}
|
||||
|
||||
function buildUnderlayInspector() {
|
||||
const u = ed.park.underlay;
|
||||
inspector.append(el('div', 'ititle', 'REFERENCE UNDERLAY'));
|
||||
if (!u) { inspector.append(el('div', 'ihint', 'none loaded')); return; }
|
||||
const updU = key => (v, done) => { u[key] = v; if (done !== false) ed.commit({ underlay: true, snapshot: done }); };
|
||||
inspector.append(numRow(u, 'opacity', 'opacity', 0, 1, 0.05, updU('opacity')));
|
||||
inspector.append(numRow(u, 'w', 'width (m)', 10, 300, 1, updU('w')));
|
||||
inspector.append(numRow(u, 'x', 'x', -80, 80, 0.5, updU('x')));
|
||||
inspector.append(numRow(u, 'z', 'z', -60, 60, 0.5, updU('z')));
|
||||
inspector.append(numRow(u, 'y', 'hover', 0.1, 20, 0.1, updU('y')));
|
||||
inspector.append(numRow({ rot: (u.rot || 0) / DEG }, 'rot', 'rotation°', -180, 180, 1,
|
||||
(v, done) => { u.rot = v * DEG; ed.commit({ underlay: true, snapshot: done }); }));
|
||||
const vis = el('button', 'pbtn wide', u.visible ? 'HIDE' : 'SHOW');
|
||||
vis.onclick = () => { u.visible = !u.visible; ed.commit({ underlay: true }); buildInspector(); };
|
||||
const kill = el('button', 'pbtn danger wide', 'REMOVE');
|
||||
kill.onclick = () => { delete ed.park.underlay; ed.commit({ underlay: true }); ed.select(null); };
|
||||
inspector.append(vis, kill);
|
||||
}
|
||||
|
||||
function buildParkInspector() {
|
||||
inspector.append(el('div', 'ititle', 'PARK'));
|
||||
const cols = [['slabColor', 'slab'], ['grassColor', 'grass']];
|
||||
for (const [key, label] of cols) {
|
||||
const c = el('input'); c.type = 'color'; c.value = ed.park[key];
|
||||
c.onchange = () => { ed.park[key] = c.value; ed.commit({ tex: true }); };
|
||||
inspector.append(row(label, c));
|
||||
}
|
||||
const B = ed.park.bounds;
|
||||
for (const [key, label, min, max] of [['x0', 'west edge', -120, -5], ['x1', 'east edge', 5, 120],
|
||||
['z0', 'north edge', -120, -5], ['z1', 'south edge', 5, 120]])
|
||||
inspector.append(numRow(B, key, label, min, max, 1, (v, done) => {
|
||||
B[key] = v; if (done) ed.commit({ ground: true });
|
||||
}));
|
||||
}
|
||||
ed.on('select', buildInspector);
|
||||
ed.on('change', () => { if (!ed.selection) buildInspector(); });
|
||||
|
||||
// ---------------------------------------------------------------- drawer (MB / check)
|
||||
let drawerMode = null;
|
||||
function toggleDrawer(mode) {
|
||||
drawerMode = drawerMode === mode ? null : mode;
|
||||
drawer.style.display = drawerMode ? 'flex' : 'none';
|
||||
if (drawerMode === 'mb') buildMB();
|
||||
if (drawerMode === 'check') buildCheck();
|
||||
}
|
||||
|
||||
function buildCheck() {
|
||||
drawer.innerHTML = '<div class="ptitle">PARK CHECK <span class="dim">— flow · tiers · steel</span></div>';
|
||||
const list = el('div', 'checklist'); drawer.append(list);
|
||||
const results = checkPark(ed.park);
|
||||
if (!results.length) {
|
||||
list.append(el('div', 'checkok', '✓ park reads clean — flow, tiers and steel all check out'));
|
||||
return;
|
||||
}
|
||||
for (const r of results) {
|
||||
const item = el('div', 'checkitem', '⚠ ' + r.msg);
|
||||
if (r.sel) {
|
||||
item.classList.add('link');
|
||||
item.onclick = () => ed.select(r.sel);
|
||||
}
|
||||
list.append(item);
|
||||
}
|
||||
const re = el('button', 'pbtn wide', 'RE-CHECK');
|
||||
re.onclick = buildCheck; drawer.append(re);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- MODELBEAST
|
||||
async function buildMB() {
|
||||
drawer.innerHTML = '<div class="ptitle">MODELBEAST <span class="dim">— farm assets & gen</span></div>';
|
||||
const gen = el('div', 'mbgen');
|
||||
const prompt = el('input', 'text'); prompt.placeholder = 'prompt… e.g. "graffiti tag, spray paint, transparent bg"';
|
||||
const genImg = el('button', 'pbtn accent', 'GEN IMAGE');
|
||||
const genStatus = el('div', 'mbstatus');
|
||||
gen.append(prompt, genImg, genStatus); drawer.append(gen);
|
||||
genImg.onclick = async () => {
|
||||
if (!prompt.value.trim()) return;
|
||||
genImg.disabled = true;
|
||||
try {
|
||||
await MB.generateImage(prompt.value.trim(), s => { genStatus.textContent = s; });
|
||||
genStatus.textContent = 'done — refreshing list';
|
||||
await refresh();
|
||||
} catch (e) { genStatus.textContent = 'error: ' + e.message; }
|
||||
genImg.disabled = false;
|
||||
};
|
||||
|
||||
const list = el('div', 'mblist', 'loading farm assets…'); drawer.append(list);
|
||||
async function refresh() {
|
||||
let assets;
|
||||
try { assets = await MB.listAssets(); }
|
||||
catch (e) { list.innerHTML = `<div class="checkitem">farm unreachable: ${e.message}</div>`; return; }
|
||||
list.innerHTML = '';
|
||||
for (const a of assets.slice(0, 40)) {
|
||||
const name = a.name || a.filename || a.id;
|
||||
const isGlb = /\.glb$/i.test(name), isImg = /\.(png|jpe?g|webp)$/i.test(name);
|
||||
if (!isGlb && !isImg) continue;
|
||||
const item = el('div', 'mbitem');
|
||||
item.append(el('span', 'mbname', `${isGlb ? '◆' : '▣'} ${name}`));
|
||||
if (isGlb) {
|
||||
const b = el('button', 'pbtn', 'PLACE');
|
||||
b.onclick = async () => {
|
||||
b.textContent = '…';
|
||||
const { path } = await MB.importAsset(a.id, name);
|
||||
ed.setTool({ mode: 'prop', src: path, scale: 1 });
|
||||
setStatus('model fetched — click the ground to place it');
|
||||
b.textContent = 'PLACE';
|
||||
};
|
||||
item.append(b);
|
||||
}
|
||||
if (isImg) {
|
||||
const d = el('button', 'pbtn', 'DECAL');
|
||||
d.onclick = async () => {
|
||||
d.textContent = '…';
|
||||
const { path } = await MB.importAsset(a.id, name);
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ed.setTool({ mode: 'decal', img: path, w: 6, aspect: img.height / img.width });
|
||||
setStatus('image fetched — click the ground to place the decal');
|
||||
};
|
||||
img.src = path;
|
||||
d.textContent = 'DECAL';
|
||||
};
|
||||
const m3 = el('button', 'pbtn', 'MAKE 3D');
|
||||
m3.onclick = async () => {
|
||||
m3.disabled = true;
|
||||
try {
|
||||
await MB.imageTo3D(a.id, s => { genStatus.textContent = s; });
|
||||
genStatus.textContent = 'mesh done — hit REFRESH and PLACE it';
|
||||
} catch (e) { genStatus.textContent = 'error: ' + e.message; }
|
||||
m3.disabled = false;
|
||||
};
|
||||
const bg = el('button', 'pbtn', 'CUT BG');
|
||||
bg.onclick = async () => {
|
||||
bg.disabled = true;
|
||||
try {
|
||||
await MB.removeBg(a.id, s => { genStatus.textContent = s; });
|
||||
genStatus.textContent = 'bg cut — hit REFRESH for the clean version';
|
||||
} catch (e) { genStatus.textContent = 'error: ' + e.message; }
|
||||
bg.disabled = false;
|
||||
};
|
||||
item.append(d, bg, m3);
|
||||
}
|
||||
list.append(item);
|
||||
}
|
||||
if (!list.children.length) list.append(el('div', 'ihint', 'no glb/img assets on the farm yet'));
|
||||
}
|
||||
const rf = el('button', 'pbtn wide', 'REFRESH');
|
||||
rf.onclick = refresh; drawer.append(rf);
|
||||
refresh();
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- topbar
|
||||
function buildTopbar() {
|
||||
const bar = $('#topbar');
|
||||
bar.innerHTML = '';
|
||||
bar.append(el('span', 'logo', 'SKATEMAKER<b>PRO</b>'));
|
||||
const name = el('input', 'text parkname');
|
||||
name.value = ed.park?.name || 'NEW PARK';
|
||||
name.onchange = () => { ed.park.name = name.value; ed.commit({}); };
|
||||
bar.append(name);
|
||||
ed.on('change', () => { if (document.activeElement !== name) name.value = ed.park.name; });
|
||||
|
||||
const mk = (label, fn, cls = '') => {
|
||||
const b = el('button', 'pbtn ' + cls, label); b.onclick = fn; bar.append(b); return b;
|
||||
};
|
||||
mk('NEW', () => { if (confirm('start a fresh park? (autosave is overwritten)')) ed.newPark('NEW PARK'); });
|
||||
mk('SAVE', async () => {
|
||||
const n = ed.park.name.replace(/[^\w\- ]+/g, '').trim() || 'park';
|
||||
await fetch('/api/parks/' + encodeURIComponent(n), { method: 'POST', body: JSON.stringify(ed.park, null, 1) });
|
||||
setStatus(`saved parks/${n}.json`);
|
||||
});
|
||||
const loadSel = el('select'); loadSel.innerHTML = '<option value="">LOAD…</option>';
|
||||
loadSel.onfocus = async () => {
|
||||
const names = await fetch('/api/parks').then(r => r.json());
|
||||
loadSel.innerHTML = '<option value="">LOAD…</option>' +
|
||||
names.map(n => `<option>${n}</option>`).join('');
|
||||
};
|
||||
loadSel.onchange = async () => {
|
||||
if (!loadSel.value) return;
|
||||
ed.loadPark(await fetch('/api/parks/' + encodeURIComponent(loadSel.value)).then(r => r.json()));
|
||||
loadSel.value = '';
|
||||
};
|
||||
bar.append(loadSel);
|
||||
mk('⬇ JSON', () => downloadParkJSON(ed.park));
|
||||
mk('⬇ LEVEL.JS', () => downloadLevelJS(ed.park));
|
||||
mk('TOP', () => ed.topView());
|
||||
const test = mk('▶ TEST RIDE', () => ed.toggleTest?.(), 'accent test');
|
||||
ed.on('test', on => { test.textContent = on ? '■ STOP (Enter)' : '▶ TEST RIDE'; });
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------- file helpers
|
||||
function pickFile(accept, cb) {
|
||||
const inp = el('input'); inp.type = 'file'; inp.accept = accept;
|
||||
inp.onchange = () => { if (inp.files[0]) cb(inp.files[0]); };
|
||||
inp.click();
|
||||
}
|
||||
async function uploadFile(f) {
|
||||
const name = Date.now().toString(36) + '_' + f.name.replace(/[^\w.\-]+/g, '_');
|
||||
const r = await fetch('/api/upload?name=' + encodeURIComponent(name),
|
||||
{ method: 'POST', body: await f.arrayBuffer() });
|
||||
const j = await r.json();
|
||||
if (j.error) throw new Error(j.error);
|
||||
return j.path;
|
||||
}
|
||||
|
||||
// drag & drop anywhere: .glb -> prop, image -> decal
|
||||
addEventListener('dragover', e => e.preventDefault());
|
||||
addEventListener('drop', async e => {
|
||||
e.preventDefault();
|
||||
const f = e.dataTransfer.files?.[0];
|
||||
if (!f) return;
|
||||
const path = await uploadFile(f);
|
||||
if (/\.glb$/i.test(f.name)) {
|
||||
ed.setTool({ mode: 'prop', src: path, scale: 1 });
|
||||
setStatus('model uploaded — click the ground to place it');
|
||||
} else if (/^image\//.test(f.type)) {
|
||||
const img = new Image();
|
||||
img.onload = () => {
|
||||
ed.setTool({ mode: 'decal', img: path, w: 6, aspect: img.height / img.width });
|
||||
setStatus('image uploaded — click the ground to place the decal');
|
||||
};
|
||||
img.src = path;
|
||||
}
|
||||
});
|
||||
|
||||
buildPalette(); buildTopbar(); buildInspector();
|
||||
ed.emit('tool');
|
||||
}
|
||||
75
parks/paddo.json
Normal file
75
parks/paddo.json
Normal file
@ -0,0 +1,75 @@
|
||||
{
|
||||
"name": "PADDO",
|
||||
"bounds": { "x0": -40, "x1": 40, "z0": -26, "z1": 26 },
|
||||
"slabColor": "#7fae6f",
|
||||
"grassColor": "#4d7c3c",
|
||||
"spawn": { "x": -32, "z": -18, "heading": 0.85 },
|
||||
"elements": [
|
||||
{ "id": "wall_w", "kind": "quarter", "x": -40, "z": 0, "rot": -1.5708, "len": 52, "r0": 0.9, "r1": 1.8, "lump": 0, "deck": 0 },
|
||||
{ "id": "wall_n", "kind": "quarter", "x": 0, "z": -26, "rot": 0, "len": 80, "r0": 0.5, "r1": 1.1, "lump": 0, "deck": 0 },
|
||||
{ "id": "lumpy_s", "kind": "quarter", "x": 1, "z": 26, "rot": 3.1416, "len": 34, "r0": 1.8, "r1": 1.8, "lump": 0.12, "deck": 0 },
|
||||
{ "id": "bank_900", "kind": "bank", "x": -21, "z": 26, "rot": 3.1416, "len": 10, "h": 0.9, "run": 2.4, "deck": 0 },
|
||||
{ "id": "bank_ne", "kind": "bank", "x": 27, "z": -26, "rot": 0, "len": 14, "h": 0.8, "run": 2.2, "deck": 0 },
|
||||
{ "id": "bowl_w", "kind": "bowl", "x": -27, "z": -6, "rot": 0, "size": 4.2, "depth": 1.5 },
|
||||
{ "id": "volcano", "kind": "mogul", "x": -18, "z": 4, "h": 0.7, "s": 2.6 },
|
||||
{ "id": "mogul_1", "kind": "mogul", "x": -2, "z": 6, "h": 0.45, "s": 2.2 },
|
||||
{ "id": "mogul_rb", "kind": "mogul", "x": 2, "z": 9, "h": 0.8, "s": 2.5 },
|
||||
{ "id": "spine_1", "kind": "spine", "x": -8, "z": 12, "rot": 0, "len": 8, "r": 1.2 },
|
||||
{ "id": "island", "kind": "dome", "x": 2, "z": -2, "rot": 0, "rx": 7, "rz": 4.5, "h": 0.14 },
|
||||
{ "id": "funbox_c", "kind": "funbox", "x": 16, "z": -2, "rot": 0, "hw": 2.5, "hd": 1.2, "h": 0.9, "skirt": 1.6 },
|
||||
{ "id": "ledge_a", "kind": "ledge", "x": 8.5, "z": -11, "rot": 0, "hw": 1.5, "hd": 0.8, "h": 0.6 },
|
||||
{ "id": "ledge_b", "kind": "ledge", "x": 11.5,"z": -11, "rot": 0, "hw": 1.5, "hd": 0.8, "h": 0.45 },
|
||||
{ "id": "ledge_c", "kind": "ledge", "x": 14.5,"z": -11, "rot": 0, "hw": 1.5, "hd": 0.8, "h": 0.3 },
|
||||
{ "id": "manny", "kind": "funbox", "x": 26, "z": -14, "rot": 0, "hw": 2.2, "hd": 1.2, "h": 0.35, "skirt": 1.1 },
|
||||
{ "id": "long_ldg", "kind": "ledge", "x": 33.5,"z": -2, "rot": 0, "hw": 0.5, "hd": 12, "h": 0.42 },
|
||||
{ "id": "stairs_1", "kind": "stairs", "x": 6, "z": 12.2,"rot": 0, "width": 4.8, "h": 0.6, "steps": 4, "going": 0.6, "platDepth": 3.2 }
|
||||
],
|
||||
"rails": [
|
||||
{ "id": "r1", "name": "Funbox Flat Rail", "a": [13.5, -2.9], "b": [18.5, -2.9], "ya": 1.25, "yb": 1.25, "kind": "rail" },
|
||||
{ "id": "r2", "name": "Funbox Down Rail", "a": [18.5, -1.0], "b": [21.8, -1.0], "ya": 1.2, "yb": 0.35, "kind": "rail" },
|
||||
{ "id": "r3", "name": "P-Rail", "a": [22.0, 8.0], "b": [26.0, 8.0], "ya": 0.35, "yb": 0.35, "kind": "rail" },
|
||||
{ "id": "r4", "name": "Rainbow Rail", "a": [-0.4, 9.0], "b": [2.0, 9.0], "ya": 0.45, "yb": 1.35, "kind": "rail" },
|
||||
{ "id": "r5", "name": "Rainbow Rail", "a": [2.0, 9.0], "b": [4.4, 9.0], "ya": 1.35, "yb": 0.45, "kind": "rail" },
|
||||
{ "id": "r6", "name": "Long Metal Ledge", "a": [33.0, -13.5], "b": [33.0, 9.5], "ya": 0.42, "yb": 0.42, "kind": "ledge" },
|
||||
{ "id": "r7", "name": "Down Ledge", "a": [7.0, -11.9], "b": [10.0, -11.9],"ya": 0.6, "yb": 0.6, "kind": "ledge" },
|
||||
{ "id": "r8", "name": "Down Ledge", "a": [10.0, -11.9], "b": [13.0, -11.9],"ya": 0.45, "yb": 0.45, "kind": "ledge" },
|
||||
{ "id": "r9", "name": "Down Ledge", "a": [13.0, -11.9], "b": [16.0, -11.9],"ya": 0.3, "yb": 0.3, "kind": "ledge" },
|
||||
{ "id": "r10", "name": "Stair Hubba", "a": [3.4, 12.2], "b": [3.4, 15.0], "ya": 0.62, "yb": 0.06, "kind": "ledge" },
|
||||
{ "id": "r11", "name": "Stair Hubba", "a": [8.6, 12.2], "b": [8.6, 15.0], "ya": 0.62, "yb": 0.06, "kind": "ledge" }
|
||||
],
|
||||
"gaps": [
|
||||
{ "id": "g1", "name": "THE STAIR GAP", "x": 6, "z": 13.6, "r": 2.4 },
|
||||
{ "id": "g2", "name": "FUNBOX FLY", "x": 16, "z": -2, "r": 2.8 },
|
||||
{ "id": "g3", "name": "SPINE TRANSFER", "x": -8, "z": 12, "r": 2.4 },
|
||||
{ "id": "g4", "name": "BOWL HIP", "x": -22.5, "z": -2, "r": 2.2 },
|
||||
{ "id": "g5", "name": "RAINBOW ARC", "x": 2, "z": 9, "r": 2.2 },
|
||||
{ "id": "g6", "name": "LEDGE LEAP", "x": 11.5, "z": -11, "r": 2.6 },
|
||||
{ "id": "g7", "name": "KEYHOLE GAP", "x": -36, "z": -14, "r": 2.6 },
|
||||
{ "id": "g8", "name": "CAXTON CARVE", "x": 10, "z": -22.5, "r": 2.6 },
|
||||
{ "id": "g9", "name": "ISLAND HOP", "x": 2, "z": 2.6, "r": 2.2 }
|
||||
],
|
||||
"letters": [
|
||||
{ "id": "L1", "ch": "B", "x": -27, "y": 0.9, "z": -6 },
|
||||
{ "id": "L2", "ch": "O", "x": -8, "y": 2.3, "z": 12 },
|
||||
{ "id": "L3", "ch": "O", "x": 16, "y": 2.4, "z": -2 },
|
||||
{ "id": "L4", "ch": "K", "x": 6, "y": 1.6, "z": 14.2 },
|
||||
{ "id": "L5", "ch": "Q", "x": -35, "y": 2.2, "z": -13 },
|
||||
{ "id": "L6", "ch": "U", "x": 2, "y": 2.5, "z": 9 },
|
||||
{ "id": "L7", "ch": "O", "x": 33, "y": 1.6, "z": -2 },
|
||||
{ "id": "L8", "ch": "Y", "x": 24, "y": 1.5, "z": 8 }
|
||||
],
|
||||
"zones": [
|
||||
{ "id": "z1", "shape": "rect", "x": 23, "z": 0, "rot": 0, "hw": 17, "hd": 26, "color": "#9aa0a2" },
|
||||
{ "id": "z2", "shape": "ellipse", "x": 2, "z": -2, "rot": 0, "hw": 7, "hd": 4.5, "color": "#557f3f" },
|
||||
{ "id": "z3", "shape": "rect", "x": -27, "z": -6, "rot": 0, "hw": 4.2, "hd": 4.2, "color": "#6a7d70" }
|
||||
],
|
||||
"decals": [],
|
||||
"props": [
|
||||
{ "id": "p1", "src": "builtin:fig", "x": 0, "z": -3, "rot": 0, "scale": 1.25 },
|
||||
{ "id": "p2", "src": "builtin:fig", "x": 4.5, "z": -1, "rot": 0, "scale": 1.0 },
|
||||
{ "id": "p3", "src": "builtin:fig", "x": -1, "z": 1, "rot": 0, "scale": 0.9 },
|
||||
{ "id": "p4", "src": "builtin:fig", "x": -34, "z": 16, "rot": 0, "scale": 1.1 },
|
||||
{ "id": "p5", "src": "builtin:fig", "x": 30, "z": 20, "rot": 0, "scale": 1.3 },
|
||||
{ "id": "p6", "src": "builtin:fig", "x": -14, "z": -30, "rot": 0, "scale": 1.2 }
|
||||
]
|
||||
}
|
||||
157
serve.py
Normal file
157
serve.py
Normal file
@ -0,0 +1,157 @@
|
||||
#!/usr/bin/env python3
|
||||
"""SKATEMAKER PRO dev server.
|
||||
|
||||
Static files + three jobs the browser can't do alone:
|
||||
/api/parks GET list | /api/parks/<name> GET load, POST save (JSON body)
|
||||
/api/upload?name= POST raw bytes -> assets/uploads/<name>, returns {"path": ...}
|
||||
/mb/... MODELBEAST proxy (queue on the m3ultra, token from
|
||||
~/Documents/backnforth/.env — stays server-side, never in JS)
|
||||
/mb/assets GET -> asset list
|
||||
/mb/assets/<id>/file GET -> file bytes (same-origin for GLTFLoader)
|
||||
/mb/jobs POST -> submit {operator, asset_id?, params}
|
||||
/mb/jobs/<id> GET -> poll (control-char-safe)
|
||||
/mb/import?asset=&name= GET -> download MB asset into assets/uploads/, return path
|
||||
|
||||
Run: python3 serve.py [port] (default 8093)
|
||||
"""
|
||||
import json, os, re, sys, urllib.parse, urllib.request
|
||||
from http.server import HTTPServer, SimpleHTTPRequestHandler
|
||||
|
||||
ROOT = os.path.dirname(os.path.abspath(__file__))
|
||||
PARKS = os.path.join(ROOT, 'parks')
|
||||
UPLOADS = os.path.join(ROOT, 'assets', 'uploads')
|
||||
MB_HOST = os.environ.get('MB_HOST', 'http://100.89.131.57:8777')
|
||||
SAFE = re.compile(r'^[\w.\- ]+$')
|
||||
|
||||
|
||||
def mb_token():
|
||||
t = os.environ.get('MB_TOKEN')
|
||||
if t:
|
||||
return t
|
||||
try:
|
||||
for line in open(os.path.expanduser('~/Documents/backnforth/.env')):
|
||||
if line.startswith('MB_TOKEN='):
|
||||
return line.split('=', 1)[1].strip()
|
||||
except OSError:
|
||||
pass
|
||||
return None
|
||||
|
||||
|
||||
def mb_req(path, data=None, ctype=None, timeout=180):
|
||||
tok = mb_token()
|
||||
if not tok:
|
||||
raise RuntimeError('MB_TOKEN not found')
|
||||
h = {'Authorization': 'Bearer ' + tok}
|
||||
if ctype:
|
||||
h['Content-Type'] = ctype
|
||||
r = urllib.request.Request(MB_HOST + path, data=data, headers=h)
|
||||
return urllib.request.urlopen(r, timeout=timeout).read()
|
||||
|
||||
|
||||
def clean_json(b): # MB job logs carry raw control chars
|
||||
s = b.decode('utf-8', 'replace')
|
||||
return ''.join(c if c >= ' ' or c in '\t\n' else ' ' for c in s).encode()
|
||||
|
||||
|
||||
class H(SimpleHTTPRequestHandler):
|
||||
def _send(self, code, body, ctype='application/json'):
|
||||
self.send_response(code)
|
||||
self.send_header('Content-Type', ctype)
|
||||
self.send_header('Content-Length', str(len(body)))
|
||||
self.send_header('Cache-Control', 'no-store')
|
||||
self.end_headers()
|
||||
self.wfile.write(body)
|
||||
|
||||
def _json(self, obj, code=200):
|
||||
self._send(code, json.dumps(obj).encode())
|
||||
|
||||
def _err(self, msg, code=500):
|
||||
self._json({'error': str(msg)}, code)
|
||||
|
||||
def do_GET(self):
|
||||
path, _, query = self.path.partition('?')
|
||||
q = dict(p.split('=', 1) for p in query.split('&') if '=' in p)
|
||||
try:
|
||||
if path == '/api/parks':
|
||||
names = sorted(f[:-5] for f in os.listdir(PARKS) if f.endswith('.json'))
|
||||
return self._json(names)
|
||||
if path.startswith('/api/parks/'):
|
||||
name = urllib.parse.unquote(path.split('/', 3)[3])
|
||||
if not SAFE.match(name):
|
||||
return self._err('bad name', 400)
|
||||
f = os.path.join(PARKS, name + '.json')
|
||||
if not os.path.exists(f):
|
||||
return self._err('not found', 404)
|
||||
return self._send(200, open(f, 'rb').read())
|
||||
if path == '/mb/assets':
|
||||
return self._send(200, clean_json(mb_req('/api/assets?limit=100')))
|
||||
m = re.match(r'^/mb/assets/([\w-]+)/file$', path)
|
||||
if m:
|
||||
return self._send(200, mb_req(f'/api/assets/{m.group(1)}/file'),
|
||||
'application/octet-stream')
|
||||
m = re.match(r'^/mb/jobs/([\w-]+)$', path)
|
||||
if m:
|
||||
return self._send(200, clean_json(mb_req(f'/api/jobs/{m.group(1)}')))
|
||||
if path == '/mb/import':
|
||||
aid, name = q.get('asset', ''), urllib.parse.unquote(q.get('name', 'asset.bin'))
|
||||
if not re.match(r'^[\w-]+$', aid) or not SAFE.match(name):
|
||||
return self._err('bad args', 400)
|
||||
os.makedirs(UPLOADS, exist_ok=True)
|
||||
data = mb_req(f'/api/assets/{aid}/file')
|
||||
out = os.path.join(UPLOADS, name)
|
||||
open(out, 'wb').write(data)
|
||||
return self._json({'path': 'assets/uploads/' + name, 'bytes': len(data)})
|
||||
except Exception as e:
|
||||
return self._err(e)
|
||||
return super().do_GET()
|
||||
|
||||
def do_POST(self):
|
||||
path, _, query = self.path.partition('?')
|
||||
q = dict(p.split('=', 1) for p in query.split('&') if '=' in p)
|
||||
n = int(self.headers.get('Content-Length') or 0)
|
||||
body = self.rfile.read(n) if n else b''
|
||||
try:
|
||||
if path.startswith('/api/parks/'):
|
||||
name = urllib.parse.unquote(path.split('/', 3)[3])
|
||||
if not SAFE.match(name):
|
||||
return self._err('bad name', 400)
|
||||
json.loads(body) # must be valid JSON
|
||||
os.makedirs(PARKS, exist_ok=True)
|
||||
open(os.path.join(PARKS, name + '.json'), 'wb').write(body)
|
||||
return self._json({'saved': name})
|
||||
if path == '/api/upload':
|
||||
name = urllib.parse.unquote(q.get('name', ''))
|
||||
if not SAFE.match(name):
|
||||
return self._err('bad name', 400)
|
||||
os.makedirs(UPLOADS, exist_ok=True)
|
||||
open(os.path.join(UPLOADS, name), 'wb').write(body)
|
||||
return self._json({'path': 'assets/uploads/' + name, 'bytes': len(body)})
|
||||
if path == '/mb/jobs':
|
||||
return self._send(200, clean_json(
|
||||
mb_req('/api/jobs', data=body, ctype='application/json')))
|
||||
if path == '/mb/upload': # raw bytes -> MB multipart asset
|
||||
name = urllib.parse.unquote(q.get('name', 'upload.png'))
|
||||
if not SAFE.match(name):
|
||||
return self._err('bad name', 400)
|
||||
bound = 'smpb0undary'
|
||||
ctype = q.get('type', 'application/octet-stream')
|
||||
mp = (f'--{bound}\r\nContent-Disposition: form-data; name="file"; '
|
||||
f'filename="{name}"\r\nContent-Type: {ctype}\r\n\r\n').encode() \
|
||||
+ body + f'\r\n--{bound}--\r\n'.encode()
|
||||
return self._send(200, clean_json(mb_req(
|
||||
'/api/assets', data=mp,
|
||||
ctype=f'multipart/form-data; boundary={bound}')))
|
||||
except Exception as e:
|
||||
return self._err(e)
|
||||
return self._err('unknown endpoint', 404)
|
||||
|
||||
def log_message(self, fmt, *a):
|
||||
if '/mb/jobs/' not in str(a[0] if a else ''): # quiet the poll spam
|
||||
super().log_message(fmt, *a)
|
||||
|
||||
|
||||
if __name__ == '__main__':
|
||||
port = int(sys.argv[1]) if len(sys.argv) > 1 else 8093
|
||||
os.chdir(ROOT)
|
||||
print(f'SKATEMAKER PRO on http://localhost:{port} (MB proxy -> {MB_HOST})')
|
||||
HTTPServer(('0.0.0.0', port), H).serve_forever()
|
||||
Loading…
Reference in New Issue
Block a user