RPG Systems

🏋️‍♂️ Exercise 1: Three Pillars of Progression — Index-Pointer Dialogue Graph + Cached Equipment-Bonus Materialization + Stateful Self-Multiplying XP Curve in One HTML5 Canvas

Objective: Build a runnable JS+HTML5-canvas program (~65 lines) that distills the lesson's RPGSystem character/inventory/equipment/quest/dialogue orchestration into one cohesive demonstration of three orthogonal RPG-progression disciplines visible per frame on an 800×400 canvas split into three labeled regions: LEFT panel renders the dialogue's current node and its numbered responses with each response showing its next: integer pointer; TOP-RIGHT panel renders the equipped weapon and its cached character.bonusStrength accumulator alongside the per-frame composed total strength + bonusStrength; BOTTOM panel renders the level/xp/xpToNext triple with a green progress bar showing fractional fill. Three orthogonal RPG-progression disciplines visible per frame: (a) Dialogue-tree-as-index-pointer-graph at NARRATIVE-FLOW scope — each dialogue node is an array element indexed by integer and each response carries next: <int> (or -1 for end-of-conversation) routing the conversation as data the renderer indexes into rather than scattered control flow with hardcoded if/elif chains per branch; adding a new dialogue branch is a single new array element + one next: <new-index> pointer edit with zero changes to the renderer's traversal loop; same data-driven externalization pattern as architecture_save_load schema (chat-58), pathfinding terrain-cost dict (chat-60), behavior-trees child-list-order (chat-61), decision-making personality dict (chat-62), procedural generation seed (chat-68), publishing_executables .spec (chat-70), publishing_marketing pitch templates (chat-71), publishing_performance algorithmic-axis (chat-72), publishing_platforms TARGETS+ADAPTERS dicts (chat-73), publishing_updates CADENCES+MIGRATIONS dicts (chat-74), genres_puzzle 2D-array board (chat-75), genres_puzzle_python 2D-array board (chat-76), and genres_racing TRACKS dict (chat-77) — TWENTIETH lesson reinforcing data-driven externalization across Phase 8, FIRST applied at NARRATIVE-FLOW scope where the dialogue's branching graph IS data the renderer reads. (b) Equipment-bonus-as-bidirectionally-maintained-cached-state at STAT-COMPOSITION scope — equip(w) does if (weapon) character.bonusStrength -= weapon.strength; THEN weapon = w; character.bonusStrength += w.strength; in lock-step pairs maintained on character.bonusStrength as an INCREMENTALLY-CACHED accumulator; per-frame render reads total = strength + bonusStrength from the cache rather than iterating over currently-equipped items each call; the cached-write makes per-frame reads O(1) at the cost of pairing equip and unequip into required-coupled double-writes (forgetting the subtract half = bonus drifts forever and never matches reality, the classic stat-bug source); the on-demand alternative getBonusStrength() { return Object.values(equipment).reduce((a, e) => a + (e?.stats?.strength || 0), 0); } would make write/read order irrelevant but pay per-frame iteration cost across N equipment slots; same pay-once-amortize-thereafter pattern category as chat-72 publishing_performance's CIRCLE_CACHE blit-vs-rasterize at COMPUTATION-COST scope and chat-64 particle_effects's max_lifetime snapshot at OBJECT-LIFECYCLE scope, here applied at STAT-COMPOSITION scope where the 'thing computed once per equip-event' is the bonus delta and the 'reuse forever (until next equip-event)' is the cached character.bonusStrength field read every render. (c) XP-curve-as-stateful-self-multiplying-exponential at LEVEL-PROGRESSION scope — character.xpToNext = Math.floor(character.xpToNext * 1.5) updates the NEXT-LEVEL threshold each level-up via multiplicative scaling on the CURRENT threshold value, producing a 1.5^(level-1) exponential curve as a side effect of repeated stateful updates rather than as a pure function xpForLevel(level) = 100 * Math.pow(1.5, level - 1) (which supports random-access queries like 'what's xpToNext for level 17 from level 1?' without simulating 16 multiplications) or as a hardcoded lookup table XP_TABLE = [0, 100, 250, 475, ...] (which requires touching every entry on rebalance and silently caps progression at table length); multi-level XP grants use while (character.xp >= character.xpToNext) { levelUp(); } precisely because each levelUp call mutates BOTH xp -= xpToNext AND xpToNext *= 1.5 so skipping a single levelUp call breaks the curve permanently; three encoding choices (stateful self-multiply / pure function / lookup table) span a maintainability-vs-efficiency-vs-randomness-of-access tradeoff and the lesson chose stateful for locality and simplicity. HUD shows current dialogue node, equipped weapon, cached bonus value, level, xp, threshold, and the rule-of-progression as a literal text string — three orthogonal RPG-progression disciplines visible per frame as concrete strings, integers, and a fractional-fill bar. ADVANCES the genres module 3/9 → 4/9 partial at chat-78 M1; module-completeness stays 12/13 since genres doesn't close in one chat (5 genres lessons remain after chat 78: rpg_python / strategy / strategy_python / tower_defense / tower_defense_python).

Instructions:

1. Set up an 800×400 HTML5 canvas with a dark background and acquire its 2D context; declare canvas-width/height locals for layout math.
2. Encode axis (a) — define a dialogue array of three nodes {text, responses: [{text, next}]} where each response's next field is an integer index back into the dialogue array (or -1 for end-of-conversation); declare let dlgNode = 0 as the current-node index. The dialogue's branching graph IS data the renderer indexes into.
3. Encode axis (b) — declare character with {strength: 10, bonusStrength: 0, level: 1, xp: 0, xpToNext: 100} and a weapons array with three entries having different strength bonus values; write equip(w) that subtracts the prior weapon's bonus from character.bonusStrength THEN sets weapon = w THEN adds the new bonus; write unequip() that subtracts the current bonus and clears the slot. Both functions maintain the cached accumulator bidirectionally.
4. Encode axis (c) — write gainXp(amount) that adds to character.xp then runs while (character.xp >= character.xpToNext) looping character.xp -= character.xpToNext; character.level++; character.xpToNext = Math.floor(character.xpToNext * 1.5); per iteration so multi-level grants work and the threshold is mutated in lock-step with each level-up.
5. Wire keyboard handlers — 1/2 select dialogue response (advancing dlgNode through the next pointer chain); E equip a random weapon from the array; U unequip the current weapon; X grant 50 XP. Guard the dialogue handler with dlgNode >= 0 so it stops accepting input after end-of-conversation.
6. Render three labeled regions per frame — LEFT (x: 10) renders the current dialogue node text and its numbered responses each annotated with their next integer pointer; TOP-RIGHT (x: 420) renders the equipped weapon plus character.strength + character.bonusStrength + their TOTAL composed value; BOTTOM (x: 10, y: 220) renders level/xp/xpToNext labels plus a 400×24 progress bar with a green inner fill at width (character.xp / character.xpToNext) * 398 and the literal stateful-rule string xpToNext = floor(xpToNext * 1.5) as a HUD label.
7. Drive rendering via requestAnimationFrame(render) recursion at the end of render(); bootstrap with one initial render() call.

const canvas = document.getElementById('rpg');
const ctx = canvas.getContext('2d');
const W = canvas.width, H = canvas.height;

// (a) Dialogue tree as index-pointer graph
const dialogue = [
  {text: 'Greetings, traveler! Trouble afoot.', responses: [
    {text: 'Tell me more', next: 1},
    {text: 'Farewell',     next: -1}]},
  {text: 'Goblins raid the farms. Help us!', responses: [
    {text: 'On my way',    next: -1},
    {text: 'Reward?',      next: 2}]},
  {text: 'Fifty gold and a steel sword.', responses: [
    {text: 'Deal!',        next: -1}]}
];
let dlgNode = 0;

// (b) Equipment bonus as bidirectionally-cached state
const character = {strength: 10, bonusStrength: 0, level: 1, xp: 0, xpToNext: 100};
let weapon = null;
const weapons = [
  {name: 'Iron Sword', strength: 2},
  {name: 'Steel Axe',  strength: 5},
  {name: 'War Hammer', strength: 8}];

function equip(w) {
  if (weapon) character.bonusStrength -= weapon.strength;  // subtract prior
  weapon = w;
  character.bonusStrength += w.strength;                   // add new
}
function unequip() {
  if (!weapon) return;
  character.bonusStrength -= weapon.strength;
  weapon = null;
}

// (c) XP curve as stateful self-multiplying exponential
function gainXp(amount) {
  character.xp += amount;
  while (character.xp >= character.xpToNext) {
    character.xp -= character.xpToNext;
    character.level++;
    character.xpToNext = Math.floor(character.xpToNext * 1.5);  // *1.5
  }
}

addEventListener('keydown', e => {
  const k = e.key.toLowerCase();
  if ((k === '1' || k === '2') && dlgNode >= 0) {
    const r = dialogue[dlgNode].responses[parseInt(k) - 1];
    if (r) dlgNode = r.next;
  }
  if (k === 'e') equip(weapons[Math.floor(Math.random() * weapons.length)]);
  if (k === 'u') unequip();
  if (k === 'x') gainXp(50);
});

function render() {
  ctx.fillStyle = '#1a1a1a'; ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = '#fff'; ctx.font = '14px monospace';
  // (a) Dialogue panel
  ctx.fillText('DIALOGUE GRAPH (1/2 select response):', 10, 24);
  if (dlgNode >= 0) {
    ctx.fillText('node[' + dlgNode + ']: ' + dialogue[dlgNode].text, 10, 54);
    dialogue[dlgNode].responses.forEach((r, i) => {
      ctx.fillText((i + 1) + ') ' + r.text + '  -> next=' + r.next, 20, 84 + i * 22);
    });
  } else { ctx.fillStyle = '#888'; ctx.fillText('-- conversation ended --', 10, 54); }
  // (b) Equipment panel
  ctx.fillStyle = '#fff';
  ctx.fillText('EQUIPMENT (E equip random / U unequip):', 420, 24);
  ctx.fillText('weapon: ' + (weapon ? weapon.name + ' (+' + weapon.strength + ' STR)' : 'none'), 430, 54);
  ctx.fillText('character.strength      = ' + character.strength, 430, 84);
  ctx.fillText('character.bonusStrength = ' + character.bonusStrength + '  (cached)', 430, 106);
  ctx.fillStyle = '#0f0';
  ctx.fillText('TOTAL                   = ' + (character.strength + character.bonusStrength), 430, 134);
  // (c) XP curve panel
  ctx.fillStyle = '#fff';
  ctx.fillText('XP CURVE (X grant 50 XP):', 10, 220);
  ctx.fillText('level:    ' + character.level, 20, 250);
  ctx.fillText('xp:       ' + character.xp + ' / ' + character.xpToNext, 20, 272);
  ctx.fillText('rule:     xpToNext = floor(xpToNext * 1.5)', 20, 300);
  ctx.strokeStyle = '#888'; ctx.strokeRect(20, 318, 400, 24);
  ctx.fillStyle = '#0f0';
  ctx.fillRect(21, 319, (character.xp / character.xpToNext) * 398, 22);
  requestAnimationFrame(render);
}
render();