drew/fabula-ultima-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

polish/arcana-spells-resize #6

Merged
drew merged 3 commits from polish/arcana-spells-resize into master 2026-06-26 17:54:36 -04:00
Conversation 0 Commits 3 Files Changed 11 +105 -82
2 changed files with 105 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b6d8e34090 - Show all commits

170
src/CharacterSheet.tsx
View File

@@ -1335,88 +1335,94 @@ export default function CharacterSheet() {
</thead>
<tbody>
{spells.map((s, i) => (
<tr key={i}>
<td className="spell-name-col">
<input
type="text"
placeholder="Spell / Arcana name…"
value={s.name || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, name: e.target.value } : sp,
),
)
}
/>
<textarea
placeholder="Notes / effect description…"
value={s.notes || ""}
ref={(el) => { if (el) autoResize(el); }}
onInput={(e) => autoResize(e.currentTarget)}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, notes: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-mp-col">
<input
type="number"
placeholder="0"
value={s.mp || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, mp: e.target.value } : sp,
),
)
}
style={{ minHeight: 32 }}
/>
</td>
<td className="spell-targets-col">
<input
type="text"
placeholder="Target(s)…"
value={s.targets || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, targets: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-dur-col">
<input
type="text"
placeholder="Duration…"
value={s.duration || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, duration: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-del-col">
<button
className="spell-del-btn"
onClick={() =>
setSpells((prev) => prev.filter((_, j) => j !== i))
}
>
✕
</button>
</td>
</tr>
<React.Fragment key={i}>
<tr className="spell-inputs-row">
<td className="spell-name-col">
<input
type="text"
placeholder="Spell / Arcana name…"
value={s.name || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, name: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-mp-col">
<input
type="number"
placeholder="0"
value={s.mp || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, mp: e.target.value } : sp,
),
)
}
style={{ minHeight: 32 }}
/>
</td>
<td className="spell-targets-col">
<input
type="text"
placeholder="Target(s)…"
value={s.targets || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, targets: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-dur-col">
<input
type="text"
placeholder="Duration…"
value={s.duration || ""}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, duration: e.target.value } : sp,
),
)
}
/>
</td>
<td className="spell-del-col">
<button
className="spell-del-btn"
onClick={() =>
setSpells((prev) => prev.filter((_, j) => j !== i))
}
>
✕
</button>
</td>
</tr>
<tr className="spell-notes-row">
<td colSpan={5}>
<textarea
placeholder="Notes / effect description…"
value={s.notes || ""}
ref={(el) => { if (el) autoResize(el); }}
onInput={(e) => autoResize(e.currentTarget)}
onChange={(e) =>
setSpells((prev) =>
prev.map((sp, j) =>
j === i ? { ...sp, notes: e.target.value } : sp,
),
)
}
/>
</td>
</tr>
</React.Fragment>
))}
</tbody>
</table>

17
src/fabula-ultima-sheet.css
View File

@@ -765,6 +765,23 @@ input[type="number"] {
min-height: 55px;
}
.spell-inputs-row td {
border-bottom: none;
padding-top: 10px;
}
.spell-notes-row td {
padding-top: 0;
padding-bottom: 10px;
}
.spell-notes-row textarea {
display: block;
width: 100%;
min-height: 0;
box-sizing: border-box;
}
.spell-name-col {
width: 35%;
}