feat(ui): update home page with top players, recent tournament, and club president
This commit is contained in:
+231
-4
@@ -1,6 +1,233 @@
|
|||||||
import { redirect } from "next/navigation"
|
import { prisma } from "@/lib/prisma"
|
||||||
|
import Link from "next/link"
|
||||||
|
|
||||||
export default function Home() {
|
export default async function Home() {
|
||||||
// Redirect to rankings as the main entry point
|
// Fetch top 10 players by Elo rating
|
||||||
redirect("/rankings")
|
const topPlayers = await prisma.player.findMany({
|
||||||
|
orderBy: { currentElo: "desc" },
|
||||||
|
take: 10,
|
||||||
|
include: {
|
||||||
|
partnershipStats: true,
|
||||||
|
partnershipStats2: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch most recent tournament
|
||||||
|
const mostRecentTournament = await prisma.event.findFirst({
|
||||||
|
where: {
|
||||||
|
eventType: "tournament",
|
||||||
|
status: { not: "draft" }
|
||||||
|
},
|
||||||
|
orderBy: { eventDate: "desc" },
|
||||||
|
include: {
|
||||||
|
matches: {
|
||||||
|
include: {
|
||||||
|
team1P1: true,
|
||||||
|
team1P2: true,
|
||||||
|
team2P1: true,
|
||||||
|
team2P2: true,
|
||||||
|
},
|
||||||
|
orderBy: { playedAt: "desc" },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch club president (first user with club_admin role)
|
||||||
|
const clubPresident = await prisma.user.findFirst({
|
||||||
|
where: { role: "club_admin" },
|
||||||
|
select: { name: true, email: true },
|
||||||
|
})
|
||||||
|
|
||||||
|
// Calculate win rates for top players
|
||||||
|
const playersWithWinRates = topPlayers.map((player) => ({
|
||||||
|
...player,
|
||||||
|
winRate: player.gamesPlayed > 0
|
||||||
|
? (player.wins / player.gamesPlayed) * 100
|
||||||
|
: 0,
|
||||||
|
}))
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gradient-to-br from-green-50 to-blue-50">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||||
|
{/* Header Section */}
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h1 className="text-4xl md:text-5xl font-extrabold text-gray-900 mb-4">
|
||||||
|
EuchreCamp
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||||||
|
Track your Euchre games, tournaments, and partnership performance
|
||||||
|
with our comprehensive tournament management system.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Link
|
||||||
|
href="/auth/login"
|
||||||
|
className="px-8 py-3 bg-green-600 text-white rounded-lg font-semibold hover:bg-green-700 transition-colors"
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/auth/register"
|
||||||
|
className="px-8 py-3 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition-colors"
|
||||||
|
>
|
||||||
|
Create Account
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Top 10 Players Section */}
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||||
|
Top 10 Players
|
||||||
|
</h2>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="min-w-full divide-y divide-gray-200">
|
||||||
|
<thead className="bg-gray-50">
|
||||||
|
<tr>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Rank
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Player
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Elo Rating
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Games
|
||||||
|
</th>
|
||||||
|
<th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
||||||
|
Win Rate
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
|
{playersWithWinRates.map((player, index) => (
|
||||||
|
<tr key={player.id} className="hover:bg-gray-50">
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||||
|
{index + 1}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap">
|
||||||
|
<Link
|
||||||
|
href={`/players/${player.id}/profile`}
|
||||||
|
className="text-green-600 hover:text-green-900"
|
||||||
|
>
|
||||||
|
{player.name}
|
||||||
|
</Link>
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-900">
|
||||||
|
{player.currentElo}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{player.gamesPlayed}
|
||||||
|
</td>
|
||||||
|
<td className="px-4 py-2 whitespace-nowrap text-sm text-gray-500">
|
||||||
|
{player.gamesPlayed > 0
|
||||||
|
? `${player.winRate.toFixed(1)}%`
|
||||||
|
: "N/A"}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 text-center">
|
||||||
|
<Link
|
||||||
|
href="/rankings"
|
||||||
|
className="text-green-600 hover:text-green-900 font-medium"
|
||||||
|
>
|
||||||
|
View Full Rankings →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Most Recent Tournament Section */}
|
||||||
|
{mostRecentTournament && (
|
||||||
|
<div className="bg-white shadow rounded-lg p-6 mb-8">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||||
|
Most Recent Tournament
|
||||||
|
</h2>
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-xl font-semibold text-gray-800">
|
||||||
|
{mostRecentTournament.name}
|
||||||
|
</h3>
|
||||||
|
{mostRecentTournament.eventDate && (
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{new Date(mostRecentTournament.eventDate).toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
Status: {mostRecentTournament.status}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Tournament Matches */}
|
||||||
|
<div className="mt-6">
|
||||||
|
<h4 className="text-lg font-medium text-gray-900 mb-3">
|
||||||
|
Matches ({mostRecentTournament.matches.length})
|
||||||
|
</h4>
|
||||||
|
<div className="space-y-3 max-h-96 overflow-y-auto">
|
||||||
|
{mostRecentTournament.matches.map((match) => (
|
||||||
|
<div
|
||||||
|
key={match.id}
|
||||||
|
className="bg-gray-50 rounded-lg p-4 border border-gray-200"
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex-1 text-center">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{match.team1P1.name} & {match.team1P2.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-800">
|
||||||
|
{match.team1Score}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-3 text-gray-500">vs</div>
|
||||||
|
<div className="flex-1 text-center">
|
||||||
|
<div className="text-sm font-medium text-gray-900">
|
||||||
|
{match.team2P1.name} & {match.team2P2.name}
|
||||||
|
</div>
|
||||||
|
<div className="text-lg font-bold text-gray-800">
|
||||||
|
{match.team2Score}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="mt-2 text-center text-sm text-gray-500">
|
||||||
|
{match.playedAt && (
|
||||||
|
<span>
|
||||||
|
{new Date(match.playedAt).toLocaleDateString()} at{' '}
|
||||||
|
{new Date(match.playedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Club President Section */}
|
||||||
|
<div className="bg-white shadow rounded-lg p-6">
|
||||||
|
<h2 className="text-2xl font-bold text-gray-900 mb-4">
|
||||||
|
Club Information
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||||
|
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ml-4">
|
||||||
|
<h3 className="text-lg font-medium text-gray-900">Club President</h3>
|
||||||
|
<p className="text-gray-600">
|
||||||
|
{clubPresident?.name || clubPresident?.email || "Not assigned"}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -14,39 +14,39 @@ export default async function PlayerProfilePage({ params }: PageProps) {
|
|||||||
|
|
||||||
const player = await prisma.player.findUnique({
|
const player = await prisma.player.findUnique({
|
||||||
where: { id: playerId },
|
where: { id: playerId },
|
||||||
include: {
|
|
||||||
partnershipStats: {
|
|
||||||
include: {
|
|
||||||
player1: true,
|
|
||||||
player2: true,
|
|
||||||
},
|
|
||||||
orderBy: { gamesPlayed: "desc" },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!player) {
|
if (!player) {
|
||||||
notFound()
|
notFound()
|
||||||
}
|
}
|
||||||
|
|
||||||
// Calculate overall statistics
|
// Get partnership stats separately
|
||||||
const totalGames = player.partnershipStats.reduce(
|
const partnershipStats = await prisma.partnershipStat.findMany({
|
||||||
(sum, stat) => sum + stat.gamesPlayed,
|
where: {
|
||||||
0
|
OR: [
|
||||||
)
|
{ player1Id: playerId },
|
||||||
const totalWins = player.partnershipStats.reduce(
|
{ player2Id: playerId },
|
||||||
(sum, stat) => sum + stat.wins,
|
],
|
||||||
0
|
},
|
||||||
)
|
include: {
|
||||||
|
player1: true,
|
||||||
|
player2: true,
|
||||||
|
},
|
||||||
|
orderBy: { gamesPlayed: "desc" },
|
||||||
|
})
|
||||||
|
|
||||||
|
// Use direct player stats for overall statistics (more accurate and consistent with rankings page)
|
||||||
|
const totalGames = player.gamesPlayed
|
||||||
|
const totalWins = player.wins
|
||||||
const winRate = totalGames > 0 ? ((totalWins / totalGames) * 100).toFixed(1) : "0.0"
|
const winRate = totalGames > 0 ? ((totalWins / totalGames) * 100).toFixed(1) : "0.0"
|
||||||
|
|
||||||
// Get best partnership
|
// Get best partnership
|
||||||
const bestPartnership = player.partnershipStats.reduce((best, stat) => {
|
const bestPartnership = partnershipStats.reduce((best, stat) => {
|
||||||
if (stat.gamesPlayed < 3) return best // Need at least 3 games for partnership to be meaningful
|
if (stat.gamesPlayed < 3) return best // Need at least 3 games for partnership to be meaningful
|
||||||
const currentRate = stat.wins / stat.gamesPlayed
|
const currentRate = stat.wins / stat.gamesPlayed
|
||||||
const bestRate = best ? best.wins / best.gamesPlayed : 0
|
const bestRate = best ? best.wins / best.gamesPlayed : 0
|
||||||
return currentRate > bestRate ? stat : best
|
return currentRate > bestRate ? stat : best
|
||||||
}, null as typeof player.partnershipStats[0] | null)
|
}, null as (typeof partnershipStats[0] | null))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gray-50">
|
<div className="min-h-screen bg-gray-50">
|
||||||
@@ -101,7 +101,7 @@ export default async function PlayerProfilePage({ params }: PageProps) {
|
|||||||
Partnership Performance
|
Partnership Performance
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
{player.partnershipStats.length === 0 ? (
|
{partnershipStats.length === 0 ? (
|
||||||
<p className="text-gray-500">No partnership data available yet.</p>
|
<p className="text-gray-500">No partnership data available yet.</p>
|
||||||
) : (
|
) : (
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto">
|
||||||
@@ -126,7 +126,7 @@ export default async function PlayerProfilePage({ params }: PageProps) {
|
|||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
{player.partnershipStats.map((stat) => {
|
{partnershipStats.map((stat) => {
|
||||||
const partner =
|
const partner =
|
||||||
stat.player1Id === player.id ? stat.player2 : stat.player1
|
stat.player1Id === player.id ? stat.player2 : stat.player1
|
||||||
const winRate = stat.gamesPlayed > 0
|
const winRate = stat.gamesPlayed > 0
|
||||||
|
|||||||
Reference in New Issue
Block a user