show correct/incorrect markers on locked predictions when results are in

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/client/src/components/predictions-form.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react"
-import type { Entry, Prediction } from "@celebrate-esc/shared"
+import type { Entry, Prediction, ActualResults } from "@celebrate-esc/shared"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 
@@ -20,10 +20,11 @@ interface PredictionsFormProps {
 	entries: Entry[]
 	existingPrediction: Prediction | null
 	locked: boolean
+	actualResults?: ActualResults | null
 	onSubmit: (prediction: { first: string; second: string; third: string; last: string }) => void
 }
 
-export function PredictionsForm({ entries, existingPrediction, locked, onSubmit }: PredictionsFormProps) {
+export function PredictionsForm({ entries, existingPrediction, locked, actualResults, onSubmit }: PredictionsFormProps) {
 	const [slots, setSlots] = useState<Record<SlotKey, string | null>>(() => {
 		if (existingPrediction) {
 			return {
@@ -67,15 +68,26 @@ export function PredictionsForm({ entries, existingPrediction, locked, onSubmit
 		return (
 			<Card>
 				<CardHeader>
-					<CardTitle>Your Predictions (locked)</CardTitle>
+					<CardTitle>Your Predictions {actualResults ? "(scored)" : "(locked)"}</CardTitle>
 				</CardHeader>
 				<CardContent className="flex flex-col gap-2">
 					{SLOTS.map((slot) => {
 						const entry = findEntry(existingPrediction[slot.key])
+						const isCorrect = actualResults
+							? slot.key === "first" ? existingPrediction.first === actualResults.winner
+							: slot.key === "second" ? existingPrediction.second === actualResults.second
+							: slot.key === "third" ? existingPrediction.third === actualResults.third
+							: existingPrediction.last === actualResults.last
+							: null
 						return (
 							<div key={slot.key} className="flex items-center gap-2 rounded-md border p-2">
 								<span className="w-20 text-xs font-medium text-muted-foreground">{slot.label}</span>
 								<span className="text-sm">{entry ? formatEntry(entry) : "—"}</span>
+								{isCorrect !== null && (
+									<span className={isCorrect ? "ml-auto text-green-600" : "ml-auto text-red-500"}>
+										{isCorrect ? "✓" : "✗"}
+									</span>
+								)}
 							</div>
 						)
 					})}