Skip to content

Commit

Permalink
Merge pull request #104 from agrattan0820/dev
Browse files Browse the repository at this point in the history
v0.3.12
  • Loading branch information
agrattan0820 authored Oct 4, 2023
2 parents 259faf2 + 754b72c commit 22a6b70
Show file tree
Hide file tree
Showing 17 changed files with 548 additions and 436 deletions.
16 changes: 8 additions & 8 deletions apps/client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
"test:e2e": "playwright test"
},
"dependencies": {
"@auth/drizzle-adapter": "^0.3.2",
"@sentry/nextjs": "^7.72.0",
"@tanstack/react-query": "^4.35.3",
"@auth/drizzle-adapter": "^0.3.3",
"@sentry/nextjs": "^7.73.0",
"@tanstack/react-query": "^4.35.7",
"@upstash/ratelimit": "^0.4.4",
"@upstash/redis": "^1.22.1",
"@vercel/analytics": "^1.0.2",
Expand All @@ -22,8 +22,8 @@
"database": "workspace:*",
"drizzle-orm": "^0.28.6",
"framer-motion": "^10.16.4",
"next": "^13.5.3",
"next-auth": "^4.23.1",
"next": "^13.5.4",
"next-auth": "^4.23.2",
"postcss": "8.4.31",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand All @@ -41,11 +41,11 @@
"devDependencies": {
"@playwright/test": "^1.38.1",
"@tailwindcss/typography": "^0.5.10",
"@types/node": "^20.8.0",
"@types/react": "^18.2.23",
"@types/node": "^20.8.2",
"@types/react": "^18.2.24",
"@types/react-dom": "^18.2.8",
"eslint-config-custom": "workspace:*",
"prettier-plugin-tailwindcss": "^0.5.4",
"prettier-plugin-tailwindcss": "^0.5.5",
"tsconfig": "workspace:*"
},
"engines": {
Expand Down
24 changes: 24 additions & 0 deletions apps/client/src/app/account/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import AccountContent from "@ai/components/account-content";
import Footer from "@ai/components/footer";
import Header from "@ai/components/header";
import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
import { getServerSession } from "next-auth";
import { redirect } from "next/navigation";

export default async function Account() {
const session = await getServerSession(authOptions());

if (!session) {
redirect("/");
}

return (
<>
<Header session={session} />
<main className="relative flex min-h-[100dvh] flex-col justify-center">
<AccountContent session={session} />
</main>
<Footer />
</>
);
}
64 changes: 31 additions & 33 deletions apps/client/src/app/invite/[code]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@ import Footer from "@ai/components/footer";
import Friend from "@ai/components/game/friend";
import SignInForm from "@ai/components/sign-in-form";
import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
import Menu from "@ai/components/menu";
import { LinkSecondaryButton } from "@ai/components/button";
import { getRunningGame } from "@ai/utils/server-actions";
import Header from "@ai/components/header";

export default async function Invite({ params }: { params: { code: string } }) {
const roomInfo = await getRoomInfo(params.code);
Expand All @@ -27,39 +27,37 @@ export default async function Invite({ params }: { params: { code: string } }) {
}

return (
<main className="flex min-h-[100dvh] flex-col justify-center">
{session && (
<div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
<Menu session={session} />
</div>
)}
<section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
{runningGame && (
<div className="absolute left-1/2 top-8 w-full -translate-x-1/2">
<LinkSecondaryButton
href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
className="mx-auto flex w-full max-w-fit items-center gap-2"
>
Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
</LinkSecondaryButton>
<>
<Header session={session} />
<main className="flex min-h-[100dvh] flex-col justify-center">
<section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
{runningGame && (
<div className="absolute left-1/2 top-16 w-full -translate-x-1/2 sm:top-8">
<LinkSecondaryButton
href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
className="mx-auto flex w-full max-w-fit items-center gap-2"
>
Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
</LinkSecondaryButton>
</div>
)}
<div>
<p className="mb-2">The AI Image Party Game</p>
<h1 className="mb-8 text-4xl md:text-6xl">
artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
unintelligence
</h1>
<SignInForm
session={session}
room={roomInfo}
submitLabel="Join Game"
type="INVITE"
/>
</div>
)}
<div>
<p className="mb-2">The AI Image Party Game</p>
<h1 className="mb-8 text-4xl md:text-6xl">
artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
unintelligence
</h1>
<SignInForm
session={session}
room={roomInfo}
submitLabel="Join Game"
type="INVITE"
/>
</div>
<Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
</section>
<Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
</section>
</main>
<Footer />
</main>
</>
);
}
54 changes: 26 additions & 28 deletions apps/client/src/app/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import Friend from "@ai/components/game/friend";
import SignInForm from "@ai/components/sign-in-form";
import { authOptions } from "@ai/pages/api/auth/[...nextauth]";
import { LinkSecondaryButton } from "@ai/components/button";
import Menu from "@ai/components/menu";
import { getRunningGame } from "@ai/utils/server-actions";
import Header from "@ai/components/header";

export default async function Home() {
const session = await getServerSession(authOptions());
Expand All @@ -24,34 +24,32 @@ export default async function Home() {
}

return (
<main className="relative flex min-h-[100dvh] flex-col justify-center">
{session && (
<div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
<Menu session={session} />
</div>
)}
<section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
{runningGame && (
<div className="absolute left-1/2 top-8 w-full -translate-x-1/2">
<LinkSecondaryButton
href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
className="mx-auto flex w-full max-w-fit items-center gap-2"
>
Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
</LinkSecondaryButton>
<>
<Header session={session} />
<main className="relative flex min-h-[100dvh] flex-col justify-center">
<section className="container mx-auto flex flex-col-reverse items-start justify-center gap-8 px-4 lg:flex-row lg:items-center lg:gap-24">
{runningGame && (
<div className=" absolute left-1/2 top-16 mx-auto w-full -translate-x-1/2 sm:top-8">
<LinkSecondaryButton
href={`/room/${runningGame.roomCode}/game/${runningGame.id}`}
className="mx-auto flex w-full max-w-fit items-center gap-2"
>
Join Back Into {runningGame ? "Game" : "Room"} <FiLogIn />
</LinkSecondaryButton>
</div>
)}
<div>
<p className="mb-2">The AI Image Party Game</p>
<h1 className="mb-8 text-4xl md:text-6xl">
artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
unintelligence
</h1>
<SignInForm session={session} submitLabel="Host Game" type="HOME" />
</div>
)}
<div>
<p className="mb-2">The AI Image Party Game</p>
<h1 className="mb-8 text-4xl md:text-6xl">
artif<span className="ml-0.5 inline-block">i</span>cial <br />{" "}
unintelligence
</h1>
<SignInForm session={session} submitLabel="Host Game" type="HOME" />
</div>
<Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
</section>
<Friend className="w-32 scale-x-[-1] transform lg:w-1/4 lg:scale-x-100" />
</section>
</main>
<Footer />
</main>
</>
);
}
54 changes: 27 additions & 27 deletions apps/client/src/app/room/[code]/lobby.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import { RoomInfo } from "@ai/utils/queries";
import UserList from "./user-list";
import StartGame from "./start-game";
import { SocketContext } from "@ai/utils/socket-provider";
import Menu from "@ai/components/menu";
import Header from "@ai/components/header";

export default function Lobby({
roomInfo,
Expand Down Expand Up @@ -68,31 +68,31 @@ export default function Lobby({
}, [handleStartGame, roomInfo.code, socket, session]);

return (
<main className="flex min-h-[100dvh] flex-col justify-center">
<motion.section layout="position" className="container mx-auto px-4">
{!roomIsFull && (
<p className="mb-2 hidden text-center text-xl sm:block">
Your Invite Link is
</p>
)}
<InviteLink code={roomInfo.code} roomIsFull={roomIsFull} />
<div className="mx-auto mt-4 flex items-center justify-center md:absolute md:left-8 md:top-8">
<UserCount count={players.length} />
</div>
<div className="absolute right-8 top-8 z-50 mt-4">
<Menu session={session} roomCode={roomInfo.code} />
</div>
<UserList session={session} hostId={hostId} players={players} />
<StartGame
players={players}
code={roomInfo.code}
hostId={hostId}
onStartGame={initiateStartGame}
loading={startGameLoading}
roomIsFull={roomIsFull}
session={session}
/>
</motion.section>
</main>
<>
<Header session={session} />
<main className="flex min-h-[100dvh] flex-col justify-center">
<motion.section layout="position" className="container mx-auto px-4">
{!roomIsFull && (
<p className="mb-2 hidden text-center text-xl sm:block">
Your Invite Link is
</p>
)}
<InviteLink code={roomInfo.code} roomIsFull={roomIsFull} />
<div className="mx-auto mt-4 flex items-center justify-center md:container md:absolute md:left-0 md:right-0 md:top-8 md:justify-start md:px-4">
<UserCount count={players.length} />
</div>
<UserList session={session} hostId={hostId} players={players} />
<StartGame
players={players}
code={roomInfo.code}
hostId={hostId}
onStartGame={initiateStartGame}
loading={startGameLoading}
roomIsFull={roomIsFull}
session={session}
/>
</motion.section>
</main>
</>
);
}
6 changes: 1 addition & 5 deletions apps/client/src/app/room/[code]/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,5 @@ export default async function Room({ params }: { params: { code: string } }) {

const roomInfo = await getRoomInfo(params.code);

return (
<div>
<Lobby roomInfo={roomInfo} session={session} />
</div>
);
return <Lobby roomInfo={roomInfo} session={session} />;
}
69 changes: 69 additions & 0 deletions apps/client/src/components/account-content.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
"use client";

import Image from "next/image";
import Button from "./button";
// import { useRef } from "react";
// import { FiX } from "react-icons/fi";
import { Session } from "next-auth";
import { signOut } from "next-auth/react";
import * as Sentry from "@sentry/nextjs";

export default function AccountContent({ session }: { session: Session }) {
// const dialogRef = useRef<HTMLDialogElement>(null);

const handleSignOut = () => {
Sentry.setUser(null);
signOut();
};

// const handleDeleteAccount = () => {
// Sentry.setUser(null);
// signOut();
// };

return (
<>
<section className="container mx-auto flex flex-col items-center justify-center gap-4 px-4">
<h1 className="mb-8 text-2xl">Your Account</h1>
{session.user.image && (
<Image
src={session.user.image}
alt={`${session.user.name}'s Google profile image`}
width={64}
height={64}
className="h-16 w-16 rounded-full shadow"
/>
)}
<div>
<p>Name: {session.user.name}</p>
<p>Email: {session.user.email}</p>
</div>
<Button onClick={handleSignOut}>Sign Out</Button>
{/* TODO: finish ability to delete account */}
{/* <SecondaryButton onClick={() => dialogRef.current?.showModal()}>
Delete Account
</SecondaryButton> */}
</section>
{/* TODO: finish ability to delete account */}
{/* <dialog
ref={dialogRef}
className="relative mx-auto w-full max-w-2xl rounded-xl p-8 transition backdrop:bg-slate-900/50 open:animate-modal open:backdrop:animate-modal"
>
<form method="dialog">
<button className="absolute right-4 top-4 text-xl md:text-2xl">
<FiX />
</button>
<p className="text-2xl">
Are you sure you would like to delete your account?
</p>
<div className="mt-8 flex gap-2">
<Button>No, nevermind</Button>
<SecondaryButton onClick={handleDeleteAccount}>
Yes, delete my account
</SecondaryButton>
</div>
</form>
</dialog> */}
</>
);
}
9 changes: 4 additions & 5 deletions apps/client/src/components/footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@ const Footer = () => {
<footer className="absolute bottom-8 left-1/2 w-full -translate-x-1/2 text-center">
<div className="flex flex-col items-center justify-center gap-2 text-xs sm:text-sm">
<p>
Free and{" "}
Made with 💜 by{" "}
<a
href="https://github.com/agrattan0820/artificial-unintelligence"
href="https://github.com/agrattan0820"
className="text-indigo-300 underline underline-offset-2"
>
open source
</a>{" "}
💜
Alexander
</a>
</p>
<p>
Like the game?{" "}
Expand Down
16 changes: 16 additions & 0 deletions apps/client/src/components/header.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Session } from "next-auth";
import Menu from "./menu";

type HeaderProps = {
session: Session | null;
};

const Header = ({ session }: HeaderProps) => {
return (
<header className="container absolute left-0 right-0 top-4 z-50 mx-auto mt-4 flex justify-end gap-4 px-4 md:top-8">
<Menu session={session} />
</header>
);
};

export default Header;
Loading

1 comment on commit 22a6b70

@vercel
Copy link

@vercel vercel bot commented on 22a6b70 Oct 4, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.