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