From 7407bad3a8da0b4973361372ea1284ea2aea9805 Mon Sep 17 00:00:00 2001
From: dannybunschoten <danny.bunschoten02@gmail.com>
Date: Thu, 29 Aug 2024 16:51:04 +0200
Subject: [PATCH] add better styling to scoreboard

---
 app/components/Item.tsx      | 2 +-
 app/components/ScoreList.tsx | 6 ++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/app/components/Item.tsx b/app/components/Item.tsx
index cd1e06d..65eff13 100644
--- a/app/components/Item.tsx
+++ b/app/components/Item.tsx
@@ -31,7 +31,7 @@ export function Item({ item, isWinning }: { item: Fruit; isWinning: boolean }) {
       className={`flex items-center justify-center p-2 lg:p-4 ${isWinning ? "animate-[glow_0.7s_alternate_infinite]" : ""}`}
     >
       <Image
-        src={map[item]}
+        src={map[item] || seven}
         alt={item}
         className="h-[60px] w-[60px] rotate-180 lg:h-[96px] lg:w-[96px]"
         priority
diff --git a/app/components/ScoreList.tsx b/app/components/ScoreList.tsx
index 6099ad7..da17ac7 100644
--- a/app/components/ScoreList.tsx
+++ b/app/components/ScoreList.tsx
@@ -12,10 +12,8 @@ export const ScoreList = async () => {
     <ol className="list-inside list-decimal marker:text-black">
       {highScores.map((score, index) => (
         <li key={index} className="list-item text-3xl">
-          <div className="flex w-full items-center justify-between">
-            <span>{score.name}</span>
-            <span>{score.score}</span>
-          </div>
+          <span>{score.name || "Default User"}</span>
+          <span className="float-end">{score.score}</span>
         </li>
       ))}
     </ol>