david/euchre_camp
Public Access
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases 1 Wiki Activity

fix: increase match diagram size and improve player visibility

Browse Source
This commit is contained in:
David Gwilliam
2026-03-31 03:47:22 -07:00
parent ce1b01b44d
commit 63956e8087
1 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/matches/[id]/page.tsx
+23 -23
View File
@@ -85,13 +85,13 @@ export default async function MatchDetailPage({ params }: PageProps) {
<h2 className="text-xl font-bold text-gray-900 mb-4">Match Setup</h2> <h2 className="text-xl font-bold text-gray-900 mb-4">Match Setup</h2>
<div className="flex justify-center"> <div className="flex justify-center">
<div className="relative"> <div className="relative p-8">
{/* Table Square */} {/* Table Square - Larger with more padding */}
<div className="w-48 h-48 bg-amber-100 border-4 border-amber-600 rounded-lg relative shadow-lg"> <div className="w-72 h-72 bg-amber-100 border-4 border-amber-600 rounded-xl relative shadow-lg">
{/* Top: Team 1 Player 1 */} {/* Top: Team 1 Player 1 */}
<div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-2"> <div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-4">
<div className="text-center"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm">
<p className="text-sm font-medium text-amber-900"> <p className="text-base font-semibold text-amber-900">
{match.team1P1.name} {match.team1P1.name}
</p> </p>
<p className="text-xs text-amber-700"> <p className="text-xs text-amber-700">
@@ -103,14 +103,14 @@ export default async function MatchDetailPage({ params }: PageProps) {
)} )}
</p> </p>
</div> </div>
<div className="text-xs text-amber-600 mt-1">Team 1</div> <div className="text-xs text-amber-600 mt-2 font-medium">Team 1</div>
</div> </div>
{/* Bottom: Team 2 Player 2 */} {/* Bottom: Team 2 Player 2 */}
<div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-2"> <div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-4">
<div className="text-xs text-red-600 mb-1">Team 2</div> <div className="text-xs text-red-600 mb-2 font-medium">Team 2</div>
<div className="text-center"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm">
<p className="text-sm font-medium text-red-900"> <p className="text-base font-semibold text-red-900">
{match.team2P2.name} {match.team2P2.name}
</p> </p>
<p className="text-xs text-red-700"> <p className="text-xs text-red-700">
@@ -125,12 +125,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
{/* Left: Team 1 Player 2 */} {/* Left: Team 1 Player 2 */}
<div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-2"> <div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-4">
<div className="text-center rotate-[-90deg]"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[-90deg]">
<p className="text-xs font-medium text-amber-900"> <p className="text-sm font-semibold text-amber-900">
{match.team1P2.name} {match.team1P2.name}
</p> </p>
<p className="text-[10px] text-amber-700"> <p className="text-[11px] text-amber-700">
Elo: {match.team1P2.currentElo} Elo: {match.team1P2.currentElo}
{eloChanges[match.team1P2.id] !== undefined && ( {eloChanges[match.team1P2.id] !== undefined && (
<span className={eloChanges[match.team1P2.id] >= 0 ? "text-green-600" : "text-red-600"}> <span className={eloChanges[match.team1P2.id] >= 0 ? "text-green-600" : "text-red-600"}>
@@ -142,12 +142,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
{/* Right: Team 2 Player 1 */} {/* Right: Team 2 Player 1 */}
<div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-2"> <div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-4">
<div className="text-center rotate-[90deg]"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[90deg]">
<p className="text-xs font-medium text-red-900"> <p className="text-sm font-semibold text-red-900">
{match.team2P1.name} {match.team2P1.name}
</p> </p>
<p className="text-[10px] text-red-700"> <p className="text-[11px] text-red-700">
Elo: {match.team2P1.currentElo} Elo: {match.team2P1.currentElo}
{eloChanges[match.team2P1.id] !== undefined && ( {eloChanges[match.team2P1.id] !== undefined && (
<span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600" : "text-red-600"}> <span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600" : "text-red-600"}>
@@ -160,16 +160,16 @@ export default async function MatchDetailPage({ params }: PageProps) {
{/* Score in Center */} {/* Score in Center */}
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="bg-white border-2 border-gray-300 rounded-lg px-4 py-2 shadow-md"> <div className="bg-white border-2 border-gray-300 rounded-lg px-6 py-3 shadow-md">
<div className="text-center"> <div className="text-center">
<p className="text-lg font-bold text-amber-600"> <p className="text-xl font-bold text-amber-600">
{match.team1Score} {match.team1Score}
</p> </p>
<p className="text-xs text-gray-500">Team 1</p> <p className="text-xs text-gray-500">Team 1</p>
</div> </div>
<div className="text-center text-gray-400">—</div> <div className="text-center text-gray-400 text-lg">—</div>
<div className="text-center"> <div className="text-center">
<p className="text-lg font-bold text-red-600"> <p className="text-xl font-bold text-red-600">
{match.team2Score} {match.team2Score}
</p> </p>
<p className="text-xs text-gray-500">Team 2</p> <p className="text-xs text-gray-500">Team 2</p>