feat: overhaul puzzle log

Author: kevinjosethomas

src/components/Training/PuzzleLog.tsx

@@ -15,32 +15,98 @@ export const PuzzleLog: React.FC<Props> = ({
   setCurrentIndex,
 }: Props) => {
   return (
-    <div className="flex flex-row flex-wrap items-start justify-start gap-1 overflow-y-auto">
-      {previousGameResults.map((game, index) => (
-        <button
-          key={game.id}
-          onClick={() => setCurrentIndex(index)}
-          className={`${game.result ? 'bg-engine-4' : game.result === undefined ? 'bg-button-secondary' : 'bg-human-4'} flex h-10 w-10 cursor-pointer flex-col items-center justify-center rounded-sm`}
-        >
-          {game.ratingDiff ? (
-            <>
-              <i
-                className={`material-symbols-outlined -mt-1 ${game.ratingDiff >= 0 ? 'text-blue-200' : 'text-red-300'}`}
-              >
-                {game.ratingDiff >= 0 ? 'arrow_drop_up' : 'arrow_drop_down'}
-              </i>
-              <p
-                className={`-mt-2 text-xs tracking-widest ${game.ratingDiff >= 0 ? 'text-blue-200' : 'text-red-300'}`}
+    <div className="flex h-full flex-col overflow-hidden rounded bg-background-1">
+      <div className="border-b border-white border-opacity-10 px-3 py-2">
+        <h3 className="text-sm font-medium text-primary">Puzzle History</h3>
+      </div>
+      <div className="red-scrollbar flex flex-1 flex-col overflow-y-auto">
+        {previousGameResults.length === 0 ? (
+          <div className="flex flex-1 items-center justify-center p-4">
+            <p className="text-xs text-secondary">No puzzles completed yet</p>
+          </div>
+        ) : (
+          previousGameResults.map((game, index) => {
+            const isCurrentPuzzle = index === previousGameResults.length - 1
+            const getStatusInfo = () => {
+              if (game.result === true) {
+                return {
+                  label: 'Correct',
+                  color: 'text-green-400',
+                  bgColor: 'bg-green-900/20 hover:bg-green-900/30',
+                }
+              } else if (game.result === false) {
+                return {
+                  label: 'Incorrect',
+                  color: 'text-red-400',
+                  bgColor: 'bg-red-900/20 hover:bg-red-900/30',
+                }
+              } else {
+                return {
+                  label: isCurrentPuzzle ? 'Current' : 'In Progress',
+                  color: 'text-secondary',
+                  bgColor: 'bg-blue-900/20 hover:bg-blue-900/30',
+                }
+              }
+            }
+
+            const statusInfo = getStatusInfo()
+            const puzzleNumber = index + 1
+
+            return (
+              <button
+                key={game.id}
+                onClick={() => setCurrentIndex(index)}
+                className={`group flex w-full cursor-pointer items-center gap-2 border-b border-white/5 px-3 py-2 text-left transition-colors ${
+                  isCurrentPuzzle
+                    ? 'bg-background-2 font-medium'
+                    : `${statusInfo.bgColor} hover:bg-background-2`
+                }`}
               >
-                {game.ratingDiff >= 0 && '+'}
-                {game.ratingDiff}
-              </p>
-            </>
-          ) : (
-            <></>
-          )}
-        </button>
-      ))}
+                <div className="flex min-w-0 flex-1 flex-col">
+                  <div className="flex items-center justify-between">
+                    <p className="truncate text-xs font-medium text-primary">
+                      Puzzle #{puzzleNumber}
+                    </p>
+                    <span className={`text-xs font-medium ${statusInfo.color}`}>
+                      {statusInfo.label}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <p className="text-xs text-secondary">
+                      Puzzle Rating: {game.puzzle_elo}
+                    </p>
+                    {game.ratingDiff !== undefined && (
+                      <div className="flex items-center">
+                        <span
+                          className={`material-symbols-outlined text-sm ${
+                            game.ratingDiff >= 0
+                              ? 'text-green-400'
+                              : 'text-red-400'
+                          }`}
+                        >
+                          {game.ratingDiff >= 0
+                            ? 'arrow_drop_up'
+                            : 'arrow_drop_down'}
+                        </span>
+                        <span
+                          className={`text-xs font-medium ${
+                            game.ratingDiff >= 0
+                              ? 'text-green-400'
+                              : 'text-red-400'
+                          }`}
+                        >
+                          {game.ratingDiff >= 0 ? '+' : ''}
+                          {game.ratingDiff}
+                        </span>
+                      </div>
+                    )}
+                  </div>
+                </div>
+              </button>
+            )
+          })
+        )}
+      </div>
     </div>
   )
 }

src/pages/train.tsx

@@ -102,11 +102,19 @@ const TrainPage: NextPage = () => {
 
   useEffect(() => {
     if (currentIndex == trainingGames.length - 1) {
-      setStatus('default')
+      // For the current puzzle, only set to 'default' if it hasn't been completed yet
+      const currentPuzzleResult = previousGameResults[currentIndex]
+      if (currentPuzzleResult?.result !== undefined) {
+        // Puzzle was completed - preserve the correct status
+        setStatus(currentPuzzleResult.result ? 'correct' : 'forfeit')
+      } else {
+        // Puzzle not completed yet - set to default
+        setStatus('default')
+      }
     } else {
       setStatus('archived')
     }
-  }, [currentIndex])
+  }, [currentIndex, previousGameResults])
 
   const logGuess = useCallback(
     async (