when idle (shows the
// chosen option's label), but on focus turns into a type-to-filter search — far
// nicer than a giant native dropdown once a slot has many options. Mirrors the
// LootSearchInput interaction (focus opens, mousedown picks, blur closes).
// options: [{ key, label, hint?, color? }].
function SearchSelect({ options, value, onChange, disabled, placeholder='Type to search…' }){
const [open, setOpen] = useState(false);
const [query, setQuery] = useState('');
const cur = options.find(o => o.key === value);
const curLabel = cur ? cur.label : (value || 'None');
const q = query.trim().toLowerCase();
const filtered = options.filter(o =>
!q || o.label.toLowerCase().includes(q) || o.key.toLowerCase().includes(q));
return (
{ setQuery(e.target.value); setOpen(true); }}
onFocus={e=>{ setOpen(true); setQuery(''); e.target.select(); }}
// Selecting an option keeps focus on the input (mousedown preventDefault),
// so a second click fires no onFocus — reopen the list on click too.
onClick={e=>{ if (!open){ setOpen(true); setQuery(''); e.target.select(); } }}
onBlur={()=>setTimeout(()=>{ setOpen(false); setQuery(''); }, 160)}
style={{width:'100%', boxSizing:'border-box', cursor: open?'text':'pointer',
opacity: disabled?0.5:1}}
/>
{open && (
{filtered.length === 0 && (
no match
)}
{filtered.map(o => {
const active = o.key === value;
return (
{ e.preventDefault(); onChange(o.key); setOpen(false); setQuery(''); }}
style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:10, width:'100%',
textAlign:'left', padding:'5px 9px', fontFamily:'var(--mono)', fontSize:11, cursor:'pointer',
border:'none', borderBottom:'1px solid var(--border-1)',
background: active ? 'color-mix(in oklab, var(--teal) 16%, transparent)' : 'transparent',
color: active ? 'var(--teal)' : (o.color || 'var(--text-1)')}}
onMouseEnter={e=>{ if(!active) e.currentTarget.style.background='var(--bg-2)'; }}
onMouseLeave={e=>{ if(!active) e.currentTarget.style.background='transparent'; }}>
{o.label}
{o.hint && {o.hint} }
);
})}
)}
);
}
// Armour-slot picker — builds tier-filtered options (name + bonus hint) and
// renders them through the shared SearchSelect.
function GearSlotPicker({ items, value, onChange, ct, disabled, hiddenTiers }){
const bonusBits = (v) => {
const bits = [];
if (v.str) bits.push(`+${v.str} str`);
if (v.rngStr && ct==='ranged') bits.push(`+${v.rngStr} rstr`);
if (v.slashAtt && ct==='melee') bits.push(`+${v.slashAtt} slash`);
if (v.rngAtt && ct==='ranged') bits.push(`+${v.rngAtt} rng`);
if (v.magAtt && ct==='magic') bits.push(`+${v.magAtt} mag`);
if (v.magDmg && ct==='magic') bits.push(`+${v.magDmg}% mdmg`);
if (v.prayer) bits.push(`+${v.prayer} pray`);
return bits.join(' · ');
};
const options = Object.entries(items)
.filter(([k]) => k==='none' || k===value || !tierHidden(k, hiddenTiers))
.map(([k, v]) => ({
key: k,
label: (v.name || k) + (v.approx && k!=='none' ? ' ~' : ''),
hint: k!=='none' ? (bonusBits(v) || v.note || '') : '',
}));
return
{rows.map(row => {
const tierKeys = row.tiers.map(t => t[0]);
return (
{row.label}
{row.tiers.map(([k, shortLbl]) => {
const on = sel.has(k);
const isDba = k === 'dba_spec';
const c = isDba ? 'red' : 'teal';
return (
pickTier(tierKeys, k)} title={row.tiers.find(t=>t[0]===k)?.[2]||''} style={{
flex:'1 1 0', minWidth:34, fontFamily:'var(--mono)', fontSize:11,
padding:'5px 4px', borderRadius:3, cursor:'pointer', whiteSpace:'nowrap',
border:`1px solid ${on ? `color-mix(in oklab, var(--${c}) 50%, var(--border-2))` : 'var(--border-2)'}`,
background: on ? `color-mix(in oklab, var(--${c}) 18%, var(--bg-2))` : 'var(--bg-2)',
color: on ? `var(--${c})` : 'var(--text-2)', transition:'all .1s',
}}>{shortLbl}
);
})}
);
})}
{rows.map(row => {
const tierKeys = row.tiers.map(t => t[0]);
const pre = row.abbr ? row.abbr + ' ' : '';
return (
{row.label}
{row.tiers.map(([k, shortLbl, fullLbl]) => {
const on = sel.has(k);
const isDba = k === 'dba_spec';
const c = isDba ? 'red' : 'teal';
const txt = pre ? pre + shortLbl : (fullLbl || shortLbl);
return (
pickTier(tierKeys, k)} style={{
flex:'1 1 0', minWidth:90, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.02em',
padding:'5px 8px', borderRadius:3, cursor:'pointer', whiteSpace:'nowrap',
border:`1px solid ${on ? `color-mix(in oklab, var(--${c}) 50%, var(--border-2))` : 'var(--border-2)'}`,
background: on ? `color-mix(in oklab, var(--${c}) 18%, var(--bg-2))` : 'var(--bg-2)',
color: on ? `var(--${c})` : 'var(--text-2)', transition:'all .1s',
}}>{txt}
);
})}
);
})}
{crumbs.map((c,i) => (
{i>0 && / }{i === crumbs.length-1 ? {c} : c}
))}
{extras.map((e,i)=>
{e} )}
● {status}
2004scape v274
tick · 0.6s
);
}
// Hiscores lookup — fetches player stats from the local server proxy.
// Only works when running via run_sim.py (http://localhost:8000).
function HiscoresLookup({ set }) {
const isLocal = typeof window !== 'undefined' &&
(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
const [name, setName] = React.useState(() => { try { return localStorage.getItem('sim_hiscore_player') || ''; } catch { return ''; } });
const [status, setStatus] = React.useState(null);
const [loading, setLoading] = React.useState(false);
if (!isLocal) return (
hiscores lookup — run via python run_sim.py to enable
);
const lookup = async () => {
const n = name.trim();
if (!n) return;
try { localStorage.setItem('sim_hiscore_player', n); } catch {}
setLoading(true); setStatus(null);
try {
const res = await fetch(`/api/hiscores?player=${encodeURIComponent(n)}`);
// Read as text first so a non-JSON body (HTML error page, empty) gives
// a clear message instead of a bare JSON.parse exception.
const text = await res.text();
if (!text.trim()) {
setStatus({ ok: false, msg: 'server returned empty response — check run_sim.py console' });
setLoading(false); return;
}
let data;
try { data = JSON.parse(text); }
catch { setStatus({ ok: false, msg: 'server returned non-JSON — is run_sim.py up to date?' }); setLoading(false); return; }
if (!res.ok || data.error) {
setStatus({ ok: false, msg: data.error || `HTTP ${res.status}` });
} else {
const s = data.skills || {};
const clamp = v => Math.min(99, Math.max(1, typeof v === 'number' ? v : parseInt(v) || 1));
if (s.attack) set('attack', clamp(s.attack));
if (s.strength) set('strength', clamp(s.strength));
if (s.defence) set('defence', clamp(s.defence));
if (s.hitpoints) set('hp', clamp(s.hitpoints));
if (s.prayer) set('prayer', clamp(s.prayer));
if (s.ranged) set('ranged', clamp(s.ranged));
if (s.magic) set('magic', clamp(s.magic));
const filled = ['attack','strength','defence','hitpoints','prayer','ranged','magic']
.filter(k => s[k]).length;
setStatus({ ok: true, msg: `✓ ${data.player} — ${filled} stats loaded` });
}
} catch (e) {
const msg = (e.message||'').toLowerCase();
if (msg.includes('fetch') || msg.includes('networkerror') || msg.includes('failed')) {
setStatus({ ok: false, msg: 'server not reachable — run via run_sim.py' });
} else {
setStatus({ ok: false, msg: e.message || 'unknown error' });
}
}
setLoading(false);
};
return (
{loading ? '…' : 'Load'}
{status && (
{ status.msg }
)}
);
}
// =======================================================================
// =======================================================================
function PlayerSidebar({input, set, setMonster, result}){
const ct = input.combatType;
const prayers = useMemo(() => E.availablePrayers(ct), [ct]);
const potions = useMemo(() => E.availablePotions(ct), [ct]);
const styles = E.STYLES[ct];
// when combat type changes, swap to valid style/prayer/potion if needed
useEffect(()=>{
// Validate the selected stance/style. For melee the valid set depends on
// the equipped weapon's stance table (e.g. a halberd has no 'accurate');
// fall back to the weapon's first stance. For ranged/magic use the fixed
// style set for the combat type.
if (ct === 'melee'){
const ids = E.weaponStances(input.weapon).map(s => s.id);
if (!ids.includes(input.style)) set('style', ids[0]);
} else if (!styles[input.style]){
set('style', Object.keys(styles)[0]);
}
// drop any selected prayers/boosts not valid for this combat type
const validPrayers = (input.prayers||[]).filter(k => prayers[k]);
if (validPrayers.length !== (input.prayers||[]).length) set('prayers', validPrayers.length?validPrayers:['none']);
const validBoosts = (input.boosts||[]).filter(k => potions[k]);
if (validBoosts.length !== (input.boosts||[]).length) set('boosts', validBoosts.length?validBoosts:['none']);
// eslint-disable-next-line
}, [ct, input.weapon]);
return (
{/* combat type segmented */}
Combat type
{Object.entries(E.COMBAT_TYPES).map(([k,v])=>(
set('combatType',k)}>{v.label}
))}
Levels
{ct==='melee' && (<>
set('attack',v)} />
set('strength',v)} />
)}
{ct==='ranged' && (
set('ranged',v)} />
)}
{ct==='magic' && (
set('magic',v)} />
)}
set('defence',v)} />
set('hp',v)} />
set('prayer',v)} />
Stance
{ct==='melee' && attack type per weapon }
{ct==='melee' ? (
{E.weaponStances(input.weapon).map(st => {
const base = styles[st.style];
const on = input.style===st.id;
return (
set('style',st.id)} style={{
display:'flex', justifyContent:'space-between', alignItems:'center',
padding:'6px 10px', borderRadius:3, cursor:'pointer', textAlign:'left',
border:`1px solid ${on?'color-mix(in oklab, var(--teal) 50%, var(--border-2))':'var(--border-2)'}`,
background: on?'color-mix(in oklab, var(--teal) 16%, var(--bg-2))':'var(--bg-2)',
fontFamily:'var(--mono)', fontSize:11,
color: on?'var(--teal)':'var(--text-2)', transition:'all .1s',
}}>
{st.name} · {base?.label || st.style}
{st.type}
);
})}
) : (
{Object.entries(styles).map(([k,v]) => (
set('style',k)}>{v.label.split(' ')[0]}
))}
)}
Trip rates
after banking
XP / hr
{fmtK(result.effectiveXpPerHour)}
Net GP / hr
{fmtK(result.effectiveNetGpPerHour)}
{Array.isArray(result.skillXpBreakdown) && result.skillXpBreakdown.length > 0 && (
XP / hr by skill
effective
{result.skillXpBreakdown.map(s => (
{s.name}
{fmtK(s.xpPerHour)}
))}
Total
{fmtK(result.totalXpPerHour)}
)}
)}
);
}
// Equipment overview — player loadout summary (weapon, bonuses, prayers,
// potions). Lives in the right panel; computes ct/labels internally so it can
// be dropped anywhere that has `input`.
const COMBAT_LABELS = {
melee: { accB:'Att bonus', dmgB:'Str bonus' },
ranged: { accB:'Rng bonus', dmgB:'Rng str' },
magic: { accB:'Mag att', dmgB:'Mag dmg %' },
};
function EquipmentOverview({input}){
const ct = input.combatType;
const labels = COMBAT_LABELS[ct] || COMBAT_LABELS.melee;
return (
<>
Equipment overview
edit in {ct} tab
{ct==='ranged' &&
}
{ct==='magic' &&
}
{(E.WEAPONS[input.weapon]?.poisonSeverity > 0) && (
)}
{input.sustained &&
}
{input.ringOfWealth &&
}
{input.gear?.ring === 'ring_of_recoil' &&
}
);
}
// compact label:value row for the sidebar equipment overview
function OverviewRow({k, v, mono, accent}){
return (
{k}
{v}
);
}
function prayerSummary(input){
const keys = (input.prayers||[]).filter(k=>k!=='none');
if (!keys.length) return 'none';
return keys.map(k => E.PRAYERS[k]?.label.split(' (')[0] || k).join(', ');
}
function boostSummary(input){
const keys = (input.boosts||[]).filter(k=>k!=='none');
if (!keys.length) return 'none';
return keys.map(k => E.POTIONS[k]?.label || k).join(', ');
}
// =======================================================================
// EQUIPMENT PANE — one per combat type (melee / ranged / magic).
// Holds weapon/ammo/spell, amulet, prayers, potions, sustained mode,
// DBA spec, and Ring of Wealth. Selecting the tab forces combatType.
// =======================================================================
function EquipmentPane({type, input, set, hiddenTiers = {}}){
const ct = type;
const prayers = useMemo(() => E.availablePrayers(ct), [ct]);
const potions = useMemo(() => E.availablePotions(ct), [ct]);
const EQ = window.Equipment;
const AMU = EQ?.AMULETS || { none:{name:'None'} };
const labels = {
melee: { accB:'Slash att', dmgB:'Str bonus', bSuffix:'slash' },
ranged: { accB:'Range att', dmgB:'Range str', bSuffix:'arrow' },
magic: { accB:'Magic att', dmgB:'Magic dmg', bSuffix:'%' },
}[ct];
// All worn slots (weapon/ammo/spell handled separately above).
const ARMOUR_SLOTS = (EQ?.SLOT_DEFS || []);
// Recompute acc/dmg/speed from the FULL loadout (weapon + ammo + armour).
const recompute = (gear, weaponKey, ammoKey) => {
if (!EQ){ return; }
const loadout = { ...(gear||{}), weapon: weaponKey, ammo: ammoKey };
const r = EQ.loadoutToInput(loadout, ct);
set('accBonus', r.accBonus);
if (ct !== 'magic') set('dmgBonus', r.dmgBonus);
if (r.attackSpeed) set('attackSpeed', r.attackSpeed);
};
const gear = input.gear || {};
const setSlot = (slotKey, itemKey) => {
const nextGear = { ...gear, [slotKey]: itemKey };
set('gear', nextGear);
recompute(nextGear, input.weapon, input.ammo);
// Equipping the ring of wealth auto-enables its gem-table effect (and
// removing it disables it) so the loot EV matches what's worn.
if (slotKey === 'ring') set('ringOfWealth', itemKey === 'ring_of_wealth');
// Chaos gauntlets give +3 bolt max hit (magic only) — auto-toggle the
// matching boost so it tracks what's actually worn in the gloves slot.
if (slotKey === 'gloves' && ct === 'magic'){
const cur = (input.boosts || []).filter(b => b !== 'chaos_gauntlets');
set('boosts', itemKey === 'chaos_gauntlets' ? [...cur, 'chaos_gauntlets'] : cur);
}
};
// ---- Best in slot ----------------------------------------------------
// Fill every worn slot with the most OFFENSIVE item for this combat type,
// judged by lowest time-to-kill on the current target (so accuracy vs damage
// is traded off correctly by the real DPS math, not a fixed weight). Keeps the
// chosen weapon / ammo / spell. Pure offence — a defensive pick like the
// anti-dragon shield gets dropped, so re-add it by hand if you need it.
const bestInSlot = () => {
if (!EQ || !E) return;
const ttkOf = (g) => {
const r = EQ.loadoutToInput({ ...g, weapon: input.weapon, ammo: input.ammo }, ct);
try {
return E.simulate({
...input, gear: g,
accBonus: r.accBonus,
dmgBonus: ct === 'magic' ? input.dmgBonus : r.dmgBonus,
attackSpeed: r.attackSpeed ?? input.attackSpeed,
}).ttkSec;
} catch { return Infinity; }
};
// Strength-bonus key that matters for THIS combat type — used as the
// tie-break below.
const STR_KEY = ct === 'magic' ? 'magDmg' : ct === 'ranged' ? 'rngStr' : 'str';
const strOf = (items, k) => items[k]?.[STR_KEY] || 0;
let g = { ...gear };
// Offence is additive across slots, so a single pass finds the optimum; a
// second pass is cheap insurance against any tie/interaction.
for (let pass = 0; pass < 2; pass++){
for (const slot of ARMOUR_SLOTS){
// The ring slot carries no offensive stats; ring of recoil only "wins"
// on TTK because its reflect damage shortens the kill — but it's
// situational (no XP, shatters, costs gp, members-only). True best-in-slot
// is the ring of wealth (free gem-table upgrade, no downside). Force it;
// the user swaps to recoil by hand when it actually helps.
if (slot.key === 'ring'){ g = { ...g, ring: 'ring_of_wealth' }; continue; }
// Score every candidate by TTK, then choose: among items within a
// small relative tolerance of the best TTK (a DPS wash), prefer the one
// carrying the most strength bonus — it scales better with levels and
// buffs, so e.g. the berserker helm (+3 str) wins over the warrior helm
// (+5 slash accuracy) when they're effectively tied on the target.
const cands = Object.keys(slot.items).map(k => ({ k, t: ttkOf({ ...g, [slot.key]: k }) }));
const minT = Math.min(...cands.map(c => c.t));
const tol = isFinite(minT) ? minT * 0.01 + 1e-6 : Infinity;
cands.sort((a, b) => {
const aNear = a.t <= minT + tol, bNear = b.t <= minT + tol;
if (aNear && bNear){
const sd = strOf(slot.items, b.k) - strOf(slot.items, a.k);
if (sd) return sd; // more strength wins the wash
return a.t - b.t; // else the faster kill
}
return a.t - b.t; // clear winner by TTK
});
g = { ...g, [slot.key]: cands[0].k };
}
}
set('gear', g);
set('ringOfWealth', g.ring === 'ring_of_wealth');
recompute(g, input.weapon, input.ammo);
};
const onWeapon = (wk) => {
if (wk==='custom'){ set('weapon','custom'); return; }
const wp = E.WEAPONS[wk];
set('weapon', wk); set('weaponName', wp.name);
const ng = { ...gear }; recompute(ng, wk, input.ammo);
};
const onAmmo = (ak) => {
if (ak==='custom'){ set('ammo','custom'); set('ammoRangeBonus',0); return; }
const a=E.ARROWS[ak]; set('ammo',ak); set('ammoRangeBonus',a.rangeBonus);
recompute(gear, input.weapon, ak);
};
// Ranged sub-mode: 'bow' uses arrows from the Ammo slot; 'thrown' weapons
// occupy the mainhand and are their own ammo (no bow possible).
const curSub = E.WEAPONS[input.weapon]?.sub;
const rangedMode = curSub === 'thrown' ? 'thrown' : 'bow';
const setRangedMode = (mode) => {
if (mode === rangedMode) return;
// pick the first weapon of the chosen sub-mode
const first = Object.entries(E.WEAPONS).find(([,v])=>v.type==='ranged' && v.sub===mode);
if (!first) return;
const [wk, wp] = first;
set('weapon', wk); set('weaponName', wp.name);
if (mode === 'thrown'){
// thrown weapon carries its own ammo; clear the arrow slot
set('ammo','none'); set('ammoRangeBonus',0);
recompute(gear, wk, 'none');
} else {
// default a sensible arrow if none/throwing ammo was selected
const am = (E.ARROWS[input.ammo]?.kind==='arrow') ? input.ammo : 'rune_arrow';
const a = E.ARROWS[am]; set('ammo',am); set('ammoRangeBonus',a?a.rangeBonus:0);
recompute(gear, wk, am);
}
};
// Totals for the live bonus summary strip
const totals = EQ ? EQ.sumBonuses({ ...gear, weapon:input.weapon, ammo:input.ammo }) : null;
return (
{ct} loadout
{input.weaponName || 'custom'} · +{input.accBonus}/+{ct==='magic'?input.dmgBonus+'%':input.dmgBonus} · {input.attackSpeed}t
{/* ---- LEFT: gear ---- */}
{ct==='ranged'?'Ranged weapon':ct==='magic'?'Staff':'Weapon'}
{ct==='ranged' && (
{['bow','thrown'].map(m => (
setRangedMode(m)}
style={{flex:1, padding:'6px 0', fontFamily:'var(--mono)', fontSize:11, textTransform:'uppercase', letterSpacing:'.5px',
cursor:'pointer', borderRadius:3, border:'1px solid '+(rangedMode===m?'var(--teal)':'var(--border-2)'),
background: rangedMode===m?'color-mix(in srgb, var(--teal) 18%, transparent)':'var(--bg-2)',
color: rangedMode===m?'var(--teal)':'var(--text-3)'}}>
{m==='bow'?'Bow + arrows':'Thrown'}
))}
)}
v.type===ct && (ct!=='ranged' || (v.sub||'bow')===rangedMode)
&& (k===input.weapon || !tierHidden(k, hiddenTiers)))
.map(([k,v])=>({ key:k, label:v.name, hint:`+${v.accBonus}/+${v.dmgBonus} · ${v.speed}t` })),
{ key:'custom', label:'Custom…' },
]} />
{ct==='ranged' && rangedMode==='bow' && (
Arrows
v.kind==='arrow' && (k===input.ammo || !tierHidden(k, hiddenTiers)))
.map(([k,v])=>({ key:k, label:v.name, hint:`+${v.rangeBonus} rng` })),
{ key:'custom', label:'Custom…' },
]} />
)}
{ct==='ranged' && rangedMode==='thrown' && (
Thrown weapons occupy the mainhand and are their own ammo — no
bow or arrow slot. Range str +{E.ARROWS[E.WEAPONS[input.weapon]?.ammoKey]?.rangeBonus ?? 0}.
)}
{(ct==='melee' || ct==='ranged') && (() => {
// Special-attack weapon: a 2nd weapon brought only to spec on cooldown.
const specOpts = ct==='melee'
? [['none','None'],['dragon_dagger','Dragon dagger'],['dragon_dagger_p','Dragon dagger (p)'],['dragon_longsword','Dragon longsword'],['dragon_mace','Dragon mace'],['dragon_halberd','Dragon halberd']]
: [['none','None'],['magic_shortbow','Magic shortbow'],['magic_longbow','Magic longbow']];
const dbaOn = ct==='melee' && (input.boosts||[]).includes('dba_spec');
const cur0 = input.specWeapon || 'none';
// Guard against a leftover spec key from the other combat type
// (melee DDS shown while on the ranged tab) — fall back to None.
const cur = specOpts.some(o=>o[0]===cur0) ? cur0 : 'none';
let si = null;
if (!dbaOn && cur!=='none' && input.monster){
try { si = E.simulate(input).specInfo; } catch {}
}
return (
Special attack weapon
set('specWeapon', k)} disabled={dbaOn}
placeholder="Type to search…"
options={specOpts.map(([k,lbl])=>({ key:k, label:lbl }))} />
{/* Thrown main has no arrow slot, but a bow spec fires arrows —
let the user pick which arrows the spec uses from the quiver. */}
{ct==='ranged' && rangedMode==='thrown' && (cur==='magic_shortbow' || cur==='magic_longbow') && (
Spec arrows · quiver for the bow spec
set('specAmmo', k)}
placeholder="Type to search arrows…"
options={Object.entries(E.ARROWS)
.filter(([k,v])=>v.kind==='arrow' && (k===(input.specAmmo||'rune_arrow') || !tierHidden(k, hiddenTiers)))
.map(([k,v])=>({ key:k, label:v.name, hint:`+${v.rangeBonus} rng` }))} />
)}
{dbaOn && (
DBA spec is your strength source — all spec energy goes to that, so no DPS spec weapon.
)}
{si && (
Specs / hr (on cooldown) {si.specsPerHour.toFixed(1)}
Spec max hit{si.hits>1?` ×${si.hits}`:''} {si.maxHit}
Spec hit chance {(si.hitChance*100).toFixed(1)}%
DPS gain +{si.dpsGainPct.toFixed(1)}%
)}
);
})()}
{ct==='magic' && (
Spell
{ const s=E.SPELLS[k]; set('spell',k); set('spellBase',s.base); }}
options={Object.entries(E.SPELLS).map(([k,v])=>({ key:k, label:v.label }))} />
{(() => {
const sp = E.SPELLS[input.spell];
const cost = E.spellRuneCost(input.spell, input.weapon);
const provided = E.WEAPONS[input.weapon]?.provides;
const runeNames = sp?.runes ? Object.entries(sp.runes).map(([r,q])=>{
const free = r===provided;
return `${q}× ${r.replace('rune','')}${free?' (free)':''}`;
}).join(', ') : '';
return sp?.runes ? (
{runeNames} · ~{fmtInt(cost)} gp/cast
{sp.god && input.charge!==false ? · +~{fmtInt(E.chargeCostPerCast(5*E.TICK_SECONDS))} charge : null}
) : null;
})()}
{E.SPELLS[input.spell]?.god && (
)}
)}
Worn equipment
★ Best in slot
{ARMOUR_SLOTS.map(slot => {
// A two-handed weapon (bows, dragon halberd) occupies the off-hand,
// so the shield slot is locked to None while one is equipped.
const twoHand = !!(E?.WEAPONS[input.weapon]?.twoHand);
const offHandLocked = slot.key==='shield' && twoHand;
const cur = offHandLocked ? 'none' : (gear[slot.key] || 'none');
const items = slot.items;
return (
{slot.label}
{offHandLocked ? (
— 2h weapon (no off-hand)
) : (
setSlot(slot.key, k)} />
)}
);
})}
{totals && (
{/* Offence */}
Attack bonuses
{ct==='melee' && <>
Stab +{totals.stabAtt}
Slash +{totals.slashAtt}
Crush +{totals.crushAtt}
Strength +{totals.str} }
{ct==='ranged' && <>
Range att +{totals.rngAtt}
Range str +{totals.rngStr} }
{ct==='magic' && <>
Magic att +{totals.magAtt}
Magic dmg +{totals.magDmg}% }
{/* Defence + prayer overview */}
Defence bonuses
Stab {fmtSigned(totals.stabDef)}
Slash {fmtSigned(totals.slashDef)}
Crush {fmtSigned(totals.crushDef)}
Magic {fmtSigned(totals.magDef)}
Ranged {fmtSigned(totals.rngDef)}
Prayer {fmtSigned(totals.prayer)}
)}
Bonus override
{/* ---- RIGHT: buffs ---- */}
Prayers
set('prayers',v)} />
Potions & boosts
set('boosts',v)} />
{ct==='melee' && (input.boosts||[]).includes('dba_spec') && (
)}
Sustained mode
set('sustained',v)} color="amber"/>
{input.sustained && (
)}
Ring of Wealth
set('ringOfWealth',v)} color="teal"/>
Affects ~randomjewel only — caps the gem roll so it never whiffs.
Ultra-rare table unaffected.
{input.gear?.ring === 'ring_of_recoil' && (
Ring of recoil
set('trip', {...(input.trip||{}), recoilRings: Math.max(1, v)})} />
Reflects floor(dmg/10)+1 back per hit taken — kills faster but
gives no XP. Each ring shatters after 40 reflected dmg; the 1st is
equipped, spares take {Math.max(0,(input.trip?.recoilRings ?? 1)-1)} inv slot{((input.trip?.recoilRings ?? 1)-1)===1?'':'s'}.
Assuming all your rings are full. No recoil while safespotted, and
members areas only.
)}
);
}
// =======================================================================
// CENTER PANES — one per tab
// =======================================================================
function StatsPane({input, result}){
return (
DPS
{fmt2(result.dps)}
avg dmg/sec · {fmt2(result.avgHit)} per hit
XP / hour (effective)
{fmtK(result.effectiveXpPerHour)}
{fmtK(result.xpPerHour)} at the kill · ×{fmtPct(result.tripEfficiency)} after banking · {fmtInt(result.xpPerKill)} xp ea
GP / hour (net, effective)
{fmtK(result.effectiveNetGpPerHour)}
gross {fmtK(result.effectiveGpPerHour)} − supplies {fmtK(result.supplyCostPerKill*result.effectiveKph)} · {fmtGpXp(gpPerXp(result))} gp/xp
Hit chance
{fmtPct(result.hitChance)}
att roll {fmtInt(result.attRoll)} vs def {fmtInt(result.defRoll)}
Combat roll derived · {input.combatType}
{result.trip && (
<>
Banking trip
{result.trip.bound==='food'?'food-bound':result.trip.bound==='loot'?'inventory-bound':result.trip.bound==='prayer'?'prayer-bound':result.trip.bound==='recoil'?'recoil-bound':'no banking'} · bank {fmtTime(result.trip.bankSeconds)}
)}
Hit distribution uniform 0..max · including miss
XP routing per dmg dealt
{Object.entries(result.xpRouting).map(([k,v])=>(
{k}
+{v.toFixed(2)}
))}
);
}
function ComparePane({input, set}){
const LS_IRREL = 'sim_irrelevant_v1';
const DEFAULT_IRREL = ['_bandit_camp_leader', 'bandit_camp_leader'];
const [irrelevant, setIrrelevant] = useState(() => {
try {
const stored = localStorage.getItem(LS_IRREL);
if (stored) return new Set(JSON.parse(stored));
} catch {}
return new Set(DEFAULT_IRREL);
});
const toggleIrrelevant = (id) => {
setIrrelevant(prev => {
const next = new Set(prev);
if (next.has(id)) next.delete(id); else next.add(id);
try { localStorage.setItem(LS_IRREL, JSON.stringify([...next])); } catch {}
return next;
});
};
const [compNameQ, setCompNameQ] = useState('');
const [compLootQ, setCompLootQ] = useState('');
const compFiltered = !!(compNameQ || compLootQ);
// Per-monster custom setups: each row simulates with its own saved setup;
// monsters without one use the DEFAULT loadout (not whatever custom setup
// happens to be live right now).
const rows = useMemo(() => {
const setups = input.monsterSetups || {};
const onCustom = !!(input.monster && setups[input.monster.id]) && !input.editingDefault;
const baseSetup = onCustom ? (input.defaultSetup || {}) : {};
return E.MONSTERS.map(m => {
const ov = setups[m.id];
const alchOn = !!(input.alchByMonster||{})[m.id]; // per-monster alch decision
const sim = ov
? {...input, ...ov, monster:m}
: {...input, ...baseSetup, monster:m,
trip:{...((baseSetup.trip)||input.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null, scarce:null}};
sim.trip = {...(sim.trip||{}), alching:alchOn};
sim.overheadSec = (input.overheadByMonster||{})[m.id] ?? null; // per-monster (null → engine default)
sim.cannon = null; // compare rows are solo — cannon is a per-spot Stats-tab overlay
return {m, r:E.simulate(sim), custom:!!ov};
});
}, [input]);
const LS_SORT = 'sim_compare_sort_v1';
const [sort, setSort] = useState(() => {
try { const s = localStorage.getItem(LS_SORT); if (s) return JSON.parse(s); } catch {}
return {key:'effectiveXpPerHour', dir:-1};
});
useEffect(() => { try { localStorage.setItem(LS_SORT, JSON.stringify(sort)); } catch {} }, [sort]);
// Irrelevant rows always go to the bottom; within each group, apply column sort.
const filteredRows = useMemo(() => rows.filter(({m}) => {
if (compNameQ && !m.name.toLowerCase().includes(compNameQ.toLowerCase())) return false;
if (!matchLoot(m, compLootQ)) return false;
return true;
}), [rows, compNameQ, compLootQ]);
const sorted = useMemo(() => [...filteredRows].sort((a, b) => {
const ai = irrelevant.has(a.m.id) ? 1 : 0;
const bi = irrelevant.has(b.m.id) ? 1 : 0;
if (ai !== bi) return ai - bi;
// Monster name sorts alphabetically; first click is A→Z (dir -1).
if (sort.key === 'name') return a.m.name.localeCompare(b.m.name) * -sort.dir;
return (a.r[sort.key] - b.r[sort.key]) * sort.dir;
}), [filteredRows, sort, irrelevant]);
const sortBy = k => setSort(s => s.key===k ? {key:k,dir:-s.dir} : {key:k,dir:-1});
const TH = ({k,label,right=true}) => (
sortBy(k)} style={{cursor:'pointer', userSelect:'none', whiteSpace:'nowrap'}}>
{label} {sort.key===k ? (k==='name' ? (sort.dir<0?'▲':'▼') : (sort.dir<0?'▼':'▲')) : ''}
);
// Scale bars against relevant monsters only — keeps comparison meaningful.
const relevantRows = rows.filter(({m}) => !irrelevant.has(m.id));
const maxXph = Math.max(...relevantRows.map(x=>x.r.effectiveXpPerHour), 1);
const maxGph = Math.max(...relevantRows.map(x=>Math.max(0,x.r.effectiveNetGpPerHour)), 1);
return (
All monsters · default {input.combatType} loadout · ● = custom setup
{irrelevant.size} hidden · click row → set target · click N/A → toggle relevance
{setCompNameQ(''); setCompLootQ('');}} style={{
fontFamily:'var(--mono)', fontSize:10, padding:'3px 9px', borderRadius:3, cursor:'pointer',
border:'1px solid var(--border-2)', background:'var(--bg-2)', color:'var(--text-2)'}}>
reset filters
)}
{compFiltered ? `${filteredRows.length} / ${rows.length}` : `${rows.length} monsters`}
#
XP / hr
NET GP / hr
N/A
{sorted.map(({m,r,custom},i) => {
const sel = m.id===input.monster.id;
const isIrrel = irrelevant.has(m.id);
const dimColor = isIrrel ? 'var(--text-3)' : undefined;
return (
set('monster',m)}>
{i+1}
{sel?'▸ ':' '}{m.name}{custom? ● :null} · lvl {m.level}
{fmtPct(r.hitChance)}
{r.maxHit}
{fmt2(r.dps)}
{fmtTime(r.ttkSec)}
{fmtInt(r.killsPerHour)}
{fmtK(r.effectiveXpPerHour)}
{fmtK(r.effectiveNetGpPerHour)}
{e.stopPropagation(); toggleIrrelevant(m.id);}}
style={{
fontFamily:'var(--mono)', fontSize:9, letterSpacing:'.04em',
padding:'2px 6px', borderRadius:3, cursor:'pointer',
border:`1px solid ${isIrrel ? 'var(--red)' : 'var(--border-2)'}`,
background: isIrrel ? 'color-mix(in oklab, var(--red) 18%, var(--bg-2))' : 'var(--bg-2)',
color: isIrrel ? 'var(--red)' : 'var(--text-3)',
}}>
{isIrrel ? '✕' : 'N/A'}
);
})}
);
}
function LootPane({input, result, lootPrefs={}, setLootPref, setLootPrefsBulk, set}){
const m = input.monster;
const [compOpen, setCompOpen] = useState(() => {
try { return localStorage.getItem('sim_loot_comp_open') !== '0'; } catch { return true; }
});
const toggleComp = () => setCompOpen(o => { const n=!o; try{localStorage.setItem('sim_loot_comp_open', n?'1':'0');}catch{} return n; });
// Which sub-table rows (gem/herb/casket) are expanded to show contents.
const [expandedRows, setExpandedRows] = useState(() => new Set());
const toggleRow = (name) => setExpandedRows(s => { const n=new Set(s); n.has(name)?n.delete(name):n.add(name); return n; });
const totalEvRaw = result.lootBreakdown.reduce((s,d)=>s+d.evGp, 0) || 1;
const dropsRaw = [...result.lootBreakdown].sort((a,b)=>b.evGp-a.evGp);
const natCost = window.GameData?.ITEM_PRICES?.naturerune ?? 265;
// Unidentified herb price (2004 sold herbs as "unidentified herb" in 11-stacks)
const herbUnidPrice = window.GameData?.ITEM_PRICES?.unidentified_guam ?? 15;
// 'value' pref (high-value-only): leave sub-table rolls worth <= threshold on
// the ground. EVs come pre-filtered from GameData.
const valueThreshold = window.GameData?.VALUE_THRESHOLD ?? 2000;
const herbEvHigh = window.GameData?.HERB_EV_HIGH ?? 0;
const gemEvBaseHigh = window.GameData?.GEM_EV_BASE_HIGH ?? 0;
const gemEvRowHigh = window.GameData?.GEM_EV_ROW_HIGH ?? 0;
// Per-drop herb override: when a herb's pref is 'unid', value it at the
// unidentified guam price (2004 had no grimy herbs — herbs dropped as
// "unidentified herb" and were sold in 11-stacks at the unid price).
const drops = dropsRaw.map(d => {
const p = d.pref ?? lootPrefs[d.name];
if (d.tag === 'herb' && p === 'unid'){
const ev = d.chance * d.qtyAvg * herbUnidPrice;
return {...d, price: herbUnidPrice, evGp: ev, _herbUnid:true};
}
if ((d.tag === 'herb' || d.tag === 'gem') && p === 'value'){
const unit = d.tag === 'herb' ? herbEvHigh
: (input.ringOfWealth ? gemEvRowHigh : gemEvBaseHigh);
const ev = d.chance * d.qtyAvg * unit;
return {...d, price: unit, evGp: ev, _highValue:true};
}
return d;
});
const totalEv = drops.reduce((s,d)=>s+d.evGp,0) || 1;
const maxEv = Math.max(...drops.map(d=>d.evGp), 1);
const prefBtn = (name, pref, active, color='teal', label) => (
setLootPref && setLootPref(name, pref)}
style={{padding:'2px 7px', border:`1px solid ${active?`var(--${color})`:'var(--border-2)'}`,
borderRadius:3, background: active?`color-mix(in oklab,var(--${color}) 18%,var(--bg-2))`:'var(--bg-2)',
color: active?`var(--${color})`:'var(--text-3)',
fontFamily:'var(--mono)', fontSize:10, cursor:'pointer', letterSpacing:'.04em'}}>
{label ?? pref}
);
// --- per-action net gp/hr (re-simulates with the pref overridden) --------
const baseNet = result.effectiveNetGpPerHour;
// High alchemy applies to any item with an alch value (incl. runes — you CAN
// alch them), except bones and the tagged sub-tables. The optimizer won't
// pick silly alchs because each cast costs 5 ticks: alching a 75-rune stack
// (75 casts) tanks kills/hr, and runes that alch below the nature-rune price
// yield 0 gp, so loot/skip wins.
// Alch is only an option when the trip's alching toggle is on (otherwise you
// carry no runes/staff). Keep this in sync with the engine's alchAllowed.
const alchAllowed = !!(input.trip && input.trip.alching);
// Nature rune cost per cast — alching is only worth offering when the item's
// alch value EXCEEDS it, otherwise the cast nets ≤ 0 gp (and wastes time). So
// don't offer 'alch' on cheap drops (water runes, bass, ore, etc.).
const natRuneCost = window.GameData?.ITEM_PRICES?.naturerune ?? 347;
const canAlch = (d) => alchAllowed && !!d.alchValue && (d.alchValue - natRuneCost > 0)
&& !d.isBone && !Array.isArray(d._expand);
const simNet = (override) => {
try { return E.simulate({...input, lootPrefs:{...lootPrefs, ...override}}).effectiveNetGpPerHour; }
catch { return null; }
};
const actionsFor = (d) => {
const o = [];
// Bulk-unsellable gear (rune armour/weapons) can't be SOLD on the market, but
// 'loot' still makes sense: you bank it and high-alch at leisure (the engine
// values a looted bulk item at its alch value, no in-trip cast-time cost). So
// offer 'loot' for everything except plain (non-dragon) bones.
if (!d.isBone || /dragon/i.test(d.name)) o.push('loot');
if (d.tag === 'herb') o.push('unid');
if (d.tag === 'herb' || d.tag === 'gem') o.push('value');
if (canAlch(d)) o.push('alch');
if (d.isBone && !/dragon/i.test(d.name)) o.push('bury');
o.push('skip');
return o;
};
const [hover, setHover] = useState(null); // { key:rowIndex, rows:[{action,net,delta,current}] }
// Keyed by ROW INDEX, not name: a monster can list the same item (e.g. several
// 'Coins' drops at different amounts) on multiple rows, and keying by name
// would pop the tooltip on every one of them at once.
const showHover = (d, rowKey) => {
const cur = d.pref ?? lootPrefs[d.name] ?? 'loot';
const rows = actionsFor(d).map(a => {
const net = simNet({ [d.name]: a });
return { action:a, net, delta: net==null?null:net-baseNet, current:a===cur };
});
setHover({ key:rowKey, rows });
};
// --- optimizer: greedy fixpoint over loot/alch/skip(/unid) per item ------
// Re-simulates each candidate action and keeps the one that maximises net
// gp/hr, accounting for the inventory-slot cost of banking each item.
// Plain bones (bury = prayer xp, not gp) are left untouched.
const [optMsg, setOptMsg] = useState('');
const resetPrefs = () => {
// Clear only THIS monster's drop overrides, leaving other monsters intact.
const names = new Set(drops.map(d => d.name));
setLootPrefsBulk && setLootPrefsBulk(
Object.fromEntries(drops.map(d => [d.name, undefined])), true);
setOptMsg('↺ reset to defaults');
setTimeout(()=>setOptMsg(''), 4000);
};
const optimize = () => {
let prefs = {...lootPrefs};
// Optimize ordinary drops plus the herb/jewel sub-tables (they now have
// real choices: loot / unid / value / skip). Other expandable sub-tables
// (casket, ultra-rare, mega) are loot-or-nothing, so leave them at default.
const items = drops.filter(d => !(d.isBone && !/dragon/i.test(d.name))
&& (!Array.isArray(d._expand) || d.tag === 'herb' || d.tag === 'gem'));
// Start from a CANONICAL state, not the user's current prefs: drop every
// optimizable item's override so it falls back to its default action. Without
// this, the greedy hill-climb inherits the current choice and can settle into
// whatever local optimum is nearest to it — so optimizing the same loadout
// twice (or from coins=skip vs coins=loot) could give different answers. A
// fixed start makes the optimizer idempotent. (Overrides for OTHER monsters /
// untouched sub-tables are preserved.)
for (const d of items) delete prefs[d.name];
const netOf = (p) => {
try { return E.simulate({...input, lootPrefs:p}).effectiveNetGpPerHour; }
catch { return -Infinity; }
};
const isStack = window.TripModel?.isStackable || (()=>false);
// Stackables (coins, runes) each cost ONE inventory slot for the WHOLE trip,
// so they all compete for the same scarce slots — and a slot spent on loot is
// a slot not spent on food (fewer kills/trip). A naive per-item greedy is
// order-dependent here: starting from "loot everything", the FIRST stackable
// it touches looks worth skipping (slots are tightest then) and it never
// reconsiders, so it can keep a low-value stackable (coins) while dropping a
// high-value one (water runes). Fix: SEED every stackable to 'skip', then add
// them back in descending gp-value order, keeping each only if it improves
// net. The most valuable stackable claims the scarce slot first.
const stackItems = items.filter(d => isStack(d.key, d.name))
.sort((a,b) => (b.evGp||0) - (a.evGp||0));
for (const d of stackItems) prefs = {...prefs, [d.name]:'skip'};
for (const d of stackItems){
const cur = netOf(prefs);
const lootNet = netOf({...prefs, [d.name]:'loot'});
if (lootNet > cur + 0.01) prefs = {...prefs, [d.name]:'loot'};
}
// Greedy fixpoint over the rest (non-stackables + herb/gem sub-tables). These
// don't share a single slot, so per-item greedy is well-behaved; the loop
// re-checks until stable. Stackables are re-evaluated too so any interaction
// settles, but they start from the value-ordered seed above.
// TIE_EPS: if an action beats 'skip' by less than this (gp/hr), treat it as a
// tie and prefer skip — e.g. a low-value drop that just gets DISPLACED on a
// loot-bound trip (you'd leave it on the ground anyway) shows a 0 / float-
// noise gain, so there's no reason to bother picking it up.
const TIE_EPS = 1;
let changed = true, guard = 0;
while (changed && guard++ < 5){
changed = false;
for (const d of items){
const opts = actionsFor(d);
let best = null, bestNet = -Infinity;
for (const a of opts){
const net = netOf({...prefs, [d.name]:a});
if (net > bestNet + 0.01){ bestNet = net; best = a; }
}
// Prefer skip on a (near-)tie: if skipping costs essentially nothing,
// leave it on the ground rather than clutter the pack.
if (opts.includes('skip')){
const skipNet = netOf({...prefs, [d.name]:'skip'});
if (skipNet >= bestNet - TIE_EPS) best = 'skip';
}
const cur = prefs[d.name] ?? d.pref ?? 'loot';
if (best && best !== cur){ prefs = {...prefs, [d.name]:best}; changed = true; }
}
}
const before = baseNet;
// Build the full update: every optimizable item gets an explicit value, and
// any that ended at its default is written as `undefined` so the stale
// override is cleared (clearUndefined). This keeps the store in sync with the
// canonical-start optimization instead of leaving old overrides behind.
const update = {};
for (const d of items) update[d.name] = prefs[d.name]; // undefined = back to default
for (const k of Object.keys(prefs)) if (!(k in update)) update[k] = prefs[k];
setLootPrefsBulk && setLootPrefsBulk(update, true);
const after = E.simulate({...input, lootPrefs:prefs}).effectiveNetGpPerHour;
const gain = after - before;
setOptMsg(`✓ optimized · ${fmtK(after)} net gp/hr (${gain>=0?'+':''}${fmtK(gain)})`);
setTimeout(()=>setOptMsg(''), 6000);
};
return (
Drop table · {m.name}
{optMsg && {optMsg} }
↺ reset
⚙ optimize for gp/hr
{/* High-alch loot is a PER-MONSTER decision: carry a staff + nat/fire runes
(2 inv slots) to alch gear on this target. When off, 'alch' actions
collapse to loot/sell. Toggling here drives input.trip.alching for the
current monster (stored in alchByMonster). */}
{/* Left bar: high-alch text + toggle grouped together. */}
High-alch loot
{alchAllowed ? `enabled for ${m.name} · 2 rune slots, alch gear in-trip` : `off · ${m.name} drops sold or banked`}
set && set('__setAlch', !alchAllowed)}
style={{position:'relative', width:38, height:21, borderRadius:11, cursor:'pointer', flexShrink:0,
border:`1px solid ${alchAllowed?'color-mix(in oklab, var(--gold) 55%, var(--border-2))':'var(--border-2)'}`,
background: alchAllowed?'color-mix(in oklab, var(--gold) 30%, var(--bg-2))':'var(--bg-2)', transition:'all .12s'}}>
{/* Right bar: per-monster kill overhead (seconds looting/walking, not
attacking). Blank/default scales 2–4s with loot & roaming; editable. */}
{(() => {
const ovrMap = input.overheadByMonster || {};
const overridden = ovrMap[m.id] != null;
const defOvhd = E.defaultOverhead(m);
const curOvhd = overridden ? ovrMap[m.id] : defOvhd;
return (
Kill overhead
{overridden ? `custom · default ${defOvhd}s` : `default ${defOvhd}s · loot + roam`}
s
{overridden && (
set && set('__setOverhead', null)} title="Reset to default"
style={{padding:'2px 6px', fontFamily:'var(--mono)', fontSize:10, cursor:'pointer', borderRadius:3,
border:'1px solid var(--border-2)', background:'var(--bg-2)', color:'var(--text-3)'}}>↺
)}
);
})()}
Item
Chance
Qty
Mkt gp
Alch gp
EV gp/kill
Action
{drops.map((d,i)=>{
// engine pre-resolves the default (non-dragon bones default to 'bury')
const pref = d.pref ?? lootPrefs[d.name] ?? 'loot';
const alchProfit = Math.max(0,(d.alchValue||0) - natCost);
const isInactive = pref === 'skip' || pref === 'bury';
const isBone = !!d.isBone;
return (
{Array.isArray(d._expand) ? (
toggleRow(d.name)}
style={{background:'none', border:'none', padding:0, cursor:'pointer', color:'inherit',
font:'inherit', display:'inline-flex', alignItems:'flex-start', gap:5}}>
▸
{d.name}
({d._expand.length} items)
) : d.name}
{isBone && · {d.prayerXp}xp/bury }
{d.tag === 'herb' && lootPrefs[d.name]==='unid' && (
sold as unidentified · {herbUnidPrice}gp ea
)}
{(d.tag === 'herb' || d.tag === 'gem') && pref==='value' && (
high-value only · rolls under {fmtInt(valueThreshold)}gp left on ground
)}
{d._eaten && (
eaten · saves food, no bank slot
)}
{d.bulkDead && pref==='loot' && d.evGp>0 && (
banked · high-alch value ({fmtInt(d.alchValue)}gp alch − nat rune)
)}
{Array.isArray(d._expand) && expandedRows.has(d.name) && (
{d._expand.map((e,j) => (
{j>0 && · }
{e.name}
({e.weight}w)
))}
{d.tag === 'gem' && (() => {
const spot = (input.jewelSpotByMonster||{})[m.id] || 'underground';
const seg = (key, label) => (
{ ev.stopPropagation(); set && set('__setJewelSpot', key); }}>{label}
);
return (
ev.stopPropagation()}>
Talisman spot
{seg('overground','Overground · nature')}
{seg('underground','Underground · chaos')}
{spot==='overground' ? 'nature talisman ~15k · banked' : 'chaos talisman ~500 · left on ground'}
);
})()}
{fmtPct(d.chance)}
×{d.qtyAvg}
{fmtInt(d.price)}
d.price?'var(--green)':'var(--text-3)'}}>
{d.alchValue ? fmtInt(alchProfit) : '—'}
showHover(d, i)} onMouseLeave={()=>setHover(null)} style={{position:'relative'}}>
{(!isBone || /dragon/i.test(d.name)) && prefBtn(d.name,'loot',pref==='loot','teal')}
{d.tag==='herb' ? prefBtn(d.name,'unid',pref==='unid','blue') : null}
{(d.tag==='herb'||d.tag==='gem') ? prefBtn(d.name,'value',pref==='value','green',`≥${fmtInt(valueThreshold)}`) : null}
{canAlch(d) ? prefBtn(d.name,'alch',pref==='alch','amber') : null}
{isBone ? prefBtn(d.name,'bury',pref==='bury','violet') : null}
{prefBtn(d.name,'skip',pref==='skip','red')}
{hover && hover.key===i && (
net gp/hr if…
{hover.rows.map(r => (
{r.current?'▸ ':''}{r.action}
0.5?'var(--green)':r.delta<-0.5?'var(--red)':'var(--text-3)'}}>
{r.net==null?'—':fmtK(r.net)}
{r.delta!=null && Math.abs(r.delta)>=0.5 && !r.current &&
0?'var(--green)':'var(--red)', marginLeft:6, fontSize:9.5}}>
{r.delta>0?'+':''}{fmtK(r.delta)}
}
))}
)}
);
})}
— totals —
{fmtInt(totalEv)} gp/kill
{fmtK(result.gpPerHour)}/hr
{result.prayerXpPerHour > 0 && (
Prayer XP from burying
{fmt2(result.prayerXpPerKill)} xp/kill · {fmtK(result.prayerXpPerHour)} xp/hr
)}
{(() => {
// ---- Loot value composition: where your gp actually comes from ----
// Per-drop banked contribution, honouring each drop's keep/skip/alch
// pref (matches how gp/kill is summed). Sorted, top contributors shown
// as share-of-total bars; the long tail is grouped as "other".
const contrib = (d) => {
const pref = d.pref ?? lootPrefs[d.name] ?? 'loot';
if (pref === 'skip' || pref === 'bury') return 0;
if (pref === 'alch') return d.chance * d.qtyAvg * Math.max(0, (d.alchValue||0) - natCost);
return d.evGp; // loot / unid (evGp already adjusted for unid herbs)
};
const parts = drops.map(d => ({ name:d.name, tag:d.tag, gp:contrib(d),
pref: d.pref ?? lootPrefs[d.name] ?? 'loot' }))
.filter(p => p.gp > 0).sort((a,b)=>b.gp-a.gp);
const total = parts.reduce((s,p)=>s+p.gp,0);
if (total <= 0) return null;
const TOP = 8;
const head = parts.slice(0, TOP);
const tail = parts.slice(TOP);
const tailGp = tail.reduce((s,p)=>s+p.gp,0);
const rows = [...head];
if (tailGp > 0) rows.push({ name:`${tail.length} smaller drops`, gp:tailGp, _other:true });
const palette = ['#e0a431','#d177c0','#5b8dd6','#e0763a','#6cba5a','#d96a5b','#c9b04a','#7a9ec2'];
return (
<>
▸
Loot value composition
{compOpen ? `share of ${fmtInt(total)} gp/kill banked` : `${rows.length} sources · click to expand`}
{compOpen && (
{/* stacked proportion bar */}
{rows.map((p,i)=>(
{p.name}{p.pref==='alch'? (alch) :p.pref==='unid'? (unid) :p.pref==='value'? (value) :null}
{fmtInt(p.gp)}
{(p.gp/total*100).toFixed(1)}%
{fmtK(p.gp*result.killsPerHour)}/hr
))}
)}
);
})()}
);
}
// =======================================================================
// TRIP PANE — banking trip / inventory model controls
// =======================================================================
function TripPane({input, result, setTrip, setCannon}){
const t = input.trip || {};
const TM = window.TripModel;
const FOOD = TM ? TM.FOOD : {};
const trip = result.trip;
const ct = input.combatType;
const m = input.monster;
// scarce-spot / AFK throttle state. sc = input settings; scRes = engine output.
const sc = t.scarce || {};
const scOn = !!sc.enabled;
const scTargets = sc.targets ?? 2;
const scRes = result.scarce;
const respawnDef = (m && m.respawn) || 60;
// The cannon's reach is the SAME per-monster cannon used by the Cannon tab —
// one source of truth, surfaced here so it can be toggled inside scarce mode.
const c0 = (input.cannonByMonster||{})[m?.id] || {};
const cannonEnabled = !!c0.enabled;
const protOpts = [['none','None'],['melee','Protect Melee'],['missiles','Protect Missiles'],['magic','Protect Magic']];
const cell = { padding:'8px 10px', background:'var(--bg-1)', border:'1px solid var(--border-1)', borderRadius:3 };
// ---- potion dosage recommendation -----------------------------------
// A boost decays ~1 level/min and you re-pot when it reaches the threshold
// (default peak−10). So repot interval ≈ min(10, boost) minutes. Over the
// trip's active killing time you need ⌈killMin / interval⌉ doses per potion.
const E = window.SimEngine;
const potRec = (() => {
if (!trip || !E) return null;
const POT_STAT = {
super_att:['att',input.attack], super_str:['str',input.strength], super_def:['def',input.defence],
attack:['att',input.attack], strength:['str',input.strength], defence:['def',input.defence],
ranging:['rng',input.ranged], magic:['mag',input.magic],
};
const dba = (input.boosts||[]).includes('dba_spec');
let sel = (input.boosts||[]).filter(b => POT_STAT[b]);
if (dba) sel = sel.filter(b => POT_STAT[b][0] !== 'str'); // str comes free from spec
if (!sel.length) return null;
const kpt = isFinite(trip.killsPerTrip) ? trip.killsPerTrip : null;
if (kpt == null) return null;
const killMin = (result.cycleSec || 0) * kpt / 60; // active fighting min/trip
// binding (shortest) repot interval across the selected potions
let interval = Infinity;
for (const b of sel){
const [stat, base] = POT_STAT[b];
const pf = E.POTIONS[b]?.fn;
if (!pf) continue;
const peak = Math.floor(pf(stat, base));
const boost = peak - base;
const thr = (input.repotThreshold != null)
? Math.max(base, Math.min(peak, input.repotThreshold))
: Math.max(base, peak - 10);
interval = Math.min(interval, Math.max(1, peak - thr || boost));
}
if (!isFinite(interval) || interval <= 0) interval = 10;
const doses = Math.max(1, Math.ceil(killMin / interval));
return { doses, interval, killMin, vials: Math.ceil(doses/4) };
})();
// Does the current carry match the recommendation?
const recMatched = potRec && (t.singleDose
? (t.potionDoses ?? 4) === potRec.doses
: (t.potionSets ?? 1) === potRec.vials);
// ---- antifire dose recommendation -----------------------------------
// One antifire dose lasts a FIXED 6 minutes (2004 mechanic), regardless of
// stat-boost timers. Doses needed = ⌈active fighting minutes / 6⌉.
const ANTIFIRE_MIN = 6;
const antifireRec = (() => {
if (!t.antifire || !trip || !(input.monster && input.monster.dragonfire)) return null;
const kpt = isFinite(trip.killsPerTrip) ? trip.killsPerTrip : null;
if (kpt == null) return null;
const killMin = (result.cycleSec || 0) * kpt / 60;
const doses = Math.max(1, Math.ceil(killMin / ANTIFIRE_MIN));
return { doses, killMin, vials: Math.ceil(doses/4) };
})();
// ---- super-antipoison dose recommendation ---------------------------
// One super-antipoison dose gives ~6 minutes of poison immunity (2004
// mechanic). Doses needed = ⌈active fighting minutes / 6⌉. Skipped at
// monsters that drop their own antipoison (you sustain it for free).
const ANTIPOISON_MIN = 6;
const antipoisonRec = (() => {
const mo = input.monster;
if (!t.antipoison || !trip || !(mo && mo.poisons) || mo.antipoisonFromDrops) return null;
const kpt = isFinite(trip.killsPerTrip) ? trip.killsPerTrip : null;
if (kpt == null) return null;
const killMin = (result.cycleSec || 0) * kpt / 60;
const doses = Math.max(1, Math.ceil(killMin / ANTIPOISON_MIN));
return { doses, killMin, vials: Math.ceil(doses/4) };
})();
return (
Banking trip & inventory
how often you bank drives effective xp/hr & gp/hr
{/* Food */}
Food
setTrip({foodKey:k})}
placeholder="Type to search food…"
options={Object.entries(FOOD).filter(([k])=>k!=='none').map(([k,v])=>
({ key:k, label:v.name, hint:`heals ${v.heal}` }))} />
Food brought (slots) · {t.foodCount==null?'auto':'manual'}
{trip && (
{trip.incoming.safespot
? 'safespotted — no incoming damage → 0 food'
: trip.foodPerKill<=0
? `regen out-heals damage (${trip.incoming.regenPerKill.toFixed(1)} hp/kill ≥ ${trip.incoming.hpPerKill.toFixed(1)} taken) → 0 food`
: `${trip.incoming.hpPerKill.toFixed(1)} taken − ${trip.incoming.regenPerKill.toFixed(1)} regen → ${trip.foodPerKill.toFixed(2)} ${trip.foodName.toLowerCase()}/kill`}
)}
{/* Potions + bank */}
Potions & banking
{t.singleDose
?
setTrip({potionDoses:Math.max(0,v)})} />
: setTrip({potionSets:Math.max(0,v)})} />}
{trip && (
{trip.slots.potionTypes
? `${trip.slots.potionTypes} potion${trip.slots.potionTypes>1?'s':''} × ${trip.slots.singleDose?`${trip.slots.potionDoses} dose`:`${trip.slots.potionSets} vial`}`
: 'no super potions selected'}
{' = '}{trip.slots.potionSlots} slot{trip.slots.potionSlots===1?'':'s'}
{trip.slots.potionParts.length ? ` (${trip.slots.potionParts.join(' + ')})` : ''}
{trip.potionCostPerTrip>0 ? · ~{fmtK(trip.potionCostPerTrip)} gp/trip : null}
)}
{potRec && (
Recommended {' '}
{potRec.doses} dose{potRec.doses===1?'':'s'} per potion
{' '}({t.singleDose?`${potRec.doses} single`:`${potRec.vials} × (4)-vial`}) — {potRec.killMin.toFixed(0)}min trip, repot every {potRec.interval}min.
{!recMatched && (
setTrip(t.singleDose?{potionDoses:potRec.doses}:{potionSets:potRec.vials})}
style={{marginLeft:6, padding:'2px 8px', fontFamily:'var(--mono)', fontSize:10, cursor:'pointer',
borderRadius:3, border:'1px solid color-mix(in oklab, var(--amber) 45%, var(--border-2))',
background:'color-mix(in oklab, var(--amber) 14%, var(--bg-2))', color:'var(--amber)'}}>
apply
)}
{potRec.doses<=2 && !t.singleDose && (
· short trip — single-dose may save gp.
)}
)}
Bank time (seconds) · {t.bankSeconds==null?'auto':'manual'}
Protection prayer
setTrip({protect:e.target.value})}>
{protOpts.map(([k,l])=> {l} )}
{result && result.prayerDrainRate>0 && (
)}
setTrip({safespot:v})} />
Ranged, magic & halberds safespot by default (attack from behind an
obstacle — no hits, no dragonfire). Protection blocks that style's
damage when fighting in the open.
{input.monster && input.monster.dragonfire && (
<>
setTrip({antifire:v})} />
{trip && !trip.incoming.safespot && (
Dragonfire chip: {trip.incoming.dragonfire} hp/kill
{t.antifire && (input.gear?.shield==='anti_dragon') ? ' — immune (potion + shield)' :
t.antifire ? ' — potion only (equip anti-dragon shield for full immunity)' :
(input.gear?.shield==='anti_dragon') ? ' — shield only (add antifire for full immunity)' : ''}
)}
{antifireRec && (
Antifire {' '}
bring {antifireRec.doses} dose{antifireRec.doses===1?'':'s'}
{' '}({antifireRec.vials} × (4)-vial) — {antifireRec.killMin.toFixed(0)}min trip, 6min/dose.
)}
)}
{input.monster && input.monster.poisons && (
<>
{input.monster.antipoisonFromDrops ? (
Poisons you, but drops antipoison — you sustain immunity from
its own drops, so no antipoison supply is needed (only matters
when fighting in the open, not safespotting).
) : (
<>
setTrip({antipoison:v})} />
{trip && !trip.incoming.safespot && (
Poison chip: {t.antipoison ? '0 hp/kill (immune)' : `${input.monster.poisonMax ?? 5} hp/kill`}
{' '}— a DoT that protection prayers don't block; super-antipoison negates it.
)}
{trip && trip.incoming.safespot && (
Safespotted — no poison taken, antipoison not needed.
)}
{antipoisonRec && (
Antipoison {' '}
bring {antipoisonRec.doses} dose{antipoisonRec.doses===1?'':'s'}
{' '}({antipoisonRec.vials} × (4)-vial) — {antipoisonRec.killMin.toFixed(0)}min trip, 6min/dose.
)}
)}
)}
Inventory reserve
setTrip({teleport:v})} />
{/* High-alch loot moved to the Loot tab — it's a per-monster decision
and needs the main reducer (TripPane only has setTrip). */}
{ct==='ranged' && (
setTrip({recoverAmmo:v})} />
)}
{input.boosts && input.boosts.includes('dba_spec') && input.combatType==='melee' && (
setTrip({dbaRestore:v})} />
)}
{ct==='magic' && setTrip({runeSlots:Math.max(0,v)})} />}
{/* ---- Scarce spot / AFK throttle ----------------------------------
Default OFF = monsters never run out. ON = you only fight a few
spawns, so kills/hr is capped by ttk + respawn. Cannon can be added
and may reach more targets than you do in melee. */}
Scarce spot / AFK
cap kills by how fast a few targets respawn
{scOn ? (
<>
setCannon({enabled:v, ...(v && c0.targets==null ? {targets:Math.max(1,Math.min(8,scTargets))} : {})})} />
{cannonEnabled && (
setCannon({targets:Math.max(1,Math.min(8,Math.round(v)))})} />
)}
{scRes && (
Throttle {' '}
solo {fmtInt(scRes.kphSolo)}/hr → {fmtInt(scRes.kph)}/hr
{scRes.respawnBound
? ` — respawn-bound, idle ${fmtPct(1-scRes.activeFrac)} of the time`
: ' — not respawn-bound (a target is always up)'}
{cannonEnabled && <>{' · '}cannon reaches {c0.targets ?? 3}, you reach {scTargets}.}
)}
) : (
Turn this on for AFK / scarce spots (rock crabs, moss giants, a small
cluster of mobs) where you can only reach a couple of monsters and
must wait for them to respawn. Off = the default assumption that a
fresh target is always available, so kills/hr is limited only by
your kill speed and banking.
)}
Food per kill
{t.foodPerKillOverride!=null&&t.foodPerKillOverride!==''?'manual override':'auto from incoming damage'}
{trip && (
<>
Trip outcome
{trip.bound==='overfull'?'pack fills early — drops missed':trip.bound==='food'?'food-bound (banks with space left)':trip.bound==='loot'?'inventory-bound':trip.bound==='prayer'?'prayer-bound (out of prayer first)':'no banking needed'}
=1.5||trip.slots.stackReserve<1?'s':''}`} />
Locked all trip: {trip.slots.reserveParts.length?trip.slots.reserveParts.join(' · '):'none'}
{' + '}{trip.slots.stackReserve.toFixed(1)} stackable = {Math.round(trip.slots.inv - trip.slots.lootCapacity)} slots.
{' '}Food ({trip.slots.foodCount}) & potion vials ({trip.slots.potionSlots}){trip.recoilOn && trip.recoilSpares>0 ? ` & ${trip.recoilSpares} recoil ring${trip.recoilSpares>1?'s':''}` : ''} convert to loot as consumed.
{/* End-of-trip pack state — the goal: bank with a FULL pack of loot */}
You bank with {' '}
≈{Math.round(trip.slots.lootSlotsAtEnd)} slots of loot
{trip.slots.stackReserve>=0.5?` + ${Math.round(trip.slots.stackReserve)} stackable`:''}
{trip.slots.reserveParts.length?` + ${trip.slots.reserveParts.join(' + ')}`:''}
{trip.lootFraction<0.98
? {' '}— pack fills early, ≈{Math.round((1-trip.lootFraction)*100)}% of drops missed; auto food suggests {trip.slots.autoFoodCount}.
: trip.bound==='loot' ? ' — full pack of loot.'
: trip.bound==='food' ? ` — banks with ${Math.max(0,Math.round(trip.slots.lootCapacity-trip.slots.lootSlotsAtEnd))} slots unused; auto food suggests ${trip.slots.autoFoodCount}.`
: ''}
{input.combatType==='ranged' && result.ammoKeyUsed && (
Ammo: ~{fmtInt(result.ammoPerKill*result.effectiveKph)} {(window.SimEngine.ARROWS[result.ammoKeyUsed]?.name||'ammo').toLowerCase()}/hr lost
({(t.recoverAmmo!==false)?'recovering 4/5':'no recovery'}) · {fmtK(result.ammoCostPerKill*result.effectiveKph)} gp/hr
)}
{result.trip.prayerDrains && (
Prayer: drains ~{fmtInt(result.prayerPointsPerHour)} pts/hr
({result.prayerDrainRate}/tick{(t.protect&&t.protect!=='none')?`, incl. protect-from-${t.protect}`:''})
{result.trip.prayerMode==='potions' && <>
{' · '}{fmtK(result.trip.prayerCostPerKill*result.effectiveKph)} gp/hr on prayer potions
{result.trip.bound==='prayer' ? ' · prayer runs out first — bank early' : ''}
}
{result.trip.prayerMode==='altar' && <>
{' · altar recharge every '}{fmtInt(result.trip.killsPerAltar)} kills
{' (~'}{(result.trip.altarSeconds||0)}s round-trip) · costs
{' ~'}{Math.round((result.trip.altarSecPerKill||0)*result.effectiveKph/60)} min/hr, no gp
}
{result.trip.prayerMode==='none' && ' · flicking / ignored — no supply or time cost (pure DPS gain)'}
)}
)}
);
}
// =======================================================================
// CANNON PANE — Dwarf multicannon overlay on the current monster
// Models the cannon as a second attacker that borrows YOUR equipped-weapon
// hit roll for accuracy (the quirk), deals a flat 0–30 (avg 15), gives 2
// Ranged xp/dmg, and fires into however many targets stand in the spot — an
// occupancy that's throttled by how fast the combined damage clears them.
// =======================================================================
function CannonPane({input, simInput, result, setCannon}){
const m = input.monster;
const c0 = (input.cannonByMonster||{})[m.id] || {};
const enabled = !!c0.enabled;
const targets = c0.targets ?? 3;
const respawnDef = m.respawn ?? 60;
const c = result.cannon; // engine output (only when enabled & killDps>0)
const ct = input.combatType;
const ballPrice = (window.GameData?.ITEM_PRICES?.mcannonball) ?? 180;
const cell = { padding:'8px 10px', background:'var(--bg-1)', border:'1px solid var(--border-1)', borderRadius:3 };
const rollLabel = ct==='ranged' ? 'your Ranged attack roll'
: ct==='magic' ? 'your Magic attack roll'
: 'your melee weapon\u2019s attack roll';
const defLabel = ct==='ranged' ? 'Ranged defence'
: ct==='magic' ? 'Magic defence' : 'melee defence';
return (
Dwarf multicannon
cannonball {fmtInt(ballPrice)} gp
{' · '}
{enabled ? (c && !c.idle ? `${fmtK(c.ballsPerHour)} balls/hr` : 'idle — spot too sparse') : 'off'}
{/* ---- enable + spot inputs ---- */}
The cannon sweeps 8 octants, one tick (0.6s) each, firing at most one ball per
tick into an octant that holds a mob. Max is
the spawns the spot can hold (cap 8); the cannon rarely sees all of them at once
because kills outrun respawns — the effective count
below is what actually gets hit.
{/* ---- accuracy callout (the quirk) ---- */}
How cannon accuracy works
A cannonball deals a flat 0–30 (avg 15) — no Ranged
level, gear or potion scaling. Its hit chance is {rollLabel} {' '}
(your currently-equipped weapon & stance) vs this monster’s {defLabel} — so your{' '}
{ct} setup on the {ct==='melee'?'Melee':ct==='ranged'?'Ranged':'Magic'} tab drives it.
Right now that lands {fmtPct(result.hitChance)} , for
an effective {fmt2(result.hitChance*15)} dmg/ball.
Each ball is spent whether it hits or misses; cannon damage gives 2 Ranged xp and no HP xp.
{!enabled && (
Enable the cannon to fold it into kills/hr, xp/hr and gp/hr on the Stats tab.
)}
{enabled && (!c || c.idle) && (
Cannon idle — at {targets} target{targets===1?'':'s'} / {c0.respawnSec ?? respawnDef}s you
clear this spot solo faster than it repopulates, so nothing stands long enough for the
cannon to shoot. It won’t speed you up here: pick a busier spot (more targets / faster
respawn) or a tougher mob. Your kills/hr is unchanged from solo.
)}
{enabled && c && !c.idle && (
<>
Cannon output
{fmt1(c.effTargets)} of {c.targets} targets hit on average
Kills / hr uplift
{c.kphNoCannon>0 ? `+${fmtPct(c.kphWithCannon/c.kphNoCannon - 1)}` : '—'} vs solo
{c.respawnBound && (
Respawn-bound: at this DPS you and the cannon out-damage the spawns, so you spend
part of each cycle idle waiting for mobs. More targets / faster respawn would let
you (and the cannon) work the full time.
)}
{/* balls to bring */}
{result.trip && (
<>
Cannonballs to bring
stackable — 1 inv slot
Cannon reserves 5 inventory slots (4 parts + balls), already folded into the Trip
tab’s loot capacity. Balls are charged as a supply cost in net gp/hr, so a
pricey spot can swing the cannon from profit to loss — watch the ball cost/hr above.
)}
Respawn for {m.name}: {respawnDef}s {' '}
{m.respawnVerified
? '\u2014 sourced from the npc config.'
: '\u2014 standard 100-tick default (not individually verified for this monster); set the exact value above if you know it.'}
)}
);
}
// =======================================================================
// DUEL PANE — side-by-side setup comparison on the current monster
// =======================================================================
function DuelPane({input, set}){
const m = input.monster;
const setups = input.duelSetups || [];
// Simulate every setup against the CURRENT monster. Per-monster autos
// (bank time, food count, food/kill override) are re-derived so each setup
// is judged fairly on this target, not on whatever monster it was saved on.
const rows = useMemo(() => {
const live = { name:'Live loadout', live:true, r:E.simulate(input) };
const snaps = setups.map((d,i) => ({
name:d.name, i,
r:E.simulate({...input, ...d.setup, monster:m, cannon:null,
trip:{...(d.setup.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null, scarce:null}}),
setup:d.setup,
}));
return [live, ...snaps];
}, [input, setups, m]);
const best = (key) => Math.max(...rows.map(x => x.r[key] || 0));
const bestXp = best('effectiveXpPerHour'), bestGp = best('effectiveNetGpPerHour');
const bestGpXp = Math.max(...rows.map(x => { const g = gpPerXp(x.r); return g == null ? -Infinity : g; }));
const rename = (i, name) => set('duelSetups', setups.map((d,j)=> j===i ? {...d, name} : d));
const remove = (i) => set('duelSetups', setups.filter((_,j)=>j!==i));
// Default snapshot name: the spell (magic) or arrow (ranged) being compared,
// else the weapon. Still editable via the row's name field.
const defaultSnapName = (s) => {
if (s.combatType === 'magic' && s.spell && E.SPELLS[s.spell]) return E.SPELLS[s.spell].name;
if (s.combatType === 'ranged' && s.ammo && E.ARROWS[s.ammo]) return E.ARROWS[s.ammo].name;
return s.weaponName || `Setup ${setups.length+1}`;
};
const snapshot = () => set('duelSetups', [...setups,
{ name:defaultSnapName(input), setup:pickSetup(input) }]);
const loadoutLabel = (s) => {
const bits = [s.combatType, s.weaponName].filter(Boolean);
const pr = (s.prayers||[]).filter(p=>p!=='none');
const bo = (s.boosts||[]).filter(b=>b!=='none');
if (pr.length) bits.push(`${pr.length} prayer${pr.length>1?'s':''}`);
if (bo.length) bits.push(bo.includes('dba_spec')?'DBA':`${bo.length} pot`);
if (s.trip?.singleDose) bits.push('1-dose');
return bits.join(' · ');
};
return (
Setup duel · {m.name}
snapshots re-simulated on this target · autos re-derived
+ snapshot live loadout
Tweak the live loadout, snapshot it, tweak again — then compare. Snapshots persist.
Setup
Loadout
Max
DPS
Hit %
K/trip
XP/hr
Net GP/hr
GP/XP
Supp/hr
{rows.map((row) => {
const r = row.r;
const isBestXp = r.effectiveXpPerHour >= bestXp - 0.5 && rows.length > 1;
const isBestGp = r.effectiveNetGpPerHour >= bestGp - 0.5 && rows.length > 1;
const gpXp = gpPerXp(r);
const isBestGpXp = gpXp != null && isFinite(bestGpXp) && gpXp >= bestGpXp - 1e-6 && rows.length > 1;
const src = row.live ? input : row.setup;
return (
{row.live
? ▸ Live loadout
:
{loadoutLabel(src)}
{fmtInt(r.maxHit)}
{fmt2(r.dps)}
{fmtPct(r.hitChance)}
{r.trip && isFinite(r.trip.killsPerTrip) ? fmtInt(r.trip.killsPerTrip) : '∞'}
{fmtK(r.effectiveXpPerHour)}{isBestXp ? ' ★' : ''}
{fmtK(r.effectiveNetGpPerHour)}{isBestGp ? ' ★' : ''}
{fmtGpXp(gpXp)}{isBestGpXp ? ' ★' : ''}
{fmtK(r.supplyCostPerKill * r.effectiveKph)}
{!row.live && <>
set('__applySetup', row.setup)}
style={{padding:'2px 8px', marginRight:4, fontFamily:'var(--mono)', fontSize:10, cursor:'pointer',
borderRadius:3, border:'1px solid var(--border-2)', background:'var(--bg-2)', color:'var(--text-2)'}}>
load
remove(row.i)}
style={{padding:'2px 7px', fontFamily:'var(--mono)', fontSize:10, cursor:'pointer',
borderRadius:3, border:'1px solid var(--border-2)', background:'var(--bg-2)', color:'var(--text-3)'}}>
✕
}
);
})}
{setups.length===0 && (
No snapshots yet. Set up a loadout (gear, prayers, potions, trip), hit
“+ snapshot live loadout”, then change things and snapshot again to duel them.
)}
);
}
// =======================================================================
// MONSTER CARD — right rail on workbench
// =======================================================================
function MonsterCard({input, set}){
const m = input.monster;
const hasCustom = !!(input.monsterSetups||{})[m.id];
const [monLootQ, setMonLootQ] = useState('');
const monFiltered = !!monLootQ;
// Name search now lives inside the SearchSelect combobox (type-to-filter,
// like the gear pickers); the loot box is a secondary filter that narrows
// which monsters the combobox offers.
const visMonsters = useMemo(() => E.MONSTERS.filter(x => matchLoot(x, monLootQ)), [monLootQ]);
const monOptions = useMemo(() => {
const opts = visMonsters.map(x => ({
key: x.id,
label: x.name + ((input.monsterSetups||{})[x.id] ? ' \u25cf' : ''),
hint: `lvl ${x.level} \u00b7 ${x.hp} HP`,
}));
// Keep the current target selectable even if the loot filter excludes it.
if (!visMonsters.find(x => x.id === m.id))
opts.unshift({ key:m.id, label:m.name, hint:`lvl ${m.level} \u00b7 ${m.hp} HP` });
return opts;
}, [visMonsters, input.monsterSetups, m]);
return (
Target
id · {m.id}
set('monster', E.MONSTERS.find(x=>x.id===id))}
placeholder="Search monster…" />
{monFiltered ? `${visMonsters.length} / ${E.MONSTERS.length} monsters` : `${E.MONSTERS.length} monsters`}
{monFiltered && (
setMonLootQ('')} style={{
marginLeft:'auto', fontFamily:'var(--mono)', fontSize:10, padding:'2px 8px', borderRadius:3,
cursor:'pointer', border:'1px solid var(--border-2)', background:'var(--bg-2)', color:'var(--text-2)'}}>
reset filter
)}
{/* Per-monster setup is driven from the Setup bar above the tabs. */}
{hasCustom?(input.editingDefault?'editing default':'custom setup'):'default setup'}
edit via Setup bar ↑
);
}
// Helper: compute price age info from window.GameData.scrapedAt.
function priceAgeInfo(){
const ts = window.GameData?.scrapedAt;
if (!ts || typeof ts !== 'number') return { label:'no timestamp', color:'var(--text-3)', hours:null };
const hours = (Date.now() / 1000 - ts) / 3600;
if (hours < 24) return { label: hours < 1 ? 'just now' : `${Math.floor(hours)}h ago`, color:'var(--teal)', hours };
if (hours < 72) return { label:`${Math.floor(hours)}h ago`, color:'var(--amber)', hours };
return { label:`${Math.floor(hours/24)}d ago`, color:'#e05555', hours };
}
function PriceAgeBadge({ style }){
const [info, setInfo] = React.useState(priceAgeInfo);
React.useEffect(() => {
const id = setInterval(() => setInfo(priceAgeInfo()), 60000);
return () => clearInterval(id);
}, []);
return (
);
}
// =======================================================================
// SETTINGS PANE — import prices.json / alch.json from local files
// =======================================================================
function SettingsPane({input, hiddenTiers = {}, setHiddenTiers}){
const m = input && input.monster;
// The live market scrape (run_sim.py / direct CORS sync) is a local-dev tool.
// On a public host (GitHub Pages) it can't reach the server and we don't want
// visitors scraping at all — prices are shipped via prices.json instead.
const isLocal = typeof window !== 'undefined' &&
(window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
const [msg, setMsg] = React.useState('');
const [tone, setTone] = React.useState('idle'); // idle | ok | err
const [syncState, setSyncState] = React.useState('idle');
const [syncMsg, setSyncMsg] = React.useState('');
const [, forceUpdate] = React.useState(0);
const [counts, setCounts] = React.useState(() => ({
prices: window.GameData?.ITEM_PRICES ? Object.keys(window.GameData.ITEM_PRICES).length : 0,
alch: window.GameData?.ALCH_VALUES ? Object.keys(window.GameData.ALCH_VALUES).length : 0,
lastSync: window._marketLastSync || 'never',
}));
// Live market sync of the CURRENT monster's loot (CORS-limited in standalone).
const handleSync = async () => {
setSyncState('syncing'); setSyncMsg('fetching prices…');
try {
const res = await window.syncMarketPrices(m, null);
if (res?.synced > 0){
setSyncState('done'); setSyncMsg(`✓ ${res.synced} updated · ${res.failed} failed`);
forceUpdate(n => n+1);
} else {
setSyncState('error'); setSyncMsg('CORS blocked — run Python snippet locally');
}
} catch(e){ setSyncState('error'); setSyncMsg('error: ' + e.message); }
};
// Scrape EVERY monster's loot via the local run_sim.py server (2s/item).
const handleSyncAll = async () => {
setSyncState('syncing');
setSyncMsg('checking local server…');
await window.scrapeAllViaServer((p) => {
if (p.phase === 'scraping'){
setSyncMsg(`scraping ${p.total} items via local server · ~${Math.ceil(p.total*2/60)} min · watch the cmd window`);
} else if (p.phase === 'done'){
setSyncState('done');
setSyncMsg(`✓ ${p.applied} prices applied · ${p.ok} ok · ${p.fail} failed`);
forceUpdate(n => n+1);
} else if (p.phase === 'error'){
setSyncState('error');
setSyncMsg(p.message);
}
});
};
// Read a chosen .json file → parse → apply via the shared market pipeline
// (patches GameData, recomputes gem EV, persists to localStorage). Accepts a
// file that is EITHER prices or alch, or a combined { prices, alch } object.
const importFile = (file, kind) => {
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
let data;
try { data = JSON.parse(reader.result); }
catch(e){ setTone('err'); setMsg(`✗ ${file.name}: not valid JSON`); return; }
let prices = null, alch = null;
if (data && (data.prices || data.alch)){ prices = data.prices||null; alch = data.alch||null; }
else if (kind === 'alch') alch = data;
else prices = data;
if (!window.applyScrapeResults){ setTone('err'); setMsg('✗ market module not loaded'); return; }
const n = window.applyScrapeResults(prices, alch);
const aN = alch ? Object.keys(alch).length : 0;
// mark a manual sync time so the Loot tab reflects it
try { window._marketLastSync = new Date().toLocaleString(); } catch(_){}
setTone('ok');
setMsg(`✓ imported ${file.name} — ${n} prices${aN?`, ${aN} alch values`:''} applied`);
setCounts({
prices: Object.keys(window.GameData.ITEM_PRICES).length,
alch: Object.keys(window.GameData.ALCH_VALUES||{}).length,
lastSync: window._marketLastSync,
});
};
reader.readAsText(file);
};
const FileBtn = ({label, kind, accept='application/json,.json'}) => {
const ref = React.useRef(null);
return (
ref.current && ref.current.click()}>{label}
);
};
return (
Load a prices.json and/or alch.json exported by the
scraper. Useful in the standalone file, where live market sync is blocked.
Imported values patch the loot tables immediately and persist across reloads
(stored in your browser).
{msg && (
{msg}
)}
Format: a flat JSON object of {`{ "item_key": price }`} (e.g.
{` { "dragonhide_blue": 2890 }`}), or a combined
{` { "prices": {…}, "alch": {…} }`}. Keys match the item ids used in
the loot tables. Unknown keys are ignored; only positive prices are applied.
{/* Gear-menu declutter — hide low/unwanted tiers from every picker. */}
Gear menu · hide tiers
declutter the equipment pickers
Hidden tiers are removed from every weapon, ammo and armour picker — handy
once you've outgrown the low-level gear. Anything you currently have equipped
is always kept, even if its tier is hidden.
{GEAR_TIER_DEFS.map(t => {
const on = !!hiddenTiers[t.key];
return (
{t.full || ('Hide ' + t.label.toLowerCase() + ' gear')}
);
})}
setHiddenTiers && setHiddenTiers(Object.fromEntries(GEAR_TIER_DEFS.map(t=>[t.key, true])))}>
Hide all listed tiers
{Object.values(hiddenTiers).some(Boolean) && (
setHiddenTiers && setHiddenTiers({})}>↺ Show all tiers
)}
{isLocal ? (<>
Market scrape
live sync · last {window._marketLastSync || 'never'}
{syncState==='syncing' ? '↻ syncing…' : '↻ Sync ALL prices'}
{syncState==='syncing' ? '…' : `↻ Sync ${m ? m.name : 'this monster'}`}
{syncMsg && (
{syncMsg}
)}
"Sync ALL" scrapes every monster's loot table once and applies prices everywhere
(run python run_sim.py first, open from
localhost:8000). Prices persist across reloads.
{syncState==='error' && (
▸ Python fallback snippet (click to expand)
{window.marketPythonSnippet}
)}
) : (
Live market scrape is disabled on this hosted build. Prices are shipped in
prices.json and refreshed periodically by the site owner.
)}
);
}
// =======================================================================
// ECONOMY PANE — price-history timeline + biggest movers
// =======================================================================
// In-game item names. Most price keys come straight from monster loot drops,
// which carry real display names ("Chaos rune ×2" → key "chaosrune"); we build a
// key→name map from those once, strip the "×N" qty, and fall back to a small
// fixup table (for concatenated rune/ammo keys) then a prettified key.
const ECO_NAME_FIX = {
airrune:'Air rune', waterrune:'Water rune', earthrune:'Earth rune', firerune:'Fire rune',
mindrune:'Mind rune', bodyrune:'Body rune', chaosrune:'Chaos rune', deathrune:'Death rune',
bloodrune:'Blood rune', naturerune:'Nature rune', lawrune:'Law rune', cosmicrune:'Cosmic rune',
soulrune:'Soul rune', astralrune:'Astral rune',
mcannonball:'Cannonball', cow_hide:'Cowhide', vial_water:'Vial of water',
jug_wine:'Jug of wine', loop_half_key:'Loop half of key', tooth_half_key:'Tooth half of key',
};
// Economy display-name overrides — win over the loot-derived name map AND
// ECO_NAME_FIX. For renames the raw loot/price keys get "wrong" for this tab.
const ECO_NAME_OVERRIDE = {
unidentified_guam: 'Unidentified herb',
herb_ranarr: 'Ranarr weed',
guam_leaf: 'Guam leaf',
};
// Route a row's price/series from another (live-scraped) key. The static
// "guam_leaf" row shows the live "herb_guam" market price instead of its stale
// default — the market slug for herb_guam IS literally "guam_leaf".
const ECO_PRICE_ALIAS = { guam_leaf: 'herb_guam' };
let _ecoNameCache = null;
function ecoNameMap(){
if (_ecoNameCache) return _ecoNameCache;
const map = {};
const G = window.GameData;
if (G && G.MONSTERS){
for (const m of G.MONSTERS){
for (const d of (m.loot || []).flat()){
if (d && d.key && d.name && !map[d.key]){
map[d.key] = String(d.name)
.replace(/\s*[×x]\s*\d+\s*$/i, '') // strip "×N" qty suffix
.replace(/\(noted\)/ig, '')
.replace(/\s+/g, ' ').trim();
}
}
}
}
if (Object.keys(map).length) _ecoNameCache = map; // only cache once populated
return map;
}
function ecoLabel(key){
if (ECO_NAME_OVERRIDE[key]) return ECO_NAME_OVERRIDE[key];
const m = ecoNameMap();
if (m[key]) return m[key];
if (ECO_NAME_FIX[key]) return ECO_NAME_FIX[key];
// Named herbs: drop the "herb" prefix → just "Ranarr", "Marrentill", etc.
if (/^herb_/.test(key)) return key.replace(/^herb_/, '').replace(/_/g, ' ').replace(/^./, c => c.toUpperCase());
return String(key).replace(/_/g, ' ').replace(/^./, c => c.toUpperCase());
}
function ecoRelTime(ts){
if (!ts) return '—';
const sec = Date.now()/1000 - ts;
if (sec < 90) return 'just now';
const m = sec/60; if (m < 90) return `${Math.round(m)}m ago`;
const h = m/60; if (h < 36) return `${Math.round(h)}h ago`;
const d = h/24; if (d < 14) return `${Math.round(d)}d ago`;
return `${Math.round(d/7)}w ago`;
}
// Inline price-trajectory sparkline. Pure data-viz polyline (not illustration).
function EcoSparkline({series, w=88, h=24, color='var(--text-3)'}){
if (!series || series.length < 2)
return — ;
const min = Math.min(...series), max = Math.max(...series);
const span = (max - min) || 1;
const pts = series.map((v,i) => {
const x = (i/(series.length-1))*(w-2)+1;
const y = (h-2) - ((v-min)/span)*(h-4) + 1;
return `${x.toFixed(1)},${y.toFixed(1)}`;
});
const last = series[series.length-1], lastPt = pts[pts.length-1].split(',');
return (
);
}
// Items excluded from the Economy movers: the 21 rune/adamant/mithril gear pieces
// that are no longer market-scraped (their prices are now static snapshots in
// prices.json, so any "move" they'd show is an artifact, not real market data).
const ECON_EXCLUDE = new Set([
'adamant_axe','adamant_full_helm','adamant_kiteshield','adamant_med_helm',
'adamant_platebody','adamant_platelegs','adamant_sq_shield','adamant_warhammer',
'mithril_2h_sword','mithril_axe','mithril_battleaxe','mithril_chainbody',
'mithril_kiteshield','mithril_mace','mithril_platebody','mithril_spear',
'mithril_sq_shield','mithril_sword',
'rune_dagger','rune_longsword','rune_warhammer',
// typo'd duplicate of herb_marrentill (the market site lists it as "marentill")
'marentill',
// duplicate guam row: herb_guam is folded into the "Guam leaf" (guam_leaf)
// row via ECO_PRICE_ALIAS, so its own row is suppressed here.
'herb_guam',
]);
let _ecoJunkCache = null;
// Junk = items the sim's own loot system marks 'skip' or 'bury' (left on the
// ground: empty oysters, seaweed, ashes, bones, raw meat, low-tier gear…), plus
// the worthless food/veg stragglers below that no monster drops with a skip/bury
// action. Even when a scraped market price exists for them, they're not real
// movers — so the Economy tab drops them outright.
const ECON_EXTRA_JUNK = new Set([
'raw_rat_meat','raw_bear_meat','raw_beef','raw_chicken',
'grapes','cabbage','potato','onion','bucket_milk',
]);
function ecoJunkSet(){
if (_ecoJunkCache) return _ecoJunkCache;
const G = window.GameData;
const set = new Set(ECON_EXTRA_JUNK);
if (G && G.MONSTERS && G.defaultLootAction){
const kept = new Set();
for (const m of G.MONSTERS){
for (const d of (m.loot || []).flat()){
if (!d || !d.key) continue;
const a = G.defaultLootAction(d);
if (a === 'skip' || a === 'bury') set.add(d.key);
else kept.add(d.key); // same key kept elsewhere → not junk
}
}
for (const k of kept) if (!ECON_EXTRA_JUNK.has(k)) set.delete(k);
}
if (set.size) _ecoJunkCache = set;
return set;
}
function EconomyPane(){
const [tick, setTick] = React.useState(0);
const [baseMode, setBaseMode] = React.useState('prev'); // 'prev' | 'first'
const [sortKey, setSortKey] = React.useState('pct'); // pct | abs | price | name
const [dir, setDir] = React.useState(-1);
const [q, setQ] = React.useState('');
const [flash, setFlash] = React.useState('');
const history = React.useMemo(
() => (window.getPriceHistory ? window.getPriceHistory() : []).slice().sort((a,b)=>a.t-b.t),
[tick]
);
const latest = history[history.length-1];
const baseIdx = baseMode==='first' ? 0 : history.length-2;
const base = history[baseIdx];
// Only items carrying a REAL scraped market price (from a prices.json load,
// a live scrape, or an import) belong on the movers list. Everything else —
// gamedata-default placeholders, bolts, skip/bury junk — has no market data.
const scrapedKeys = (window.getScrapedPriceKeys && window.getScrapedPriceKeys()) || null;
const useScraped = !!(scrapedKeys && scrapedKeys.size);
const junkSet = ecoJunkSet();
const rows = React.useMemo(() => {
if (!latest || !base || latest === base) return [];
const statics = (window.GameData && window.GameData.STATIC_PRICES) || {};
const lastIdx = history.length - 1;
// Baseline lookup that tolerates sparse history: if the chosen baseline
// snapshot has no value for an item (a purged ghost, or a snapshot older
// than the item), walk to the nearest snapshot that does — so the item
// shows its real move instead of vanishing from the list.
const baseValFor = (k) => {
if (baseMode === 'first'){
for (let i = 0; i < lastIdx; i++){ const v = history[i].prices[k]; if (typeof v === 'number' && v > 0) return v; }
} else {
for (let i = lastIdx - 1; i >= 0; i--){ const v = history[i].prices[k]; if (typeof v === 'number' && v > 0) return v; }
}
return null;
};
const out = [];
for (const [k, priceRaw] of Object.entries(latest.prices)){
if (useScraped && !scrapedKeys.has(k)) continue; // no scraped price → drop
if (junkSet.has(k)) continue; // skip/bury junk → drop
if (ECON_EXCLUDE.has(k)) continue;
if (k in statics) continue;
// Price-alias: read price/baseline/series from a different live key when
// mapped (guam_leaf → herb_guam) and that source actually has data.
const aliasKey = ECO_PRICE_ALIAS[k];
const srcKey = (aliasKey && typeof latest.prices[aliasKey] === 'number' && latest.prices[aliasKey] > 0)
? aliasKey : k;
const price = latest.prices[srcKey];
const b = baseValFor(srcKey);
if (typeof b !== 'number' || b <= 0) continue;
const delta = price - b;
const pct = delta / b;
const series = history.map(s => s.prices[srcKey]).filter(v => typeof v === 'number' && v > 0);
out.push({ key:k, price, base:b, delta, pct, series });
}
return out;
}, [latest, base, history, baseMode, useScraped, useScraped ? scrapedKeys.size : 0]);
const movers = rows.filter(r => r.delta !== 0);
// Only real gainers in "gainers", only real fallers in "fallers" — show fewer
// than 3 rather than padding one column with moves of the wrong sign.
const gainers = movers.filter(r => r.delta > 0).sort((a,b)=>b.pct-a.pct).slice(0,3);
const losers = movers.filter(r => r.delta < 0).sort((a,b)=>a.pct-b.pct).slice(0,3);
const filtered = rows.filter(r => {
if (!q) return true;
const s = q.toLowerCase();
return r.key.toLowerCase().includes(s) || ecoLabel(r.key).toLowerCase().includes(s);
});
const sorted = [...filtered].sort((a,b) => {
let v;
if (sortKey==='name') v = ecoLabel(a.key).localeCompare(ecoLabel(b.key)) * -1;
else if (sortKey==='price') v = a.price - b.price;
else if (sortKey==='abs') v = Math.abs(a.delta) - Math.abs(b.delta);
else v = Math.abs(a.pct) - Math.abs(b.pct);
return v * dir;
});
const sortBy = k => { if (sortKey===k) setDir(d=>-d); else { setSortKey(k); setDir(-1); } };
const captureNow = () => {
const before = (window.getPriceHistory ? window.getPriceHistory() : []).length;
window.recordPriceSnapshot && window.recordPriceSnapshot(Math.floor(Date.now()/1000));
const after = (window.getPriceHistory ? window.getPriceHistory() : []).length;
setTick(t=>t+1);
setFlash(after > before ? '✓ snapshot captured' : 'no price change since last snapshot');
setTimeout(()=>setFlash(''), 2600);
};
const clearHist = () => {
if (!window.confirm('Clear the entire price-history timeline? This cannot be undone.')) return;
window.clearPriceHistory && window.clearPriceHistory();
setTick(t=>t+1);
};
const fmtSignedGp = n => (n>0?'+':n<0?'−':'') + fmtK(Math.abs(n));
const fmtSignedPct = n => (n>0?'+':n<0?'−':'') + (Math.abs(n)*100).toFixed(Math.abs(n)<0.1?1:0) + '%';
const moveColor = n => n>0 ? 'var(--green)' : n<0 ? 'var(--red)' : 'var(--text-3)';
const span = (history.length>=2)
? ecoRelTime(history[0].t).replace(' ago','') + ' span'
: '—';
const TH = ({k, label, right}) => (
sortBy(k)} style={{cursor:'pointer', userSelect:'none', whiteSpace:'nowrap', position:'sticky', top:0, background:'var(--bg-1)', zIndex:1}}>
{label} {sortKey===k ? (dir<0?'▼':'▲') : ''}
);
// ---- empty / low-data state ----
if (history.length < 2){
return (
The timeline is still warming up.
Price history accumulates one snapshot at a time. Every market sync, full
scrape, or
prices.json import drops a new dated point here —
then this tab highlights which items moved the most between any two of them.
Sync or import again later (Settings tab) to build the series, or grab a
manual snapshot of the prices loaded right now:
＋ Capture snapshot now
{flash && {flash} }
);
}
return (
Economy · price movers
{flash && {flash} }
{/* header metrics */}
{/* baseline + capture controls */}
Compare latest vs
setBaseMode('prev')}>Previous
setBaseMode('first')}>First
{base ? `baseline ${ecoRelTime(base.t)}` : ''}
＋ Snapshot now
Clear
{/* top gainers / losers */}
{[['Top gainers', gainers, 'var(--green)'], ['Top fallers', losers, 'var(--red)']].map(([title, list, col]) => (
{title}
{list.length===0 &&
no change
}
{list.map(r => (
{ecoLabel(r.key)}
{fmtSignedPct(r.pct)}
))}
))}
{/* search */}
{/* movers table — scrollable list */}
Trend
Was
{sorted.map(r => (
{ecoLabel(r.key)}
{fmtK(r.price)}
{fmtK(r.base)}
{r.delta===0?'—':fmtSignedGp(r.delta)}
{r.delta===0?'—':fmtSignedPct(r.pct)}
))}
{sorted.length===0 && (
{rows.length===0 ? 'No overlapping items between these two snapshots.' : 'No items match your filter.'}
);
}
// =======================================================================
// WORKBENCH — A (primary view), with tabs for Stats / Compare / Loot
// =======================================================================
const LS_INPUT = 'sim_input_v3';
const LS_PREFS = 'sim_loot_prefs_v1';
const LS_HIDDEN_TIERS = 'sim_hidden_tiers_v1';
function loadSavedInput(){
try {
const raw = localStorage.getItem(LS_INPUT);
if (!raw) return null;
const saved = JSON.parse(raw);
// Re-attach monster object by id
const monster = E.MONSTERS.find(m => m.id === saved._monsterId) || null;
if (!monster) return null;
// Backfill any fields added since this input was persisted (e.g. the trip
// model) so older saves don't load with empty/zeroed sections.
const base = makeDefaults(saved.combatType || 'melee', monster.id);
const trip = { ...base.trip, ...(saved.trip || {}) };
return {...base, ...saved, trip, monster, _monsterId: undefined};
} catch { return null; }
}
function saveInput(input){
try {
const toSave = {...input, monster:undefined, _monsterId: input.monster?.id};
localStorage.setItem(LS_INPUT, JSON.stringify(toSave));
} catch {}
}
// Fields that make up a "setup" (loadout) — snapshotted per monster when the
// user saves a custom setup, and used as the default baseline otherwise.
const SETUP_FIELDS = [
'combatType','style','prayers','boosts','weapon','weaponName','ammo',
'ammoRangeBonus','spell','spellBase','charge','gear','accBonus','dmgBonus',
'attackSpeed','sustained','repotThreshold','ringOfWealth','specWeapon','specAmmo','trip',
];
const pickSetup = (s) => Object.fromEntries(SETUP_FIELDS.map(f => [f, s[f]]));
// Always-visible strip under the tab bar: shows whether the loadout you're
// editing applies to ALL monsters (default) or just this target (custom), and
// lets you switch/create/remove — so the per-monster setup isn't hidden in the
// far-right Target rail.
function SetupBar({input, set}){
const m = input.monster;
const hasCustom = !!(input.monsterSetups||{})[m.id];
const editingDefault = !!input.editingDefault;
const pill = (label, active, onClick, color='teal') => (
{label}
);
return (
Loadout for {m.name}
{hasCustom ? (
{pill('Custom (this monster)', !editingDefault, ()=>set('__editDefault', false))}
{pill('Default (all)', editingDefault, ()=>set('__editDefault', true), 'amber')}
) : (
Default loadout — shared by all monsters
)}
set(hasCustom?'__removeSetup':'__saveSetup')}
style={{padding:'4px 12px', fontFamily:'var(--mono)', fontSize:11, cursor:'pointer', borderRadius:3,
border:'1px solid '+(hasCustom?'var(--border-2)':'color-mix(in oklab, var(--teal) 45%, var(--border-2))'),
background: hasCustom?'var(--bg-2)':'color-mix(in oklab, var(--teal) 14%, var(--bg-2))',
color: hasCustom?'var(--text-2)':'var(--teal)'}}>
{hasCustom?'✕ remove custom → use default':'+ customize for this monster'}
);
}
function CombatWorkbench(){
const [input, setInput] = useState(() => loadSavedInput() || makeDefaults('melee'));
const [lootPrefs, setLootPrefs] = useState(() => {
try { return JSON.parse(localStorage.getItem(LS_PREFS) || '{}'); } catch { return {}; }
});
// Gear-tier declutter prefs (Settings) — global UI pref, kept OUT of the
// per-loadout input so it doesn't churn with setup switching.
const [hiddenTiers, setHiddenTiersState] = useState(() => {
try { return JSON.parse(localStorage.getItem(LS_HIDDEN_TIERS) || '{}'); } catch { return {}; }
});
const setHiddenTiers = (next) => {
setHiddenTiersState(next);
try { localStorage.setItem(LS_HIDDEN_TIERS, JSON.stringify(next)); } catch {}
};
const setLootPref = (itemName, pref) => {
const next = {...lootPrefs, [itemName]: pref};
setLootPrefs(next);
try { localStorage.setItem(LS_PREFS, JSON.stringify(next)); } catch {}
};
// Bulk merge (used by the loot optimizer to apply many prefs at once).
// When `clearUndefined` is set, keys whose value is undefined are removed,
// so they fall back to their default action instead of an override.
const setLootPrefsBulk = (obj, clearUndefined) => {
const next = {...lootPrefs, ...obj};
if (clearUndefined) for (const k in obj) if (obj[k] === undefined) delete next[k];
setLootPrefs(next);
try { localStorage.setItem(LS_PREFS, JSON.stringify(next)); } catch {}
};
const set = (k, v) => {
setInput(s => {
// Write-through: edits save to the monster's custom setup when one is
// active, or to the default loadout when editing it (or no custom).
const writeThrough = (s2) => {
const setups = s2.monsterSetups || {};
const hasCustom = s2.monster && setups[s2.monster.id];
if (hasCustom && s2.editingDefault) return {...s2, defaultSetup: pickSetup(s2)};
if (hasCustom) return {...s2, monsterSetups:{...setups, [s2.monster.id]: pickSetup(s2)}};
return s2;
};
// Toggle between editing this monster's custom setup and the DEFAULT
// loadout (shared by all non-custom monsters) without switching target.
if (k === '__editDefault'){
const setups = s.monsterSetups || {};
if (!setups[s.monster?.id]) return s; // nothing to toggle
if (v && !s.editingDefault){
// custom → default: custom is already synced; load default fields.
const base = s.defaultSetup || pickSetup(s);
return {...s, ...base, editingDefault:true,
trip:{...(base.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null}};
}
if (!v && s.editingDefault){
// default → custom: default is synced via write-through; reload custom.
return {...s, ...setups[s.monster.id], editingDefault:false};
}
return s;
}
// Per-monster alching toggle: store the decision keyed by the current
// monster, and mirror it into the live trip so the open panel reflects it.
// Deliberately NOT written through to the shared setup — alching is its own
// per-target choice.
if (k === '__setAlch'){
const id = s.monster?.id;
if (!id) return s;
return {...s, alchByMonster:{...(s.alchByMonster||{}), [id]: !!v},
trip:{...(s.trip||{}), alching: !!v}};
}
// Per-monster kill overhead (seconds). v=null clears the override → engine
// default. Mirrored into input.overheadSec for the live (current-monster)
// result; stored per monster, NOT in the shared setup.
if (k === '__setOverhead'){
const id = s.monster?.id;
if (!id) return s;
const map = {...(s.overheadByMonster||{})};
if (v == null) delete map[id]; else map[id] = v;
return {...s, overheadByMonster:map, overheadSec: (v == null ? null : v)};
}
// Per-monster random-jewel spot: 'overground' (nature talisman) or
// 'underground' (chaos talisman). Default underground; stored per monster.
if (k === '__setJewelSpot'){
const id = s.monster?.id;
if (!id) return s;
const map = {...(s.jewelSpotByMonster||{})};
if (v == null || v === 'underground') delete map[id]; else map[id] = v;
return {...s, jewelSpotByMonster:map};
}
// Apply a duel-snapshot loadout to the live editor.
if (k === '__applySetup'){
return writeThrough({...s, ...v,
trip:{...(v.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null}});
}
// Save current loadout as a custom setup for this monster.
if (k === '__saveSetup'){
return {...s, editingDefault:false,
defaultSetup: (s.monsterSetups||{})[s.monster.id] ? s.defaultSetup : pickSetup(s),
monsterSetups: {...(s.monsterSetups||{}), [s.monster.id]: pickSetup(s)}};
}
// Remove the custom setup and restore the default loadout.
if (k === '__removeSetup'){
const setups = {...(s.monsterSetups||{})};
delete setups[s.monster.id];
const base = s.defaultSetup || pickSetup(s);
return {...s, ...base, monsterSetups: setups, editingDefault:false,
trip:{...(base.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null}};
}
if (k === 'combatType' && v !== s.combatType){
// Stash the current type's full loadout, then restore the target
// type's saved loadout (or sensible defaults the first time).
const stash = {
style:s.style, prayers:s.prayers, boosts:s.boosts,
accBonus:s.accBonus, dmgBonus:s.dmgBonus, attackSpeed:s.attackSpeed,
weapon:s.weapon, weaponName:s.weaponName, ammo:s.ammo,
ammoRangeBonus:s.ammoRangeBonus, spell:s.spell, spellBase:s.spellBase, charge:s.charge,
gear:s.gear, sustained:s.sustained, repotThreshold:s.repotThreshold,
ringOfWealth:s.ringOfWealth, specWeapon:s.specWeapon, trip:s.trip,
};
const loadouts = { ...(s.loadouts||{}), [s.combatType]: stash };
const saved = loadouts[v];
const base = makeDefaults(v, s.monster.id);
const restored = saved ? {...base, ...saved} : base;
const writeThroughCT = (s2) => {
const setups = s2.monsterSetups || {};
const hasCustom = s2.monster && setups[s2.monster.id];
// Respect the editing-default mode the user was in BEFORE the
// switch: route the restored loadout to the default, not the
// monster's custom setup.
if (hasCustom && s.editingDefault)
return {...s2, editingDefault:true, defaultSetup: pickSetup(s2)};
if (hasCustom)
return {...s2, monsterSetups:{...setups, [s2.monster.id]: pickSetup(s2)}};
return s2;
};
return writeThroughCT({...restored,
attack:s.attack, strength:s.strength, defence:s.defence,
ranged:s.ranged, magic:s.magic, hp:s.hp, prayer:s.prayer,
monster:s.monster, overheadSec:s.overheadSec,
combatType:v, loadouts, duelSetups:s.duelSetups,
monsterSetups:s.monsterSetups, defaultSetup:s.defaultSetup});
}
if (k === 'monster' && v && v.id !== s.monster?.id){
const setups = s.monsterSetups || {};
// If the live fields are the default (non-custom monster, or custom
// monster in editing-default mode), keep the default snapshot fresh.
const liveIsDefault = !setups[s.monster?.id] || s.editingDefault;
const defaultSetup = liveIsDefault ? pickSetup(s) : s.defaultSetup;
const next = setups[v.id];
const alchOn = !!(s.alchByMonster||{})[v.id]; // per-monster alch decision
const ovhd = (s.overheadByMonster||{})[v.id] ?? null; // per-monster overhead (null → default)
if (next){
// Target has a custom setup → load it wholesale (but alching is per
// monster, not part of the shared setup, so apply it on top).
return {...s, ...next, monster:v, defaultSetup, editingDefault:false,
trip:{...(next.trip||{}), alching:alchOn}, overheadSec:ovhd};
}
// No custom setup → restore the default loadout, with per-monster
// trip autos (bank time, food count) reset for the new target.
const base = defaultSetup || pickSetup(s);
return {...s, ...base, monster:v, defaultSetup, editingDefault:false,
trip:{...(base.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null, alching:alchOn}, overheadSec:ovhd};
}
return writeThrough({...s, [k]:v});
});
};
// Patch a field inside the trip object.
const setTrip = (patch) => setInput(s => {
const s2 = {...s, trip:{...(s.trip||{}), ...patch}};
const setups = s2.monsterSetups || {};
const hasCustom = s2.monster && setups[s2.monster.id];
if (hasCustom && s2.editingDefault) return {...s2, defaultSetup: pickSetup(s2)};
if (hasCustom) return {...s2, monsterSetups:{...setups, [s2.monster.id]: pickSetup(s2)}};
return s2;
});
useEffect(() => { saveInput(input); }, [input]);
const simInput = useMemo(() => ({...input, lootPrefs,
cannon: (input.cannonByMonster||{})[input.monster?.id] }), [input, lootPrefs]);
const result = useMemo(()=>E.simulate(simInput), [simInput]);
// Patch the cannon settings for the CURRENT monster (per-spot: targets &
// respawn vary monster to monster, so it's keyed by monster id like overhead).
const setCannon = (patch) => setInput(s => {
const id = s.monster?.id; if (!id) return s;
const map = {...(s.cannonByMonster||{})};
map[id] = {...(map[id]||{}), ...patch};
return {...s, cannonByMonster:map};
});
const [tab, setTab] = useState('stats');
// Equipment tabs double as combat-type switches.
const openEquip = (type) => {
if (input.combatType !== type) set('combatType', type);
setTab('equip_' + type);
};
return (
{/* SETUP BAR — always visible: which loadout drives THIS monster */}
{[
{k:'stats', label:'Stats', sub:`DPS · ${fmt2(result.dps)}`, onClick:()=>setTab('stats')},
{k:'equip_melee', label:'Melee', sub:'gear · buffs', onClick:()=>openEquip('melee')},
{k:'equip_ranged', label:'Ranged', sub:'gear · buffs', onClick:()=>openEquip('ranged')},
{k:'equip_magic', label:'Magic', sub:'gear · buffs', onClick:()=>openEquip('magic')},
{k:'compare', label:'Compare', sub:`${E.MONSTERS.length} monsters`, onClick:()=>setTab('compare')},
{k:'loot', label:'Loot', sub:`${fmtK(result.gpPerHour)} gp/hr`, onClick:()=>setTab('loot')},
{k:'trip', label:'Trip', sub:`${result.trip&&isFinite(result.trip.killsPerTrip)?Math.floor(result.trip.killsPerTrip)+' k/trip':'—'}`, onClick:()=>setTab('trip')},
{k:'cannon', label:'Cannon', sub: (result.cannon && !result.cannon.idle) ? `${fmtK(result.cannon.ballsPerHour)} balls/hr` : ((input.cannonByMonster||{})[input.monster?.id]?.enabled ? 'idle' : 'off'), onClick:()=>setTab('cannon')},
{k:'duel', label:'Duel', sub:`${(input.duelSetups||[]).length} setups`, onClick:()=>setTab('duel')},
{k:'planner', label:'Planner', sub:'train order', onClick:()=>setTab('planner')},
{k:'economy', label:'Economy', sub:'price movers', onClick:()=>setTab('economy')},
{k:'settings',label:'Settings',sub:(() => { const i = priceAgeInfo(); return i.hours !== null && i.hours > 24 ? `⚠ prices ${i.label}` : 'prices · import'; })(), onClick:()=>setTab('settings')},
].map(t => {
const isEquip = t.k.startsWith('equip_');
const equipType = isEquip ? t.k.slice(6) : null;
const activeEquip = isEquip && input.combatType === equipType;
return (
{t.label}{activeEquip ? ' ●' : ''}
);
})}
{tab==='stats' && }
{tab==='equip_melee' && }
{tab==='equip_ranged' && }
{tab==='equip_magic' && }
{tab==='compare' && }
{tab==='planner' && window.PlannerPane && }
{tab==='duel' && }
{tab==='loot' && }
{tab==='economy' && }
{tab==='cannon' && }
{tab==='settings' && }
);
}
// =======================================================================
// SPREADSHEET — B (standalone alternative)
// =======================================================================
function CombatSpreadsheet(){
const [input, setInput] = useState(makeDefaults('melee','greater_demon'));
const set = (k,v) => {
setInput(s => {
if (k === 'combatType' && v !== s.combatType){
const next = makeDefaults(v, s.monster.id);
return {...next,
attack:s.attack, strength:s.strength, defence:s.defence,
ranged:s.ranged, magic:s.magic, hp:s.hp, prayer:s.prayer, monster:s.monster};
}
return {...s, [k]:v};
});
};
const result = useMemo(()=>E.simulate(input), [input]);
const rows = useMemo(()=>{
const setups = input.monsterSetups || {};
const onCustom = !!(input.monster && setups[input.monster.id]) && !input.editingDefault;
const baseSetup = onCustom ? (input.defaultSetup || {}) : {};
return E.MONSTERS.map(m=>{
const ov = setups[m.id];
const alchOn = !!(input.alchByMonster||{})[m.id]; // per-monster alch decision
const sim = ov ? {...input, ...ov, monster:m}
: {...input, ...baseSetup, monster:m,
trip:{...((baseSetup.trip)||input.trip||{}), bankSeconds:null, foodCount:null, foodPerKillOverride:null, scarce:null}};
sim.trip = {...(sim.trip||{}), alching:alchOn};
sim.overheadSec = (input.overheadByMonster||{})[m.id] ?? null;
sim.cannon = null;
return {m, r:E.simulate(sim), custom:!!ov};
});
}, [input]);
const [sort, setSort] = useState({key:'xpPerHour', dir:-1});
const sorted = useMemo(()=>[...rows].sort((a,b)=>{
if (sort.key === 'name') return a.m.name.localeCompare(b.m.name) * -sort.dir;
return (a.r[sort.key]-b.r[sort.key])*sort.dir;
}), [rows,sort]);
const sortBy = k => setSort(s => s.key===k ? {key:k,dir:-s.dir} : {key:k,dir:-1});
const TH = ({k,label,right=true}) => (
sortBy(k)} style={{cursor:'pointer', userSelect:'none'}}>
{label} {sort.key===k ? (k==='name' ? (sort.dir<0?'▲':'▼') : (sort.dir<0?'▼':'▲')) : ''}
);
const ct = input.combatType;
const styles = E.STYLES[ct];
const prayers = E.availablePrayers(ct);
const potions = E.availablePotions(ct);
return (
set('combatType',v)} opts={Object.entries(E.COMBAT_TYPES).map(([k,v])=>[k,v.label])} />
{ct==='melee' && (<>
set('attack',v)} />
set('strength',v)} />
)}
{ct==='ranged' && (<>
set('ranged',v)} />
{}} />
)}
{ct==='magic' && (<>
set('magic',v)} />
{set('spell',v); set('spellBase',E.SPELLS[v].base);}} opts={Object.entries(E.SPELLS).map(([k,v])=>[k,v.name])} />
)}
set('defence',v)} />
set('style',v)} opts={
ct==='melee'
? E.weaponStances(input.weapon).map(s=>[s.id, `${s.name} · ${(styles[s.style]?.label||s.style)} · ${s.type}`])
: Object.entries(styles).map(([k,v])=>[k,v.label])
} />
set('prayers',[v])} opts={Object.entries(prayers).map(([k,v])=>[k,v.label.split(' (')[0]])} />
set('boosts',[v])} opts={Object.entries(potions).map(([k,v])=>[k,v.label])} />
set('accBonus',v)} />
set('dmgBonus',v)} />
set('attackSpeed',v)} />
set('foodPerKill',v)} />
set('monster', E.MONSTERS.find(m=>m.id===v))} opts={E.MONSTERS.map(m=>[m.id,m.name])} />
|
|
|
|
|
|
|
|
All monsters · current loadout click header to sort · {rows.length} rows
{sorted.map(({m,r}) => {
const sel = m.id===input.monster.id;
return (
set('monster',m)}>
{sel?'▸ ':' '}{m.name} · lvl {m.level}
{fmtPct(r.hitChance)}
{r.maxHit}
{fmt2(r.dps)}
{fmtTime(r.ttkSec)}
{fmtInt(r.killsPerHour)}
{fmtK(r.xpPerHour)}
{fmtInt(r.gpPerKill)}
{fmtK(r.gpPerHour)}
{fmtK(r.effectiveNetGpPerHour)}
);
})}
);
}
// =======================================================================
// SMALL PRIMITIVES
// =======================================================================
// Prayer restore options — how you sustain prayer points when a draining
// prayer (offensive boost or protection) is active. Three modes, each with
// a different cost shape so the user can see why a boost prayer can drag
// down gp/xp per hour: Potions (slots + gp, can be prayer-bound), Altar
// (time cost, no slots/gp), or Flick (free — pure DPS gain).
function PrayerOptions({t, setTrip, result}){
const mode = t.prayerMode || (t.prayerRestore === false ? 'none' : 'potions');
const trip = result.trip || {};
const single = !!t.singleDose;
const setMode = (m) => setTrip({ prayerMode: m, prayerRestore: m !== 'none' });
const modes = [['potions','Potions'],['altar','Altar'],['none','Flick']];
// Prayer-dose recommendation: how many doses to outlast the (food/loot-bound)
// trip. You start with a full prayer pool (= Prayer level) for free, then each
// dose restores floor(level/4)+7 points; drain is prayerPerKill × kills.
const prayerRec = (() => {
const ppk = result.prayerPerKill || 0;
const natural = trip.naturalKills;
const lvl = result.prayerLevel || trip.prayerPool || 1;
const perDose = Math.floor(lvl / 4) + 7;
const pool = trip.prayerPool || lvl;
if (!(ppk > 0) || !isFinite(natural) || natural <= 0 || perDose <= 0) return null;
const doses = Math.max(0, Math.ceil((ppk * natural - pool) / perDose));
return { doses, vials: Math.ceil(doses / 4), perDose,
killMin: (result.cycleSec || 0) * natural / 60 };
})();
const recMatched = prayerRec && (single
? (t.prayerPotionDoses ?? t.potionDoses ?? 4) === prayerRec.doses
: (t.prayerPotionSets ?? t.potionSets ?? 1) === prayerRec.vials);
const btn = (active) => ({
flex:1, padding:'5px 0', fontFamily:'var(--mono)', fontSize:10, cursor:'pointer',
textTransform:'uppercase', letterSpacing:'.5px', borderRadius:3,
border:'1px solid '+(active?'var(--violet)':'var(--border-2)'),
background: active?'color-mix(in oklab, var(--violet) 18%, var(--bg-1))':'var(--bg-2)',
color: active?'var(--text-1)':'var(--text-3)',
});
return (
Prayer options
{result.prayerDrainRate}/tick drain
{modes.map(([k,l])=>(
setMode(k)}>{l}
))}
{mode==='potions' && (
<>
{single
?
setTrip({prayerPotionDoses:Math.max(0,v)})} />
: setTrip({prayerPotionSets:Math.max(0,v)})} />}
{trip.prayerSlots||0} slot{trip.prayerSlots===1?'':'s'} · ~{fmtK((trip.prayerCostPerKill||0)*result.effectiveKph)} gp/hr
{trip.bound==='prayer' ? · prayer-bound — banks early : ''}
{prayerRec && prayerRec.doses>0 && (
Recommended {' '}
{prayerRec.doses} dose{prayerRec.doses===1?'':'s'}
{' '}({single?`${prayerRec.doses} single`:`${prayerRec.vials} × (4)-vial`}) to outlast the {prayerRec.killMin.toFixed(0)}min trip.
{!recMatched && (
setTrip(single?{prayerPotionDoses:prayerRec.doses}:{prayerPotionSets:prayerRec.vials})}
style={{marginLeft:6, padding:'2px 8px', fontFamily:'var(--mono)', fontSize:10, cursor:'pointer',
borderRadius:3, border:'1px solid color-mix(in oklab, var(--violet) 45%, var(--border-2))',
background:'color-mix(in oklab, var(--violet) 16%, var(--bg-2))', color:'var(--violet)'}}>
apply
)}
)}
{prayerRec && prayerRec.doses===0 && (
Your prayer pool lasts the whole trip — no prayer potions needed.
Switch to Flick to free the slot.
)}
)}
{mode==='altar' && (
<>
setTrip({altarSeconds:Math.max(0,v)})} />
Recharge every {fmtInt(trip.killsPerAltar)} kills (pool {trip.prayerPool}) ·
~{Math.round((trip.altarSecPerKill||0)*result.effectiveKph/60)} min/hr lost · no potions, no gp
)}
{mode==='none' && (
Flick prayers so drain is negligible — no slots, no gp, no time. The
boost shows as a pure DPS gain.
)}
);
}
function Toggle({label, subOn, subOff, value, onChange, color='teal'}){
return (
onChange(!value)} style={{
width:32, height:18, borderRadius:9, border:'1px solid var(--border-2)',
background: value ? `color-mix(in oklab, var(--${color}) 60%, var(--bg-2))` : 'var(--bg-2)',
position:'relative', cursor:'pointer', transition:'background .15s', flexShrink:0,
}}>
{label}
{(subOn||subOff) && {value ? subOn : subOff} }
);
}
// Multi-select chip list. `options` is an object {key: {label, cat}}.
// Selecting "none" clears everything. Within a category (att/str/def/…),
// only one option can be active — picking another in the same category
// replaces it (you can't stack two strength prayers / potions).
// Empty selection falls back to ['none'].
function ChipMultiSelect({options, selected, onChange}){
const sel = new Set(selected);
const toggle = (k) => {
if (k === 'none'){ onChange(['none']); return; }
const cat = options[k]?.cat;
const next = new Set(sel);
next.delete('none');
if (next.has(k)){
next.delete(k);
} else {
// drop any other selection sharing this category (mutually exclusive)
if (cat && cat !== 'special'){
for (const other of [...next]){
if (options[other]?.cat === cat) next.delete(other);
}
}
next.add(k);
}
onChange(next.size ? [...next] : ['none']);
};
return (
{Object.entries(options).map(([k,v]) => {
const on = sel.has(k);
const isDba = k === 'dba_spec';
const accent = isDba ? 'red' : 'teal';
return (
toggle(k)}
style={{
fontFamily:'var(--mono)', fontSize:10, letterSpacing:'.02em',
padding:'4px 8px', borderRadius:3, cursor:'pointer',
border:`1px solid ${on ? `color-mix(in oklab, var(--${accent}) 45%, var(--border-2))` : 'var(--border-2)'}`,
background: on ? `color-mix(in oklab, var(--${accent}) 16%, var(--bg-2))` : 'var(--bg-2)',
color: on ? `var(--${accent})` : 'var(--text-2)',
transition:'all .1s',
}}>
{on ? '✓ ' : ''}{v.label}
);
})}
);
}
function SustainedInfo({input}){
const ct = input.combatType;
const potFn = stat => l => E.combinePotionFn(input.boosts||[])(stat, l);
const dbaOn = (input.boosts||[]).includes('dba_spec');
const rows = [];
if (ct === 'melee'){
const dbaInfo = dbaOn ? E.dbaBoost(input.attack, input.defence, input.ranged||1, input.magic||1) : null;
// Attack: super-attack is maintained and the DBA drain is restored, so it
// averages like a normal super-attack potion whether or not DBA is on.
const boostedAtt = Math.floor(potFn('att')(input.attack));
const repotAtt = input.repotThreshold ?? Math.max(input.attack, boostedAtt - 10);
const avgAtt = E.normalSustained(input.attack, potFn('att'), repotAtt);
// Strength: from the DBA spec (treated as a potion) when DBA is on, else
// from a super-strength dose.
const peakStr = dbaOn ? input.strength + dbaInfo.totalBoost
: Math.floor(potFn('str')(input.strength));
const repotStr = input.repotThreshold ?? Math.max(input.strength, peakStr - 10);
const avgStr = dbaOn
? E.dbaSustainedStr(input.strength, dbaInfo.totalBoost, repotStr)
: E.normalSustained(input.strength, potFn('str'), repotStr);
rows.push(['Attack', input.attack, boostedAtt, avgAtt.toFixed(1)]);
rows.push(['Strength', input.strength, peakStr, avgStr.toFixed(1)]);
} else if (ct === 'ranged'){
const boosted = Math.floor(potFn('rng')(input.ranged));
const repot = input.repotThreshold ?? Math.max(input.ranged, boosted - 10);
const avg = E.normalSustained(input.ranged, potFn('rng'), repot);
rows.push(['Ranged', input.ranged, boosted, avg.toFixed(1)]);
} else {
const boosted = Math.floor(potFn('mag')(input.magic));
const repot = input.repotThreshold ?? Math.max(input.magic, boosted - 10);
const avg = E.normalSustained(input.magic, potFn('mag'), repot);
rows.push(['Magic', input.magic, boosted, avg.toFixed(1)]);
}
return (
{['Stat','Base','Peak','Avg used'].map(h=>(
{h}
))}
{rows.map(([stat,base,peak,avg])=>(
{stat}
{base}
{peak}
{avg}
))}
);
}
function DBAInfo({input}){
const info = E.dbaBoost(input.attack, input.defence, input.ranged||1, input.magic||1);
// DBA: str = base + spec boost (no str pot — mutually exclusive, handled by engine)
const strWithDBA = input.strength + info.totalBoost;
return (
Str boost from spec
+{info.totalBoost}
Effective str (base + DBA)
{strWithDBA}
+{info.drainAtt} att drain restored by restore pot
);
}
function NumField({label, v, step=1, min=1, onChange}){
// Keep a local draft string so the field can be momentarily empty while
// editing (backspacing the last digit). A controlled value={number} would
// coerce "" back to 0 and trap a sticky zero. Commit valid numbers live;
// fall back to `min` only when the field is left empty on blur.
const [draft, setDraft] = React.useState(null);
const shown = draft != null ? draft : String(v);
return (
{label}
);
}
function MiniMetric({k,v}){
return (
);
}
function KV({k,v,hot}){
return (
{k}
{v}
);
}
function Compact({label, v, step=1, onChange}){
return (
{label}
);
}
function CompactSel({label, v, onChange, opts}){
return (
{label}
onChange(e.target.value)} style={{padding:'3px 18px 3px 6px', fontSize:11}}>
{opts.map(([k,l])=> {l} )}
);
}
function Cell({k, v, accent}){
return (
);
}
function HitHistogram({maxHit, hitChance}){
const bars = [];
const missProb = 1 - hitChance;
const perFace = hitChance / (maxHit + 1);
for (let i = 0; i <= maxHit; i++){
bars.push((i === 0 ? missProb : 0) + perFace);
}
const max = Math.max(...bars, 0.01);
return (
{bars.map((p, i) => (
))}
);
}
// =======================================================================
// ARCHITECTURE BOARD
// =======================================================================
function ArchitectureBoard(){
return (
local-first architecture · v0.1
Run the whole stack on your machine.
One repo, three processes: a Python FastAPI engine, a Next.js front-end, and a polite scraper.
SQLite + a JSON snapshot of the Lost City data dir is the source of truth — no external services required to launch.
Modules · combat engine services/engine/sim/
Module Responsibility Public surface
rolls.py effective levels · attack/defence rolls (melee/ranged/magic) eff_acc, eff_dmg, attack_roll, defence_roll damage.py max hit per style · hit chance · distribution max_hit_melee, max_hit_ranged, max_hit_magic, dist dps.py average dps incl. attack speed + rapid mod dps, time_to_kill prayers.py prayer registry · per-stat multipliers + drain PRAYERS, drain_per_min, available_for(type) potions.py potion boost curves POTIONS, apply spells.py spell registry · base dmg, rune cost, lvl req SPELLS, cast_cost loot.py drop-table eval · ev per kill · monte carlo expected_value, monte_carlo trip.py inventory + supply consumption trip_duration, supplies_per_kill compare.py cartesian over loadouts × monsters rank, frontier
Run locally
{`$ git clone …/2004scape-sim && cd $_
$ make seed # parse LostCityRS/Content@v274 → sqlite
$ make dev # turbo: web + api + scraper
↳ web http://localhost:3000
↳ api http://localhost:8000
↳ scraper pid 41213 (every 30m)
$ python -m sim.repl
sim> simulate(type="ranged", lvl=80, target="dust_devil")
dps=2.41 xp/h=46.8k gp/h=92k`}
Roadmap
W1 · engine (melee · ranged · magic) + testsW2 · seed extract from LostCityRS/Content@v274W3 · FastAPI endpoints + schemasW4 · Next.js workbench (this prototype)W5 · scraper · prices · loot EVW6 · optimizer · gear search · prayer flickingW7+ · hiscores import · trip planner
);
}
function ArchCard({tag, title, port, lines, color}){
return (
{tag}
{port}
{title}
{lines.map((l,i)=>(· {l} ))}
);
}
Object.assign(window, {
CombatWorkbench, CombatSpreadsheet, ArchitectureBoard,
});