fix: Swap positions of max and current boxes for vitals
This commit is contained in:
@@ -1,13 +1,13 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en" data-theme="dark">
|
<html lang="en" data-theme="dark">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Fabula Ultima — Character Sheet</title>
|
<title>Fabula Ultima — Character Sheet</title>
|
||||||
<link
|
<link
|
||||||
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap"
|
href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&family=Inconsolata:wght@400;600&display=swap"
|
||||||
rel="stylesheet"
|
rel="stylesheet" />
|
||||||
/>
|
|
||||||
<script>
|
<script>
|
||||||
(function () {
|
(function () {
|
||||||
var t =
|
var t =
|
||||||
@@ -84,11 +84,8 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Traits (comma-separated)</label>
|
<label>Traits (comma-separated)</label>
|
||||||
<textarea
|
<textarea id="charTraits" placeholder="Brave, Reckless, Loyal to a fault…"
|
||||||
id="charTraits"
|
style="min-height: 55px"></textarea>
|
||||||
placeholder="Brave, Reckless, Loyal to a fault…"
|
|
||||||
style="min-height: 55px"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -102,37 +99,24 @@
|
|||||||
<div class="level-display">
|
<div class="level-display">
|
||||||
<span class="level-num" id="levelDisplay">1</span>
|
<span class="level-num" id="levelDisplay">1</span>
|
||||||
<span class="level-text">Character Level</span>
|
<span class="level-text">Character Level</span>
|
||||||
<button
|
<button class="add-btn" style="margin-top: 10px; width: 100%; justify-content: center"
|
||||||
class="add-btn"
|
onclick="adjustLevel(1)">
|
||||||
style="margin-top: 10px; width: 100%; justify-content: center"
|
|
||||||
onclick="adjustLevel(1)"
|
|
||||||
>
|
|
||||||
+ Level Up
|
+ Level Up
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button class="add-btn" style="
|
||||||
class="add-btn"
|
|
||||||
style="
|
|
||||||
margin-top: 4px;
|
margin-top: 4px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border-color: var(--border-bright);
|
border-color: var(--border-bright);
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
"
|
" onclick="adjustLevel(-1)">
|
||||||
onclick="adjustLevel(-1)"
|
|
||||||
>
|
|
||||||
− Level Down
|
− Level Down
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="field">
|
<div class="field">
|
||||||
<label>Experience Points (XP)</label>
|
<label>Experience Points (XP)</label>
|
||||||
<input
|
<input type="number" id="xpCurrent" value="0" min="0" oninput="updateXPBar()" />
|
||||||
type="number"
|
|
||||||
id="xpCurrent"
|
|
||||||
value="0"
|
|
||||||
min="0"
|
|
||||||
oninput="updateXPBar()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="xp-bar-wrap">
|
<div class="xp-bar-wrap">
|
||||||
<div class="xp-bar" id="xpBar" style="width: 0%"></div>
|
<div class="xp-bar" id="xpBar" style="width: 0%"></div>
|
||||||
@@ -184,25 +168,12 @@
|
|||||||
<div class="attr-inputs">
|
<div class="attr-inputs">
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Base</label>
|
<label style="font-size: 0.48rem">Base</label>
|
||||||
<input
|
<input type="number" id="dex-base" value="6" min="6" max="12" oninput="recalcStats()" />
|
||||||
type="number"
|
|
||||||
id="dex-base"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
oninput="recalcStats()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="attr-sep">→</div>
|
<div class="attr-sep">→</div>
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Current</label>
|
<label style="font-size: 0.48rem">Current</label>
|
||||||
<input
|
<input type="number" id="dex-cur" value="6" min="6" max="12" />
|
||||||
type="number"
|
|
||||||
id="dex-cur"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -211,25 +182,12 @@
|
|||||||
<div class="attr-inputs">
|
<div class="attr-inputs">
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Base</label>
|
<label style="font-size: 0.48rem">Base</label>
|
||||||
<input
|
<input type="number" id="ins-base" value="6" min="6" max="12" oninput="recalcStats()" />
|
||||||
type="number"
|
|
||||||
id="ins-base"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
oninput="recalcStats()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="attr-sep">→</div>
|
<div class="attr-sep">→</div>
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Current</label>
|
<label style="font-size: 0.48rem">Current</label>
|
||||||
<input
|
<input type="number" id="ins-cur" value="6" min="6" max="12" />
|
||||||
type="number"
|
|
||||||
id="ins-cur"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -238,25 +196,12 @@
|
|||||||
<div class="attr-inputs">
|
<div class="attr-inputs">
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Base</label>
|
<label style="font-size: 0.48rem">Base</label>
|
||||||
<input
|
<input type="number" id="mig-base" value="6" min="6" max="12" oninput="recalcStats()" />
|
||||||
type="number"
|
|
||||||
id="mig-base"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
oninput="recalcStats()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="attr-sep">→</div>
|
<div class="attr-sep">→</div>
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Current</label>
|
<label style="font-size: 0.48rem">Current</label>
|
||||||
<input
|
<input type="number" id="mig-cur" value="6" min="6" max="12" />
|
||||||
type="number"
|
|
||||||
id="mig-cur"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -265,25 +210,12 @@
|
|||||||
<div class="attr-inputs">
|
<div class="attr-inputs">
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Base</label>
|
<label style="font-size: 0.48rem">Base</label>
|
||||||
<input
|
<input type="number" id="wlp-base" value="6" min="6" max="12" oninput="recalcStats()" />
|
||||||
type="number"
|
|
||||||
id="wlp-base"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
oninput="recalcStats()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="attr-sep">→</div>
|
<div class="attr-sep">→</div>
|
||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<label style="font-size: 0.48rem">Current</label>
|
<label style="font-size: 0.48rem">Current</label>
|
||||||
<input
|
<input type="number" id="wlp-cur" value="6" min="6" max="12" />
|
||||||
type="number"
|
|
||||||
id="wlp-cur"
|
|
||||||
value="6"
|
|
||||||
min="6"
|
|
||||||
max="12"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -311,34 +243,15 @@
|
|||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<div class="vital-formula">MIG×5 + Level + Other</div>
|
<div class="vital-formula">MIG×5 + Level + Other</div>
|
||||||
<div class="vital-inputs">
|
<div class="vital-inputs">
|
||||||
<input
|
<input type="number" id="hpCur" placeholder="Cur" oninput="updateCrisis()" />
|
||||||
type="number"
|
|
||||||
id="hpMax"
|
|
||||||
placeholder="Max"
|
|
||||||
oninput="updateCrisis()"
|
|
||||||
/>
|
|
||||||
<div class="vital-sep">/</div>
|
<div class="vital-sep">/</div>
|
||||||
<input
|
<input type="number" id="hpMax" placeholder="Max" oninput="updateCrisis()" />
|
||||||
type="number"
|
<div class="crisis-badge" id="crisisBadge" style="display: none">
|
||||||
id="hpCur"
|
|
||||||
placeholder="Cur"
|
|
||||||
oninput="updateCrisis()"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="crisis-badge"
|
|
||||||
id="crisisBadge"
|
|
||||||
style="display: none"
|
|
||||||
>
|
|
||||||
CRISIS
|
CRISIS
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button class="add-btn" style="padding: 4px 8px" onclick="calcHP()" title="Auto-calculate from Might">
|
||||||
class="add-btn"
|
|
||||||
style="padding: 4px 8px"
|
|
||||||
onclick="calcHP()"
|
|
||||||
title="Auto-calculate from Might"
|
|
||||||
>
|
|
||||||
Calc
|
Calc
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -348,17 +261,12 @@
|
|||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<div class="vital-formula">WLP×5 + Level + Other</div>
|
<div class="vital-formula">WLP×5 + Level + Other</div>
|
||||||
<div class="vital-inputs">
|
<div class="vital-inputs">
|
||||||
<input type="number" id="mpMax" placeholder="Max" />
|
|
||||||
<div class="vital-sep">/</div>
|
|
||||||
<input type="number" id="mpCur" placeholder="Cur" />
|
<input type="number" id="mpCur" placeholder="Cur" />
|
||||||
|
<div class="vital-sep">/</div>
|
||||||
|
<input type="number" id="mpMax" placeholder="Max" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button class="add-btn" style="padding: 4px 8px" onclick="calcMP()" title="Auto-calculate from Willpower">
|
||||||
class="add-btn"
|
|
||||||
style="padding: 4px 8px"
|
|
||||||
onclick="calcMP()"
|
|
||||||
title="Auto-calculate from Willpower"
|
|
||||||
>
|
|
||||||
Calc
|
Calc
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
@@ -368,9 +276,9 @@
|
|||||||
<div style="flex: 1">
|
<div style="flex: 1">
|
||||||
<div class="vital-formula">6 + Other</div>
|
<div class="vital-formula">6 + Other</div>
|
||||||
<div class="vital-inputs">
|
<div class="vital-inputs">
|
||||||
<input type="number" id="ipMax" value="6" placeholder="Max" />
|
|
||||||
<div class="vital-sep">/</div>
|
|
||||||
<input type="number" id="ipCur" value="6" placeholder="Cur" />
|
<input type="number" id="ipCur" value="6" placeholder="Cur" />
|
||||||
|
<div class="vital-sep">/</div>
|
||||||
|
<input type="number" id="ipMax" value="6" placeholder="Max" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -384,30 +292,20 @@
|
|||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<span class="icon">✦</span> Fabula Points
|
<span class="icon">✦</span> Fabula Points
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div style="
|
||||||
style="
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 14px;
|
gap: 14px;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
"
|
">
|
||||||
>
|
|
||||||
<div>
|
<div>
|
||||||
<label>Current FP</label>
|
<label>Current FP</label>
|
||||||
<input
|
<input type="number" id="fpCount" value="0" min="0" max="20" style="
|
||||||
type="number"
|
|
||||||
id="fpCount"
|
|
||||||
value="0"
|
|
||||||
min="0"
|
|
||||||
max="20"
|
|
||||||
style="
|
|
||||||
width: 70px;
|
width: 70px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
font-family: var(--font-mono);
|
font-family: var(--font-mono);
|
||||||
"
|
" oninput="renderFP()" />
|
||||||
oninput="renderFP()"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="fp-pips" id="fpPips"></div>
|
<div class="fp-pips" id="fpPips"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -473,22 +371,14 @@
|
|||||||
<div class="equip-slot">Accessory</div>
|
<div class="equip-slot">Accessory</div>
|
||||||
<div class="equip-fields">
|
<div class="equip-fields">
|
||||||
<input type="text" id="acc-name" placeholder="Item name" />
|
<input type="text" id="acc-name" placeholder="Item name" />
|
||||||
<input
|
<input type="text" id="acc-desc" placeholder="Description / effect" />
|
||||||
type="text"
|
|
||||||
id="acc-desc"
|
|
||||||
placeholder="Description / effect"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="equip-row">
|
<div class="equip-row">
|
||||||
<div class="equip-slot">Armor</div>
|
<div class="equip-slot">Armor</div>
|
||||||
<div class="equip-fields">
|
<div class="equip-fields">
|
||||||
<input type="text" id="arm-name" placeholder="Item name" />
|
<input type="text" id="arm-name" placeholder="Item name" />
|
||||||
<input
|
<input type="text" id="arm-desc" placeholder="Defense bonus / effect" />
|
||||||
type="text"
|
|
||||||
id="arm-desc"
|
|
||||||
placeholder="Defense bonus / effect"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="equip-row">
|
<div class="equip-row">
|
||||||
@@ -513,11 +403,7 @@
|
|||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<span class="icon">◉</span> Backpack & Notes
|
<span class="icon">◉</span> Backpack & Notes
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<textarea id="backpack" placeholder="Items, notes, lore…" style="min-height: 200px"></textarea>
|
||||||
id="backpack"
|
|
||||||
placeholder="Items, notes, lore…"
|
|
||||||
style="min-height: 200px"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -550,11 +436,8 @@
|
|||||||
<div class="section-title">
|
<div class="section-title">
|
||||||
<span class="icon">★</span> Heroic Skills
|
<span class="icon">★</span> Heroic Skills
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<textarea id="heroicSkills" placeholder="Record your heroic skill abilities here…"
|
||||||
id="heroicSkills"
|
style="min-height: 100px"></textarea>
|
||||||
placeholder="Record your heroic skill abilities here…"
|
|
||||||
style="min-height: 100px"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -611,11 +494,8 @@
|
|||||||
<span>Spiritism</span>
|
<span>Spiritism</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<textarea
|
<textarea id="ritualsNotes" placeholder="Record ritual details, components, and notes here…"
|
||||||
id="ritualsNotes"
|
style="min-height: 120px"></textarea>
|
||||||
placeholder="Record ritual details, components, and notes here…"
|
|
||||||
style="min-height: 120px"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -655,13 +535,8 @@
|
|||||||
<button class="btn-load btn-import btn-lg" onclick="importSheet()">
|
<button class="btn-load btn-import btn-lg" onclick="importSheet()">
|
||||||
↑ Import JSON
|
↑ Import JSON
|
||||||
</button>
|
</button>
|
||||||
<input
|
<input type="file" id="importFileInput" accept=".json,application/json" style="display: none"
|
||||||
type="file"
|
onchange="handleImportFile(this)" />
|
||||||
id="importFileInput"
|
|
||||||
accept=".json,application/json"
|
|
||||||
style="display: none"
|
|
||||||
onchange="handleImportFile(this)"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -684,4 +559,5 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Reference in New Issue
Block a user