fix: correct match diagram player positions

This commit is contained in:
2026-03-31 03:44:23 -07:00
parent 81c8bdf821
commit ce1b01b44d
+13 -26
View File
@@ -88,8 +88,8 @@ export default async function MatchDetailPage({ params }: PageProps) {
<div className="relative"> <div className="relative">
{/* Table Square */} {/* Table Square */}
<div className="w-48 h-48 bg-amber-100 border-4 border-amber-600 rounded-lg relative shadow-lg"> <div className="w-48 h-48 bg-amber-100 border-4 border-amber-600 rounded-lg relative shadow-lg">
{/* Team 1 (Top) */} {/* 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 space-y-1"> <div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-2">
<div className="text-center"> <div className="text-center">
<p className="text-sm font-medium text-amber-900"> <p className="text-sm font-medium text-amber-900">
{match.team1P1.name} {match.team1P1.name}
@@ -103,25 +103,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
)} )}
</p> </p>
</div> </div>
<div className="text-xs text-amber-600">Team 1</div> <div className="text-xs text-amber-600 mt-1">Team 1</div>
</div> </div>
{/* Team 2 (Bottom) */} {/* 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 space-y-1"> <div className="absolute bottom-0 left-0 right-0 h-1/2 flex flex-col justify-start items-center pt-2">
<div className="text-xs text-red-600">Team 2</div> <div className="text-xs text-red-600 mb-1">Team 2</div>
<div className="text-center">
<p className="text-sm font-medium text-red-900">
{match.team2P1.name}
</p>
<p className="text-xs text-red-700">
Elo: {match.team2P1.currentElo}
{eloChanges[match.team2P1.id] !== undefined && (
<span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600 ml-1" : "text-red-600 ml-1"}>
({eloChanges[match.team2P1.id] >= 0 ? "+" : ""}{eloChanges[match.team2P1.id]})
</span>
)}
</p>
</div>
<div className="text-center"> <div className="text-center">
<p className="text-sm font-medium text-red-900"> <p className="text-sm font-medium text-red-900">
{match.team2P2.name} {match.team2P2.name}
@@ -137,7 +124,7 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
</div> </div>
{/* Left side - 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-2">
<div className="text-center rotate-[-90deg]"> <div className="text-center rotate-[-90deg]">
<p className="text-xs font-medium text-amber-900"> <p className="text-xs font-medium text-amber-900">
@@ -154,17 +141,17 @@ export default async function MatchDetailPage({ params }: PageProps) {
</div> </div>
</div> </div>
{/* Right side - Team 2 (Player 2) */} {/* 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-2">
<div className="text-center rotate-[90deg]"> <div className="text-center rotate-[90deg]">
<p className="text-xs font-medium text-red-900"> <p className="text-xs font-medium text-red-900">
{match.team2P2.name} {match.team2P1.name}
</p> </p>
<p className="text-[10px] text-red-700"> <p className="text-[10px] text-red-700">
Elo: {match.team2P2.currentElo} Elo: {match.team2P1.currentElo}
{eloChanges[match.team2P2.id] !== undefined && ( {eloChanges[match.team2P1.id] !== undefined && (
<span className={eloChanges[match.team2P2.id] >= 0 ? "text-green-600" : "text-red-600"}> <span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600" : "text-red-600"}>
({eloChanges[match.team2P2.id] >= 0 ? "+" : ""}{eloChanges[match.team2P2.id]}) ({eloChanges[match.team2P1.id] >= 0 ? "+" : ""}{eloChanges[match.team2P1.id]})
</span> </span>
)} )}
</p> </p>