chore: Format code with Prettier
This commit is contained in:
@@ -14,9 +14,9 @@
|
||||
--text-dim: #7a8a82;
|
||||
--text-bright: #ede8dc;
|
||||
--crisis: #e74c3c;
|
||||
--font-display: 'Cinzel', serif;
|
||||
--font-body: 'Crimson Text', serif;
|
||||
--font-mono: 'Inconsolata', monospace;
|
||||
--font-display: "Cinzel", serif;
|
||||
--font-body: "Crimson Text", serif;
|
||||
--font-mono: "Inconsolata", monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -32,8 +32,16 @@ body {
|
||||
font-size: 16px;
|
||||
min-height: 100vh;
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 10%, rgba(78, 205, 196, 0.04) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 90%, rgba(201, 168, 76, 0.04) 0%, transparent 50%);
|
||||
radial-gradient(
|
||||
ellipse at 20% 10%,
|
||||
rgba(78, 205, 196, 0.04) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at 80% 90%,
|
||||
rgba(201, 168, 76, 0.04) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
|
||||
/* ── HEADER ─────────────────────────────────────── */
|
||||
@@ -62,7 +70,7 @@ header {
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
content: '✦';
|
||||
content: "✦";
|
||||
color: var(--gold);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
@@ -146,7 +154,7 @@ header {
|
||||
}
|
||||
|
||||
.section::before {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -204,7 +212,9 @@ select {
|
||||
font-size: 1rem;
|
||||
padding: 8px 11px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
transition:
|
||||
border-color 0.2s,
|
||||
box-shadow 0.2s;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
@@ -502,7 +512,7 @@ input[type="number"] {
|
||||
}
|
||||
|
||||
.fp-rule::before {
|
||||
content: '✦';
|
||||
content: "✦";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
font-size: 0.5rem;
|
||||
@@ -1034,8 +1044,16 @@ input[type="number"] {
|
||||
|
||||
[data-theme="light"] body {
|
||||
background-image:
|
||||
radial-gradient(ellipse at 20% 10%, rgba(26, 122, 118, 0.07) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at 80% 90%, rgba(122, 90, 24, 0.07) 0%, transparent 50%);
|
||||
radial-gradient(
|
||||
ellipse at 20% 10%,
|
||||
rgba(26, 122, 118, 0.07) 0%,
|
||||
transparent 50%
|
||||
),
|
||||
radial-gradient(
|
||||
ellipse at 80% 90%,
|
||||
rgba(122, 90, 24, 0.07) 0%,
|
||||
transparent 50%
|
||||
);
|
||||
}
|
||||
|
||||
[data-theme="light"] header {
|
||||
@@ -1075,7 +1093,6 @@ input[type="number"] {
|
||||
|
||||
/* ── RESPONSIVE ──────────────────────────────────── */
|
||||
@media (max-width: 900px) {
|
||||
|
||||
.grid-2,
|
||||
.grid-3 {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -1,100 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en" data-theme="dark">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<link rel="stylesheet" href="fabula-ultima-sheet.css">
|
||||
<script>(function () { var t = localStorage.getItem('fabulaUltimaTheme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'); document.documentElement.dataset.theme = t; })()</script>
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="stylesheet" href="fabula-ultima-sheet.css" />
|
||||
<script>
|
||||
(function () {
|
||||
var t =
|
||||
localStorage.getItem("fabulaUltimaTheme") ||
|
||||
(window.matchMedia("(prefers-color-scheme: light)").matches
|
||||
? "light"
|
||||
: "dark");
|
||||
document.documentElement.dataset.theme = t;
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<div class="logo">Fabula Ultima</div>
|
||||
<div class="tabs">
|
||||
<button class="tab active" onclick="switchTab('main')">Character</button>
|
||||
<button class="tab active" onclick="switchTab('main')">
|
||||
Character
|
||||
</button>
|
||||
<button class="tab" onclick="switchTab('classes')">Classes</button>
|
||||
<button class="tab" onclick="switchTab('spells')">Arcana & Spells</button>
|
||||
<button class="tab" onclick="switchTab('spells')">
|
||||
Arcana & Spells
|
||||
</button>
|
||||
<button class="tab" onclick="switchTab('manage')">Manage</button>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<span class="save-status" id="saveStatus">Saved!</span>
|
||||
<button class="btn-theme" id="themeToggle" onclick="toggleTheme()">☀ Light</button>
|
||||
<button class="btn-theme" id="themeToggle" onclick="toggleTheme()">
|
||||
☀ Light
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="urlBanner" class="url-banner" style="display: none">
|
||||
<span class="url-banner-icon">⚑</span>
|
||||
Viewing a shared character — auto-save is disabled.
|
||||
Use <strong>Manage → Save to Browser</strong> to keep any changes.
|
||||
Viewing a shared character — auto-save is disabled. Use
|
||||
<strong>Manage → Save to Browser</strong> to keep any changes.
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════
|
||||
PAGE 1: MAIN CHARACTER
|
||||
══════════════════════════════════════════════════ -->
|
||||
<div class="page active" id="page-main">
|
||||
|
||||
<!-- Row 1: Identity + Level -->
|
||||
<div class="grid-2" style="margin-bottom:20px;">
|
||||
|
||||
<div class="grid-2" style="margin-bottom: 20px">
|
||||
<!-- Identity -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">✦</span> Identity & Traits</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">✦</span> Identity & Traits
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field" style="flex: 2">
|
||||
<label>Name</label>
|
||||
<input type="text" id="charName" placeholder="Character name…">
|
||||
<input type="text" id="charName" placeholder="Character name…" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Pronouns</label>
|
||||
<input type="text" id="charPronouns" placeholder="they/them">
|
||||
<input type="text" id="charPronouns" placeholder="they/them" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Identity</label>
|
||||
<input type="text" id="charIdentity" placeholder="Who are you?">
|
||||
<input type="text" id="charIdentity" placeholder="Who are you?" />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<div class="field">
|
||||
<label>Theme</label>
|
||||
<input type="text" id="charTheme" placeholder="Your theme…">
|
||||
<input type="text" id="charTheme" placeholder="Your theme…" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label>Origin</label>
|
||||
<input type="text" id="charOrigin" placeholder="Where from?">
|
||||
<input type="text" id="charOrigin" placeholder="Where from?" />
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<!-- Level + XP + Defenses -->
|
||||
<div style="display:flex; flex-direction:column; gap:16px;">
|
||||
|
||||
<div style="display: flex; flex-direction: column; gap: 16px">
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⬡</span> Level & Experience</div>
|
||||
<div class="grid-2" style="gap:14px;">
|
||||
<div class="section-title">
|
||||
<span class="icon">⬡</span> Level & Experience
|
||||
</div>
|
||||
<div class="grid-2" style="gap: 14px">
|
||||
<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)">+ Level Up</button>
|
||||
<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)">− Level Down</button>
|
||||
<button
|
||||
class="add-btn"
|
||||
style="margin-top: 10px; width: 100%; justify-content: center"
|
||||
onclick="adjustLevel(1)"
|
||||
>
|
||||
+ Level Up
|
||||
</button>
|
||||
<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)"
|
||||
>
|
||||
− 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>
|
||||
@@ -103,53 +142,68 @@
|
||||
<span id="xpVal">0 XP</span>
|
||||
<span>10 XP = Level</span>
|
||||
</div>
|
||||
<div class="field" style="margin-top:12px;">
|
||||
<div class="field" style="margin-top: 12px">
|
||||
<label>Zenit (currency)</label>
|
||||
<input type="number" id="zenit" value="0" min="0">
|
||||
<input type="number" id="zenit" value="0" min="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⊕</span> Defenses</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">⊕</span> Defenses
|
||||
</div>
|
||||
<div class="def-row">
|
||||
<div class="def-block">
|
||||
<label>Initiative Mod</label>
|
||||
<input type="number" id="initMod" value="0">
|
||||
<input type="number" id="initMod" value="0" />
|
||||
</div>
|
||||
<div class="def-block">
|
||||
<label>Defense</label>
|
||||
<input type="number" id="defense" value="0">
|
||||
<input type="number" id="defense" value="0" />
|
||||
</div>
|
||||
<div class="def-block">
|
||||
<label>Magic Defense</label>
|
||||
<input type="number" id="magDef" value="0">
|
||||
<input type="number" id="magDef" value="0" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Row 2: Attributes + Status + HP/MP/IP -->
|
||||
<div class="grid-3" style="margin-bottom:20px;">
|
||||
|
||||
<div class="grid-3" style="margin-bottom: 20px">
|
||||
<!-- Attributes -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">◈</span> Attributes</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">◈</span> Attributes
|
||||
</div>
|
||||
<div class="attr-grid">
|
||||
<div class="attr-block">
|
||||
<div class="attr-name">Dexterity</div>
|
||||
<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()">
|
||||
<label style="font-size: 0.48rem">Base</label>
|
||||
<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">
|
||||
<label style="font-size: 0.48rem">Current</label>
|
||||
<input
|
||||
type="number"
|
||||
id="dex-cur"
|
||||
value="6"
|
||||
min="6"
|
||||
max="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -157,13 +211,26 @@
|
||||
<div class="attr-name">Insight</div>
|
||||
<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()">
|
||||
<label style="font-size: 0.48rem">Base</label>
|
||||
<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">
|
||||
<label style="font-size: 0.48rem">Current</label>
|
||||
<input
|
||||
type="number"
|
||||
id="ins-cur"
|
||||
value="6"
|
||||
min="6"
|
||||
max="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,13 +238,26 @@
|
||||
<div class="attr-name">Might</div>
|
||||
<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()">
|
||||
<label style="font-size: 0.48rem">Base</label>
|
||||
<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">
|
||||
<label style="font-size: 0.48rem">Current</label>
|
||||
<input
|
||||
type="number"
|
||||
id="mig-cur"
|
||||
value="6"
|
||||
min="6"
|
||||
max="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -185,13 +265,26 @@
|
||||
<div class="attr-name">Willpower</div>
|
||||
<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()">
|
||||
<label style="font-size: 0.48rem">Base</label>
|
||||
<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">
|
||||
<label style="font-size: 0.48rem">Current</label>
|
||||
<input
|
||||
type="number"
|
||||
id="wlp-cur"
|
||||
value="6"
|
||||
min="6"
|
||||
max="12"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -200,7 +293,9 @@
|
||||
|
||||
<!-- Status Effects -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⚠</span> Status Effects</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">⚠</span> Status Effects
|
||||
</div>
|
||||
<div class="status-grid" id="statusGrid">
|
||||
<!-- generated by JS -->
|
||||
</div>
|
||||
@@ -208,21 +303,45 @@
|
||||
|
||||
<!-- HP / MP / IP -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">♥</span> Hit, Mind & Inventory Points</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">♥</span> Hit, Mind & Inventory Points
|
||||
</div>
|
||||
|
||||
<div class="vital-block">
|
||||
<div class="vital-label hp">HP</div>
|
||||
<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="hpMax"
|
||||
placeholder="Max"
|
||||
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">CRISIS</div>
|
||||
<input
|
||||
type="number"
|
||||
id="hpCur"
|
||||
placeholder="Cur"
|
||||
oninput="updateCrisis()"
|
||||
/>
|
||||
<div
|
||||
class="crisis-badge"
|
||||
id="crisisBadge"
|
||||
style="display: none"
|
||||
>
|
||||
CRISIS
|
||||
</div>
|
||||
</div>
|
||||
<button class="add-btn" style="padding:4px 8px;" onclick="calcHP()"
|
||||
title="Auto-calculate from Might">Calc</button>
|
||||
</div>
|
||||
<button
|
||||
class="add-btn"
|
||||
style="padding: 4px 8px"
|
||||
onclick="calcHP()"
|
||||
title="Auto-calculate from Might"
|
||||
>
|
||||
Calc
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vital-block">
|
||||
@@ -230,13 +349,19 @@
|
||||
<div style="flex: 1">
|
||||
<div class="vital-formula">WLP×5 + Level + Other</div>
|
||||
<div class="vital-inputs">
|
||||
<input type="number" id="mpMax" placeholder="Max">
|
||||
<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>
|
||||
</div>
|
||||
<button class="add-btn" style="padding:4px 8px;" onclick="calcMP()"
|
||||
title="Auto-calculate from Willpower">Calc</button>
|
||||
<button
|
||||
class="add-btn"
|
||||
style="padding: 4px 8px"
|
||||
onclick="calcMP()"
|
||||
title="Auto-calculate from Willpower"
|
||||
>
|
||||
Calc
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="vital-block">
|
||||
@@ -244,9 +369,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">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,29 +379,63 @@
|
||||
</div>
|
||||
|
||||
<!-- Row 3: Fabula Points + Bonds -->
|
||||
<div class="grid-2" style="margin-bottom:20px;">
|
||||
|
||||
<div class="grid-2" style="margin-bottom: 20px">
|
||||
<!-- Fabula Points -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">✦</span> Fabula Points</div>
|
||||
<div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
|
||||
<div class="section-title">
|
||||
<span class="icon">✦</span> Fabula Points
|
||||
</div>
|
||||
<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="width:70px; text-align:center; font-size:1.4rem; font-family:var(--font-mono);"
|
||||
oninput="renderFP()">
|
||||
<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()"
|
||||
/>
|
||||
</div>
|
||||
<div class="fp-pips" id="fpPips"></div>
|
||||
</div>
|
||||
<div class="fp-rules">
|
||||
<div class="fp-rule"><strong>+1 FP</strong> if you have none at start of session.</div>
|
||||
<div class="fp-rule"><strong>+1 FP</strong> when a Villain makes an entrance.</div>
|
||||
<div class="fp-rule"><strong>+1 FP</strong> when you fumble a Check.</div>
|
||||
<div class="fp-rule"><strong>+2 FP</strong> if you surrender at zero HP.</div>
|
||||
<div class="fp-rule" style="margin-top:6px;"><strong>Spend 1 FP</strong> to invoke a trait: reroll one or both
|
||||
dice.</div>
|
||||
<div class="fp-rule"><strong>Spend 1 FP</strong> to invoke a bond: add its strength to the result.</div>
|
||||
<div class="fp-rule"><strong>Spend 1 FP</strong> to alter the story.</div>
|
||||
<div class="fp-rule">
|
||||
<strong>+1 FP</strong> if you have none at start of session.
|
||||
</div>
|
||||
<div class="fp-rule">
|
||||
<strong>+1 FP</strong> when a Villain makes an entrance.
|
||||
</div>
|
||||
<div class="fp-rule">
|
||||
<strong>+1 FP</strong> when you fumble a Check.
|
||||
</div>
|
||||
<div class="fp-rule">
|
||||
<strong>+2 FP</strong> if you surrender at zero HP.
|
||||
</div>
|
||||
<div class="fp-rule" style="margin-top: 6px">
|
||||
<strong>Spend 1 FP</strong> to invoke a trait: reroll one or both
|
||||
dice.
|
||||
</div>
|
||||
<div class="fp-rule">
|
||||
<strong>Spend 1 FP</strong> to invoke a bond: add its strength to
|
||||
the result.
|
||||
</div>
|
||||
<div class="fp-rule">
|
||||
<strong>Spend 1 FP</strong> to alter the story.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -285,56 +444,66 @@
|
||||
<div class="section-title"><span class="icon">⊗</span> Bonds</div>
|
||||
<div id="bondsContainer"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Row 4: Equipment + Backpack -->
|
||||
<div class="grid-2" style="margin-bottom:20px;">
|
||||
|
||||
<div class="grid-2" style="margin-bottom: 20px">
|
||||
<!-- Equipment -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⚔</span> Equipment</div>
|
||||
<div class="martial-row" id="martialRow">
|
||||
<div class="martial-item" onclick="toggleMartial(this)">
|
||||
<div class="martial-box"></div><span>Martial Armor</span>
|
||||
<div class="martial-box"></div>
|
||||
<span>Martial Armor</span>
|
||||
</div>
|
||||
<div class="martial-item" onclick="toggleMartial(this)">
|
||||
<div class="martial-box"></div><span>Martial Shields</span>
|
||||
<div class="martial-box"></div>
|
||||
<span>Martial Shields</span>
|
||||
</div>
|
||||
<div class="martial-item" onclick="toggleMartial(this)">
|
||||
<div class="martial-box"></div><span>Martial Melee</span>
|
||||
<div class="martial-box"></div>
|
||||
<span>Martial Melee</span>
|
||||
</div>
|
||||
<div class="martial-item" onclick="toggleMartial(this)">
|
||||
<div class="martial-box"></div><span>Martial Ranged</span>
|
||||
<div class="martial-box"></div>
|
||||
<span>Martial Ranged</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:14px;">
|
||||
<div style="margin-top: 14px">
|
||||
<div class="equip-row">
|
||||
<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-name" placeholder="Item name" />
|
||||
<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-name" placeholder="Item name" />
|
||||
<input
|
||||
type="text"
|
||||
id="arm-desc"
|
||||
placeholder="Defense bonus / effect"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="equip-row">
|
||||
<div class="equip-slot">Main Hand</div>
|
||||
<div class="equip-fields">
|
||||
<input type="text" id="mh-name" placeholder="Weapon name">
|
||||
<input type="text" id="mh-desc" placeholder="Damage / effect">
|
||||
<input type="text" id="mh-name" placeholder="Weapon name" />
|
||||
<input type="text" id="mh-desc" placeholder="Damage / effect" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="equip-row">
|
||||
<div class="equip-slot">Off-Hand</div>
|
||||
<div class="equip-fields">
|
||||
<input type="text" id="oh-name" placeholder="Weapon / shield">
|
||||
<input type="text" id="oh-desc" placeholder="Damage / effect">
|
||||
<input type="text" id="oh-name" placeholder="Weapon / shield" />
|
||||
<input type="text" id="oh-desc" placeholder="Damage / effect" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -342,50 +511,62 @@
|
||||
|
||||
<!-- Backpack & Notes -->
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">◉</span> Backpack & Notes</div>
|
||||
<textarea id="backpack" placeholder="Items, notes, lore…" style="min-height:200px;"></textarea>
|
||||
<div class="section-title">
|
||||
<span class="icon">◉</span> Backpack & Notes
|
||||
</div>
|
||||
<textarea
|
||||
id="backpack"
|
||||
placeholder="Items, notes, lore…"
|
||||
style="min-height: 200px"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════
|
||||
PAGE 2: CLASSES
|
||||
══════════════════════════════════════════════════ -->
|
||||
<div class="page" id="page-classes">
|
||||
|
||||
<div class="grid-2" style="margin-bottom:20px;">
|
||||
|
||||
<div class="grid-2" style="margin-bottom: 20px">
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">✦</span> Primary Classes (up to 3 levels each)</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">✦</span> Primary Classes (up to 3 levels each)
|
||||
</div>
|
||||
<div id="primaryClassContainer"></div>
|
||||
<button class="add-btn" onclick="addPrimaryClass()">+ Add Primary Class</button>
|
||||
<button class="add-btn" onclick="addPrimaryClass()">
|
||||
+ Add Primary Class
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">◎</span> Other Classes (max 3 non-mastered)</div>
|
||||
<div class="section-title">
|
||||
<span class="icon">◎</span> Other Classes (max 3 non-mastered)
|
||||
</div>
|
||||
<div id="otherClassContainer"></div>
|
||||
<button class="add-btn" onclick="addOtherClass()">+ Add Class</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════
|
||||
PAGE 3: ARCANA & SPELLS
|
||||
══════════════════════════════════════════════════ -->
|
||||
<div class="page" id="page-spells">
|
||||
|
||||
<div class="section" style="margin-bottom:20px;">
|
||||
<div class="section-title"><span class="icon">✦</span> Arcana & Spells</div>
|
||||
<div class="section" style="margin-bottom: 20px">
|
||||
<div class="section-title">
|
||||
<span class="icon">✦</span> Arcana & Spells
|
||||
</div>
|
||||
<table class="spells-table" id="spellsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
@@ -398,35 +579,45 @@
|
||||
</thead>
|
||||
<tbody id="spellsBody"></tbody>
|
||||
</table>
|
||||
<button class="add-btn" onclick="addSpell()" style="margin-top:10px;">+ Add Spell / Arcana</button>
|
||||
<button class="add-btn" onclick="addSpell()" style="margin-top: 10px">
|
||||
+ Add Spell / Arcana
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⊕</span> Rituals</div>
|
||||
<div class="disciplines-row" id="disciplinesRow">
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Arcanism</span>
|
||||
<div class="disc-box"></div>
|
||||
<span>Arcanism</span>
|
||||
</div>
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Chimerism</span>
|
||||
<div class="disc-box"></div>
|
||||
<span>Chimerism</span>
|
||||
</div>
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Elementalism</span>
|
||||
<div class="disc-box"></div>
|
||||
<span>Elementalism</span>
|
||||
</div>
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Entropism</span>
|
||||
<div class="disc-box"></div>
|
||||
<span>Entropism</span>
|
||||
</div>
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Ritualism</span>
|
||||
<div class="disc-box"></div>
|
||||
<span>Ritualism</span>
|
||||
</div>
|
||||
<div class="disc-item" onclick="toggleDisc(this)">
|
||||
<div class="disc-box"></div><span>Spiritism</span>
|
||||
<div class="disc-box"></div>
|
||||
<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>
|
||||
|
||||
<!-- ══════════════════════════════════════════════════
|
||||
@@ -434,40 +625,66 @@
|
||||
══════════════════════════════════════════════════ -->
|
||||
<div class="page" id="page-manage">
|
||||
<div class="manage-grid">
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">◈</span> Local Save</div>
|
||||
<p class="manage-desc">Save your character sheet to your browser's local storage, or load a previously saved sheet.</p>
|
||||
<div class="section-title">
|
||||
<span class="icon">◈</span> Local Save
|
||||
</div>
|
||||
<p class="manage-desc">
|
||||
Save your character sheet to your browser's local storage, or load a
|
||||
previously saved sheet.
|
||||
</p>
|
||||
<div class="manage-btn-row">
|
||||
<button class="btn-save btn-lg" onclick="saveSheet()">✦ Save to Browser</button>
|
||||
<button class="btn-load btn-lg" onclick="loadSheet()">↑ Load from Browser</button>
|
||||
<button class="btn-save btn-lg" onclick="saveSheet()">
|
||||
✦ Save to Browser
|
||||
</button>
|
||||
<button class="btn-load btn-lg" onclick="loadSheet()">
|
||||
↑ Load from Browser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-title"><span class="icon">⊕</span> JSON File</div>
|
||||
<p class="manage-desc">Export your character to a JSON file for backup or sharing, or import from a previously exported file.</p>
|
||||
<p class="manage-desc">
|
||||
Export your character to a JSON file for backup or sharing, or
|
||||
import from a previously exported file.
|
||||
</p>
|
||||
<div class="manage-btn-row">
|
||||
<button class="btn-save btn-export btn-lg" onclick="exportSheet()">↓ Export JSON</button>
|
||||
<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)">
|
||||
<button class="btn-save btn-export btn-lg" onclick="exportSheet()">
|
||||
↓ Export JSON
|
||||
</button>
|
||||
<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)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section col-span-2">
|
||||
<div class="section-title"><span class="icon">⎘</span> Share via URL</div>
|
||||
<p class="manage-desc">Encode your character's current state into a shareable link. Anyone who opens the link will see your character — auto-save is disabled for viewers.</p>
|
||||
<div class="section-title">
|
||||
<span class="icon">⎘</span> Share via URL
|
||||
</div>
|
||||
<p class="manage-desc">
|
||||
Encode your character's current state into a shareable link. Anyone
|
||||
who opens the link will see your character — auto-save is disabled
|
||||
for viewers.
|
||||
</p>
|
||||
<div class="manage-btn-row">
|
||||
<button class="btn-save btn-export btn-lg" onclick="copyShareURL()">⎘ Copy URL</button>
|
||||
<button class="btn-save btn-export btn-lg" onclick="copyShareURL()">
|
||||
⎘ Copy URL
|
||||
</button>
|
||||
<span class="save-status" id="copyStatus">Copied!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="fabula-ultima-sheet.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -6,30 +6,45 @@ let primaryClasses = [];
|
||||
let otherClasses = [];
|
||||
let spells = [];
|
||||
let bonds = [
|
||||
{ name: '', feelings: [] },
|
||||
{ name: '', feelings: [] },
|
||||
{ name: '', feelings: [] },
|
||||
{ name: '', feelings: [] },
|
||||
{ name: '', feelings: [] },
|
||||
{ name: '', feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
{ name: "", feelings: [] },
|
||||
];
|
||||
|
||||
const STATUSES = ['Slow', 'Enraged', 'Dazed', 'Weak', 'Poisoned', 'Shaken'];
|
||||
const FEELINGS = ['Admiration', 'Inferiority', 'Loyalty', 'Mistrust', 'Affection', 'Hatred'];
|
||||
const STATUSES = ["Slow", "Enraged", "Dazed", "Weak", "Poisoned", "Shaken"];
|
||||
const FEELINGS = [
|
||||
"Admiration",
|
||||
"Inferiority",
|
||||
"Loyalty",
|
||||
"Mistrust",
|
||||
"Affection",
|
||||
"Hatred",
|
||||
];
|
||||
|
||||
// ── TABS ───────────────────────────────────────────
|
||||
function switchTab(tab) {
|
||||
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
|
||||
event.currentTarget.classList.add('active');
|
||||
document.getElementById('page-' + tab).classList.add('active');
|
||||
document
|
||||
.querySelectorAll(".tab")
|
||||
.forEach((t) => t.classList.remove("active"));
|
||||
document
|
||||
.querySelectorAll(".page")
|
||||
.forEach((p) => p.classList.remove("active"));
|
||||
event.currentTarget.classList.add("active");
|
||||
document.getElementById("page-" + tab).classList.add("active");
|
||||
}
|
||||
|
||||
// ── INIT ───────────────────────────────────────────
|
||||
async function init() {
|
||||
const savedTheme = localStorage.getItem('fabulaUltimaTheme')
|
||||
|| (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
|
||||
document.getElementById('themeToggle').textContent = savedTheme === 'light' ? '☾ Dark' : '☀ Light';
|
||||
const savedTheme =
|
||||
localStorage.getItem("fabulaUltimaTheme") ||
|
||||
(window.matchMedia("(prefers-color-scheme: light)").matches
|
||||
? "light"
|
||||
: "dark");
|
||||
document.getElementById("themeToggle").textContent =
|
||||
savedTheme === "light" ? "☾ Dark" : "☀ Light";
|
||||
renderStatuses();
|
||||
renderFP();
|
||||
renderBonds();
|
||||
@@ -37,26 +52,27 @@ async function init() {
|
||||
renderOtherClasses();
|
||||
renderSpells();
|
||||
updateXPBar();
|
||||
if (!await tryLoadFromURL()) tryAutoLoad();
|
||||
if (!(await tryLoadFromURL())) tryAutoLoad();
|
||||
}
|
||||
|
||||
// ── URL STATE ──────────────────────────────────────
|
||||
async function compressToBase64(str) {
|
||||
const stream = new CompressionStream('deflate-raw');
|
||||
const stream = new CompressionStream("deflate-raw");
|
||||
const writer = stream.writable.getWriter();
|
||||
writer.write(new TextEncoder().encode(str));
|
||||
writer.close();
|
||||
const buf = await new Response(stream.readable).arrayBuffer();
|
||||
const bytes = new Uint8Array(buf);
|
||||
let binary = '';
|
||||
for (let i = 0; i < bytes.length; i++) binary += String.fromCharCode(bytes[i]);
|
||||
let binary = "";
|
||||
for (let i = 0; i < bytes.length; i++)
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
async function decompressFromBase64(b64) {
|
||||
try {
|
||||
const bytes = Uint8Array.from(atob(b64), c => c.charCodeAt(0));
|
||||
const stream = new DecompressionStream('deflate-raw');
|
||||
const bytes = Uint8Array.from(atob(b64), (c) => c.charCodeAt(0));
|
||||
const stream = new DecompressionStream("deflate-raw");
|
||||
const writer = stream.writable.getWriter();
|
||||
writer.write(bytes);
|
||||
writer.close();
|
||||
@@ -69,29 +85,36 @@ async function decompressFromBase64(b64) {
|
||||
}
|
||||
|
||||
async function tryLoadFromURL() {
|
||||
const encoded = new URLSearchParams(window.location.search).get('c');
|
||||
const encoded = new URLSearchParams(window.location.search).get("c");
|
||||
if (!encoded) return false;
|
||||
try {
|
||||
const json = await decompressFromBase64(encoded);
|
||||
applyData(JSON.parse(json));
|
||||
urlMode = true;
|
||||
document.getElementById('urlBanner').style.display = 'block';
|
||||
document.getElementById("urlBanner").style.display = "block";
|
||||
return true;
|
||||
} catch (e) {
|
||||
console.warn('Could not load state from URL:', e);
|
||||
console.warn("Could not load state from URL:", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// ── STATUS EFFECTS ─────────────────────────────────
|
||||
function renderStatuses() {
|
||||
const g = document.getElementById('statusGrid');
|
||||
g.innerHTML = '';
|
||||
STATUSES.forEach(s => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'status-item';
|
||||
const g = document.getElementById("statusGrid");
|
||||
g.innerHTML = "";
|
||||
STATUSES.forEach((s) => {
|
||||
const el = document.createElement("div");
|
||||
el.className = "status-item";
|
||||
el.dataset.status = s;
|
||||
el.onclick = () => { el.classList.toggle('active-status'); el.querySelector('.status-check').textContent = el.classList.contains('active-status') ? '✗' : ''; };
|
||||
el.onclick = () => {
|
||||
el.classList.toggle("active-status");
|
||||
el.querySelector(".status-check").textContent = el.classList.contains(
|
||||
"active-status",
|
||||
)
|
||||
? "✗"
|
||||
: "";
|
||||
};
|
||||
el.innerHTML = `<div class="status-check"></div><div class="status-label">${s}</div>`;
|
||||
g.appendChild(el);
|
||||
});
|
||||
@@ -99,16 +122,16 @@ function renderStatuses() {
|
||||
|
||||
// ── FABULA POINTS ──────────────────────────────────
|
||||
function renderFP() {
|
||||
fpCount = parseInt(document.getElementById('fpCount').value) || 0;
|
||||
const pips = document.getElementById('fpPips');
|
||||
fpCount = parseInt(document.getElementById("fpCount").value) || 0;
|
||||
const pips = document.getElementById("fpPips");
|
||||
const total = Math.max(10, fpCount);
|
||||
pips.innerHTML = '';
|
||||
pips.innerHTML = "";
|
||||
for (let i = 0; i < total; i++) {
|
||||
const pip = document.createElement('div');
|
||||
pip.className = 'fp-pip' + (i < fpCount ? ' filled' : '');
|
||||
const pip = document.createElement("div");
|
||||
pip.className = "fp-pip" + (i < fpCount ? " filled" : "");
|
||||
pip.onclick = () => {
|
||||
const newVal = i < fpCount ? i : i + 1;
|
||||
document.getElementById('fpCount').value = newVal;
|
||||
document.getElementById("fpCount").value = newVal;
|
||||
renderFP();
|
||||
};
|
||||
pips.appendChild(pip);
|
||||
@@ -117,22 +140,24 @@ function renderFP() {
|
||||
|
||||
// ── BONDS ──────────────────────────────────────────
|
||||
function renderBonds() {
|
||||
const container = document.getElementById('bondsContainer');
|
||||
container.innerHTML = '';
|
||||
const container = document.getElementById("bondsContainer");
|
||||
container.innerHTML = "";
|
||||
bonds.forEach((bond, idx) => {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'bond-block';
|
||||
const el = document.createElement("div");
|
||||
el.className = "bond-block";
|
||||
el.innerHTML = `
|
||||
<div class="bond-header">
|
||||
<div class="bond-num">${idx + 1}</div>
|
||||
<input type="text" placeholder="Bond target name…" value="${bond.name}" oninput="bonds[${idx}].name=this.value">
|
||||
</div>
|
||||
<div class="bond-feelings">
|
||||
${FEELINGS.map(f => `
|
||||
<div class="bond-feeling${bond.feelings.includes(f) ? ' active' : ''}" onclick="toggleFeeling(${idx},'${f}',this)">
|
||||
<div class="bond-feeling-box">${bond.feelings.includes(f) ? '✓' : ''}</div>
|
||||
${FEELINGS.map(
|
||||
(f) => `
|
||||
<div class="bond-feeling${bond.feelings.includes(f) ? " active" : ""}" onclick="toggleFeeling(${idx},'${f}',this)">
|
||||
<div class="bond-feeling-box">${bond.feelings.includes(f) ? "✓" : ""}</div>
|
||||
<span>${f}</span>
|
||||
</div>`).join('')}
|
||||
</div>`,
|
||||
).join("")}
|
||||
</div>`;
|
||||
container.appendChild(el);
|
||||
});
|
||||
@@ -141,71 +166,88 @@ function renderBonds() {
|
||||
function toggleFeeling(bondIdx, feeling, el) {
|
||||
const bond = bonds[bondIdx];
|
||||
if (bond.feelings.includes(feeling)) {
|
||||
bond.feelings = bond.feelings.filter(f => f !== feeling);
|
||||
el.classList.remove('active');
|
||||
el.querySelector('.bond-feeling-box').textContent = '';
|
||||
bond.feelings = bond.feelings.filter((f) => f !== feeling);
|
||||
el.classList.remove("active");
|
||||
el.querySelector(".bond-feeling-box").textContent = "";
|
||||
} else {
|
||||
bond.feelings.push(feeling);
|
||||
el.classList.add('active');
|
||||
el.querySelector('.bond-feeling-box').textContent = '✓';
|
||||
el.classList.add("active");
|
||||
el.querySelector(".bond-feeling-box").textContent = "✓";
|
||||
}
|
||||
}
|
||||
|
||||
// ── LEVEL ──────────────────────────────────────────
|
||||
function adjustLevel(delta) {
|
||||
level = Math.max(1, Math.min(50, level + delta));
|
||||
document.getElementById('levelDisplay').textContent = level;
|
||||
document.getElementById("levelDisplay").textContent = level;
|
||||
}
|
||||
|
||||
// ── XP BAR ─────────────────────────────────────────
|
||||
function updateXPBar() {
|
||||
const xp = parseInt(document.getElementById('xpCurrent').value) || 0;
|
||||
const xp = parseInt(document.getElementById("xpCurrent").value) || 0;
|
||||
const pct = Math.min((xp % 10) * 10, 100);
|
||||
document.getElementById('xpBar').style.width = pct + '%';
|
||||
document.getElementById('xpVal').textContent = xp + ' XP';
|
||||
document.getElementById("xpBar").style.width = pct + "%";
|
||||
document.getElementById("xpVal").textContent = xp + " XP";
|
||||
}
|
||||
|
||||
// ── STAT CALC ──────────────────────────────────────
|
||||
function recalcStats() { /* auto-calc on keyup */ }
|
||||
function recalcStats() {
|
||||
/* auto-calc on keyup */
|
||||
}
|
||||
|
||||
function calcHP() {
|
||||
const mig = parseInt(document.getElementById('mig-base').value) || 6;
|
||||
const mig = parseInt(document.getElementById("mig-base").value) || 6;
|
||||
const max = mig * 5 + level;
|
||||
document.getElementById('hpMax').value = max;
|
||||
if (!document.getElementById('hpCur').value) document.getElementById('hpCur').value = max;
|
||||
document.getElementById("hpMax").value = max;
|
||||
if (!document.getElementById("hpCur").value)
|
||||
document.getElementById("hpCur").value = max;
|
||||
updateCrisis();
|
||||
}
|
||||
|
||||
function calcMP() {
|
||||
const wlp = parseInt(document.getElementById('wlp-base').value) || 6;
|
||||
const wlp = parseInt(document.getElementById("wlp-base").value) || 6;
|
||||
const max = wlp * 5 + level;
|
||||
document.getElementById('mpMax').value = max;
|
||||
if (!document.getElementById('mpCur').value) document.getElementById('mpCur').value = max;
|
||||
document.getElementById("mpMax").value = max;
|
||||
if (!document.getElementById("mpCur").value)
|
||||
document.getElementById("mpCur").value = max;
|
||||
}
|
||||
|
||||
function updateCrisis() {
|
||||
const max = parseInt(document.getElementById('hpMax').value) || 0;
|
||||
const cur = parseInt(document.getElementById('hpCur').value) || 0;
|
||||
const badge = document.getElementById('crisisBadge');
|
||||
badge.style.display = (max > 0 && cur <= Math.floor(max / 2)) ? 'block' : 'none';
|
||||
const max = parseInt(document.getElementById("hpMax").value) || 0;
|
||||
const cur = parseInt(document.getElementById("hpCur").value) || 0;
|
||||
const badge = document.getElementById("crisisBadge");
|
||||
badge.style.display =
|
||||
max > 0 && cur <= Math.floor(max / 2) ? "block" : "none";
|
||||
}
|
||||
|
||||
// ── MARTIAL ────────────────────────────────────────
|
||||
function toggleMartial(el) { el.classList.toggle('checked'); el.querySelector('.martial-box').textContent = el.classList.contains('checked') ? '✓' : ''; }
|
||||
function toggleMartial(el) {
|
||||
el.classList.toggle("checked");
|
||||
el.querySelector(".martial-box").textContent = el.classList.contains(
|
||||
"checked",
|
||||
)
|
||||
? "✓"
|
||||
: "";
|
||||
}
|
||||
|
||||
// ── DISCIPLINES ────────────────────────────────────
|
||||
function toggleDisc(el) { el.classList.toggle('checked'); el.querySelector('.disc-box').textContent = el.classList.contains('checked') ? '✓' : ''; }
|
||||
function toggleDisc(el) {
|
||||
el.classList.toggle("checked");
|
||||
el.querySelector(".disc-box").textContent = el.classList.contains("checked")
|
||||
? "✓"
|
||||
: "";
|
||||
}
|
||||
|
||||
// ── CLASSES ────────────────────────────────────────
|
||||
function classBlockHTML(cls, idx, type) {
|
||||
return `
|
||||
<div class="class-block" id="${type}-class-${idx}">
|
||||
<div class="class-header">
|
||||
<input type="text" placeholder="Class name…" value="${cls.name || ''}" oninput="${type}Classes[${idx}].name=this.value">
|
||||
<input type="text" placeholder="Free benefits…" value="${cls.benefits || ''}" oninput="${type}Classes[${idx}].benefits=this.value">
|
||||
<input type="text" placeholder="Class name…" value="${cls.name || ""}" oninput="${type}Classes[${idx}].name=this.value">
|
||||
<input type="text" placeholder="Free benefits…" value="${cls.benefits || ""}" oninput="${type}Classes[${idx}].benefits=this.value">
|
||||
</div>
|
||||
<div class="class-skills">
|
||||
<textarea placeholder="Skill information…" oninput="${type}Classes[${idx}].skills=this.value">${cls.skills || ''}</textarea>
|
||||
<textarea placeholder="Skill information…" oninput="${type}Classes[${idx}].skills=this.value">${cls.skills || ""}</textarea>
|
||||
</div>
|
||||
<div style="padding:6px 10px; border-top:1px solid var(--border); display:flex; justify-content:flex-end;">
|
||||
<button class="spell-del-btn" onclick="removeClass('${type}',${idx})">✕ Remove</button>
|
||||
@@ -214,38 +256,63 @@ function classBlockHTML(cls, idx, type) {
|
||||
}
|
||||
|
||||
function renderPrimaryClasses() {
|
||||
document.getElementById('primaryClassContainer').innerHTML = primaryClasses.map((c, i) => classBlockHTML(c, i, 'primary')).join('');
|
||||
document.getElementById("primaryClassContainer").innerHTML = primaryClasses
|
||||
.map((c, i) => classBlockHTML(c, i, "primary"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
function renderOtherClasses() {
|
||||
document.getElementById('otherClassContainer').innerHTML = otherClasses.map((c, i) => classBlockHTML(c, i, 'other')).join('');
|
||||
document.getElementById("otherClassContainer").innerHTML = otherClasses
|
||||
.map((c, i) => classBlockHTML(c, i, "other"))
|
||||
.join("");
|
||||
}
|
||||
|
||||
function addPrimaryClass() { primaryClasses.push({}); renderPrimaryClasses(); }
|
||||
function addOtherClass() { otherClasses.push({}); renderOtherClasses(); }
|
||||
function addPrimaryClass() {
|
||||
primaryClasses.push({});
|
||||
renderPrimaryClasses();
|
||||
}
|
||||
function addOtherClass() {
|
||||
otherClasses.push({});
|
||||
renderOtherClasses();
|
||||
}
|
||||
function removeClass(type, idx) {
|
||||
if (type === 'primary') { primaryClasses.splice(idx, 1); renderPrimaryClasses(); }
|
||||
else { otherClasses.splice(idx, 1); renderOtherClasses(); }
|
||||
if (type === "primary") {
|
||||
primaryClasses.splice(idx, 1);
|
||||
renderPrimaryClasses();
|
||||
} else {
|
||||
otherClasses.splice(idx, 1);
|
||||
renderOtherClasses();
|
||||
}
|
||||
}
|
||||
|
||||
// ── SPELLS ─────────────────────────────────────────
|
||||
function renderSpells() {
|
||||
const tbody = document.getElementById('spellsBody');
|
||||
tbody.innerHTML = spells.map((s, i) => `
|
||||
const tbody = document.getElementById("spellsBody");
|
||||
tbody.innerHTML = spells
|
||||
.map(
|
||||
(s, i) => `
|
||||
<tr>
|
||||
<td class="spell-name-col">
|
||||
<input type="text" placeholder="Spell / Arcana name…" value="${s.name || ''}" oninput="spells[${i}].name=this.value">
|
||||
<textarea placeholder="Notes / effect description…" oninput="spells[${i}].notes=this.value">${s.notes || ''}</textarea>
|
||||
<input type="text" placeholder="Spell / Arcana name…" value="${s.name || ""}" oninput="spells[${i}].name=this.value">
|
||||
<textarea placeholder="Notes / effect description…" oninput="spells[${i}].notes=this.value">${s.notes || ""}</textarea>
|
||||
</td>
|
||||
<td class="spell-mp-col"><input type="number" placeholder="0" value="${s.mp || ''}" oninput="spells[${i}].mp=this.value" style="min-height:32px;"></td>
|
||||
<td class="spell-targets-col"><input type="text" placeholder="Target(s)…" value="${s.targets || ''}" oninput="spells[${i}].targets=this.value"></td>
|
||||
<td class="spell-dur-col"><input type="text" placeholder="Duration…" value="${s.duration || ''}" oninput="spells[${i}].duration=this.value"></td>
|
||||
<td class="spell-mp-col"><input type="number" placeholder="0" value="${s.mp || ""}" oninput="spells[${i}].mp=this.value" style="min-height:32px;"></td>
|
||||
<td class="spell-targets-col"><input type="text" placeholder="Target(s)…" value="${s.targets || ""}" oninput="spells[${i}].targets=this.value"></td>
|
||||
<td class="spell-dur-col"><input type="text" placeholder="Duration…" value="${s.duration || ""}" oninput="spells[${i}].duration=this.value"></td>
|
||||
<td class="spell-del-col"><button class="spell-del-btn" onclick="removeSpell(${i})">✕</button></td>
|
||||
</tr>`).join('');
|
||||
</tr>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
function addSpell() { spells.push({}); renderSpells(); }
|
||||
function removeSpell(i) { spells.splice(i, 1); renderSpells(); }
|
||||
function addSpell() {
|
||||
spells.push({});
|
||||
renderSpells();
|
||||
}
|
||||
function removeSpell(i) {
|
||||
spells.splice(i, 1);
|
||||
renderSpells();
|
||||
}
|
||||
|
||||
// ── SAVE / LOAD ────────────────────────────────────
|
||||
// Short key legend (serialized form only; in-memory objects use full names):
|
||||
@@ -265,128 +332,206 @@ function removeSpell(i) { spells.splice(i, 1); renderSpells(); }
|
||||
// Nested classes: n=name, b=benefits, s=skills
|
||||
// Nested spells: n=name, nt=notes, mp=mp, tg=targets, dr=duration
|
||||
function collectData() {
|
||||
const get = id => { const el = document.getElementById(id); return el ? el.value : ''; };
|
||||
const sa = [...document.querySelectorAll('.status-item.active-status')].map(el => el.dataset.status);
|
||||
const ma = [...document.querySelectorAll('.martial-item.checked')].map(el => el.querySelector('span').textContent);
|
||||
const da = [...document.querySelectorAll('.disc-item.checked')].map(el => el.querySelector('span').textContent);
|
||||
const get = (id) => {
|
||||
const el = document.getElementById(id);
|
||||
return el ? el.value : "";
|
||||
};
|
||||
const sa = [...document.querySelectorAll(".status-item.active-status")].map(
|
||||
(el) => el.dataset.status,
|
||||
);
|
||||
const ma = [...document.querySelectorAll(".martial-item.checked")].map(
|
||||
(el) => el.querySelector("span").textContent,
|
||||
);
|
||||
const da = [...document.querySelectorAll(".disc-item.checked")].map(
|
||||
(el) => el.querySelector("span").textContent,
|
||||
);
|
||||
|
||||
return {
|
||||
n: get('charName'), pn: get('charPronouns'),
|
||||
id: get('charIdentity'), th: get('charTheme'), og: get('charOrigin'),
|
||||
tr: get('charTraits'),
|
||||
lv: level, xp: get('xpCurrent'), z: get('zenit'),
|
||||
im: get('initMod'), df: get('defense'), md: get('magDef'),
|
||||
dxb: get('dex-base'), dxc: get('dex-cur'),
|
||||
inb: get('ins-base'), inc: get('ins-cur'),
|
||||
mgb: get('mig-base'), mgc: get('mig-cur'),
|
||||
wpb: get('wlp-base'), wpc: get('wlp-cur'),
|
||||
hx: get('hpMax'), hc: get('hpCur'),
|
||||
mx: get('mpMax'), mc: get('mpCur'),
|
||||
ix: get('ipMax'), ic: get('ipCur'),
|
||||
fp: get('fpCount'),
|
||||
bp: get('backpack'),
|
||||
acn: get('acc-name'), acd: get('acc-desc'),
|
||||
amn: get('arm-name'), amd: get('arm-desc'),
|
||||
mhn: get('mh-name'), mhd: get('mh-desc'),
|
||||
ohn: get('oh-name'), ohd: get('oh-desc'),
|
||||
hs: get('heroicSkills'),
|
||||
rn: get('ritualsNotes'),
|
||||
sa, ma, da,
|
||||
bo: bonds.map(b => ({ n: b.name, f: b.feelings })),
|
||||
pc: primaryClasses.map(c => ({ n: c.name, b: c.benefits, s: c.skills })),
|
||||
oc: otherClasses.map(c => ({ n: c.name, b: c.benefits, s: c.skills })),
|
||||
sp: spells.map(s => ({ n: s.name, nt: s.notes, mp: s.mp, tg: s.targets, dr: s.duration })),
|
||||
n: get("charName"),
|
||||
pn: get("charPronouns"),
|
||||
id: get("charIdentity"),
|
||||
th: get("charTheme"),
|
||||
og: get("charOrigin"),
|
||||
tr: get("charTraits"),
|
||||
lv: level,
|
||||
xp: get("xpCurrent"),
|
||||
z: get("zenit"),
|
||||
im: get("initMod"),
|
||||
df: get("defense"),
|
||||
md: get("magDef"),
|
||||
dxb: get("dex-base"),
|
||||
dxc: get("dex-cur"),
|
||||
inb: get("ins-base"),
|
||||
inc: get("ins-cur"),
|
||||
mgb: get("mig-base"),
|
||||
mgc: get("mig-cur"),
|
||||
wpb: get("wlp-base"),
|
||||
wpc: get("wlp-cur"),
|
||||
hx: get("hpMax"),
|
||||
hc: get("hpCur"),
|
||||
mx: get("mpMax"),
|
||||
mc: get("mpCur"),
|
||||
ix: get("ipMax"),
|
||||
ic: get("ipCur"),
|
||||
fp: get("fpCount"),
|
||||
bp: get("backpack"),
|
||||
acn: get("acc-name"),
|
||||
acd: get("acc-desc"),
|
||||
amn: get("arm-name"),
|
||||
amd: get("arm-desc"),
|
||||
mhn: get("mh-name"),
|
||||
mhd: get("mh-desc"),
|
||||
ohn: get("oh-name"),
|
||||
ohd: get("oh-desc"),
|
||||
hs: get("heroicSkills"),
|
||||
rn: get("ritualsNotes"),
|
||||
sa,
|
||||
ma,
|
||||
da,
|
||||
bo: bonds.map((b) => ({ n: b.name, f: b.feelings })),
|
||||
pc: primaryClasses.map((c) => ({ n: c.name, b: c.benefits, s: c.skills })),
|
||||
oc: otherClasses.map((c) => ({ n: c.name, b: c.benefits, s: c.skills })),
|
||||
sp: spells.map((s) => ({
|
||||
n: s.name,
|
||||
nt: s.notes,
|
||||
mp: s.mp,
|
||||
tg: s.targets,
|
||||
dr: s.duration,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
function saveSheet(isAuto = false) {
|
||||
if (isAuto && urlMode) return;
|
||||
const data = collectData();
|
||||
localStorage.setItem('fabulaUltimaSheet', JSON.stringify(data));
|
||||
const st = document.getElementById('saveStatus');
|
||||
st.classList.add('show');
|
||||
setTimeout(() => st.classList.remove('show'), 2000);
|
||||
localStorage.setItem("fabulaUltimaSheet", JSON.stringify(data));
|
||||
const st = document.getElementById("saveStatus");
|
||||
st.classList.add("show");
|
||||
setTimeout(() => st.classList.remove("show"), 2000);
|
||||
}
|
||||
|
||||
function tryAutoLoad() {
|
||||
const raw = localStorage.getItem('fabulaUltimaSheet');
|
||||
if (raw) try { applyData(JSON.parse(raw)); } catch (e) { }
|
||||
const raw = localStorage.getItem("fabulaUltimaSheet");
|
||||
if (raw)
|
||||
try {
|
||||
applyData(JSON.parse(raw));
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
function loadSheet() {
|
||||
const raw = localStorage.getItem('fabulaUltimaSheet');
|
||||
if (!raw) return alert('No saved sheet found.');
|
||||
try { applyData(JSON.parse(raw)); } catch (e) { alert('Could not load sheet.'); }
|
||||
const raw = localStorage.getItem("fabulaUltimaSheet");
|
||||
if (!raw) return alert("No saved sheet found.");
|
||||
try {
|
||||
applyData(JSON.parse(raw));
|
||||
} catch (e) {
|
||||
alert("Could not load sheet.");
|
||||
}
|
||||
}
|
||||
|
||||
function applyData(d) {
|
||||
const set = (id, val) => { const el = document.getElementById(id); if (el && val !== undefined) el.value = val; };
|
||||
set('charName', d.n ?? d.name); set('charPronouns', d.pn ?? d.pronouns);
|
||||
set('charIdentity',d.id ?? d.identity); set('charTheme', d.th ?? d.theme);
|
||||
set('charOrigin', d.og ?? d.origin); set('charTraits', d.tr ?? d.traits);
|
||||
const set = (id, val) => {
|
||||
const el = document.getElementById(id);
|
||||
if (el && val !== undefined) el.value = val;
|
||||
};
|
||||
set("charName", d.n ?? d.name);
|
||||
set("charPronouns", d.pn ?? d.pronouns);
|
||||
set("charIdentity", d.id ?? d.identity);
|
||||
set("charTheme", d.th ?? d.theme);
|
||||
set("charOrigin", d.og ?? d.origin);
|
||||
set("charTraits", d.tr ?? d.traits);
|
||||
level = d.lv ?? d.level ?? 1;
|
||||
document.getElementById('levelDisplay').textContent = level;
|
||||
set('xpCurrent', d.xp); set('zenit', d.z ?? d.zenit);
|
||||
set('initMod', d.im ?? d.initMod); set('defense', d.df ?? d.defense);
|
||||
set('magDef', d.md ?? d.magDef);
|
||||
set('dex-base', d.dxb ?? d.dexBase); set('dex-cur', d.dxc ?? d.dexCur);
|
||||
set('ins-base', d.inb ?? d.insBase); set('ins-cur', d.inc ?? d.insCur);
|
||||
set('mig-base', d.mgb ?? d.migBase); set('mig-cur', d.mgc ?? d.migCur);
|
||||
set('wlp-base', d.wpb ?? d.wlpBase); set('wlp-cur', d.wpc ?? d.wlpCur);
|
||||
set('hpMax', d.hx ?? d.hpMax); set('hpCur', d.hc ?? d.hpCur);
|
||||
set('mpMax', d.mx ?? d.mpMax); set('mpCur', d.mc ?? d.mpCur);
|
||||
set('ipMax', d.ix ?? d.ipMax); set('ipCur', d.ic ?? d.ipCur);
|
||||
set('fpCount', d.fp);
|
||||
set('backpack', d.bp ?? d.backpack);
|
||||
set('acc-name', d.acn ?? d.accName); set('acc-desc', d.acd ?? d.accDesc);
|
||||
set('arm-name', d.amn ?? d.armName); set('arm-desc', d.amd ?? d.armDesc);
|
||||
set('mh-name', d.mhn ?? d.mhName); set('mh-desc', d.mhd ?? d.mhDesc);
|
||||
set('oh-name', d.ohn ?? d.ohName); set('oh-desc', d.ohd ?? d.ohDesc);
|
||||
set('heroicSkills', d.hs ?? d.heroicSkills);
|
||||
set('ritualsNotes', d.rn ?? d.ritualsNotes);
|
||||
document.getElementById("levelDisplay").textContent = level;
|
||||
set("xpCurrent", d.xp);
|
||||
set("zenit", d.z ?? d.zenit);
|
||||
set("initMod", d.im ?? d.initMod);
|
||||
set("defense", d.df ?? d.defense);
|
||||
set("magDef", d.md ?? d.magDef);
|
||||
set("dex-base", d.dxb ?? d.dexBase);
|
||||
set("dex-cur", d.dxc ?? d.dexCur);
|
||||
set("ins-base", d.inb ?? d.insBase);
|
||||
set("ins-cur", d.inc ?? d.insCur);
|
||||
set("mig-base", d.mgb ?? d.migBase);
|
||||
set("mig-cur", d.mgc ?? d.migCur);
|
||||
set("wlp-base", d.wpb ?? d.wlpBase);
|
||||
set("wlp-cur", d.wpc ?? d.wlpCur);
|
||||
set("hpMax", d.hx ?? d.hpMax);
|
||||
set("hpCur", d.hc ?? d.hpCur);
|
||||
set("mpMax", d.mx ?? d.mpMax);
|
||||
set("mpCur", d.mc ?? d.mpCur);
|
||||
set("ipMax", d.ix ?? d.ipMax);
|
||||
set("ipCur", d.ic ?? d.ipCur);
|
||||
set("fpCount", d.fp);
|
||||
set("backpack", d.bp ?? d.backpack);
|
||||
set("acc-name", d.acn ?? d.accName);
|
||||
set("acc-desc", d.acd ?? d.accDesc);
|
||||
set("arm-name", d.amn ?? d.armName);
|
||||
set("arm-desc", d.amd ?? d.armDesc);
|
||||
set("mh-name", d.mhn ?? d.mhName);
|
||||
set("mh-desc", d.mhd ?? d.mhDesc);
|
||||
set("oh-name", d.ohn ?? d.ohName);
|
||||
set("oh-desc", d.ohd ?? d.ohDesc);
|
||||
set("heroicSkills", d.hs ?? d.heroicSkills);
|
||||
set("ritualsNotes", d.rn ?? d.ritualsNotes);
|
||||
|
||||
// Statuses
|
||||
const sa = d.sa ?? d.statusesActive ?? [];
|
||||
document.querySelectorAll('.status-item').forEach(el => {
|
||||
document.querySelectorAll(".status-item").forEach((el) => {
|
||||
const active = sa.includes(el.dataset.status);
|
||||
el.classList.toggle('active-status', active);
|
||||
el.querySelector('.status-check').textContent = active ? '✗' : '';
|
||||
el.classList.toggle("active-status", active);
|
||||
el.querySelector(".status-check").textContent = active ? "✗" : "";
|
||||
});
|
||||
|
||||
// Martial
|
||||
const ma = d.ma ?? d.martialChecked ?? [];
|
||||
document.querySelectorAll('.martial-item').forEach(el => {
|
||||
const checked = ma.includes(el.querySelector('span').textContent);
|
||||
el.classList.toggle('checked', checked);
|
||||
el.querySelector('.martial-box').textContent = checked ? '✓' : '';
|
||||
document.querySelectorAll(".martial-item").forEach((el) => {
|
||||
const checked = ma.includes(el.querySelector("span").textContent);
|
||||
el.classList.toggle("checked", checked);
|
||||
el.querySelector(".martial-box").textContent = checked ? "✓" : "";
|
||||
});
|
||||
|
||||
// Disciplines
|
||||
const da = d.da ?? d.disciplinesChecked ?? [];
|
||||
document.querySelectorAll('.disc-item').forEach(el => {
|
||||
const checked = da.includes(el.querySelector('span').textContent);
|
||||
el.classList.toggle('checked', checked);
|
||||
el.querySelector('.disc-box').textContent = checked ? '✓' : '';
|
||||
document.querySelectorAll(".disc-item").forEach((el) => {
|
||||
const checked = da.includes(el.querySelector("span").textContent);
|
||||
el.classList.toggle("checked", checked);
|
||||
el.querySelector(".disc-box").textContent = checked ? "✓" : "";
|
||||
});
|
||||
|
||||
const rawBonds = d.bo ?? d.bonds;
|
||||
if (rawBonds) {
|
||||
bonds = rawBonds.map(b => ({ name: b.n ?? b.name, feelings: b.f ?? b.feelings ?? [] }));
|
||||
bonds = rawBonds.map((b) => ({
|
||||
name: b.n ?? b.name,
|
||||
feelings: b.f ?? b.feelings ?? [],
|
||||
}));
|
||||
renderBonds();
|
||||
}
|
||||
const rawPrimary = d.pc ?? d.primaryClasses;
|
||||
if (rawPrimary) {
|
||||
primaryClasses = rawPrimary.map(c => ({ name: c.n ?? c.name, benefits: c.b ?? c.benefits, skills: c.s ?? c.skills }));
|
||||
primaryClasses = rawPrimary.map((c) => ({
|
||||
name: c.n ?? c.name,
|
||||
benefits: c.b ?? c.benefits,
|
||||
skills: c.s ?? c.skills,
|
||||
}));
|
||||
renderPrimaryClasses();
|
||||
}
|
||||
const rawOther = d.oc ?? d.otherClasses;
|
||||
if (rawOther) {
|
||||
otherClasses = rawOther.map(c => ({ name: c.n ?? c.name, benefits: c.b ?? c.benefits, skills: c.s ?? c.skills }));
|
||||
otherClasses = rawOther.map((c) => ({
|
||||
name: c.n ?? c.name,
|
||||
benefits: c.b ?? c.benefits,
|
||||
skills: c.s ?? c.skills,
|
||||
}));
|
||||
renderOtherClasses();
|
||||
}
|
||||
const rawSpells = d.sp ?? d.spells;
|
||||
if (rawSpells) {
|
||||
spells = rawSpells.map(s => ({ name: s.n ?? s.name, notes: s.nt ?? s.notes, mp: s.mp, targets: s.tg ?? s.targets, duration: s.dr ?? s.duration }));
|
||||
spells = rawSpells.map((s) => ({
|
||||
name: s.n ?? s.name,
|
||||
notes: s.nt ?? s.notes,
|
||||
mp: s.mp,
|
||||
targets: s.tg ?? s.targets,
|
||||
duration: s.dr ?? s.duration,
|
||||
}));
|
||||
renderSpells();
|
||||
}
|
||||
|
||||
@@ -399,36 +544,41 @@ function applyData(d) {
|
||||
function exportSheet() {
|
||||
const data = collectData();
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const blob = new Blob([json], { type: "application/json" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
const charName = (data.n || 'character').replace(/[^a-z0-9_\- ]/gi, '').trim() || 'character';
|
||||
const a = document.createElement("a");
|
||||
const charName =
|
||||
(data.n || "character").replace(/[^a-z0-9_\- ]/gi, "").trim() ||
|
||||
"character";
|
||||
a.href = url;
|
||||
a.download = charName + '-fabula-ultima.json';
|
||||
a.download = charName + "-fabula-ultima.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function importSheet() {
|
||||
document.getElementById('importFileInput').value = '';
|
||||
document.getElementById('importFileInput').click();
|
||||
document.getElementById("importFileInput").value = "";
|
||||
document.getElementById("importFileInput").click();
|
||||
}
|
||||
|
||||
function handleImportFile(input) {
|
||||
const file = input.files[0];
|
||||
if (!file) return;
|
||||
const reader = new FileReader();
|
||||
reader.onload = e => {
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.target.result);
|
||||
applyData(data);
|
||||
saveSheet();
|
||||
const st = document.getElementById('saveStatus');
|
||||
st.textContent = 'Imported!';
|
||||
st.classList.add('show');
|
||||
setTimeout(() => { st.classList.remove('show'); st.textContent = 'Saved!'; }, 2500);
|
||||
const st = document.getElementById("saveStatus");
|
||||
st.textContent = "Imported!";
|
||||
st.classList.add("show");
|
||||
setTimeout(() => {
|
||||
st.classList.remove("show");
|
||||
st.textContent = "Saved!";
|
||||
}, 2500);
|
||||
} catch (err) {
|
||||
alert('Could not import: invalid JSON file.');
|
||||
alert("Could not import: invalid JSON file.");
|
||||
}
|
||||
};
|
||||
reader.readAsText(file);
|
||||
@@ -437,20 +587,26 @@ function handleImportFile(input) {
|
||||
async function copyShareURL() {
|
||||
const json = JSON.stringify(collectData());
|
||||
const encoded = await compressToBase64(json);
|
||||
const url = window.location.origin + window.location.pathname + '?c=' + encodeURIComponent(encoded);
|
||||
const url =
|
||||
window.location.origin +
|
||||
window.location.pathname +
|
||||
"?c=" +
|
||||
encodeURIComponent(encoded);
|
||||
await navigator.clipboard.writeText(url);
|
||||
const st = document.getElementById('copyStatus');
|
||||
st.classList.add('show');
|
||||
setTimeout(() => st.classList.remove('show'), 2000);
|
||||
const st = document.getElementById("copyStatus");
|
||||
st.classList.add("show");
|
||||
setTimeout(() => st.classList.remove("show"), 2000);
|
||||
}
|
||||
|
||||
// ── THEME ──────────────────────────────────────────
|
||||
function toggleTheme() {
|
||||
const html = document.documentElement;
|
||||
const goLight = html.dataset.theme !== 'light';
|
||||
html.dataset.theme = goLight ? 'light' : 'dark';
|
||||
document.getElementById('themeToggle').textContent = goLight ? '☾ Dark' : '☀ Light';
|
||||
localStorage.setItem('fabulaUltimaTheme', html.dataset.theme);
|
||||
const goLight = html.dataset.theme !== "light";
|
||||
html.dataset.theme = goLight ? "light" : "dark";
|
||||
document.getElementById("themeToggle").textContent = goLight
|
||||
? "☾ Dark"
|
||||
: "☀ Light";
|
||||
localStorage.setItem("fabulaUltimaTheme", html.dataset.theme);
|
||||
}
|
||||
|
||||
// Auto-save every 30s
|
||||
|
||||
27
package-lock.json
generated
Normal file
27
package-lock.json
generated
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "fabula-ultima-html",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"dependencies": {
|
||||
"prettier": "^3.8.3"
|
||||
}
|
||||
},
|
||||
"node_modules/prettier": {
|
||||
"version": "3.8.3",
|
||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.3.tgz",
|
||||
"integrity": "sha512-7igPTM53cGHMW8xWuVTydi2KO233VFiTNyF5hLJqpilHfmn8C8gPf+PS7dUT64YcXFbiMGZxS9pCSxL/Dxm/Jw==",
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"prettier": "bin/prettier.cjs"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
5
package.json
Normal file
5
package.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"dependencies": {
|
||||
"prettier": "^3.8.3"
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user