MediaWiki:Gadget-NWOBuilder.js: Difference between revisions

Revision as of 15:06, 26 September 2025

// NWO Character Builder gadget – mounts into <div id="nwo-builder">
(function (mw, $) {
  'use strict';

  function shouldRun($root) {
    if ($root && $root.length) return true;
    // Optional page-name guard:
    // return mw.config.get('wgPageName') === 'NWO_Character_Builder';
    return false;
  }

  function mount() {
    var $root = $('#nwo-builder').first();
    if (!$root.length || $root.data('mounted')) return;
    if (!shouldRun($root)) return;

    $root.addClass('nwo-builder').data('mounted', true);

    $root.html(
      '<div class="wrap">' +
        '<h1>NWO Character Builder (2d6)</h1>' +
        '<p class="muted">Pick a Background, add Traits & Skill Traits, then test 2d6 rolls with the live modifier. Built for the No Way Out dice rules.</p>' +
        '<div class="grid">' +
          '<div class="card"><div class="hd">1) Background, Trait Points & Selections</div><div class="bd" id="bg-area"></div></div>' +
          '<div class="card"><div class="hd">2) 2d6 Test Roller</div><div class="bd" id="roller-area"></div></div>' +
        '</div>' +
        '<div class="grid" style="margin-top:12px">' +
          '<div class="card"><div class="hd">3) Traits & Skills</div><div class="bd" id="traits-area"></div></div>' +
          '<div class="card"><div class="hd">4) Build Summary & Modifiers</div><div class="bd" id="summary-area"></div></div>' +
        '</div>' +
        '<p class="kudos">Rules referenced from the NWO <em>Dice Guide</em>. ' +
        '<a href="/wiki/Dice_Guide" style="color:var(--accent)">See the Dice Guide</a>.</p>' +
      '</div>'
    );

    /* =========================
       DATA from your spec
       ========================= */

    // Backgrounds with Base STR/FIT and thematic traits (mechanical effects included where present)
    var BACKGROUNDS = {
      Scavenger: {
        traitPoints: 8, base: { STR: 8, FIT: 8 },
        freeTraits: [
          { name: 'Outdoorsman', effects: {} },                 // Unaffected by weather (no dice mod)
          { name: 'Keen Hearing', effects: { Perception: 2 } }  // +2 Perception rolls
        ]
      },
      Thinker: {
        traitPoints: 10, base: { STR: 8, FIT: 8 },
        freeTraits: [
          { name: 'Dextrous', effects: {} },     // faster transfer (no dice mod)
          { name: 'Fast Learner', effects: {} }  // 125% XP (no dice mod)
        ]
      },
      Stalwart: {
        traitPoints: 8, base: { STR: 10, FIT: 10 },
        freeTraits: [
          { name: 'Fast Coagulation', effects: {} },             // (no dice mod)
          { name: 'Thick Skinned', effects: { Robustness: 2 } }  // +2 Robustness rolls
        ]
      },
      Labourer: {
        traitPoints: 8, base: { STR: 8, FIT: 8 },
        freeTraits: [
          { name: 'Heavy Lifter', effects: { Robustness: 1 } },  // +1 Robustness rolls
          { name: 'Organized', effects: {} }                     // (no dice mod)
        ]
      }
    };

    // Positive & Negative trait lists with mechanical effects from your table
    var POSITIVE_TRAITS = [
      { name: 'Speed Demon',        cost: 1, effects: {} },
      { name: 'Low Thirst',         cost: 1, effects: {} },
      { name: 'Herbalist',          cost: 1, effects: {} },
      { name: 'Iron Gut',           cost: 1, effects: { Robustness: 1 } },
      { name: 'Cats Eyes',          cost: 2, effects: { Perception: 2 } },
      { name: 'Adrenaline Junkie',  cost: 2, effects: { Initiative: 2 } },
      { name: 'Graceful',           cost: 2, effects: { Stealth: 2 } },
      { name: 'Brave',              cost: 2, effects: { Resolve: 2 } },
      { name: 'Inconspicuous',      cost: 2, effects: { Stealth: 2 } },
      { name: 'Fast Healer',        cost: 2, effects: { Robustness: 1 } },
      { name: 'Resilient',          cost: 2, effects: {} },
      { name: 'Fit',                cost: 3, effects: {} },
      { name: 'Strong',             cost: 3, effects: {} },
      { name: 'Eagle Eyed',         cost: 3, effects: { 'Ranged Attack': 1, Perception: 2 } },
      { name: 'Desensitized',       cost: 4, effects: { Resolve: 4 } }
    ];

    var NEGATIVE_TRAITS = [
      { name: 'Prone to Illness',   cost: 1, effects: { Robustness: -1 } },
      { name: 'Smoker',             cost: 1, effects: { Robustness: -1 } },
      { name: 'Slow Driver',        cost: 1, effects: {} },
      { name: 'Slow Learner',       cost: 1, effects: {} },
      { name: 'Weak Stomach',       cost: 1, effects: { Robustness: -1 } },
      { name: 'Fear of Blood',      cost: 2, effects: { Resolve: -2 } },
      { name: 'Agoraphobic',        cost: 2, effects: { Resolve: -2 } },
      { name: 'All Thumbs',         cost: 2, effects: {} },
      { name: 'Claustrophobic',     cost: 2, effects: { Resolve: -2 } },
      { name: 'Cowardly',           cost: 2, effects: { Resolve: -2 } },
      { name: 'Pacifist',           cost: 2, effects: { Initiative: -2 } },
      { name: 'Short Sighted',      cost: 2, effects: { 'Ranged Attack': -1, Perception: -1 } },
      { name: 'Thin Skinned',       cost: 2, effects: { Robustness: -2 } },
      { name: 'Conspicuous',        cost: 2, effects: { Stealth: -2 } },
      { name: 'Clumsy',             cost: 2, effects: { Stealth: -2 } },
      { name: 'Hard of Hearing',    cost: 2, effects: { Perception: -2 } },
      { name: 'Disorganized',       cost: 3, effects: {} },
      { name: 'Weak',               cost: 3, effects: {} },
      { name: 'Unfit',              cost: 3, effects: {} },
      { name: 'Illiterate',         cost: 4, effects: {} },
      { name: 'Deaf',               cost: 4, effects: { Perception: -4 } },
      // The spec lists these with "+4 Resolve" despite being negatives; implemented as written:
      { name: 'Very Weak',          cost: 5, effects: { Resolve: 4 } },
      { name: 'Very Unfit',         cost: 5, effects: { Resolve: 4 } }
    ];

    // Skill tiers (costs/starts/caps/limits) from your table
    var SKILL_TIERS = {
      Amateur:     { cost: 1, start: 6,  cap: 6,  limitPerChar: Infinity },
      Experienced: { cost: 2, start: 8,  cap: 8,  limitPerChar: 2 },
      Expert:      { cost: 3, start: 10, cap: 10, limitPerChar: 1 }
    };

    // Skill Trait groups (one selection per group; applies the tier’s modifier to each listed skill)
    // Names chosen to match your list; the `list` are the checks that will receive the mod.
    var SKILL_GROUPS = [
      { key: 'Carpenter',    label: 'Carpenter',    list: ['Carpentry'] },
      { key: 'Farmer',       label: 'Farmer',       list: ['Farming'] },
      { key: 'Doctor',       label: 'Doctor',       list: ['First Aid'] },
      { key: 'Engineer',     label: 'Engineer',     list: ['Mechanics', 'Electronics'] },
      { key: 'Metalworker',  label: 'Metalworker',  list: ['Metalworking'] },
      { key: 'Housekeeper',  label: 'Housekeeper',  list: ['Cooking', 'Tailoring'] },
      { key: 'Shooter',      label: 'Shooter',      list: ['Aiming', 'Reloading'] },
      { key: 'OutdoorsmanS', label: 'Outdoorsman',  list: ['Fishing', 'Foraging', 'Trapping'] },
      { key: 'Athlete',      label: 'Athlete',      list: ['Nimble', 'Sprinting'] },
      { key: 'Rogue',        label: 'Rogue',        list: ['Sneaking', 'Lightfooted'] },
      { key: 'FighterSurv',  label: 'Fighter (Survival)', list: ['Axe', 'Spear', 'Maintenance'] },
      { key: 'FighterBlunt', label: 'Fighter (Blunt)',    list: ['Long Blunt', 'Short Blunt', 'Maintenance'] },
      { key: 'FighterBlade', label: 'Fighter (Blade)',    list: ['Long Blade', 'Short Blade', 'Maintenance'] }
    ];

    /* =========================
       Engine / Calculations
       ========================= */
    // All checks the UI/roller can address (base stats, combat, senses, + full skill list)
    var CHECKS = [
      'Strength','Fitness','Perception','Resolve','Initiative','Robustness',
      'Melee Attack','Melee Defence','Ranged Attack',
      'Carpentry','Farming','First Aid','Mechanics','Electronics','Metalworking',
      'Cooking','Tailoring','Aiming','Reloading','Fishing','Foraging','Trapping',
      'Nimble','Sprinting','Sneaking','Lightfooted','Stealth','Axe','Spear',
      'Maintenance','Long Blunt','Short Blunt','Long Blade','Short Blade'
    ];

    var state = { background: 'Scavenger', pos: new Set(), neg: new Set(), skills: {} };

    function ensureMetric(breakdown, key) {
      if (!breakdown[key]) breakdown[key] = { base: 0, traits: 0, skills: 0, derived: 0, total: 0 };
    }

    function getSkillMod(groupKey) {
      var tier = state.skills[groupKey];
      return tier ? Math.floor(SKILL_TIERS[tier].start / 2) : 0; // L6→+3, L8→+4, L10→+5
    }

    function calcMaxHP(fit) {
      if (fit >= 10) return 6;
      if (fit >= 8)  return 5;
      if (fit >= 6)  return 4;
      if (fit >= 4)  return 3;
      return 2;
    }

    function sumEffects() {
      var breakdown = {};
      var i;

      for (i = 0; i < CHECKS.length; i++) {
        breakdown[CHECKS[i]] = { base: 0, traits: 0, skills: 0, derived: 0, total: 0 };
      }

      var bg = BACKGROUNDS[state.background];
      breakdown.Strength.base   = bg.base.STR;
      breakdown.Fitness.base    = bg.base.FIT;
      breakdown.Perception.base = 0; // default base; your previous tool used Perception base 2—spec doesn’t, so 0.
      breakdown.Resolve.base    = 0;

      // Positive traits
      for (i = 0; i < POSITIVE_TRAITS.length; i++) {
        var pt = POSITIVE_TRAITS[i];
        if (state.pos.has(pt.name)) {
          for (var k1 in pt.effects) if (pt.effects.hasOwnProperty(k1)) {
            ensureMetric(breakdown, k1);
            breakdown[k1].traits += pt.effects[k1];
          }
        }
      }
      // Negative traits
      for (i = 0; i < NEGATIVE_TRAITS.length; i++) {
        var nt = NEGATIVE_TRAITS[i];
        if (state.neg.has(nt.name)) {
          for (var k2 in nt.effects) if (nt.effects.hasOwnProperty(k2)) {
            ensureMetric(breakdown, k2);
            breakdown[k2].traits += nt.effects[k2];
          }
        }
      }
      // Background freebies
      for (i = 0; i < bg.freeTraits.length; i++) {
        var ft = bg.freeTraits[i];
        for (var k3 in ft.effects) if (ft.effects.hasOwnProperty(k3)) {
          ensureMetric(breakdown, k3);
          breakdown[k3].traits += ft.effects[k3];
        }
      }

      // Skill traits (apply the tier modifier to each skill in that group’s list)
      for (i = 0; i < SKILL_GROUPS.length; i++) {
        var group = SKILL_GROUPS[i];
        var mod = getSkillMod(group.key);
        if (!mod) continue;
        for (var j = 0; j < group.list.length; j++) {
          var skill = group.list[j];
          ensureMetric(breakdown, skill);
          breakdown[skill].skills += mod;
        }
      }

      // Strength → derived Melee Attack/Defence (unchanged logic)
      breakdown.Strength.total = breakdown.Strength.base + breakdown.Strength.traits;
      var str = breakdown.Strength.total;
      if (str <= 4)       { breakdown['Melee Attack'].derived += -1; breakdown['Melee Defence'].derived += -1; }
      else if (str <= 6)  { /* no mod */ }
      else if (str <= 8)  { breakdown['Melee Attack'].derived += 1;  breakdown['Melee Defence'].derived += 1; }
      else if (str >= 10) { breakdown['Melee Attack'].derived += 2;  breakdown['Melee Defence'].derived += 2; }

      // Fitness → Robustness
      breakdown.Fitness.total = breakdown.Fitness.base + breakdown.Fitness.traits;
      var fitMod = Math.max(Math.floor((breakdown.Fitness.total - 6) / 2), 0);
      breakdown.Robustness.derived += fitMod;

      // Totals
      for (i = 0; i < CHECKS.length; i++) {
        var key = CHECKS[i];
        var m = breakdown[key];
        m.total = (m.base || 0) + (m.traits || 0) + (m.skills || 0) + (m.derived || 0);
      }

      breakdown.MaxHP = { value: calcMaxHP(breakdown.Fitness.total) };
      return breakdown;
    }

    function spend() {
      var pts = BACKGROUNDS[state.background].traitPoints, i, tier;
      for (i = 0; i < POSITIVE_TRAITS.length; i++) if (state.pos.has(POSITIVE_TRAITS[i].name)) pts -= POSITIVE_TRAITS[i].cost;
      for (i = 0; i < NEGATIVE_TRAITS.length; i++) if (state.neg.has(NEGATIVE_TRAITS[i].name)) pts += NEGATIVE_TRAITS[i].cost;
      for (var key in state.skills) if (state.skills.hasOwnProperty(key)) {
        tier = state.skills[key];
        pts -= SKILL_TIERS[tier].cost;
      }
      return pts;
    }

    function skillTierCounts() {
      var exp = 0, ex = 0, tier, key;
      for (key in state.skills) if (state.skills.hasOwnProperty(key)) {
        tier = state.skills[key];
        if (tier === 'Experienced') exp++;
        if (tier === 'Expert')      ex++;
      }
      return { exp: exp, ex: ex };
    }

    /* =========================
       Rendering
       ========================= */
    function renderBackground() {
      var bg = BACKGROUNDS[state.background], i;

      var opts = '', keys = Object.keys(BACKGROUNDS);
      for (i = 0; i < keys.length; i++) {
        var k = keys[i];
        opts += '<option value="' + k + '"' + (state.background === k ? ' selected' : '') + '>' + k + '</option>';
      }

      var freebies = '';
      for (i = 0; i < bg.freeTraits.length; i++) {
        freebies += '<span class="pill">' + bg.freeTraits[i].name + '</span>';
      }

      var used = (bg.traitPoints - spend());
      var html =
        '<label>Background</label>' +
        '<select id="backgroundSel">' + opts + '</select>' +
        '<div class="totals section">' +
          '<span class="pill">Trait Points: <b>' + bg.traitPoints + '</b></span>' +
          '<span class="pill">Base STR: <b>' + bg.base.STR + '</b></span>' +
          '<span class="pill">Base FIT: <b>' + bg.base.FIT + '</b></span>' +
          freebies +
        '</div>' +
        '<div class="muted section">Background gives Trait Points, base STR/FIT, and two thematic traits.</div>' +
        '<div class="totals section">' +
          '<span class="pill">Trait Points Used: <b>' + used + '</b></span>' +
          '<span class="pill ' + (spend() < 0 ? 'warning' : 'success') + '">Remaining: <b>' + spend() + '</b></span>' +
        '</div>';

      $('#bg-area').html(html);
      $('#backgroundSel').on('change', function (e) {
        state.background = e.target.value;
        renderAll();
      });
    }

    function renderTraitsAndSkills() {
      var counts = skillTierCounts();
      var html =
        '<details open>' +
          '<summary><strong>Positive Traits</strong> <span class="small">(costs subtract from your points)</span></summary>' +
          '<div class="list" id="positives"></div>' +
        '</details>' +
        '<details open style="margin-top:12px">' +
          '<summary><strong>Negative Traits</strong> <span class="small">(refund points)</span></summary>' +
          '<div class="list" id="negatives"></div>' +
        '</details>' +
        '<div class="section" style="margin-top:12px">' +
          '<strong>Skill Traits</strong>' +
          '<div class="small">Amateur (1 pt, L6 cap), Experienced (2 pts, L8 cap, <b>max 2</b>), Expert (3 pts, L10 cap, <b>max 1</b>). One tier per skill group.</div>' +
          '<div id="skills"></div>' +
          '<div class="totals section">' +
            '<span class="pill">Experienced: <b>' + counts.exp + '/2</b></span>' +
            '<span class="pill">Expert: <b>' + counts.ex + '/1</b></span>' +
          '</div>' +
        '</div>';

      $('#traits-area').html(html);

      // Positives
      var posHtml = '', i, k, v;
      for (i = 0; i < POSITIVE_TRAITS.length; i++) {
        var t = POSITIVE_TRAITS[i];
        var id = 'pos_' + t.name.replace(/\s+/g, '_');
        var checked = state.pos.has(t.name) ? 'checked' : '';
        var mods = '';
        for (k in t.effects) if (t.effects.hasOwnProperty(k)) {
          v = t.effects[k];
          mods += '<span class="tag">' + k + ': ' + (v > 0 ? '+' : '') + v + '</span>';
        }
        posHtml += '<label class="checkbox"><input type="checkbox" id="' + id + '" ' + checked + '/> ' +
                   '<div><b>' + t.name + '</b> <span class="muted">(cost ' + t.cost + ')</span>' +
                   '<div class="flex">' + mods + '</div></div></label>';
      }
      $('#positives').html(posHtml);
      for (i = 0; i < POSITIVE_TRAITS.length; i++) (function (t) {
        $('#pos_' + t.name.replace(/\s+/g, '_')).on('change', function (e) {
          if (e.target.checked) state.pos.add(t.name); else state.pos.delete(t.name);
          renderAll();
        });
      })(POSITIVE_TRAITS[i]);

      // Negatives
      var negHtml = '';
      for (i = 0; i < NEGATIVE_TRAITS.length; i++) {
        var nt = NEGATIVE_TRAITS[i];
        var nid = 'neg_' + nt.name.replace(/\s+/g, '_');
        var nchecked = state.neg.has(nt.name) ? 'checked' : '';
        var nmods = '';
        for (k in nt.effects) if (nt.effects.hasOwnProperty(k)) {
          v = nt.effects[k];
          nmods += '<span class="tag">' + k + ': ' + (v > 0 ? '+' : '') + v + '</span>';
        }
        negHtml += '<label class="checkbox"><input type="checkbox" id="' + nid + '" ' + nchecked + '/> ' +
                   '<div><b>' + nt.name + '</b> <span class="muted">(refund ' + nt.cost + ')</span>' +
                   '<div class="flex">' + nmods + '</div></div></label>';
      }
      $('#negatives').html(negHtml);
      for (i = 0; i < NEGATIVE_TRAITS.length; i++) (function (t) {
        $('#neg_' + t.name.replace(/\s+/g, '_')).on('change', function (e) {
          if (e.target.checked) state.neg.add(t.name); else state.neg.delete(t.name);
          renderAll();
        });
      })(NEGATIVE_TRAITS[i]);

      // Skills (one select per group)
      var skillsHtml = '';
      for (i = 0; i < SKILL_GROUPS.length; i++) {
        var s = SKILL_GROUPS[i];
        var val = state.skills[s.key] || '';
        var scounts = skillTierCounts();
        var opts = '';
        var tiers = ['', 'Amateur', 'Experienced', 'Expert'];
        for (var ti = 0; ti < tiers.length; ti++) {
          var tier = tiers[ti];
          if (tier === '') {
            opts += '<option value=""' + (val === '' ? ' selected' : '') + '>None</option>';
          } else if (tier === 'Experienced' && scounts.exp >= 2 && val !== tier) {
            opts += '<option disabled>Experienced (max 2)</option>';
          } else if (tier === 'Expert' && scounts.ex >= 1 && val !== tier) {
            opts += '<option disabled>Expert (max 1)</option>';
          } else {
            var tdata = SKILL_TIERS[tier];
            var lab = tier + ' — cost ' + tdata.cost + ', start L' + tdata.start + ', cap ' + tdata.cap;
            opts += '<option ' + (val === tier ? 'selected' : '') + ' value="' + tier + '">' + lab + '</option>';
          }
        }
        var shownStart = val ? SKILL_TIERS[val].start : 0;
        var shownMod   = val ? Math.floor(SKill_TierSafe(val)) : 0; // fixed below

        // Safely compute modifier for current selection
        function SKill_TierSafe(tn){ return SKILL_TIERS[tn] ? SKILL_TIERS[tn].start / 2 : 0; }

        shownMod = val ? Math.floor(SKill_TierSafe(val)) : 0;

        skillsHtml += '' +
          '<div class="row" style="align-items:center;margin:6px 0">' +
            '<div><b>' + s.label + '</b> <span class="small muted">(' + s.list.join(', ') + ')</span></div>' +
            '<div><select id="skill_' + s.key + '">' + opts + '</select></div>' +
            '<div class="small" style="grid-column:1 / -1; color:var(--muted)">' +
              'Level: <b>' + shownStart + '</b> • Modifier: <b>' + shownMod + '</b>' +
            '</div>' +
          '</div>';
      }
      $('#skills').html(skillsHtml);
      for (i = 0; i < SKILL_GROUPS.length; i++) (function (s) {
        $('#skill_' + s.key).on('change', function (e) {
          var v = e.target.value || null;
          if (v) state.skills[s.key] = v; else delete state.skills[s.key];
          renderAll();
        });
      })(SKILL_GROUPS[i]);
    }

    function renderSummary() {
      var b = sumEffects(), i;
      var html = '' +
        '<div class="note">Breakdown: Base + Traits + Skills + Derived (if any) = Total. ' +
        'Skill modifiers are computed as <b>(Skill Level ÷ 2)</b>. Background freebies with dice effects are applied.</div>' +
        '<table class="stat-table breakdown-table"><thead>' +
          '<tr>' +
            '<th>Stat/Check</th><th>Base</th><th>Traits</th><th>Skills</th><th>Derived</th><th>Total</th>' +
          '</tr>' +
        '</thead><tbody>';

      // Print everything in CHECKS order
      for (i = 0; i < CHECKS.length; i++) {
        var ck = CHECKS[i], row = b[ck] || { base:0, traits:0, skills:0, derived:0, total:0 };
        var extra = (ck === 'Fitness') ? ' (Max HP: ' + (b.MaxHP && b.MaxHP.value) + ')' : '';
        html += '<tr><td>' + ck + '</td><td>' + (row.base||0) + '</td><td>' + (row.traits||0) + '</td><td>' + (row.skills||0) + '</td><td>' + (row.derived||0) + '</td><td>' + (row.total||0) + extra + '</td></tr>';
      }

      html += '</tbody></table>';
      $('#summary-area').html(html);
    }

    function renderRoller() {
      // Build options dynamically from CHECKS, but keep a few combat/senses first
      var preferred = ['Melee Attack','Melee Defence','Ranged Attack','Perception','Resolve','Initiative','Robustness'];
      var inPref = {};
      var i, optHtml = '';
      for (i = 0; i < preferred.length; i++) inPref[preferred[i]] = true;

      for (i = 0; i < preferred.length; i++) optHtml += '<option>' + preferred[i] + '</option>';
      for (i = 0; i < CHECKS.length; i++) if (!inPref[CHECKS[i]]) optHtml += '<option>' + CHECKS[i] + '</option>';

      var html =
        '<label>Roll Test Type</label>' +
        '<select id="rollType">' + optHtml + '</select>' +
        '<div class="rollbox">' +
          '<button id="rollBtn">Roll 2d6</button>' +
          '<div class="dice"><div class="die" id="d1">–</div><div class="die" id="d2">–</div></div>' +
          '<div>' +
            '<div class="total" id="total">Total —</div>' +
            '<div class="small" id="breakdown">Modifier breakdown will appear here.</div>' +
          '</div>' +
        '</div>';

      $('#roller-area').html(html);
      $('#rollBtn').on('click', function () {
        var name = $('#rollType').val();
        var a = 1 + Math.floor(Math.random() * 6);
        var b2 = 1 + Math.floor(Math.random() * 6);
        var bd = sumEffects();
        var row = bd[name] || { base:0, traits:0, skills:0, derived:0, total:0 };
        var mod = row.total || 0;
        $('#d1').text(a); $('#d2').text(b2);
        $('#total').text('Total ' + (a + b2 + mod) + '  (2d6=' + (a + b2) + ' ' + (mod >= 0 ? '+' : '') + mod + ')');
        $('#breakdown').html('Base: ' + (row.base||0) + ' + Traits: ' + (row.traits||0) + ' + Skills: ' + (row.skills||0) + ' + Derived: ' + (row.derived||0) + ' = <b>' + mod + '</b>');
      });
    }

    function renderAll() {
      renderBackground();
      renderTraitsAndSkills();
      renderSummary();
      renderRoller();
    }

    renderAll();
  }

  $(mount);
  mw.hook('wikipage.content').add(function () { mount(); });

})(mediaWiki, jQuery);