alpha wip

2025-12-03 00:46:08 +01:00
parent 3b55fd1a63
commit 97e29d3d80
51 changed files with 6321 additions and 237 deletions
--- a/apps/website/app/leagues/page.tsx
+++ b/apps/website/app/leagues/page.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import LeagueCard from '@/components/alpha/LeagueCard';
+import CreateLeagueForm from '@/components/alpha/CreateLeagueForm';
+import Button from '@/components/ui/Button';
+import Card from '@/components/ui/Card';
+import { League } from '@/domain/entities/League';
+import { getLeagueRepository } from '@/lib/di-container';
+
+export default function LeaguesPage() {
+  const router = useRouter();
+  const [leagues, setLeagues] = useState<League[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [showCreateForm, setShowCreateForm] = useState(false);
+
+  useEffect(() => {
+    loadLeagues();
+  }, []);
+
+  const loadLeagues = async () => {
+    try {
+      const leagueRepo = getLeagueRepository();
+      const allLeagues = await leagueRepo.findAll();
+      setLeagues(allLeagues);
+    } catch (error) {
+      console.error('Failed to load leagues:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  if (loading) {
+    return (
+      <div className="max-w-6xl mx-auto">
+        <div className="text-center text-gray-400">Loading leagues...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto">
+        <div className="flex items-center justify-between mb-8">
+          <div>
+            <h1 className="text-3xl font-bold text-white mb-2">Leagues</h1>
+            <p className="text-gray-400">
+              {leagues.length === 0 
+                ? 'Create your first league to get started' 
+                : `${leagues.length} ${leagues.length === 1 ? 'league' : 'leagues'} available`}
+            </p>
+          </div>
+          
+          <Button
+            variant="primary"
+            onClick={() => setShowCreateForm(!showCreateForm)}
+          >
+            {showCreateForm ? 'Cancel' : 'Create League'}
+          </Button>
+        </div>
+
+        {showCreateForm && (
+          <Card className="mb-8 max-w-2xl mx-auto">
+            <div className="mb-6">
+              <h2 className="text-xl font-semibold text-white mb-2">Create New League</h2>
+              <p className="text-gray-400 text-sm">
+                Experiment with different point systems
+              </p>
+            </div>
+            <CreateLeagueForm />
+          </Card>
+        )}
+
+        {leagues.length === 0 ? (
+          <Card className="text-center py-12">
+            <div className="text-gray-400">
+              <svg
+                className="mx-auto h-12 w-12 text-gray-600 mb-4"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+                />
+              </svg>
+              <h3 className="text-lg font-medium text-white mb-2">No leagues yet</h3>
+              <p className="text-sm mb-4">
+                Create one to get started. Alpha data resets on page reload.
+              </p>
+              <Button
+                variant="primary"
+                onClick={() => setShowCreateForm(true)}
+              >
+                Create Your First League
+              </Button>
+            </div>
+          </Card>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {leagues.map((league) => (
+              <LeagueCard
+                key={league.id}
+                league={league}
+                onClick={() => handleLeagueClick(league.id)}
+              />
+            ))}
+          </div>
+          )}
+      </div>
+    );
+  }