f

Author: gregorriegler

.roo/.rules/general.md

@@ -0,0 +1,14 @@
+# Answering Rules
+ALWAYS start your answers with a STARTING_CHARACTER
+The default STARTING_CHARACTER is 🐙
+
+I prefer SHORT, SUCCINCT and CONCISE answers over long ones
+
+# Coding Rules
+NEVER USE COMMENTS
+
+declare and assign variables as close as possible to where they are used    
+
+I prefer SIMPLE design with fewer elements
+
+run the tests after each change using just `npm test`

webapp/src/RoleSheet.spec.tsx

@@ -56,6 +56,20 @@ describe('RoleSheet', () => {
 
         expect(mockScorePoints).toHaveBeenCalledWith("Talking", 2);
     })
+
+    it(`earn button stays when no todos are marked`, async () => {
+        const mockScorePoints = jest.fn();
+        render(<RoleSheet role="Typing" position="Typing" player={new Player("Roger")} scorePoints={mockScorePoints} />);
+        
+        const earnPointsButton = screen.getByLabelText('Earn Points');
+        expect(earnPointsButton).toBeInTheDocument();
+        
+        await clickEarnPoints();
+        
+        expect(mockScorePoints).toHaveBeenCalledTimes(0);
+        expect(earnPointsButton).toBeInTheDocument();
+    })
+
 })
 
 
@@ -67,7 +81,8 @@ async function checkTodo(todo) {
 }
 
 async function clickEarnPoints() {
-    const submitButton = screen.getByRole('button', { name: /Earn Points/ });
+    // Find the submit button within the form by its aria-label
+    const submitButton = screen.getByLabelText('Earn Points');
     await act(async () => {
         userEvent.click(submitButton);
     });

webapp/src/RoleSheet.tsx

@@ -21,11 +21,12 @@ export function RoleSheet({
 
     function onSubmitCheckboxes(e) {
         e.preventDefault();
-        // Only count checkboxes within this specific form for this role
         const checkboxes = e.target.querySelectorAll(`input[type="checkbox"][id^="${role}-"]:checked`);
         const amount = checkboxes.length;
-        scorePoints(role, amount);
-        setPointsScored(true);
+        if(amount > 0) {
+            scorePoints(role, amount);
+            setPointsScored(true);
+        }
     }
 
     return <div className="role">
@@ -43,14 +44,16 @@ export function RoleSheet({
         <EarnPointsForRole role={role} scorePoints={scorePoints} />
         <div>
             <form onSubmit={onSubmitCheckboxes}>
-                {role == position && roles[role].todos.map((s, index) => <div key={s}>
-                <input type="checkbox" id={`${role}-${index}`} className="earn-points-checkbox" style={{float: "left", display: "block", marginTop: "6px", width: "9%", minHeight: "20px"}} />
-                <div style={{marginLeft: "32px", margin: "4px", padding: "4px"}}>{s}</div>
-                </div>)}
+                {role == position && roles[role].todos.map((todo, index) => 
+                    <div key={todo}>
+                        <input type="checkbox" id={`${role}-${index}`} className="earn-points-checkbox" style={{float: "left", display: "block", marginTop: "6px", width: "9%", minHeight: "20px"}} />
+                        <div style={{marginLeft: "32px", margin: "4px", padding: "4px"}}>{todo}</div>
+                    </div>
+                )}
 
                 {!pointsScored && (
                     <button
-                        className="rpgui-button add-points-button"
+                        className="rpgui-button"
                         aria-label={"Earn Points"}>
                         <p>Earn</p>
                     </button>