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

general layout improvements

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-03-02 17:53:35 +08:00
parent e562d53e06
commit 181738ae3f
2 changed files with 72 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,12 +5,20 @@ import { Chessboard } from "react-chessboard";
import { IconCopy } from "@tabler/icons-react"; import { IconCopy } from "@tabler/icons-react";
import Image from "next/image"; import Image from "next/image";
const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+ Bxe7"; const pgn = "1. e4 e5 2. f3 Nf6 3. d4 exd4 4. Qxd4 Nxe4 5. Qxe4+ Qe7 6. Qxe7+";
export default function Game() { export default function Game() {
return ( return (
<div className="flex w-full flex-wrap justify-center gap-6 px-4 py-4 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="relative h-min">
{/* overlay */}
<div className="absolute top-0 right-0 bottom-0 z-10 flex h-full w-full items-center justify-center bg-black bg-opacity-70">
<div className="bg-base-200 flex w-full items-center justify-center gap-4 py-4 px-2">
Waiting for opponent.
<button className="btn btn-secondary">Play as black</button>
</div>
</div>
<Chessboard <Chessboard
boardWidth={480} boardWidth={480}
/* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px */ /* 350 for mobile, 480 for md up (^768px screen), 540 for 2xl up (^1536px), 580 for ^1920px */
@@ -30,6 +38,7 @@ export default function Game() {
</div> </div>
nize nize
</div> </div>
<div className="my-auto w-full text-sm">vs</div>
<div className="flex w-full items-center gap-1"> <div className="flex w-full items-center gap-1">
<div className="avatar"> <div className="avatar">
<div className="w-8 rounded-md"> <div className="w-8 rounded-md">
@@ -41,28 +50,31 @@ export default function Game() {
</div> </div>
<div className="flex flex-1 flex-col gap-1"> <div className="flex flex-1 flex-col gap-1">
<div className="flex w-full flex-col items-end gap-1"> <div className="mb-2 flex w-full flex-col items-end gap-1">
Invite friends: Invite friends:
<div className="badge badge-md gap-1 font-mono"> <div className="badge badge-md bg-base-300 text-base-content h-8 gap-1 font-mono text-xs sm:h-5 sm:text-sm">
<IconCopy size={16} /> <IconCopy size={16} />
ches.su/game/123abc ches.su/game/123abc
</div> </div>
</div> </div>
<div className="w-full"> <div className="h-36 w-full overflow-y-scroll">
move list table <table className="table-compact table w-full ">
{pgn <tbody>
.split(/\d+\./) {pgn
.filter((move) => move.trim() !== "") .split(/\d+\./)
.map((moveSet, i) => { .filter((move) => move.trim() !== "")
const moves = moveSet.trim().split(" "); .map((moveSet, i) => {
return ( const moves = moveSet.trim().split(" ");
<div className="flex w-full items-center gap-1" key={i + 1}> return (
<div className="badge badge-md">{i + 1}</div> <tr className="flex w-full items-center gap-1" key={i + 1}>
<div className="badge badge-md">{moves[0]}</div> <td className="">{i + 1}.</td>
<div className="badge badge-md">{moves[1]}</div> <td className="w-1/2 text-center">{moves[0]}</td>
</div> <td className="w-1/2 text-center">{moves[1]}</td>
); </tr>
})} );
})}
</tbody>
</table>
</div> </div>
</div> </div>
</div> </div>
@@ -70,10 +82,17 @@ export default function Game() {
<div className="h-60 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"> <div className="bg-base-300 flex h-full w-full min-w-[64px] flex-col rounded-lg p-4 shadow-sm">
chatbox chatbox
<input type="text" placeholder="Chat here..." className="input mt-auto" /> <div className="input-group mt-auto">
<input
type="text"
placeholder="Chat here..."
className="input input-bordered flex-grow"
/>
<button className="btn btn-secondary ml-1">send</button>
</div>
</div> </div>
</div> </div>
<div className="w-full">observer list</div> <div className="w-full px-2 text-xs md:px-0">Spectators: nize, nize, nize</div>
</div> </div>
</div> </div>
); );

55
client/src/app/page.tsx
View File

@@ -2,35 +2,44 @@ import PublicGames from "@/components/PublicGames";
export default function Home() { export default function Home() {
return ( return (
<div className="flex w-full flex-wrap items-center justify-evenly gap-4 px-4 py-10 lg:gap-0"> <div className="bg-base-200 flex w-full flex-wrap items-center justify-evenly gap-4 rounded-xl px-4 py-10 shadow-md lg:gap-0">
<PublicGames /> <PublicGames />
<div className="flex flex-col items-center"> <div className="flex flex-col items-center gap-4">
<h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2> <div className="flex flex-col items-center">
<div className="form-control"> <h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
<div className="input-group"> <div className="form-control">
<input type="text" placeholder="Invite link or code" className="input input-bordered" /> <div className="input-group">
<button className="btn btn-square">Join</button> <input
type="text"
placeholder="Invite link or code"
className="input input-bordered"
/>
<button className="btn btn-square">Join</button>
</div>
</div> </div>
</div> </div>
<div className="divider divider-vertical">or</div> <div className="divider divider-vertical">or</div>
<h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2> <div className="flex flex-col items-center">
<div className="form-control"> <h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2>
<label className="label cursor-pointer"> <div className="form-control">
<span className="label-text">Unlisted/invite-only</span> <label className="label cursor-pointer">
<input type="checkbox" className="checkbox" /> <span className="label-text">Unlisted/invite-only</span>
</label> <input type="checkbox" className="checkbox" />
<label className="label"> </label>
<span className="label-text">Select your side</span> <label className="label">
</label> <span className="label-text">Select your side</span>
<div className="input-group"> </label>
<select className="select select-bordered"> <div className="input-group">
<option value="random">Random</option> <select className="select select-bordered">
<option value="white">White</option> <option value="random">Random</option>
<option value="black">Black</option> <option value="white">White</option>
</select> <option value="black">Black</option>
<button className="btn">Create</button> </select>
<button className="btn">Create</button>
</div>
</div> </div>
</div> </div>
</div> </div>