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">
{/* Table Square */}
<div className="w-48 h-48 bg-amber-100 border-4 border-amber-600 rounded-lg relative shadow-lg">
{/* Team 1 (Top) */}
<div className="absolute top-0 left-0 right-0 h-1/2 flex flex-col justify-end items-center pb-2 space-y-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="text-center">
<p className="text-sm font-medium text-amber-900">
{match.team1P1.name}
@@ -103,25 +103,12 @@ export default async function MatchDetailPage({ params }: PageProps) {
)}
</p>
</div>
<div className="text-xs text-amber-600">Team 1</div>
<div className="text-xs text-amber-600 mt-1">Team 1</div>
</div>
{/* Team 2 (Bottom) */}
<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="text-xs text-red-600">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>
{/* 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="text-xs text-red-600 mb-1">Team 2</div>
<div className="text-center">
<p className="text-sm font-medium text-red-900">
{match.team2P2.name}
@@ -137,7 +124,7 @@ export default async function MatchDetailPage({ params }: PageProps) {
</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="text-center rotate-[-90deg]">
<p className="text-xs font-medium text-amber-900">
@@ -154,17 +141,17 @@ export default async function MatchDetailPage({ params }: PageProps) {
</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="text-center rotate-[90deg]">
<p className="text-xs font-medium text-red-900">
{match.team2P2.name}
{match.team2P1.name}
</p>
<p className="text-[10px] 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]})
Elo: {match.team2P1.currentElo}
{eloChanges[match.team2P1.id] !== undefined && (
<span className={eloChanges[match.team2P1.id] >= 0 ? "text-green-600" : "text-red-600"}>
({eloChanges[match.team2P1.id] >= 0 ? "+" : ""}{eloChanges[match.team2P1.id]})
</span>
)}
</p>