Echoes of the Shattered Octave · Book One
A first-person dark-fantasy RPG for the browser, made in the style of The Elder Scrolls II: Daggerfall and built on the Echoes of the Shattered Octave series bible.
The game is published from main to GitHub Pages on every merge, so the link is always the current build. It installs as an app, keeps working offline, and "Play together" on the title screen lets a second player join from a phone.
Explore Oakhaven and the land past the Hedge, then sail the Drift-Kestrel to Whisper-Grove, the drowned marble capital of the Spectral Woods. Talk with townsfolk, take on quests and side quests, and trade with merchants. Fight Legionnaires, Proctors, golems, hounds and the Quiet. Keep the Narrow balanced, between the noise that brings the hounds and the silence that brings the Hush.
The older copy at shattered-octavebook1.pplx.app is out of date and is not updated any more; use the links above.
See it move
Play together, or bring a companion
Play together. A second player joins your world with a six-letter code, from another computer or a phone. Each sees the other's traveller and name, and you fight, share experience and travel together. Above, left: the host on a desktop. Right: the guest on a phone.
To play together, both players press Play together on the title screen: one hosts and reads out the code, the other types it in. The guest brings their own traveller, and what they earn goes home with them.
The party. In Part Four, Kaelen or Lyra travels with you. G gives orders (follow, wait, keep quiet) and X uses their ability: here Kaelen's Dissonant Blade stuns a Legionnaire.
Play on your phone
- Open the phone link on your phone, or scan the code above. The touch controls are there from the first frame.
- Hold the phone sideways. Held upright, the game says so in the black band under the view.
- Left thumb: the stick moves you. Right thumb: drag to look, tap to use or strike. Songs, Run, Throw, Use and Strike sit on the right.
- To keep it, use your browser's Add to Home Screen. It then opens like an app, without the browser's bars, and plays offline.
The plain link works on phones too: a phone or tablet starts in touch mode by itself. The ?touch=1 link also turns the touch controls on for a touchscreen laptop. A mouse that moves hands control back, unless Options → Controls → Touch controls is set to On.
The world
Maps
Mechanics
The story and the interface
What's in Book One
- Four parts of the book. Oakhaven inside the Hedge, the Greening and the escape on the Drift-Kestrel, Whisper-Grove and its catacombs, and the coda in the Deep Woods and the Mausoleum of Chords. The main story, "The Rite", runs alongside side quests.
- The Rite, played (Book One ch. 9–10). Walk with the column under the Pure Note while the town hums the Root note; stand in the Inquisitor's eyeline at the needle; keep the Factor's lenses on you while Kaelen undoes eight bolts; sing the falling fifth with Lyra; and spend Aldric's sixty seconds on the names of the men at the pumps.
- The Greening, walked (Book One ch. 11). Follow Lyra down into the drowning town; walk the line behind her circle of stillness from the well-head to the square, pulling people out of doorways and keeping the hounds off its tail; sing Orla down in her tree, or hold the square with Rooke; and stand at the North Gate while the Hedge calls the town by its dead and Ada Pellow answers.
- Grab the Line, played (Book One ch. 12). Haul the Kestrel's winch drum with Mags while Vane counts the town onto the deck, or load the line with the Governor in the mud; meet the jitter at the rail; and stand through the count to ten while the line snags in a crown.
- The Narrow. Noise brings the hounds and silence brings the Hush. Sneak, wear a Synod disguise, pick pockets, hide bodies and throw distractions, under Oakhaven's law and its watch-house gaol.
- Combat with directional mouse swings, parries and blocks. Swords, axes, maces, spears, a steam-maul, a glass-shot pistol and a crossbow; armour across five slots.
- Songs, a magic system built on the Octave, cast with both hands raised.
- Kaelen and Lyra, who travel with you, talk on the road, flinch, limp and sing.
- A world that moves: weather and a sky on the world clock, smoking chimneys, crows, swinging bells, rising portcullises and water that reflects.
- The Library of the Reach: 65 books from inside the world, in four libraries.
- Loot tables for enemies and 32 strongboxes hidden around the world.
- An original orchestral score and recorded voices, a French translation, accessibility options, photo mode, a speedrun timer and data-only mod dungeons.
- Save slots, save codes and save files; offline play once installed; two-player co-op; a desktop build.
The full list is in docs/features.md. Every milestone, with the pictures that shipped with it, is in docs/gallery.md.
Play locally
The game is plain HTML, CSS and JavaScript, with no build step. Serve the folder with any static web server:
# from the repository root
python3 -m http.server 8000
# then open http://localhost:8000 (or http://localhost:8000/?touch=1 to try the touch controls)
Opening index.html straight from disk usually works too, but some browsers block audio or file loading on file://, so a local server is the safer choice.
Refresh the README pictures
With a local server running, and Playwright's Chromium and ffmpeg installed:
PREVIEW_URL=http://127.0.0.1:8000 node tools/readme/capture.js # everything
PREVIEW_URL=http://127.0.0.1:8000 node tools/readme/capture.js phone ring # just these
python3 tools/readme/qr.py # the QR code (needs segno)
If Playwright is installed outside this repository, set PLAYWRIGHT_MODULE to its module path. The script stages each scene with the game's own functions on a fresh disposable game and steps the loops frame by frame, so they come out smooth on any machine. It writes to screenshots/readme/ and saves nothing. Look at every picture after a run. The older feature captures in docs/gallery.md come from node test/screenshots.js and the per-phase tests.
The game's fonts are bundled in fonts/, so captures render in the intended typefaces without any system fonts or network access.
Host it on GitHub Pages
Go to Settings → Pages and set Source to "GitHub Actions". The workflow in .github/workflows/pages.yml publishes the game on every push to main (it checks the offline file list first; after changing game files, run node tools/pwa/precache.js). This repository is published at dribblejerp-klunkdunker.github.io/echoes-of-the-shattered-octave.
Controls
| Action | Input |
|---|
| Move | W A S D · Shift runs · Caps Lock toggles always-run |
| Look | Click the view to capture the mouse, then move it freely (Esc gives it back; Options → Controls → Capture mouse turns this off) · without capture, move over the view and rest at a side edge to keep turning · right-drag · Q and arrow keys · Z levels your gaze |
| Full screen | Alt+Enter, or Options → Controls → Full screen |
| Attack | Left-click to thrust · hold and move the mouse to slash or chop · wheel or 1–9 changes weapon · F raises your guard: a quick parry turns a blow aside, a held block halves it |
| Use / Talk | E or Space, or click a bright name under the crosshair (the crosshair is the centre of the view, so look up or down to aim at something above or below you) |
| Pickpocket | Face a nearby Oakhaven adult, P to inspect · touch Purse / controller Y · Enter/Space or A attempts, Escape or B leaves |
| Disguise | Wear Synod Clerk Robes in Inventory · Y / touch Cover / controller Back shows status · Enter/A wears or removes, Escape/B leaves |
| Stables | Face the stable sign by the North Gate · 1/A hire for a day · 2/X return her · Escape/B leave |
| Law & Arrest | 1/A pay fine · 2/X enter prison · 3/Y bribe (Personality) · 4/Back threaten (Strength) · 5/Escape/B refuse and flee with grace · Prison: 1/A serve remaining sentence, 2/X pay, Escape/B return to cell |
| Bodies | Face nearby remains, G / touch Body / controller left-stick click · Enter/A drag or drop, H/X conceal at a recess, Escape/B leave |
| Distractions | Aim, then O / touch Throw / controller right-stick click · 1/A stone, 2/X empty bottle, Escape/B cancel |
| Songs | Tab opens the song-book · F1–F5 cast · N murmurs |
| Panels | I inventory · C character · L logbook · M map · T world map and travel · R rest · K ledger · Esc options and save |
| Journey needs | Esc options → Journey needs toggles hunger and sleep; switching it on starts you fed and rested |
| Hardcore | Esc options → Hardcore run asks to confirm; one save for the run, and death ends it |
| Weather | No input: the sky changes with the world clock, and C names it, its strength and how long it has left |
| Lantern | U lights or puts out your lantern (it matters most indoors and at night) |
Project layout
docs/ features.md (everything in Book One), gallery.md (each milestone), desktop.md, mods.md
tools/readme/ capture.js renders this page's pictures and loops from the game; qr.py draws the phone QR code
index.html entry point
css/style.css Daggerfall-style interface
js/assets.js embedded textures, sprites and weapon art
js/data.js canon: classes, NPCs, quests, items, weapons, armour, merchants, loot
js/maps.js districts, interiors and dungeons
js/engine.js raycaster renderer (flat path, and the relief path with per-pixel depth)
js/audio.js sound effects and music director
js/grove.js Part Three: Whisper-Grove story logic
js/coda.js Part Four: the Deep Woods and the Mausoleum of Chords
js/wilds.js Part Four: the Quiet Faith and the Arbiter's search party
js/party.js Companions (prototype): Kaelen and Lyra
js/anim.js Procedural animation and weather particles
js/travel.js World map and travel
js/gfx.js shared graphics switches for the modules below
js/sky.js night stars, painted panoramas, Kestrel flyovers
js/post.js soft fog, area mist, bloom, colour grades (post-processing)
js/water.js water reflections and ripples
js/decals.js wall decals and close-range detail
js/ceilings.js painted ceilings
js/scenery.js route-safe props (barrels, carts, statues, graves, bones)
js/flora.js swaying, player-reactive grass and reeds
js/directions.js procedural side and back views for enemies
js/lighting.js emissive glow, dark interiors and the lantern
js/pathing.js enemies route around cliffs, crags and terraces
js/presets.js Original/Low/Medium/High presets, Graphics options, CRT
js/creature-life.js enemy idle fidgets, alert startles, run strides
js/enemy-fx.js hit flinches, Requiem shatter, Brood-Mother shedding
js/telegraphs.js casting tells and collision-safe spawn entrances
js/fp-hands.js first-person draw/holster/switch, casting and climbing hands
js/fp-feel.js head bob, landing dip, hit shake, deafness, the Hush
js/doors.js swinging doors, chest lids, levers
js/reading.js full-screen held books and notes
js/companions.js Kaelen and Lyra: hit reactions, limp, Root-note hum and pose, song rings, camp loops
js/townsfolk.js talking gestures, daily routines, work loops
js/smalllife.js crows, rats and the cat; the moored Kestrel; glinting Light-glass
js/firesmoke.js chimney, campfire and golem smoke; splashes; torches and braziers
js/windbells.js wind on signs and banners, area leaves, swinging bells
js/gates.js rising gates and portcullises, the quarry cave-in
js/frames.js carved-wood frames, brass corners, blackletter headings, font credits
js/icons.js item icons and the painted paper doll
js/portraits.js mood portraits in conversation
js/logmap.js logbook sketches and automap stamps
js/screens.js area loading cards, death and ending illustrations
css/fonts.css the bundled fonts (fonts/, SIL Open Font License)
js/rumours.js tavern rumours and the Synod Gazette
js/couriers.js letters from the people you helped
js/dreams.js rest dreams and Light-glass memory echoes
js/tobin.js Tobin's journal pages and the logbook tracker
js/epilogue.js Kaelen and Lyra epilogues; Organum, Iron Peaks and Rift teasers
js/spatial-audio.js positional sound with wall muffling; rain, willow wind, thunder
js/voices.js procedural grunts, the Voices setting; the in-game credits
js/voice-acting.js plays the recorded lines in voices/ (manifest js/voice-lines.js; built by tools/voices/)
js/score.js Extended score: recorded area, boss and story pieces (music/extended/, made by tools/music/), procedural fallback
js/ripples.js directional on-screen sound ripples
js/painted.js paintings in img/painted/ (made by tools/art/) with the procedural pictures as fallback
js/playtools.js photo mode, speedrun timer, statistics
js/access.js Accessibility block and the translation catalog (locales/)
js/mods.js data-only mod schemas (schemas/), validator, Mod dungeons, dungeon editor
js/touchlink36.js the phone link: ?touch=1 (or a phone) starts the touch controls; the "turn sideways" hint
desktop/ Electron desktop shell and packaging (docs/desktop.md)
js/game.js game logic, UI, combat, dialogue, trade, saving
music/ soundtrack (MP3)
img/ portraits, title, map and ending art
screenshots/ pictures: readme/ for this page (tools/readme/), the rest for docs/gallery.md
