Add initial spell data and HTML structure for Oswin Eisenbach's spell cards
This commit is contained in:
@@ -0,0 +1,46 @@
|
||||
# CLAUDE.md
|
||||
|
||||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||||
|
||||
## Overview
|
||||
|
||||
This renders printable D&D 5e spell reference cards for a specific character ("Oswin Eisenbach", a Forest Gnome Artificer). `index.html` is the static page (Tailwind CSS, Flowbite, and Google Fonts from CDNs, no build step), but spell data lives in JSON files under `characters/`, loaded at runtime via `fetch()`.
|
||||
|
||||
## Running / Previewing
|
||||
|
||||
`index.html` fetches JSON files, which browsers block on `file://` URLs (CORS). You must serve the directory:
|
||||
|
||||
```
|
||||
python3 -m http.server
|
||||
```
|
||||
|
||||
then open `http://localhost:8000/`. Opening `index.html` directly will not load any spells.
|
||||
|
||||
## Architecture
|
||||
|
||||
### `index.html`
|
||||
|
||||
1. **`<style>` block** — card visual design (`.spell-card`, `.card-header`, `.stat-row`, `.card-body`, `.card-footer`, `.level-flag`, etc.) plus per-school color theming via classes like `.school-conjuration`, `.school-evocation`, etc. (each sets `--school-col` / `--school-bg` CSS custom properties consumed by the card components). Also defines `@media print` rules and an `@page` rule (A4 portrait, 12mm margin, 3-column grid) so the page can be printed directly to physical cards sized at 2.5×3.5 in (240×336px at 96dpi, set via `--card-w`/`--card-h`).
|
||||
|
||||
2. **UI chrome** (`.ui-panel`) — toggle buttons to filter cards by spell level (`#type-filters`) and school (`#school-filters`), built dynamically from the loaded data, plus a "Print Cards" button that calls `window.print()`. Elements marked `.no-print` are hidden when printing. The card grid (`#card-grid`, also `.print-area`) is the same element in both screen and print view — print CSS just swaps it from a flex-wrap layout to a 3-column grid.
|
||||
|
||||
3. **Data + render logic** (final `<script>`):
|
||||
- `CHARACTER_DIR` — path to the active character's data folder (currently `characters/oswin-eisenbach`).
|
||||
- `loadSpells()` — fetches `manifest.json` for the character, then fetches every spell JSON file it lists, populates `SPELLS`, builds the filter buttons, and renders.
|
||||
- `SPELLS` — array of spell objects, populated at runtime from JSON. Each spell has: `name`, `level` (`"cantrip"` or a numeric string like `"1"`), `levelDisplay`, `school`, `castingTime`, `range`, `components`, `duration`, optional `damage`/`saveDC`/`material`, `source` (book/page citation), `uses` (e.g. `"At Will"`, `"Spell Slot"`, `"2× / Long Rest"`), `tags` (array of short labels), and `desc` (array of HTML-containing paragraph strings — inline `<b>`/`<em>` tags are used for emphasis directly in the data).
|
||||
- `SCHOOL_ABBR` — maps school name to a 2-letter abbreviation shown in the circular "pip" badge on each card.
|
||||
- `buildCard(spell)` — returns the HTML string for one card, assembling stat chips, description paragraphs, tags, footer, and a corner `.level-flag` (grey "Cantrip" vs. gold "Lvl N Spell") from a spell object.
|
||||
- `buildFilters(typeLabels)` — generates the type and school filter buttons after data loads, based on what's actually present.
|
||||
- `renderCards()` — filters `SPELLS` by the current `activeType`/`activeSchool` globals and re-renders the `#card-grid` container.
|
||||
- `filterType(btn, val)` / `filterSchool(btn, val)` — button click handlers that update filter state, toggle the `.active` class on buttons, and call `renderCards()`.
|
||||
|
||||
### `characters/<character-folder>/`
|
||||
|
||||
- `manifest.json` — `{ character, subtitle, types: [{ level, label, files: [...] }] }`. `level` is the folder name and matches the spell's `level` field (`"cantrip"`, `"1"`, `"2"`, ...); `files` lists the JSON filenames inside that level's folder, in display order.
|
||||
- `<level>/<spell-slug>.json` — one spell per file, same shape as the spell objects described above (no `level`/`levelDisplay` redundancy issue — both are still included in the file since the card needs them).
|
||||
|
||||
## Adding/editing spells
|
||||
|
||||
To add a new spell, create a JSON file in the right `characters/<character>/<level>/` folder (create the folder if it's a new level) and add its filename to that level's `files` array in `manifest.json`. To add a new school, add both a `.school-<name>` CSS rule (lowercase school name) and an entry in `SCHOOL_ABBR` in `index.html` — filter buttons for schools and levels are generated automatically from whatever data loads.
|
||||
|
||||
To add a second character, create a new `characters/<folder>/` with its own `manifest.json` and level folders, then point `CHARACTER_DIR` in `index.html` at it (there is currently no in-page character switcher).
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "Disguise Self",
|
||||
"level": "1",
|
||||
"levelDisplay": "1st Level",
|
||||
"school": "Illusion",
|
||||
"castingTime": "1 action",
|
||||
"range": "Self",
|
||||
"components": "V, S",
|
||||
"duration": "1 hour",
|
||||
"source": "PHB p.262",
|
||||
"uses": "Spell Slot",
|
||||
"tags": ["Shapechanging", "Social"],
|
||||
"desc": [
|
||||
"You and your gear look different for the duration. You may appear up to 1 ft. shorter or taller, heavier or lighter, but must retain the same basic limb arrangement.",
|
||||
"Changes fail physical inspection — objects pass through illusory additions.",
|
||||
"A creature must Study you (INT Investigation vs. DC 13) to see through the disguise."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Identify",
|
||||
"level": "1",
|
||||
"levelDisplay": "1st Level",
|
||||
"school": "Divination",
|
||||
"castingTime": "1 minute (ritual)",
|
||||
"range": "Touch",
|
||||
"components": "V, S, M",
|
||||
"duration": "Instantaneous",
|
||||
"material": "Pearl worth 100+ gp",
|
||||
"source": "PHB p.287",
|
||||
"uses": "Spell Slot / Ritual",
|
||||
"tags": ["Detection", "Magic Items"],
|
||||
"desc": [
|
||||
"You touch an object. If it is magical, you learn its <b>properties, how to use them, whether it requires attunement, and its charges</b>.",
|
||||
"You also learn any ongoing spells affecting the item and the spell that created it.",
|
||||
"If you touch a <em>creature</em> instead, you learn which ongoing spells are affecting it."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "Speak with Animals",
|
||||
"level": "1",
|
||||
"levelDisplay": "1st Level",
|
||||
"school": "Divination",
|
||||
"castingTime": "1 action",
|
||||
"range": "Self",
|
||||
"components": "V, S",
|
||||
"duration": "10 minutes",
|
||||
"source": "PHB p.318",
|
||||
"uses": "2× / Long Rest",
|
||||
"tags": ["Exploration", "Social"],
|
||||
"desc": [
|
||||
"For the duration, you can <b>comprehend and speak with Beasts</b>, and use any Influence action skill options with them.",
|
||||
"Most beasts focus on survival and companionship, but can report nearby locations, monsters, and anything perceived within the past day.",
|
||||
"<em>(Forest Gnome racial trait — does not expend a spell slot.)</em>"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"name": "Create Bonfire",
|
||||
"level": "cantrip",
|
||||
"levelDisplay": "Cantrip",
|
||||
"school": "Conjuration",
|
||||
"castingTime": "1 action",
|
||||
"range": "60 ft. (5 ft. cube)",
|
||||
"components": "V, S",
|
||||
"duration": "Conc. 1 min",
|
||||
"damage": "1d8 fire",
|
||||
"saveDC": "DEX 13",
|
||||
"source": "EEPC p.152",
|
||||
"uses": "At Will",
|
||||
"tags": ["Damage", "Fire", "Concentration"],
|
||||
"desc": [
|
||||
"You create a bonfire on ground within range. Until the spell ends, the bonfire fills a 5‑ft. cube.",
|
||||
"Any creature in the bonfire's space when you cast it must succeed on a <b>DEX save (DC 13)</b> or take <b>1d8 fire damage</b>. A creature also saves when it moves into the space or ends its turn there.",
|
||||
"The bonfire ignites flammable objects in its area not being worn or carried."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Magic Stone",
|
||||
"level": "cantrip",
|
||||
"levelDisplay": "Cantrip",
|
||||
"school": "Transmutation",
|
||||
"castingTime": "1 bonus action",
|
||||
"range": "Touch",
|
||||
"components": "V, S",
|
||||
"duration": "1 minute",
|
||||
"damage": "1d6 + 3 bludg.",
|
||||
"source": "EEPC p.160",
|
||||
"uses": "At Will",
|
||||
"tags": ["Damage", "Ranged"],
|
||||
"desc": [
|
||||
"You touch 1–3 pebbles and imbue them with magic. You or another creature can make a <b>ranged spell attack</b> with one pebble (range 60 ft.).",
|
||||
"On a hit: <b>1d6 + INT modifier bludgeoning damage</b>. The attacker uses <em>your</em> spellcasting modifier on the attack roll.",
|
||||
"Casting this spell again ends the effect on remaining pebbles."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"name": "Mending",
|
||||
"level": "cantrip",
|
||||
"levelDisplay": "Cantrip",
|
||||
"school": "Transmutation",
|
||||
"castingTime": "1 minute",
|
||||
"range": "Touch",
|
||||
"components": "V, S, M",
|
||||
"duration": "Instantaneous",
|
||||
"material": "Two lodestones",
|
||||
"source": "PHB p.297",
|
||||
"uses": "At Will",
|
||||
"tags": ["Utility", "Repair"],
|
||||
"desc": [
|
||||
"This spell repairs a single break or tear in an object you touch — a broken chain, torn cloak, or leaking wineskin — as long as the break is no larger than <b>1 foot</b> in any dimension.",
|
||||
"Leaves no trace of former damage. Can repair a magic item physically, but cannot restore its magic."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"name": "Minor Illusion",
|
||||
"level": "cantrip",
|
||||
"levelDisplay": "Cantrip",
|
||||
"school": "Illusion",
|
||||
"castingTime": "1 action",
|
||||
"range": "30 ft. (5 ft. cube)",
|
||||
"components": "S, M",
|
||||
"duration": "1 minute",
|
||||
"material": "A bit of fleece",
|
||||
"source": "PHB p.298",
|
||||
"uses": "At Will",
|
||||
"tags": ["Control", "Illusion"],
|
||||
"desc": [
|
||||
"You create a <b>sound or image</b> within range. A creature can use the Study action (INT Investigation vs. your DC 13) to discern the illusion.",
|
||||
"<b>Sound:</b> Any volume from a whisper to a scream; can be continuous or discrete.",
|
||||
"<b>Image:</b> Object up to a 5‑ft. cube. Cannot produce sound, light, or smell. Physical contact reveals it."
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"character": "Oswin Eisenbach",
|
||||
"subtitle": "Level 1 Forest Gnome Artificer",
|
||||
"types": [
|
||||
{
|
||||
"level": "cantrip",
|
||||
"label": "Cantrips",
|
||||
"files": ["create-bonfire.json", "magic-stone.json", "mending.json", "minor-illusion.json"]
|
||||
},
|
||||
{
|
||||
"level": "1",
|
||||
"label": "1st Level",
|
||||
"files": ["disguise-self.json", "identify.json", "speak-with-animals.json"]
|
||||
}
|
||||
]
|
||||
}
|
||||
+503
@@ -0,0 +1,503 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Oswin Eisenbach — Spell Cards</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400;1,600&display=swap" rel="stylesheet" />
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
cinzel: ['Cinzel', 'serif'],
|
||||
crimson: ['"Crimson Text"', 'serif'],
|
||||
},
|
||||
colors: {
|
||||
gold: '#c9a84c',
|
||||
'gold-light': '#e8c96e',
|
||||
'gold-dim': '#8a6a28',
|
||||
parchment: '#f0e6c8',
|
||||
'parchment-dark': '#d8c89a',
|
||||
ink: '#1c1208',
|
||||
leather: '#2d1b0e',
|
||||
'leather-mid': '#4a2e14',
|
||||
navy: '#1a1a2e',
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
/* ─── CARD SIZE: 2.5 × 3.5 inches at 96dpi = 240 × 336px ─── */
|
||||
:root {
|
||||
--card-w: 240px;
|
||||
--card-h: 336px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #0e0e1a;
|
||||
font-family: 'Crimson Text', serif;
|
||||
}
|
||||
|
||||
/* school colour palette */
|
||||
.school-conjuration { --school-col: #7c3aed; --school-bg: #2e1065; }
|
||||
.school-transmutation { --school-col: #d97706; --school-bg: #451a03; }
|
||||
.school-illusion { --school-col: #6366f1; --school-bg: #1e1b4b; }
|
||||
.school-divination { --school-col: #0ea5e9; --school-bg: #0c2a4a; }
|
||||
.school-evocation { --school-col: #ef4444; --school-bg: #450a0a; }
|
||||
.school-abjuration { --school-col: #10b981; --school-bg: #052e16; }
|
||||
.school-enchantment { --school-col: #ec4899; --school-bg: #500724; }
|
||||
.school-necromancy { --school-col: #84cc16; --school-bg: #1a2e05; }
|
||||
|
||||
.spell-card {
|
||||
width: var(--card-w);
|
||||
height: var(--card-h);
|
||||
border-radius: 8px;
|
||||
background: #f0e6c8;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(201,168,76,0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
page-break-inside: avoid;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
/* flag: distinguishes cantrips (at-will, grey) from leveled spells (slot, gold) at a glance.
|
||||
Sits in normal flex flow above the school pip so it never overlaps the card name. */
|
||||
.level-flag {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 6.5px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
padding: 1.5px 6px;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.45);
|
||||
}
|
||||
|
||||
.level-flag-cantrip { background: linear-gradient(135deg, #94a3b8, #475569); }
|
||||
.level-flag-spell { background: linear-gradient(135deg, #e8c96e, #8a6a28); }
|
||||
|
||||
/* outer gold border inset */
|
||||
.spell-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 5px;
|
||||
border: 1.5px solid #c9a84c55;
|
||||
border-radius: 4px;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* corner flourishes */
|
||||
.spell-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 5px;
|
||||
background:
|
||||
radial-gradient(circle at 0 0, #c9a84c 1.5px, transparent 1.5px) 5px 5px / 1px 1px no-repeat,
|
||||
radial-gradient(circle at 100% 0, #c9a84c 1.5px, transparent 1.5px) calc(100% - 5px) 5px / 1px 1px no-repeat,
|
||||
radial-gradient(circle at 0 100%, #c9a84c 1.5px, transparent 1.5px) 5px calc(100% - 5px) / 1px 1px no-repeat,
|
||||
radial-gradient(circle at 100% 100%, #c9a84c 1.5px, transparent 1.5px) calc(100% - 5px) calc(100% - 5px) / 1px 1px no-repeat;
|
||||
pointer-events: none;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background: linear-gradient(135deg, #1c1208 0%, var(--school-bg, #2d1b0e) 100%);
|
||||
padding: 9px 12px 7px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-header::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0; left: 0; right: 0;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, transparent, var(--school-col, #c9a84c), transparent);
|
||||
}
|
||||
|
||||
.card-name {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 11.5px;
|
||||
font-weight: 700;
|
||||
color: #e8c96e;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.03em;
|
||||
text-shadow: 0 1px 4px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.card-level-school {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 8.5px;
|
||||
color: var(--school-col, #c9a84c);
|
||||
letter-spacing: 0.06em;
|
||||
margin-top: 1px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.school-pip {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: var(--school-col, #c9a84c);
|
||||
color: #fff;
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 0 8px var(--school-col, #c9a84c), 0 0 0 1.5px rgba(255,255,255,0.15);
|
||||
}
|
||||
|
||||
.stat-row {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
padding: 5px 10px 4px;
|
||||
background: #e8d8ae;
|
||||
border-bottom: 1px solid #c9a84c44;
|
||||
}
|
||||
|
||||
.stat-chip {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 7.5px;
|
||||
font-weight: 600;
|
||||
color: #1c1208;
|
||||
background: rgba(201,168,76,0.22);
|
||||
border: 1px solid #c9a84c55;
|
||||
border-radius: 3px;
|
||||
padding: 1.5px 5px;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.stat-chip span {
|
||||
color: #7a4a00;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
padding: 7px 10px 6px;
|
||||
background: #f0e6c8;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-family: 'Crimson Text', serif;
|
||||
font-size: 9.5px;
|
||||
line-height: 1.45;
|
||||
color: #1c1208;
|
||||
}
|
||||
|
||||
.card-desc p + p { margin-top: 3px; }
|
||||
|
||||
.card-tags {
|
||||
display: flex;
|
||||
gap: 3px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 7px;
|
||||
color: var(--school-col, #7a4a00);
|
||||
border: 1px solid var(--school-col, #c9a84c);
|
||||
border-radius: 2px;
|
||||
padding: 0 4px;
|
||||
opacity: 0.8;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
background: linear-gradient(to right, #1c1208, var(--school-bg, #2d1b0e));
|
||||
padding: 4px 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 1px solid #c9a84c44;
|
||||
}
|
||||
|
||||
.footer-source {
|
||||
font-family: 'Crimson Text', serif;
|
||||
font-style: italic;
|
||||
font-size: 7.5px;
|
||||
color: #8a6a28;
|
||||
}
|
||||
|
||||
.footer-uses {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 7px;
|
||||
color: var(--school-col, #c9a84c);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* ─── PRINT STYLES ─── */
|
||||
@media print {
|
||||
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
|
||||
|
||||
body { background: #fff !important; margin: 0; padding: 0; }
|
||||
|
||||
.no-print { display: none !important; }
|
||||
|
||||
.print-area {
|
||||
display: grid !important;
|
||||
grid-template-columns: repeat(3, var(--card-w));
|
||||
gap: 8px;
|
||||
padding: 12mm;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
.spell-card {
|
||||
box-shadow: none !important;
|
||||
border: 1px solid #c9a84c;
|
||||
}
|
||||
|
||||
.screen-only { display: none !important; }
|
||||
}
|
||||
|
||||
@page {
|
||||
size: A4 portrait;
|
||||
margin: 12mm;
|
||||
}
|
||||
|
||||
/* ─── UI chrome ─── */
|
||||
.ui-panel {
|
||||
background: linear-gradient(135deg, #12121e, #1e1428);
|
||||
border-bottom: 1px solid #c9a84c33;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 11px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.toggle-btn.active {
|
||||
background: #c9a84c22;
|
||||
border-color: #c9a84c;
|
||||
color: #e8c96e;
|
||||
}
|
||||
|
||||
.toggle-btn:not(.active) {
|
||||
background: transparent;
|
||||
border-color: #ffffff22;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.toggle-btn:hover { opacity: 0.85; }
|
||||
|
||||
.print-btn {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 11px;
|
||||
background: linear-gradient(135deg, #c9a84c, #8a6a28);
|
||||
color: #1c1208;
|
||||
font-weight: 700;
|
||||
padding: 7px 18px;
|
||||
border-radius: 4px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
letter-spacing: 0.05em;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.print-btn:hover { opacity: 0.88; }
|
||||
|
||||
.section-label {
|
||||
font-family: 'Cinzel', serif;
|
||||
font-size: 9px;
|
||||
color: #c9a84c88;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- ═══════════════════ UI CHROME ═══════════════════ -->
|
||||
<div class="ui-panel no-print px-6 py-4">
|
||||
<div class="flex items-center justify-between flex-wrap gap-4">
|
||||
<div>
|
||||
<div class="font-cinzel text-gold text-xl font-bold tracking-widest" id="character-name"> </div>
|
||||
<div class="font-crimson text-sm text-yellow-200/50 italic" id="character-subtitle"> </div>
|
||||
</div>
|
||||
<button class="print-btn" onclick="window.print()">⬡ Print Cards</button>
|
||||
</div>
|
||||
|
||||
<!-- Toggle buttons -->
|
||||
<div class="mt-4 flex flex-wrap gap-6">
|
||||
<div>
|
||||
<div class="section-label">Filter by Type</div>
|
||||
<div class="flex gap-2 flex-wrap" id="type-filters">
|
||||
<button class="toggle-btn active" data-type="all" onclick="filterType(this,'all')">All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="section-label">Filter by School</div>
|
||||
<div class="flex gap-2 flex-wrap" id="school-filters">
|
||||
<button class="toggle-btn active" data-school="all" onclick="filterSchool(this,'all')">All</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════ CARD GRID ═══════════════════ -->
|
||||
<div class="print-area p-8" id="card-grid"
|
||||
style="display:flex;flex-wrap:wrap;gap:16px;">
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════ DATA + LOGIC ═══════════════════ -->
|
||||
<script>
|
||||
// Spell data lives under characters/<character-folder>/<level-folder>/<spell>.json,
|
||||
// indexed by a manifest.json so the browser knows which files to fetch.
|
||||
const CHARACTER_DIR = 'characters/oswin-eisenbach';
|
||||
|
||||
let SPELLS = [];
|
||||
|
||||
// ─── school abbreviations for pip
|
||||
const SCHOOL_ABBR = {
|
||||
Conjuration: 'CO', Transmutation: 'TR', Illusion: 'IL',
|
||||
Divination: 'DV', Evocation: 'EV', Abjuration: 'AB',
|
||||
Enchantment: 'EN', Necromancy: 'NE',
|
||||
};
|
||||
|
||||
let activeType = 'all';
|
||||
let activeSchool = 'all';
|
||||
|
||||
async function loadSpells() {
|
||||
const manifest = await fetch(`${CHARACTER_DIR}/manifest.json`).then(r => r.json());
|
||||
|
||||
document.getElementById('character-name').textContent = manifest.character;
|
||||
document.getElementById('character-subtitle').textContent = manifest.subtitle;
|
||||
|
||||
const typeLabels = {};
|
||||
for (const type of manifest.types) {
|
||||
typeLabels[type.level] = type.label;
|
||||
const spells = await Promise.all(
|
||||
type.files.map(file => fetch(`${CHARACTER_DIR}/${type.level}/${file}`).then(r => r.json()))
|
||||
);
|
||||
SPELLS.push(...spells);
|
||||
}
|
||||
|
||||
buildFilters(typeLabels);
|
||||
renderCards();
|
||||
}
|
||||
|
||||
function schoolClass(school) {
|
||||
return 'school-' + school.toLowerCase();
|
||||
}
|
||||
|
||||
function buildCard(spell) {
|
||||
const sc = schoolClass(spell.school);
|
||||
const abbr = SCHOOL_ABBR[spell.school] || spell.school.slice(0,2).toUpperCase();
|
||||
|
||||
const statsHtml = [
|
||||
`<span class="stat-chip"><span>Cast</span> ${spell.castingTime}</span>`,
|
||||
`<span class="stat-chip"><span>Range</span> ${spell.range}</span>`,
|
||||
`<span class="stat-chip"><span>Dur.</span> ${spell.duration}</span>`,
|
||||
spell.damage ? `<span class="stat-chip"><span>Dmg</span> ${spell.damage}</span>` : '',
|
||||
spell.saveDC ? `<span class="stat-chip"><span>Save</span> ${spell.saveDC}</span>` : '',
|
||||
spell.material ? `<span class="stat-chip"><span>M</span> ${spell.material}</span>` : '',
|
||||
].filter(Boolean).join('');
|
||||
|
||||
const descHtml = spell.desc.map(p => `<p>${p}</p>`).join('');
|
||||
const tagsHtml = (spell.tags||[]).map(t => `<span class="tag">${t}</span>`).join('');
|
||||
const isCantrip = spell.level === 'cantrip';
|
||||
const flagLabel = isCantrip ? 'Cantrip' : `Lvl ${spell.level} Spell`;
|
||||
|
||||
return `
|
||||
<div class="spell-card ${sc}"
|
||||
data-level="${spell.level}"
|
||||
data-school="${spell.school}">
|
||||
<div class="card-header flex items-start justify-between gap-2">
|
||||
<div>
|
||||
<div class="card-name">${spell.name}</div>
|
||||
<div class="card-level-school">${spell.levelDisplay} · ${spell.school}</div>
|
||||
</div>
|
||||
<div class="flex flex-col items-center gap-1">
|
||||
<div class="level-flag ${isCantrip ? 'level-flag-cantrip' : 'level-flag-spell'}">${flagLabel}</div>
|
||||
<div class="school-pip">${abbr}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-row">${statsHtml}</div>
|
||||
<div class="card-body">
|
||||
<div class="card-desc">${descHtml}</div>
|
||||
<div class="card-tags">${tagsHtml}</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<span class="footer-source">${spell.source}</span>
|
||||
<span class="footer-uses">${spell.uses}</span>
|
||||
</div>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
function buildFilters(typeLabels) {
|
||||
const typeContainer = document.getElementById('type-filters');
|
||||
for (const level of Object.keys(typeLabels)) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'toggle-btn';
|
||||
btn.dataset.type = level;
|
||||
btn.textContent = typeLabels[level];
|
||||
btn.onclick = () => filterType(btn, level);
|
||||
typeContainer.appendChild(btn);
|
||||
}
|
||||
|
||||
const schoolContainer = document.getElementById('school-filters');
|
||||
const schools = [...new Set(SPELLS.map(s => s.school))];
|
||||
for (const school of schools) {
|
||||
const btn = document.createElement('button');
|
||||
btn.className = 'toggle-btn';
|
||||
btn.dataset.school = school;
|
||||
btn.textContent = school;
|
||||
btn.onclick = () => filterSchool(btn, school);
|
||||
schoolContainer.appendChild(btn);
|
||||
}
|
||||
}
|
||||
|
||||
function renderCards() {
|
||||
const grid = document.getElementById('card-grid');
|
||||
const filtered = SPELLS.filter(s => {
|
||||
const typeOk = activeType === 'all' || s.level === activeType;
|
||||
const schoolOk = activeSchool === 'all' || s.school === activeSchool;
|
||||
return typeOk && schoolOk;
|
||||
});
|
||||
grid.innerHTML = filtered.map(buildCard).join('');
|
||||
}
|
||||
|
||||
function filterType(btn, val) {
|
||||
activeType = val;
|
||||
document.querySelectorAll('#type-filters .toggle-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
renderCards();
|
||||
}
|
||||
|
||||
function filterSchool(btn, val) {
|
||||
activeSchool = val;
|
||||
document.querySelectorAll('#school-filters .toggle-btn').forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
renderCards();
|
||||
}
|
||||
|
||||
loadSpells();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user