feat: Phase 4 port Oracle, Meaning, UNE, and Dice
Ports the four core Mythic GME tools from reference/index.html into the modular structure. Fate Check and Random Event Check preserve the exact probability matrix and roll logic, now reading chaos factor live from the active campaign instead of local state. Meaning and UNE tables are served from data/tables/ via a new tables route. UNE motivation uses the published verb+noun tables instead of the reference's flattened phrase list. Dice (pool builder, custom roll, percentile, ability score) is ported verbatim as pure frontend logic.
This commit is contained in:
claudecode
+160
-4
@@ -135,10 +135,162 @@
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div class="view active" id="view-oracle"></div>
|
||||
<div class="view" id="view-meaning"></div>
|
||||
<div class="view" id="view-une"></div>
|
||||
<div class="view" id="view-dice"></div>
|
||||
<div class="view active" id="view-oracle">
|
||||
<div class="card">
|
||||
<div class="card-title">Fate Check</div>
|
||||
<div class="prob-grid" id="probGrid">
|
||||
<button class="prob-btn" data-label="Impossible" data-base="5">Impossible</button>
|
||||
<button class="prob-btn" data-label="No Way" data-base="15">No Way</button>
|
||||
<button class="prob-btn" data-label="Very Unlikely" data-base="25">Very Unlikely</button>
|
||||
<button class="prob-btn" data-label="Unlikely" data-base="35">Unlikely</button>
|
||||
<button class="prob-btn selected" data-label="50/50" data-base="50">50 / 50</button>
|
||||
<button class="prob-btn" data-label="Somewhat Likely" data-base="65">Somewhat Likely</button>
|
||||
<button class="prob-btn" data-label="Likely" data-base="75">Likely</button>
|
||||
<button class="prob-btn" data-label="Very Likely" data-base="85">Very Likely</button>
|
||||
<button class="prob-btn" data-label="Near Certain" data-base="95">Near Certain</button>
|
||||
</div>
|
||||
<button class="roll-btn" id="fateRollBtn">Ask the Fates</button>
|
||||
<div class="result-box" id="fateResult">
|
||||
<span class="placeholder">Select a probability and ask.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Random Event Check</div>
|
||||
<p class="card-note">Roll at the start of each scene. A random event occurs if the result is equal to or under the chaos factor.</p>
|
||||
<button class="roll-btn" id="eventRollBtn">Check for Random Event</button>
|
||||
<div class="event-result" id="eventResult">
|
||||
<span class="placeholder">Roll to check.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view" id="view-meaning">
|
||||
<div class="card">
|
||||
<div class="card-title">Meaning Tables</div>
|
||||
<p class="card-note">Use these to interpret random events, oracle results, or whenever you need narrative inspiration.</p>
|
||||
<button class="roll-btn" id="meaningRollBtn">Roll Action + Descriptor</button>
|
||||
<div class="meaning-grid">
|
||||
<div class="meaning-result">
|
||||
<div class="meaning-label">Action</div>
|
||||
<div class="meaning-word" id="meaningAction"><span class="placeholder">—</span></div>
|
||||
</div>
|
||||
<div class="meaning-result">
|
||||
<div class="meaning-label">Descriptor</div>
|
||||
<div class="meaning-word" id="meaningDescriptor"><span class="placeholder">—</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Individual Tables</div>
|
||||
<div class="meaning-individual-grid">
|
||||
<button class="roll-btn" id="actionRollBtn">Roll Action</button>
|
||||
<button class="roll-btn" id="descriptorRollBtn">Roll Descriptor</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view" id="view-une">
|
||||
<div class="card">
|
||||
<div class="card-title">NPC Generator — UNE</div>
|
||||
<p class="card-note">Generate an NPC's core traits. Drop the results into your NPC note.</p>
|
||||
<button class="roll-btn" id="uneRollBtn">Generate NPC</button>
|
||||
<div class="une-result" id="uneResult" style="display:none;">
|
||||
<div class="une-row">
|
||||
<span class="une-key">Motivation</span>
|
||||
<span class="une-val" id="uneMotivation"></span>
|
||||
</div>
|
||||
<div class="une-row">
|
||||
<span class="une-key">Demeanor</span>
|
||||
<span class="une-val" id="uneDemeanor"></span>
|
||||
</div>
|
||||
<div class="une-row">
|
||||
<span class="une-key">Character</span>
|
||||
<span class="une-val" id="uneCharacter"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">NPC Relationship</div>
|
||||
<p class="card-note">How does this NPC feel about the PC?</p>
|
||||
<button class="roll-btn" id="relationshipRollBtn">Roll Relationship</button>
|
||||
<div class="event-result" id="relationshipResult">
|
||||
<span class="placeholder">Roll to find out.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view" id="view-dice">
|
||||
<div class="card">
|
||||
<div class="card-title">Dice Pool Builder</div>
|
||||
|
||||
<div class="dice-grid" id="diceGrid">
|
||||
<button class="die-btn" data-sides="4">d4</button>
|
||||
<button class="die-btn" data-sides="6">d6</button>
|
||||
<button class="die-btn" data-sides="8">d8</button>
|
||||
<button class="die-btn" data-sides="10">d10</button>
|
||||
<button class="die-btn" data-sides="12">d12</button>
|
||||
<button class="die-btn" data-sides="20">d20</button>
|
||||
<button class="die-btn" data-sides="100">d100</button>
|
||||
<button class="die-btn" data-sides="2">d2</button>
|
||||
</div>
|
||||
|
||||
<div class="pool-display" id="poolDisplay">
|
||||
<span class="placeholder">No dice in pool — click above to add.</span>
|
||||
</div>
|
||||
<div class="pool-cap-msg" id="poolCapMsg" style="display:none;">Pool is full — 25 dice maximum.</div>
|
||||
|
||||
<div class="dice-actions-row">
|
||||
<button class="roll-btn" id="poolRollBtn">Roll Pool</button>
|
||||
<button class="clear-btn" id="poolClearBtn">Clear</button>
|
||||
</div>
|
||||
|
||||
<div class="dice-result-box" style="margin-top:1rem;" id="poolResult">
|
||||
<span class="placeholder">Build a pool and roll.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Custom Roll</div>
|
||||
<div class="custom-roll-row">
|
||||
<input type="number" id="customQty" class="custom-roll-input" placeholder="Qty" min="1" step="1">
|
||||
<div class="custom-die-input">
|
||||
<span class="custom-die-prefix">d</span>
|
||||
<input type="number" id="customSides" class="custom-roll-input" placeholder="sides" min="1" step="1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dice-actions-row">
|
||||
<button class="roll-btn" id="customRollBtn" disabled>Roll</button>
|
||||
<button class="clear-btn" id="customClearBtn">Clear</button>
|
||||
</div>
|
||||
<div class="dice-result-box" style="margin-top:1rem;" id="customResult">
|
||||
<span class="placeholder">Enter a quantity and die size.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Percentile</div>
|
||||
<div class="dice-actions-row">
|
||||
<button class="roll-btn" id="percentileTensBtn">Tens</button>
|
||||
<button class="roll-btn" id="percentileOnesBtn">Ones</button>
|
||||
</div>
|
||||
<div class="dice-result-box" style="margin-top:1rem;" id="percentileResult">
|
||||
<span class="placeholder">Roll tens or ones.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-title">Ability Score</div>
|
||||
<button class="roll-btn" id="ability4d6Btn">4d6 dl</button>
|
||||
<button class="roll-btn" id="abilityArrayBtn">Full Array</button>
|
||||
<div class="dice-result-box" style="margin-top:1rem;" id="abilityResult">
|
||||
<span class="placeholder">Roll for an ability score.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="view" id="view-tables"></div>
|
||||
<div class="view" id="view-threads"></div>
|
||||
<div class="view" id="view-npcs"></div>
|
||||
@@ -150,4 +302,8 @@
|
||||
</body>
|
||||
<script src="js/app.js" type="module"></script>
|
||||
<script src="js/campaigns.js" type="module"></script>
|
||||
<script src="js/oracle.js" type="module"></script>
|
||||
<script src="js/meaning.js" type="module"></script>
|
||||
<script src="js/une.js" type="module"></script>
|
||||
<script src="js/dice.js" type="module"></script>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user