MrDiderot/Michess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clarify game end reason in user profile history

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-06-13 12:41:20 +08:00
parent ad7bf5a989
commit e0f864347b
1 changed files with 94 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
client/src/app/user/[name]/page.tsx
View File

@@ -64,93 +64,102 @@ export default async function Profile({ params }: { params: { name: string } })
<div>
<h2 className="mb-1 text-lg font-bold">Recent games</h2>
<ul className="bg-base-300 flex h-[60vh] flex-col gap-1 overflow-y-scroll rounded-lg">
{data.recentGames.map((game) => (
<li
key={game.id}
className="border-base-100 flex flex-wrap items-center justify-between gap-8 border-b-2 p-3"
>
<div className="flex w-72 justify-between">
<div className="flex flex-col">
<span className="flex items-center gap-1 text-sm">
White
{game.winner === "white" && (
<span className="badge badge-xs badge-success">winner</span>
)}
</span>
<a
className={
"font-bold" +
(typeof game.white?.id === "number"
? " text-primary link-hover"
: " cursor-default")
}
href={
typeof game.white?.id === "number" && game.white?.id !== data.id
? `/user/${game.white?.name}`
: undefined
}
target="_blank"
rel="noopener noreferrer"
>
{game.white?.name}
</a>
</div>
<div className="flex flex-col items-end">
<span className="flex items-center gap-1 text-sm">
{game.winner === "black" && (
<span className="badge badge-xs badge-success">winner</span>
)}
Black
</span>
<a
className={
"font-bold" +
(typeof game.black?.id === "number"
? " text-primary link-hover"
: " cursor-default")
}
href={
typeof game.black?.id === "number" && game.black?.id !== data.id
? `/user/${game.black?.name}`
: undefined
}
target="_blank"
rel="noopener noreferrer"
>
{game.black?.name}
</a>
</div>
</div>
{data.recentGames.map((game) => {
let endReason = game.endReason as string;
if (endReason === "repetition") {
endReason = "threefold repetition";
} else if (endReason === "insufficient") {
endReason = "insufficient material";
}
<div className="flex-grow text-end text-xs">{game.endReason}</div>
<div className="flex flex-grow flex-col text-end">
<span className="text-xs">
Started
<span className="font-bold">
{" "}
{new Date(game.startedAt as number).toLocaleString()}
</span>
</span>
<span className="text-xs">
Ended
<span className="font-bold">
{" "}
{new Date(game.endedAt as number).toLocaleString()}
</span>
</span>
</div>
<a
className="btn btn-ghost flex-grow"
href={`/archive/${game.id}`}
target="_blank"
rel="noopener noreferrer"
return (
<li
key={game.id}
className="border-base-100 flex flex-wrap items-center justify-between gap-8 border-b-2 p-3"
>
Review game
</a>
</li>
))}
<div className="flex w-72 justify-between">
<div className="flex flex-col">
<span className="flex items-center gap-1 text-sm">
White
{game.winner === "white" && (
<span className="badge badge-xs badge-success">winner</span>
)}
</span>
<a
className={
"font-bold" +
(typeof game.white?.id === "number"
? " text-primary link-hover"
: " cursor-default")
}
href={
typeof game.white?.id === "number" && game.white?.id !== data.id
? `/user/${game.white?.name}`
: undefined
}
target="_blank"
rel="noopener noreferrer"
>
{game.white?.name}
</a>
</div>
<div className="flex flex-col items-end">
<span className="flex items-center gap-1 text-sm">
{game.winner === "black" && (
<span className="badge badge-xs badge-success">winner</span>
)}
Black
</span>
<a
className={
"font-bold" +
(typeof game.black?.id === "number"
? " text-primary link-hover"
: " cursor-default")
}
href={
typeof game.black?.id === "number" && game.black?.id !== data.id
? `/user/${game.black?.name}`
: undefined
}
target="_blank"
rel="noopener noreferrer"
>
{game.black?.name}
</a>
</div>
</div>
<div className="flex-grow text-end text-xs">{endReason}</div>
<div className="flex flex-grow flex-col text-end">
<span className="text-xs">
Started
<span className="font-bold">
{" "}
{new Date(game.startedAt as number).toLocaleString()}
</span>
</span>
<span className="text-xs">
Ended
<span className="font-bold">
{" "}
{new Date(game.endedAt as number).toLocaleString()}
</span>
</span>
</div>
<a
className="btn btn-ghost flex-grow"
href={`/archive/${game.id}`}
target="_blank"
rel="noopener noreferrer"
>
Review game
</a>
</li>
);
})}
</ul>
</div>
</div>