f show role only if in that position

Author: gregorriegler

webapp/src/PlayerDisplay.tsx

@@ -62,6 +62,7 @@ const PlayerDisplay = ({
         <RoleSheet
           key={role}
           role={role}
+          position={position}
           player={player}
           scorePoints={scorePoints}
         />

webapp/src/RoleSheet.spec.tsx

@@ -6,12 +6,23 @@ import { Role, levels, roles } from "./model/Roles";
 
 
 describe('RoleSheet', () => {
-    const firstLevelRoles = levels[0].map((name) => roles[name]);
-    firstLevelRoles.forEach((role) => it(`shows skills for the ${role.name} role`, () => {
-        render(<RoleSheet role={role.name as Role} player={new Player("Roger")} scorePoints={() => { }} />);
+    it(`shows Driver skills when in Driver position`, () => {
+        render(<RoleSheet role="Driver" position="Driver" player={new Player("Roger")} scorePoints={() => { }} />);
 
-        role.todos.forEach(todo => expect(screen.getByText(todo)).toBeInTheDocument())
-    }))
+        roles["Driver"].todos.forEach(todo => expect(screen.getByText(todo)).toBeInTheDocument())
+    });
+
+    it(`shows Navigator skills when in Navigator position`, () => {
+        render(<RoleSheet role="Navigator" position="Navigator" player={new Player("Roger")} scorePoints={() => { }} />);
+
+        roles["Navigator"].todos.forEach(todo => expect(screen.getByText(todo)).toBeInTheDocument())
+    });
+
+    it(`shows Mobber skills when in Mobber position`, () => {
+        render(<RoleSheet role="Mobber" position="Mobber" player={new Player("Roger")} scorePoints={() => { }} />);
+
+        roles["Mobber"].todos.forEach(todo => expect(screen.getByText(todo)).toBeInTheDocument())
+    });
 })
 
 // TODO if canEarnPoints for role, show skills of role

webapp/src/RoleSheet.tsx

@@ -7,12 +7,14 @@ import { EarnPointsForRoleForm } from "./EarnPointsForRoleForm";
 type RoleSheetProps = {
     player: Player;
     role: Role;
+    position: string;
     scorePoints: any;
 };
 
 export function RoleSheet({
     player,
     role,
+    position,
     scorePoints
 }: RoleSheetProps): JSX.Element {
     return <div className="role">
@@ -28,9 +30,10 @@ export function RoleSheet({
             />
         </label>
         <EarnPointsForRole role={role} scorePoints={scorePoints} />
-        {/* TODO: Add list of activities for this role */}
         <div>
-            {roles[role].todos.map(s => <div key={s}>{s}</div>)}
+            {role == "Driver" && position == "Driver" && roles[role].todos.map(s => <div key={s}>{s}</div>)}
+            {role == "Navigator" && position == "Navigator" && roles[role].todos.map(s => <div key={s}>{s}</div>)}
+            {role == "Mobber" && position == "Mobber" && roles[role].todos.map(s => <div key={s}>{s}</div>)}
         </div>
         {/*
                  some_function({role}) returns string (or list of strings) to display here....