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

fix: correct match diagram player positions to show teammates opposite each other

Browse Source
This commit is contained in:
David Gwilliam
2026-03-31 11:36:24 -07:00
parent 2062188cb3
commit f66242d569
1 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/matches/[id]/page.tsx
+26 -26
View File
@@ -89,7 +89,7 @@ export default async function MatchDetailPage({ params }: PageProps) {
<div className="relative p-8"> <div className="relative p-8">
{/* Table Square - Larger with more padding */} {/* Table Square - Larger with more padding */}
<div className="w-72 h-72 bg-amber-100 border-4 border-amber-600 rounded-xl 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 - Moved 20px up */} {/* 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-8"> <div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-8">
<div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm -mt-[20px]"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm -mt-[20px]">
<p className="text-base font-semibold text-amber-900"> <p className="text-base font-semibold text-amber-900">
@@ -107,34 +107,17 @@ export default async function MatchDetailPage({ params }: PageProps) {
<div className="text-xs text-amber-600 mt-2 font-medium">Team 1</div> <div className="text-xs text-amber-600 mt-2 font-medium">Team 1</div>
</div> </div>
{/* Bottom: Team 2 Player 2 - Moved 10px down */} {/* Bottom: Team 1 Player 2 - teammate opposite Top */}
<div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-8"> <div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-8">
<div className="text-xs text-red-600 mb-2 font-medium">Team 2</div> <div className="text-xs text-amber-600 mb-2 font-medium">Team 1</div>
<div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm mt-[10px]"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm mt-[10px]">
<p className="text-base font-semibold text-red-900"> <p className="text-base font-semibold text-amber-900">
{match.team2P2.name}
</p>
<p className="text-xs text-red-700">
Elo: {match.team2P2.currentElo}
{eloChanges[match.team2P2.id] !== undefined && (
<span className={eloChanges[match.team2P2.id] >= 0 ? "text-green-600 ml-1" : "text-red-600 ml-1"}>
({eloChanges[match.team2P2.id] >= 0 ? "+" : ""}{eloChanges[match.team2P2.id]})
</span>
)}
</p>
</div>
</div>
{/* Left: Team 1 Player 2 - Moved 20px left */}
<div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-8">
<div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[-90deg] -ml-[20px]">
<p className="text-sm font-semibold text-amber-900">
{match.team1P2.name} {match.team1P2.name}
</p> </p>
<p className="text-[11px] text-amber-700"> <p className="text-xs 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 ml-1" : "text-red-600 ml-1"}>
({eloChanges[match.team1P2.id] >= 0 ? "+" : ""}{eloChanges[match.team1P2.id]}) ({eloChanges[match.team1P2.id] >= 0 ? "+" : ""}{eloChanges[match.team1P2.id]})
</span> </span>
)} )}
@@ -142,9 +125,9 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
</div> </div>
{/* Right: Team 2 Player 1 - Moved 20px right */} {/* Left: Team 2 Player 1 */}
<div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-8"> <div className="absolute left-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pl-8">
<div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[90deg] -mr-[20px]"> <div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[-90deg] -ml-[20px]">
<p className="text-sm font-semibold text-red-900"> <p className="text-sm font-semibold text-red-900">
{match.team2P1.name} {match.team2P1.name}
</p> </p>
@@ -159,6 +142,23 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
</div> </div>
{/* Right: Team 2 Player 2 - teammate opposite Left */}
<div className="absolute right-0 top-0 bottom-0 w-1/2 flex flex-col justify-center items-center pr-8">
<div className="text-center bg-white/80 rounded-lg px-3 py-2 shadow-sm rotate-[90deg] -mr-[20px]">
<p className="text-sm font-semibold text-red-900">
{match.team2P2.name}
</p>
<p className="text-[11px] text-red-700">
Elo: {match.team2P2.currentElo}
{eloChanges[match.team2P2.id] !== undefined && (
<span className={eloChanges[match.team2P2.id] >= 0 ? "text-green-600" : "text-red-600"}>
({eloChanges[match.team2P2.id] >= 0 ? "+" : ""}{eloChanges[match.team2P2.id]})
</span>
)}
</p>
</div>
</div>
{/* 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-6 py-3 shadow-md"> <div className="bg-white border-2 border-gray-300 rounded-lg px-6 py-3 shadow-md">