total score on problem result screen

Author: battermann

src/App.tsx

@@ -658,6 +658,7 @@ export default function App() {
           problemIndex={lastResultIndex}
           problemCount={session.problems.length}
           result={session.results[lastResultIndex]}
+          totalMistakes={totalMistakes}
           remainingSeconds={session.remainingSeconds}
           onContinue={handleContinueFromResult}
           onBackHome={backHome}

src/components/ProblemResultScreen.tsx

@@ -8,6 +8,7 @@ type ProblemResultScreenProps = {
   problemIndex: number;
   problemCount: number;
   result: ProblemScoreResult;
+  totalMistakes: number;
   remainingSeconds: number;
   onContinue: () => void;
   onBackHome: () => void;
@@ -49,6 +50,7 @@ export function ProblemResultScreen({
   problemIndex,
   problemCount,
   result,
+  totalMistakes,
   remainingSeconds,
   onContinue,
   onBackHome,
@@ -58,10 +60,15 @@ export function ProblemResultScreen({
       <h1>
         Problem {problemIndex + 1} of {problemCount} Result
       </h1>
-      <Timer remainingSeconds={remainingSeconds} />
-      <p className="score-callout">
-        Mistake score: <strong>{result.mistakePoints}</strong>
-      </p>
+      <div className="status-row">
+        <Timer remainingSeconds={remainingSeconds} />
+        <p className="score-callout">
+          Problem score <strong>{result.mistakePoints}</strong>
+        </p>
+        <p className="score-callout">
+          Total score <strong>{totalMistakes}</strong>
+        </p>
+      </div>
 
       <div className="result-grid">
         <GoBoard

src/styles.css

@@ -169,13 +169,26 @@ button:disabled {
   margin-top: 2px;
 }
 
+.status-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.status-row .timer,
+.status-row .score-callout {
+  margin: 0;
+}
+
 .score-callout {
   display: flex;
   align-items: center;
   gap: 8px;
   width: fit-content;
   min-height: 34px;
-  margin-bottom: 16px;
+  margin: 0 0 16px;
   padding: 5px 10px;
   border: 1px solid rgba(143, 190, 255, 0.24);
   border-radius: 999px;