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

layout adjustments to fit screen height

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-02-24 11:45:16 +08:00
parent 44d95f526e
commit 3ccbd57e8f
3 changed files with 51 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app/Navbar.tsx
View File

@@ -10,7 +10,7 @@ export default function Navbar() {
className="btn btn-ghost no-animation gap-1 text-xl normal-case hover:bg-transparent"
>
chessu
<span className="badge badge-sm">alpha</span>
<span className="badge badge-sm mt-1">alpha</span>
</Link>
</div>
<div className="flex-none">

91
client/src/app/game/[code]/page.tsx
View File

@@ -9,58 +9,65 @@ const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+ Bx
export default function Game() {
return (
<div className="flex w-full flex-wrap justify-center gap-6 px-4 py-10 lg:gap-10 2xl:gap-16">
<div className="flex w-full flex-wrap justify-center gap-6 px-4 py-4 lg:gap-10 2xl:gap-16">
<div className="flex flex-col items-center justify-center gap-1">
<div className="flex w-full items-center gap-1">
<div className="avatar">
<div className="w-10 rounded-md">
<Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
</div>
</div>
nize
</div>
<Chessboard
boardWidth={500}
/* 350 for mobile, 500 for md up (^768px screen), 550 for 2xl up (^1536px), 600 for ^1920px */
boardWidth={480}
/* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px */
customDarkSquareStyle={{ backgroundColor: "#4b7399" }}
customLightSquareStyle={{ backgroundColor: "#eae9d2" }}
/>
<div className="flex w-full items-center gap-1">
<div className="avatar">
<div className="w-10 rounded-md">
<Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
</div>
</div>
gwapo
</div>
</div>
<div className="flex max-w-lg flex-1 flex-col items-center justify-center gap-4">
<div className="mb-auto flex w-full flex-col items-end justify-center gap-1">
Invite friends:
<div className="badge badge-md gap-1 font-mono">
<IconCopy size={16} />
ches.su/game/123abc
<div className="mb-auto flex w-full">
<div className="flex flex-1 flex-col items-center justify-between">
<div className="flex w-full items-center gap-1">
<div className="avatar">
<div className="w-8 rounded-md">
<Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
</div>
</div>
nize
</div>
<div className="flex w-full items-center gap-1">
<div className="avatar">
<div className="w-8 rounded-md">
<Image src="/assets/default_avatar.png" alt="avatar" width={32} height={32} />
</div>
</div>
notnize
</div>
</div>
<div className="flex flex-1 flex-col gap-1">
<div className="flex w-full flex-col items-end gap-1">
Invite friends:
<div className="badge badge-md gap-1 font-mono">
<IconCopy size={16} />
ches.su/game/123abc
</div>
</div>
<div className="w-full">
move list table
{pgn
.split(/\d+\./)
.filter((move) => move.trim() !== "")
.map((moveSet, i) => {
const moves = moveSet.trim().split(" ");
return (
<div className="flex w-full items-center gap-1" key={i + 1}>
<div className="badge badge-md">{i + 1}</div>
<div className="badge badge-md">{moves[0]}</div>
<div className="badge badge-md">{moves[1]}</div>
</div>
);
})}
</div>
</div>
</div>
<div className="mb-auto w-full">
{pgn
.split(/\d+\./)
.filter((move) => move.trim() !== "")
.map((moveSet, i) => {
const moves = moveSet.trim().split(" ");
return (
<div className="flex w-full items-center gap-1" key={i + 1}>
<div className="badge badge-md">{i + 1}</div>
<div className="badge badge-md">{moves[0]}</div>
<div className="badge badge-md">{moves[1]}</div>
</div>
);
})}
</div>
<div className="h-80 w-full min-w-fit">
<div className="h-60 w-full min-w-fit">
<div className="bg-base-300 flex h-full w-full min-w-[64px] flex-col rounded-lg p-4 shadow-sm">
chatbox
<input type="text" placeholder="Chat here..." className="input mt-auto" />

2
client/src/app/layout.tsx
View File

@@ -10,7 +10,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body>
<Navbar />
<main className="bg-base-200 mx-1 my-8 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40">
<main className="bg-base-200 mx-1 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40">
{children}
</main>