Sprime

Posted on Mar 6

I reverse-engineered manhwa power systems into a real habit RPG — the game design archaeology of SYD

#buildinpublic #javascript #gamedev #pwa

There's a panel in I Am a Sorcerer King where the MC's Luck stat hits 1000 through accumulated effort. He becomes a god.

I started wondering: what if luck isn't abstract? What if it has components you can actually build?

Looks it up. It does.

Preparedness — skill, hard work, readiness
Active pursuit — putting yourself where opportunity finds you
Intuition — pattern recognition from experience
Resilience — converting bad luck into good

Things you can track. Things you can level up. Like stats.

So I built SYD — a self-improvement RPG that runs in the browser. Then I spent a long time asking: what makes effort feel real and weighty in games, and how do I reverse-engineer that into real-world mechanics?

This is what I found.

The game design archaeology

1. Shadow of Mordor's Nemesis System → The Behavioral Trace

In Shadow of Mordor, enemies remember your failures. They adapt to your specific weaknesses and grow stronger from them.

SYD has a rolling 30-day Behavioral Trace — a black box log of what you do and what you consistently ignore. World Bosses that map to neglected stats grow stronger from that stagnation. Your to-do list becomes a living narrative with consequences.

// Each day logs: { date, completed: [{stat, xp}], loggedIn: true }
// Entries older than 30 days pruned on read
// The trace feeds the AI processor context on every call
function loadTrace() {
    const raw = localStorage.getItem(TRACE_KEY);
    const trace = raw ? JSON.parse(raw) : [];
    const cutoff = new Date();
    cutoff.setDate(cutoff.getDate() - 30);
    return trace.filter(e => new Date(e.date) >= cutoff);
}

2. Zelda's Ability Gating → The Power Play

In Zelda, you find the hookshot specifically to pull off a boss's armour. The right tool for the right lock.

SYD's AI processor identifies your highest momentum stat and frames it as the key to a World Boss's defence. If you've been grinding Intelligence hardest and a Strength boss appears, the system finds where your sharpest weapon still applies. Growth feels powerful — you're rewarded for depth.

3. Skyrim's Radiant AI → The Efficiency Bridge

Bethesda's Radiant system generates tasks based on where you are in the world. SYD generates them based on where you are in your habits.

If you've been avoiding a stat, the AI finds a way to layer it onto something you already do. Listen to an Intelligence brief during a Strength run. Stack a Charisma directive onto a routine you keep. Activation energy drops. Growth feels easy.

4. Pokémon Type-Matching → Stat-Weighted Boss Damage

Type matters. Targeting matters.

World Bosses have a primaryStat and linkedStats (AI-generated on boss creation). The damage model:

// Three-tier stat-weighted damage
const primaryMatch = b.stat === stat;
const linkedMatch  = Array.isArray(b.linkedStats) && b.linkedStats.includes(stat);
const multiplier   = primaryMatch ? 1.0 : linkedMatch ? 0.6 : 0.1;
const dmg          = Math.max(1, Math.round(baseXP * multiplier));

Incursions (AI-generated missions) follow the same logic but hit harder on match: 1.5× / 0.9× / 0.15×.

You can beat a boss with unfocused effort. It just takes much longer. The cost of untargeted work is visible.

5. Dead Space's Diegetic UI → The Base Map

Dead Space put health and ammo on Isaac's suit — information inside the world, not overlaid on it.

SYD's map is a 3×3 facility grid you navigate as an operator. Your avatar moves between nodes with a CSS transition and a dot trail. You don't click tabs — you move through a space. The terminal becomes a place.

// Avatar moves between facility tile centres
// Three dots drawn at 25%, 50%, 75% along the path, then fade
function drawDotTrail(viewport, from, to) {
    [0.25, 0.5, 0.75].forEach((t, i) => {
        const dot = document.createElement('span');
        dot.className = 'map-trail-dot';
        dot.style.left = (from.x + (to.x - from.x) * t) + 'px';
        dot.style.top  = (from.y + (to.y - from.y) * t) + 'px';
        viewport.appendChild(dot);
        setTimeout(() => dot.classList.add('map-trail-dot--visible'), i * 40);
        setTimeout(() => { dot.classList.remove('map-trail-dot--visible'); setTimeout(() => dot.remove(), 400); }, 800);
    });
}

The philosophy

The thread through all of it: the system should be a tactical advisor, not a boss.

Most productivity tools tell you what to do. SYD watches what you've actually done and scouts the path of least resistance. Smart over hard. Always.

The stack

Vanilla JS + HTML + CSS
Firebase Firestore (cloud save, opt-in)
Web Audio API (four-layer ambient system)
Service Worker (offline + PWA)
No framework. No bundler. No dependencies.

Deliberately minimal. Needs to run on low-end devices and slow networks.

Live terminal

syd-protocol.github.io/terminal

Open source under AGPL-3.0. Contributions welcome — especially around game design, performance, and quest content.

Go awaken an operator.

DEV Community