joseph/mythic-oracle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dice view readability and pool builder cleanup

Browse Source 
Remove d100 from the dice pool builder (percentile section is
unaffected). Switch die buttons, pool display, and result output
to JetBrains Mono for mechanical/numeric readability, and lay out
the pool builder buttons in a fixed 7-column grid to match the
remaining die count.
This commit is contained in:
claudecode
2026-07-01 00:29:18 -04:00
parent ec28933623
commit 40b0e21d9d
3 changed files with 10 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/css/styles.css
+8 -5
View File
@@ -662,7 +662,7 @@ h1, h2, h3, h4, h5, h6 {
.dice-grid { .dice-grid {
display: grid; display: grid;
grid-template-columns: repeat(4, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 8px; gap: 8px;
margin-bottom: 12px; margin-bottom: 12px;
} }
@@ -673,7 +673,7 @@ h1, h2, h3, h4, h5, h6 {
border-radius: 3px; border-radius: 3px;
background: var(--bg); background: var(--bg);
color: var(--text-secondary); color: var(--text-secondary);
font-family: var(--font-heading); font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-align: center; text-align: center;
@@ -707,7 +707,7 @@ h1, h2, h3, h4, h5, h6 {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 3px; border-radius: 3px;
background: var(--bg); background: var(--bg);
font-family: var(--font-heading); font-family: var(--font-mono);
font-size: 0.95rem; font-size: 0.95rem;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: var(--accent); color: var(--accent);
@@ -735,6 +735,7 @@ h1, h2, h3, h4, h5, h6 {
.pool-result-groups { .pool-result-groups {
width: 100%; width: 100%;
font-family: var(--font-mono);
font-style: italic; font-style: italic;
font-size: 0.85rem; font-size: 0.85rem;
color: var(--text-secondary); color: var(--text-secondary);
@@ -746,7 +747,7 @@ h1, h2, h3, h4, h5, h6 {
} }
.pool-group-type { .pool-group-type {
font-family: var(--font-heading); font-family: var(--font-mono);
font-size: 0.68rem; font-size: 0.68rem;
letter-spacing: 0.1em; letter-spacing: 0.1em;
text-transform: uppercase; text-transform: uppercase;
@@ -809,11 +810,12 @@ h1, h2, h3, h4, h5, h6 {
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 3px; border-radius: 3px;
background: var(--bg); background: var(--bg);
font-family: var(--font-mono);
text-align: center; text-align: center;
} }
.dice-total { .dice-total {
font-family: var(--font-heading); font-family: var(--font-mono);
font-size: 2.2rem; font-size: 2.2rem;
font-weight: 600; font-weight: 600;
color: var(--accent); color: var(--accent);
@@ -822,6 +824,7 @@ h1, h2, h3, h4, h5, h6 {
.dice-breakdown { .dice-breakdown {
margin-top: 6px; margin-top: 6px;
font-family: var(--font-mono);
font-style: italic; font-style: italic;
font-size: 0.8rem; font-size: 0.8rem;
color: var(--text-secondary); color: var(--text-secondary);
public/index.html
-1
View File
@@ -233,7 +233,6 @@
<button class="die-btn" data-sides="10">d10</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="12">d12</button>
<button class="die-btn" data-sides="20">d20</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> <button class="die-btn" data-sides="2">d2</button>
</div> </div>
public/js/dice.js
+2 -2
View File
@@ -1,9 +1,9 @@
// Mythic Oracle — Dice: pool builder, custom roll, percentile, ability score // Mythic Oracle — Dice: pool builder, custom roll, percentile, ability score
// Pure frontend — no backend calls. // Pure frontend — no backend calls.
const dicePool = { 4: 0, 6: 0, 8: 0, 10: 0, 12: 0, 20: 0, 100: 0, 2: 0 }; const dicePool = { 4: 0, 6: 0, 8: 0, 10: 0, 12: 0, 20: 0, 2: 0 };
const POOL_MAX = 25; const POOL_MAX = 25;
const DIE_ORDER = [4, 6, 8, 10, 12, 20, 100, 2]; const DIE_ORDER = [4, 6, 8, 10, 12, 20, 2];
function addDie(sides) { function addDie(sides) {
const total = DIE_ORDER.reduce((s, d) => s + dicePool[d], 0); const total = DIE_ORDER.reduce((s, d) => s + dicePool[d], 0);