From 44740bd30e44364e8e89a028a63149f60f7b78dc Mon Sep 17 00:00:00 2001
From: Marc Wieland <wieland.marc@gmx.de>
Date: Thu, 5 Jun 2025 23:51:50 +0200
Subject: [PATCH] Added scoreboard functionality

---
 src/pages/TeamDetailPage.tsx | 156 +++++++++++++++++++++--------------
 1 file changed, 96 insertions(+), 60 deletions(-)

diff --git a/src/pages/TeamDetailPage.tsx b/src/pages/TeamDetailPage.tsx
index 96b9473cf..264c66408 100644
--- a/src/pages/TeamDetailPage.tsx
+++ b/src/pages/TeamDetailPage.tsx
@@ -38,6 +38,8 @@ const TeamDetailPage = () => {
   last_updated: string;
 } | null>(null);
 
+const [showGames, setShowGames] = useState(false);
+
   useEffect(() => {
     const fetchTeam = async () => {
       try {
@@ -152,71 +154,105 @@ const TeamDetailPage = () => {
         </div>
       )}
 
-          {liveData && (
+          {liveData && Array.isArray(liveData.scoreboard) && liveData.scoreboard.length > 0 &&(
       <div className="mt-12">
-        <h2 className="text-2xl font-bold text-frog-600 dark:text-frog-400 mb-4">🏆 Aktuelle Tabelle</h2>
-        <div className="overflow-x-auto">
-          <table className="min-w-full bg-white dark:bg-neutral-800 rounded shadow">
-            <thead>
-              <tr className="bg-frog-100 dark:bg-frog-700 text-left text-sm font-semibold text-gray-700 dark:text-white">
-                <th className="p-2">Platz</th>
-                <th className="p-2">Team</th>
-                <th className="p-2">Spiele</th>
-                <th className="p-2">Siege</th>
-                <th className="p-2">Sätze</th>
-                <th className="p-2">Punkte</th>
+        {liveData && (
+  <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mt-12">
+    
+    {/* 🏆 Tabelle als Card */}
+    <div className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
+      <h2 className="text-xl font-bold text-frog-600 dark:text-frog-400 mb-4">
+        🏆 Aktuelle Tabelle
+      </h2>
+      <table className="w-full text-sm">
+        <thead>
+          <tr className="text-left text-gray-700 dark:text-white border-b border-gray-200 dark:border-neutral-700">
+            <th className="py-2">Platz</th>
+            <th className="py-2">Team</th>
+            <th className="py-2">Sp</th>
+            <th className="py-2">S</th>
+            <th className="py-2">Sätze</th>
+            <th className="py-2">P</th>
+          </tr>
+        </thead>
+        <tbody>
+          {liveData.scoreboard.map((row, i) => {
+            const isTop = row.platz === 1;
+            const isBottom = row.platz === liveData.scoreboard.length;
+            return (
+              <tr key={i} className="border-t border-gray-100 dark:border-neutral-700">
+                <td className="py-1 font-medium flex items-center gap-1">
+                  {row.platz}
+                  {isTop && <span className="text-green-600">▲</span>}
+                  {isBottom && <span className="text-red-600">▼</span>}
+                </td>
+                <td className="py-1">{row.team}</td>
+                <td className="py-1">{row.spiele}</td>
+                <td className="py-1">{row.siege}</td>
+                <td className="py-1">{row.saetze}</td>
+                <td className="py-1">{row.punkte}</td>
               </tr>
-            </thead>
-            <tbody>
-              {liveData.scoreboard.map((row, i) => {
-                const isTop = row.platz === 1;
-                const isBottom = row.platz === liveData.scoreboard.length;
+            );
+          })}
+        </tbody>
+      </table>
+      <p className="text-xs text-gray-500 dark:text-gray-400 mt-4">
+        Zuletzt aktualisiert:{" "}
+        {new Date(liveData.last_updated).toLocaleString("de-DE")}
+      </p>
+    </div>
 
-                return (
-                  <tr key={i} className="border-t dark:border-neutral-700">
-                    <td className="p-2 font-medium flex items-center gap-1">
-                      {row.platz}
-                      {isTop && <span className="text-green-600">▲</span>}
-                      {isBottom && <span className="text-red-600">▼</span>}
-                    </td>
-                    <td className="p-2">{row.team}</td>
-                    <td className="p-2">{row.spiele}</td>
-                    <td className="p-2">{row.siege}</td>
-                    <td className="p-2">{row.saetze}</td>
-                    <td className="p-2">{row.punkte}</td>
-                  </tr>
-                );
-              })}
-            </tbody>
+    {/* 📅 Spiele als Card */}
+    {/* 📅 Spiele als Card */}
+<div className="bg-white dark:bg-neutral-800 rounded-lg shadow-md p-6">
+  <div className="flex justify-between items-center mb-4">
+    <h2 className="text-xl font-bold text-frog-600 dark:text-frog-400">
+      📅 Spiele
+    </h2>
+    <button
+      onClick={() => setShowGames((prev) => !prev)}
+      className="text-sm text-frog-500 hover:underline focus:outline-none"
+    >
+      {showGames ? "Spiele ausblenden" : "Spiele anzeigen"}
+    </button>
+  </div>
 
-          </table>
-        </div>
+  {showGames && (
+    <table className="w-full text-sm">
+      <thead>
+        <tr className="text-left text-gray-700 dark:text-white border-b border-gray-200 dark:border-neutral-700">
+          <th className="py-2">Datum</th>
+          <th className="py-2">Team 1</th>
+          <th className="py-2">Team 2</th>
+          <th className="py-2">Ergebnis</th>
+          <th className="py-2">Sätze</th>
+        </tr>
+      </thead>
+      <tbody>
+        {liveData.spiele.map((spiel, i) => (
+          <tr key={i} className="border-t border-gray-100 dark:border-neutral-700">
+            <td className="py-1">{spiel.datum}</td>
+            <td className="py-1">{spiel.team1}</td>
+            <td className="py-1">{spiel.team2}</td>
+            <td className="py-1">{spiel.ergebnis}</td>
+            <td className="py-1">{spiel.satzverlauf}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )}
+
+  {!showGames && (
+    <p className="text-sm text-gray-500 dark:text-gray-400">
+      Klicke oben auf „Spiele anzeigen“, um die Begegnungen einzublenden.
+    </p>
+  )}
+</div>
+
+
+  </div>
+)}
 
-        <h2 className="text-2xl font-bold text-frog-600 dark:text-frog-400 mt-10 mb-4">📅 Spiele</h2>
-        <div className="overflow-x-auto">
-          <table className="min-w-full bg-white dark:bg-neutral-800 rounded shadow">
-            <thead>
-              <tr className="bg-frog-100 dark:bg-frog-700 text-left text-sm font-semibold text-gray-700 dark:text-white">
-                <th className="p-2">Datum</th>
-                <th className="p-2">Team 1</th>
-                <th className="p-2">Team 2</th>
-                <th className="p-2">Ergebnis</th>
-                <th className="p-2">Satzverlauf</th>
-              </tr>
-            </thead>
-            <tbody>
-              {liveData.spiele.map((spiel, i) => (
-                <tr key={i} className="border-t dark:border-neutral-700">
-                  <td className="p-2">{spiel.datum}</td>
-                  <td className="p-2">{spiel.team1}</td>
-                  <td className="p-2">{spiel.team2}</td>
-                  <td className="p-2">{spiel.ergebnis}</td>
-                  <td className="p-2">{spiel.satzverlauf}</td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
 
         <p className="text-sm text-gray-500 dark:text-gray-400 mt-4">
           Zuletzt aktualisiert: {new Date(liveData.last_updated).toLocaleString("de-DE")}