mirror of https://github.com/isledecomp/isle.pizza.git synced 2026-02-28 05:47:39 +00:00

Custom frontend for the Emscripten port of isle-portable

Go to file

Christian Semmler 9872902e4d Some checks are pending Build / build (push) Waiting to run Details Actor editor (#24 ) * Improve Lighthouse LCP and accessibility scores Preload the LCP image (install.webp) from the HTML and add fetchpriority="high" so the browser discovers it before JS executes. Use a <main> landmark for the primary content container to satisfy the "document has a main landmark" accessibility audit. * Add actor editor with animated 3D character preview Browse and customize all 66 game actors with a Three.js rendered preview featuring skeletal walk cycle animations. Click interaction matches the game's character-dependent behavior (Pepper=hat, Nick=color, etc.). - Parse WDB global parts and global textures for character assembly - Parse and serialize character data (66 entries x 16 bytes) in save files - AnimationParser for .ani binary format with hierarchical keyframe evaluation - Full g_cycles animation table (11 types x 17 animations) driven by move/sound - Per-mesh texture support for hats, torso, and face textures * Extract BaseRenderer to deduplicate actor and vehicle renderers - Extract shared Three.js setup, lighting, texture, geometry, and animation loop code into BaseRenderer base class (~170 lines) - Deduplicate WdbParser.parseGlobalParts via parsePartData delegation - Consolidate lego brown/lt grey into shared LegoColors constant - Remove dead code: updatePartColor, SUFFIX_NAMES, CharacterType, getCharacterType, partToLODIndex, unused imports and re-exports - Simplify updateCharacter and resolve methods by removing unnecessary defensive checks on frozen data and bounded UI inputs - Extract actorKey helper in ActorEditor to deduplicate key computation - Delete unused animations/manifest.json * Add reset to default button for actor editor Compare each actor's character state against ActorInfoInit defaults and show a reset button when any field differs. Resets all 10 fields (sound, move, mood, hat, colors) in a single save round-trip by extending updateSaveSlot to accept batch character updates. * Show full character names in actor editor Add ActorDisplayNames lookup with names from savegame.ksy doc comments (e.g. "Pepper Roni", "Mama Brickolini") instead of internal IDs. Widen nav label min-width to 150px to prevent button shifting. * Stabilize actor position when hat changes Override centerAndScaleModel in ActorRenderer to exclude the hat part from the bounding box calculation, so switching between hats of different sizes no longer shifts the body/head position. * Fetch assets from SI files via HTTP Range requests Replace static animation, texture, and globe bitmap files with a manifest-driven approach that extracts them directly from the game's SI files at runtime using HTTP Range requests. A new generate-manifest script scans SI files by MxCh objectId to locate each asset's byte offset(s), verifies integrity via MD5, and writes an asset-ranges.json manifest. The app consumes this manifest to fetch assets on demand, including support for files split across MxCh interleave boundaries. Also removes unused constants (ActorLODIndex, animation keyframe flag constants). * Fetch character icons from SI files via HTTP Range requests Replace static webp character icons with runtime extraction from INFOMAIN.SI, extending the bitmap manifest to support multiple SI files. Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering> * Fix actor editor animation and interaction bugs Use mood (not sound+4move) to select walking animation, matching FUN_10063b90. Load secondary animation tier (speed 4.0 threshold) which NPCs typically use in-game, producing the independent head/hat movement. Fix switchSound wrap to 9 values, add switchColor click remapping for claws/head/body, fix g_cycles case mismatches, add morph key visibility support, and preserve root Y-translation for vertical bounce while stripping horizontal movement. Add click animations to actor editor Play a one-shot gesture animation when clicking an actor, matching the in-game LegoEntity::ClickAnimation behavior (objectId = m_move + 10). After the click animation finishes, the walking loop resumes. Adds the 4 click animations from SNDANIM.SI to the asset manifest and extends ActorRenderer with queue-based click animation playback. Also fixes treadmill XZ stripping for click animations where actor_01 is nested under wrapper nodes. * Add vehicle rendering to actor editor Actors with personal vehicles (skateboard, motorcycles, bicycles) can now be toggled between walking and vehicle mode via a button in the actor navigation bar. Vehicle geometries are loaded from WDB world models and rendered alongside the character with matching animations. * Add click sound playback to actor editor Plays the character's click sound (m_sound + 50) and, for Laura's SwitchMood, an additional mood sound (m_mood + 66) from SNDANIM.SI, matching the original game behavior. Sounds are fetched on demand, decoded as WAV, and cached as AudioBuffers. * Replace Range request asset loading with packed binary bundle Extract save editor assets (animations, sounds, textures, bitmaps) into a single save-editor.bin file at build time instead of fetching byte ranges from ~550MB SI files at runtime. The bundle packs an embedded JSON index and all fragment data into one file (~756KB), eliminating Range request complexity and enabling proper Workbox precaching. * Clean up actor editor branch: DRY, dead code, CSS - Extract buildNodeToPartGroupMap() in ActorRenderer to deduplicate map-building logic in loadAnimationForActor and playClickAnimation - Refactor updateMissionScore() to use getMissionScoreOffset() instead of duplicating offset calculation - Remove unused ActorPartLabels export from actorConstants - Make fetchBitmap module-private (only used by fetchBitmapAsURL) - Merge duplicate .globe-btn CSS blocks in LightPositionEditor * Add drag-to-orbit controls to vehicle and actor editors Use Three.js OrbitControls in BaseRenderer for rotation-only orbiting with damping. Vehicle editor auto-rotates and resets on part switch. Actor editor uses orbit without auto-rotate (has skeletal animations). Drag vs click detection uses pointermove threshold to avoid false positives from autoRotate damping. * Rebase WdbModelRenderer on BaseRenderer Remove duplicated scene/camera/renderer/lighting setup, geometry unpacking, animation loop, and dispose logic. Score cube gets orbit controls and drag-vs-click detection for free. * Add zoom, pan, and camera reset to 3D editors Enable zoom (scroll/pinch) and pan (right-click/two-finger drag) on all OrbitControls. Add resetView() to BaseRenderer that restores initial camera state and auto-rotate via OrbitControls.saveState/reset. Add reset camera button to EditorTooltip with mobile-friendly touch targets and hover-only highlight to avoid sticky state on touch. * Update changelog and fix sticky hover on touch devices Add actor editor features, 3D orbit/zoom/pan controls, and camera reset button to the February 2026 changelog. Wrap hover styles in @media (hover: hover) for vehicle toggle and texture buttons. * Update README with save editor setup, project structure, and Three.js		2026-02-14 02:29:55 +01:00
.github/workflows	Skip service worker in dev mode and copy isle.js/isle.wasm on build	2026-01-11 20:59:55 -07:00
public	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
scripts	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
src	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
src-sw	Migrate frontend to Svelte 5	2026-01-11 19:10:16 -07:00
.gitignore	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
index.html	Improve Lighthouse LCP and accessibility scores (#23 )	2026-02-08 00:43:07 +01:00
LICENSE	Initial commit	2025-06-13 00:30:51 +02:00
package-lock.json	Add dynamic tooltip positioning using Floating UI (#18 )	2026-02-03 02:00:24 +01:00
package.json	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
README.md	Actor editor (#24 )	2026-02-14 02:29:55 +01:00
svelte.config.js	Migrate frontend to Svelte 5	2026-01-11 19:10:16 -07:00
vite.config.js	Improve development mode experience	2026-01-11 21:11:32 -07:00
workbox-config.cjs	Actor editor (#24 )	2026-02-14 02:29:55 +01:00

README.md

isle.pizza Frontend

A custom web frontend for the Emscripten port of isle-portable, allowing LEGO Island to run directly in modern web browsers.

Requirements

Node.js

Quick Start

Clone the repository:

git clone https://github.com/isledecomp/isle.pizza.git
cd isle.pizza

Install dependencies:
```
npm install
```
Obtain the game files (isle.js and isle.wasm) by building the Emscripten version of isle-portable, then copy them to the project root.
Set up the LEGO Island game assets:
```
npm run prepare:assets
```
This will prompt you for the path to your LEGO Island installation or mounted ISO and create the necessary symlinks. You can also provide the path directly:
```
npm run prepare:assets -- -p /path/to/your/LEGO
```
Generate the save editor asset bundle (requires game assets from step 4):
```
npm run generate:save-editor-assets
```
This extracts animations, sounds, textures, and character icons from the game files into save-editor.bin, used by the save editor's 3D previews.
Start the development server:
```
npm run dev
```
Open the URL shown in the terminal (usually http://localhost:5173).

Scripts

Command	Description
`npm run prepare:assets`	Set up LEGO Island game assets via symlinks
`npm run generate:save-editor-assets`	Extract save editor assets (animations, sounds, textures, icons) into `save-editor.bin`
`npm run dev`	Start development server with hot reload
`npm run build`	Build for production (outputs to `dist/`)
`npm run preview`	Preview the production build locally

Project Structure

isle.pizza/
├── src/
│   ├── App.svelte         # Main application component
│   ├── app.css            # Global styles
│   ├── stores.js          # Svelte stores for state management
│   ├── core/
│   │   ├── formats/       # Binary file parsers/serializers (WDB, save games, animations, textures)
│   │   ├── rendering/     # Three.js renderers (BaseRenderer, VehiclePartRenderer, ActorRenderer, etc.)
│   │   ├── savegame/      # Save game constants, actor data, color tables
│   │   └── ...            # Audio, OPFS, service worker, asset loading
│   └── lib/               # UI components and pages (save editor, configure, etc.)
├── public/
│   └── images/            # UI images (menu buttons, tab icons)
├── scripts/               # Build and asset generation scripts
├── src-sw/                # Service worker source
├── index.html             # HTML entry point
├── isle.js                # Emscripten JS (not in repo, build from isle-portable)
├── isle.wasm              # Emscripten WASM (not in repo, build from isle-portable)
├── save-editor.bin        # Packed save editor assets: animations, sounds, textures, icons (not in repo, generated)
└── LEGO/                  # Game data directory (not in repo)

Building the Game Files

The isle.js and isle.wasm files are not included in this repository. To obtain them:

Follow the isle-portable build instructions for the Emscripten target
Copy the resulting isle.js and isle.wasm to this project's root directory

Alternatively, a Docker image that bundles the runtime with this frontend is available.

Tech Stack

Svelte 5 - UI framework
Three.js - 3D rendering for save editor previews
Vite - Build tool and dev server
Workbox - Service worker and offline support

License

See LICENSE for details.