feat: Add class levels; only allow for 3 primary classes

src/CharacterSheet.tsx

@@ -82,6 +82,7 @@ interface Bond {
 
 interface ClassEntry {
   name: string;
+  level: number;
   benefits: string;
   skills: string;
 }
@@ -324,10 +325,11 @@ export default function CharacterSheet() {
       bo: bonds.map((b) => ({ n: b.name, f: b.feelings })),
       pc: primaryClasses.map((c) => ({
         n: c.name,
+        lv: c.level,
         b: c.benefits,
         s: c.skills,
       })),
-      oc: otherClasses.map((c) => ({ n: c.name, b: c.benefits, s: c.skills })),
+      oc: otherClasses.map((c) => ({ n: c.name, lv: c.level, b: c.benefits, s: c.skills })),
       sp: spells.map((s) => ({
         n: s.name,
         cl: s.spellClass,
@@ -418,6 +420,7 @@ export default function CharacterSheet() {
       setPrimaryClasses(
         rawPrimary.map((c: SavedData) => ({
           name: c.n ?? c.name ?? "",
+          level: c.lv ?? c.level ?? 1,
           benefits: c.b ?? c.benefits ?? "",
           skills: c.s ?? c.skills ?? "",
         })),
@@ -428,6 +431,7 @@ export default function CharacterSheet() {
       setOtherClasses(
         rawOther.map((c: SavedData) => ({
           name: c.n ?? c.name ?? "",
+          level: c.lv ?? c.level ?? 1,
           benefits: c.b ?? c.benefits ?? "",
           skills: c.s ?? c.skills ?? "",
         })),
@@ -1237,8 +1241,7 @@ export default function CharacterSheet() {
         <div className="grid-2" style={{ marginBottom: 20 }}>
           <div className="section">
             <div className="section-title">
-              <span className="icon">✦</span> Primary Classes (up to 3 levels
+              <span className="icon">✦</span> Primary Classes (up to 3)
-              each)
             </div>
             {primaryClasses.map((cls, idx) => (
               <div key={idx} className="class-block">
@@ -1288,9 +1291,27 @@ export default function CharacterSheet() {
                     padding: "6px 10px",
                     borderTop: "1px solid var(--border)",
                     display: "flex",
-                    justifyContent: "flex-end",
+                    alignItems: "center",
+                    justifyContent: "space-between",
                   }}
                 >
+                  <label style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "0.85em" }}>
+                    Level
+                    <input
+                      type="number"
+                      min={1}
+                      max={10}
+                      value={cls.level ?? 1}
+                      onChange={(e) =>
+                        setPrimaryClasses((prev) =>
+                          prev.map((c, i) =>
+                            i === idx ? { ...c, level: Number(e.target.value) } : c,
+                          ),
+                        )
+                      }
+                      style={{ width: "50px" }}
+                    />
+                  </label>
                   <button
                     className="spell-del-btn"
                     onClick={() =>
@@ -1306,10 +1327,11 @@ export default function CharacterSheet() {
             ))}
             <button
               className="add-btn"
+              disabled={primaryClasses.length >= 3}
               onClick={() =>
                 setPrimaryClasses((prev) => [
                   ...prev,
-                  { name: "", benefits: "", skills: "" },
+                  { name: "", level: 1, benefits: "", skills: "" },
                 ])
               }
             >
@@ -1367,9 +1389,27 @@ export default function CharacterSheet() {
                     padding: "6px 10px",
                     borderTop: "1px solid var(--border)",
                     display: "flex",
-                    justifyContent: "flex-end",
+                    alignItems: "center",
+                    justifyContent: "space-between",
                   }}
                 >
+                  <label style={{ display: "flex", alignItems: "center", gap: "6px", fontSize: "0.85em" }}>
+                    Level
+                    <input
+                      type="number"
+                      min={1}
+                      max={10}
+                      value={cls.level ?? 1}
+                      onChange={(e) =>
+                        setOtherClasses((prev) =>
+                          prev.map((c, i) =>
+                            i === idx ? { ...c, level: Number(e.target.value) } : c,
+                          ),
+                        )
+                      }
+                      style={{ width: "50px" }}
+                    />
+                  </label>
                   <button
                     className="spell-del-btn"
                     onClick={() =>
@@ -1388,7 +1428,7 @@ export default function CharacterSheet() {
               onClick={() =>
                 setOtherClasses((prev) => [
                   ...prev,
-                  { name: "", benefits: "", skills: "" },
+                  { name: "", level: 1, benefits: "", skills: "" },
                 ])
               }
             >

src/fabula-ultima-sheet.css

@@ -852,6 +852,13 @@ input[type="number"] {
   color: var(--text-bright);
 }
 
+.add-btn:disabled {
+  color: var(--text-dim, #555);
+  border-color: var(--text-dim, #555);
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+
 .spell-picker-overlay {
   position: fixed;
   inset: 0;