Merge branch 'dev'

.github/workflows/ci.yml

@@ -36,7 +36,7 @@ jobs:
       - name: 🏗 Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 20.15.0
+          node-version: 20.16.0
           cache: "pnpm"
 
       - name: 👷 Install dependencies

.tool-versions

@@ -1 +1 @@
-nodejs 20.15.0
+nodejs 20.16.0

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "client",
-  "version": "0.3.22",
+  "version": "0.3.23",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,45 +11,45 @@
   },
   "dependencies": {
     "@auth/drizzle-adapter": "^1.4.1",
-    "@sentry/nextjs": "^8.13.0",
-    "@tanstack/react-query": "^5.48.0",
-    "@upstash/ratelimit": "^1.2.1",
-    "@upstash/redis": "^1.31.6",
+    "@sentry/nextjs": "^8.20.0",
+    "@tanstack/react-query": "^5.51.15",
+    "@upstash/ratelimit": "^2.0.1",
+    "@upstash/redis": "^1.33.0",
     "@vercel/analytics": "^1.3.1",
     "@xstate/react": "^4.1.1",
     "autoprefixer": "10.4.19",
     "clsx": "^2.1.1",
     "database": "workspace:*",
-    "drizzle-orm": "^0.31.2",
-    "framer-motion": "^11.2.12",
-    "next": "^14.2.4",
+    "drizzle-orm": "^0.32.1",
+    "framer-motion": "^11.3.17",
+    "next": "^14.2.5",
     "next-auth": "^4.24.7",
-    "postcss": "8.4.38",
+    "postcss": "8.4.40",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
     "server-only": "^0.0.1",
     "sharp": "^0.33.4",
     "socket.io-client": "^4.7.5",
-    "tailwind-merge": "^2.3.0",
-    "tailwindcss": "^3.4.4",
+    "tailwind-merge": "^2.4.0",
+    "tailwindcss": "^3.4.7",
     "typescript": "5.4.4",
     "use-sound": "^4.0.3",
-    "xstate": "^5.14.0"
+    "xstate": "^5.16.0"
   },
   "devDependencies": {
-    "@playwright/test": "^1.45.0",
+    "@playwright/test": "^1.45.3",
     "@tailwindcss/typography": "^0.5.13",
-    "@types/node": "^20.14.9",
+    "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "eslint-config-custom": "workspace:*",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tsconfig": "workspace:*"
   },
   "engines": {
-    "node": "20.15.0"
+    "node": "20.16.0"
   },
   "optionalDependencies": {
     "bufferutil": "^4.0.8",

apps/client/src/app/account/page.tsx

@@ -15,7 +15,7 @@ export default async function Account() {
   return (
     <>
       <Header session={session} />
-      <main className="relative flex min-h-[100dvh] flex-col justify-center">
+      <main className="page-height relative flex flex-col justify-center">
         <AccountContent session={session} />
       </main>
       <Footer />

apps/client/src/app/create-account/[nickname]/page.tsx

@@ -32,7 +32,7 @@ export default async function CreateAccountPage({
   return (
     <>
       <Header session={session} />
-      <main className="container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:min-h-[100dvh] lg:pb-0 lg:pt-0">
+      <main className="page-height-lg container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:pb-0 lg:pt-0">
         <section>
           <div className="mx-auto grid w-full max-w-xl grid-cols-1 gap-x-8 gap-y-4 rounded-2xl p-8 ring ring-slate-600 md:grid-cols-[8rem_1fr]">
             <Friend className="w-32" type="SMILING" />

apps/client/src/app/globals.css

@@ -2,6 +2,29 @@
 @tailwind components;
 @tailwind utilities;
 
+.page-height {
+  min-height: 100vh;
+}
+
+@supports(min-height: 100dvh) {
+  .page-height {
+    min-height: 100dvh;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .page-height-lg {
+    min-height: 100vh;
+  }
+
+  @supports(min-height: 100dvh) {
+    .page-height-lg {
+      min-height: 100dvh;
+    }
+  }
+}
+
+
 .loading-ellipsis:after {
   font-family: var(--font-space);
   overflow: hidden;

apps/client/src/app/how-to-play/page.tsx

@@ -35,21 +35,29 @@ export default async function HowToPlay() {
     <>
       <Header session={session} />
       <main className="container mx-auto px-4 py-24 md:py-40">
-        <section className="prose mx-auto text-white prose-headings:text-white prose-a:text-white prose-a:underline-offset-2 prose-a:transition hover:prose-a:text-indigo-200  prose-blockquote:text-white">
+        <section className="prose mx-auto text-white prose-headings:text-white prose-a:text-white prose-a:underline-offset-2 prose-a:transition hover:prose-a:text-indigo-200 prose-blockquote:text-white">
           <h1>How to Play</h1>
           <p>
             Artificial Unintelligence is an online multiplayer game where
             players compete against each other to create the funniest
             AI-generated images in response to amusing prompts.
           </p>
           <video
-            src="/artificial-unintelligence-promo.mp4"
             controls
             autoPlay
             muted
             playsInline
             className="aspect-video w-full"
-          />
+          >
+            <source
+              src="/artificial-unintelligence-promo.webm"
+              type="video/webm"
+            />
+            <source
+              src="/artificial-unintelligence-promo.mp4"
+              type="video/mp4"
+            />
+          </video>
           Some prompts you might encounter:
           <ul>
             <li>A canceled children&apos;s toy</li>

apps/client/src/app/room/[code]/game/[gameId]/game.tsx

@@ -3,7 +3,6 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import type { EventFrom } from "xstate";
 import { useMachine } from "@xstate/react";
-import { AnimatePresence } from "framer-motion";
 import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 
@@ -65,6 +64,9 @@ export default function Game({ gameInfo, session }: GameProps) {
   // State machine
   const [state, send, actor] = useMachine(gameMachine, {
     snapshot: serverState,
+    input: {
+      playerCount: gameInfo.players.length,
+    },
   });
 
   const handleRoomState = (roomInfo: RoomInfo) => {
@@ -164,29 +166,27 @@ export default function Game({ gameInfo, session }: GameProps) {
     <main
       className={cn(
         !state.matches("leaderboard") &&
-          "flex min-h-[100dvh] flex-col justify-center",
+          "page-height flex flex-col justify-center",
       )}
     >
       <section className="container mx-auto px-4 py-24 md:py-16">
         <div className="absolute right-4 top-4 z-50 mt-4 md:right-8 md:top-8">
           <Menu session={session} roomCode={gameInfo.game.roomCode} />
         </div>
-        <AnimatePresence mode="wait">
-          {isMounted ? (
-            <CurrentGameComponent
-              key={state.value as string}
-              gameInfo={gameInfo}
-              state={state}
-              send={send}
-              hostId={hostId}
-              submittedPlayerIds={submittedPlayerIds}
-              currFaceOffQuestion={currFaceOffQuestion}
-              votedPlayers={votedPlayers}
-              leaderboard={leaderboard}
-              session={session}
-            />
-          ) : null}
-        </AnimatePresence>
+        {isMounted ? (
+          <CurrentGameComponent
+            key={state.value as string}
+            gameInfo={gameInfo}
+            state={state}
+            send={send}
+            hostId={hostId}
+            submittedPlayerIds={submittedPlayerIds}
+            currFaceOffQuestion={currFaceOffQuestion}
+            votedPlayers={votedPlayers}
+            leaderboard={leaderboard}
+            session={session}
+          />
+        ) : null}
       </section>
     </main>
   );

apps/client/src/app/room/[code]/lobby.tsx

@@ -70,7 +70,7 @@ export default function Lobby({
   return (
     <>
       <Header session={session} />
-      <main className="flex min-h-[100dvh] flex-col justify-center">
+      <main className="page-height flex 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">

apps/client/src/app/sign-in/[nickname]/page.tsx

@@ -32,7 +32,7 @@ export default async function SignInPage({
   return (
     <>
       <Header session={session} />
-      <main className="container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:min-h-[100dvh] lg:pb-0 lg:pt-0">
+      <main className="page-height-lg container mx-auto flex items-center justify-center px-4 pb-16 pt-48 lg:pb-0 lg:pt-0">
         <section>
           <div className="mx-auto grid w-full max-w-xl grid-cols-1 gap-x-8 gap-y-4 rounded-2xl p-8 ring ring-slate-600 md:grid-cols-[8rem_1fr]">
             <Friend className="w-32" type="KAWAII" />

apps/client/src/components/error-screen.tsx

@@ -2,7 +2,7 @@ import { LinkButton } from "./button";
 
 export default function ErrorScreen({ details }: { details: string }) {
   return (
-    <main className="flex min-h-[100dvh] flex-col justify-center">
+    <main className="page-height flex flex-col justify-center">
       <section className="container mx-auto px-4">
         <h1 className="mb-8 text-4xl md:text-6xl">
           artif<span className="">i</span>cial <br /> unintelligence

apps/client/src/components/game/face-off-result-image.tsx

@@ -162,15 +162,15 @@ const FaceOffResultImage = ({
   return (
     <motion.figure
       layout="position"
-      initial={false}
+      initial="hidden"
       animate={
         isWinner
           ? "winner"
           : isLoser
-          ? "loser"
-          : bothImagesShown
-          ? "visible"
-          : "hidden"
+            ? "loser"
+            : bothImagesShown
+              ? "visible"
+              : "hidden"
       }
       variants={imageVariants}
       transition={{ when: "beforeChildren" }}
@@ -198,8 +198,8 @@ const FaceOffResultImage = ({
           src={image}
           alt={`AI-generated image with the prompt: ${prompt}`}
           onLoad={() => setShowImage(true)}
-          width={1024}
-          height={1024}
+          width={768}
+          height={768}
         />
         <motion.ul
           initial={false}

apps/client/src/components/game/face-off.tsx

@@ -52,7 +52,7 @@ const FaceOff = ({
 
   return (
     <div className="mx-auto max-w-2xl">
-      {currQuestionGenerations && (
+      {currQuestionGenerations ? (
         <>
           <div className="relative mb-14">
             <motion.h2
@@ -111,6 +111,10 @@ const FaceOff = ({
             )}
           </div>
         </>
+      ) : (
+        <div className="text-center">
+          <Ellipsis />
+        </div>
       )}
     </div>
   );

apps/client/src/components/game/game-machine.tsx

@@ -47,6 +47,9 @@ type MachineContext = {
   questionIdx: number;
 };
 type MachineEvent = { type: "NEXT" } | { type: "SUBMIT" } | { type: "MORE" };
+type MachineInput = {
+  playerCount: number;
+};
 
 // MACHINE
 export const gameMachine = createMachine(
@@ -58,14 +61,15 @@ export const gameMachine = createMachine(
       // typegen: {} as import("./game-machine.typegen").Typegen0,
       context: {} as MachineContext,
       events: {} as MachineEvent,
+      input: {} as MachineInput,
     },
     // tsTypes: {} as import("./game-machine.typegen").Typegen0,
     initial: "connectingToMainframe",
-    context: {
+    context: ({ input }) => ({
       round: 1,
-      playerCount: 0,
+      playerCount: input.playerCount,
       questionIdx: 0,
-    },
+    }),
     states: {
       connectingToMainframe: {
         after: {

apps/client/src/components/game/image-choice.tsx

@@ -59,7 +59,7 @@ const ImageChoiceOption = ({
 
   return (
     <motion.div
-      initial={false}
+      initial="hidden"
       animate={bothShown ? "visible" : "hidden"}
       variants={variants}
     >
@@ -73,8 +73,9 @@ const ImageChoiceOption = ({
           src={image.src}
           alt={image.alt}
           onLoad={onLoad}
-          width={1024}
-          height={1024}
+          width={768}
+          height={768}
+          loading="eager"
         />
         <FiCheck
           className={cn(

apps/client/src/components/game/leaderboard.tsx

@@ -167,8 +167,8 @@ const Leaderboard = ({
                 <img
                   className="aspect-square"
                   src={generation.generation.imageUrl}
-                  width={1024}
-                  height={1024}
+                  width={768}
+                  height={768}
                   alt={`Image generated with the prompt: ${generation.generation.text}`}
                 />
                 <p className="absolute -left-1 -top-1 max-w-[160px] rounded-b-md rounded-r-md bg-slate-800/75 py-1 pb-2 pl-3 pr-2 pt-3 text-white">

apps/client/src/components/game/next-round.tsx

@@ -9,7 +9,11 @@ type NextRoundProps = {
 
 const NextRound = ({ nextQueryNum, totalQueries }: NextRoundProps) => {
   return (
-    <h2 className="relative text-center text-3xl md:text-5xl">
+    <motion.h2
+      initial={{ y: 10, opacity: 0 }}
+      animate={{ y: 0, opacity: 1 }}
+      className="relative text-center text-3xl md:text-5xl"
+    >
       Round{" "}
       <span className="relative">
         <span className="opacity-0">{nextQueryNum}</span>
@@ -37,7 +41,7 @@ const NextRound = ({ nextQueryNum, totalQueries }: NextRoundProps) => {
         </span>
       </span>{" "}
       of {totalQueries}
-    </h2>
+    </motion.h2>
   );
 };