visions/ui/src/plugins/Candela/Charsheet.tsx

@@ -59,11 +59,15 @@ export type Charsheet = {
     style: string,
     catalyst: string,
     question: string,
-    role: string,
 
     nerve: Nerve,
     cunning: Cunning,
     intuition: Intuition,
+
+    role: string,
+    role_abilities: string[],
+    specialty: string,
+    specialty_abilities: string[],
 }
 
 interface CharsheetProps {
@@ -129,6 +133,27 @@ const ActionGroupElement = ({ group }: ActionGroupElementProps) => {
     </div>)
 }
 
+interface AbilitiesElementProps {
+    role: string
+    role_abilities: string[]
+    specialty: string
+    specialty_abilities: string[]
+}
+
+const AbilitiesElement = ({ role, role_abilities, specialty, specialty_abilities }: AbilitiesElementProps) => {
+    return (<div>
+        <h1> ROLE: {role} </h1>
+        <ul>
+            {role_abilities.map((ability) => <li>{ability}</li>)}
+        </ul>
+        <h1> SPECIALTY: {role} </h1>
+        <ul>
+            {specialty_abilities.map((ability) => <li>{ability}</li>)}
+        </ul>
+    </div>
+    );
+}
+
 const CharsheetElement_ = ({ sheet }: CharsheetProps) => {
     return (<div>
         <div className="charsheet__header">
@@ -150,7 +175,7 @@ const CharsheetElement_ = ({ sheet }: CharsheetProps) => {
                 <ActionGroupElement group={sheet.cunning} />
                 <ActionGroupElement group={sheet.intuition} />
             </div>
-            <div> Role and Specialty </div>
+            <div> <AbilitiesElement {...sheet} /> </div>
             <div> Marks, Scars, Relationships </div>
         </div>
     </div>);
@@ -165,10 +190,9 @@ export const CharsheetElement = () => {
         style: 'dapper gentleman',
         catalyst: 'a cursed book',
         question: 'What were the contents of that book?',
-        role: 'Slink',
         nerve: {
             type_: "nerve",
-            drives: { current: 2, max: 2 },
+            drives: { current: 1, max: 2 },
             resistances: { current: 0, max: 3 },
             move: { gilded: false, score: 2 },
             strike: { gilded: false, score: 1 },
@@ -189,7 +213,15 @@ export const CharsheetElement = () => {
             survey: { gilded: false, score: 0 },
             focus: { gilded: false, score: 0 },
             sense: { gilded: false, score: 0 },
-        } as Intuition
+        } as Intuition,
+        role: 'Slink',
+        role_abilities: [
+            'Scout: If you have time to observe a location, you can spend 1 Intuition to ask a question: What do I notice here that others do not see? What in this place might be of use to us? What path should we follow?',
+        ],
+        specialty: 'Detective',
+        specialty_abilities: [
+            "Mind Palace: When you want to figure out how two clues might relate or what path they should point you towards, burn 1 Intution resistance. The GM will give you the information you've deduced.",
+        ],
     };
 
     return <CharsheetElement_ sheet={sheet} />

visions/ui/src/plugins/Candela/DriveGuage/DriveGuage.tsx

@@ -16,7 +16,8 @@ export const DriveGuage = ({ current, max }: Guage) => {
                 <div className="drive-guage__bottom">&nbsp;</div>}
         </div>)
     }
-    components.splice(3, 1, <div className="drive-guage__spacer">&nbsp;</div>);
+    components.splice(3, 0, <div className="drive-guage__spacer">&nbsp;</div>);
+    components.splice(7, 0, <div className="drive-guage__spacer">&nbsp;</div>);
     return (<div className="drive-guage">
         {components}
     </div>)