wip: Add some transitions

Author: mhzrerfani

apps/web/package.json

@@ -11,20 +11,21 @@
     "start": "next start"
   },
   "dependencies": {
-    "tailwind-merge": "^2.5.2",
     "@aptos-labs/wallet-adapter-ant-design": "^3.0.13",
     "@aptos-labs/wallet-adapter-react": "^3.6.2",
     "@jeton/ts-sdk": "*",
     "@jeton/ui": "*",
     "@jeton/zk-deck": "*",
     "@legendapp/state": "^3.0.0-alpha.29",
     "clsx": "^2.1.1",
+    "framer-motion": "^11.6.0",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
     "nes.css": "^2.2.1",
     "next": "^14.2.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwind-merge": "^2.5.2",
     "tsx": "^4.19.1"
   },
   "devDependencies": {

apps/web/src/app/@modal/(.)create/page.tsx

@@ -122,12 +122,12 @@ function LabelInput({
   required = true,
 }: LabelInputProps) {
   return (
-    <div className="flex flex-col gap-1">
-      <label className="text-[#eec2af]" htmlFor={name}>
+    <div className="nes-field">
+      <label className="text-[#eec2af] name_field" htmlFor={name}>
         {label}:
       </label>
       <input
-        className="bg-[#b87d5b] text-white border-2 border-[#3a3526] p-2"
+        className="bg-[#b87d5b] nes-input text-white p-2 accent-amber-500"
         type={type}
         value={value}
         name={name}

apps/web/src/app/@modal/(.)join/join/page.tsx

@@ -20,6 +20,10 @@ export default function GameJoinModal() {
     fetchTables();
   }, []);
 
+  if (!pathname.includes("join")) {
+    return null;
+  }
+
   // Modal choose violence and did not close on navigating
   if (!pathname.includes("join")) {
     return null;
@@ -31,7 +35,7 @@ export default function GameJoinModal() {
       {gameTables.length > 0 ? (
         <ul className="text-white border flex flex-col p-2 bg-[#b87d5b]">
           {gameTables.map((table) => (
-            <li key={table.id} className="mb-4">
+            <li key={table.id} className="mb-4 relative">
               <div>Table ID: {table.id}</div>
               <div>Small Blind: {table.smallBlind}</div>
               <div>Number of Raises: {table.numberOfRaises}</div>
@@ -42,7 +46,10 @@ export default function GameJoinModal() {
                 Buy-In: {table.minBuyIn} - {table.maxBuyIn}
               </div>
               <div>Chip Unit: {table.chipUnit}</div>
-              <Link className="bg-blue-500 px-2 py-1 self-end" href={`/games/${table.id}`}>
+              <Link
+                className="nes-btn is-primary px-2 py-1 text-xs absolute bottom-1 right-1"
+                href={`/games/${table.id}`}
+              >
                 join
               </Link>
             </li>

apps/web/src/app/@modal/(.)join/page.tsx

@@ -45,6 +45,7 @@ export const initGame = async (
   });
   state$.game.set(game);
   setGameEventListeners();
+  // TODO: should we get 'entryGameState' from user?
   const entryGameState = await game.checkIn(1000);
   state$.gameState.players.set(entryGameState.players.map((p) => p));
   state$.gameState.status.set(entryGameState.status);

apps/web/src/app/@modal/(.)setup/page.tsx

@@ -3,7 +3,6 @@
 import { WalletSelector } from "@aptos-labs/wallet-adapter-ant-design";
 import { useWallet } from "@aptos-labs/wallet-adapter-react";
 import buttonBackground from "@src/assets/images/button.png";
-import background from "@src/assets/images/main-menu-background.png";
 import Image from "next/image";
 import Link from "next/link";
 import { useState } from "react";
@@ -32,15 +31,20 @@ export default function Home() {
   return (
     <div className="relative overflow-hidden items-center flex min-h-screen">
       <Image
+        quality={10}
         width={80}
         height={80}
-        className="w-40 aspect-square absolute bottom-5 right-5"
+        className="w-24 aspect-square absolute bottom-5 right-5 duration-500 animate-grow-in"
         src="/images/logo.png"
+        draggable={false}
         style={{ imageRendering: "pixelated" }}
         alt="Logo"
+        priority
       />
-      <div className="text-center bg-paarl-600 flex animate-slide-in h-[50dvh] flex-col items-center rounded-r-3xl px-8 py-8 bg-opacity-90 relative overflow-hidden z-50 justify-center max-w-md">
-        <div className="flex flex-col gap-5 relative z-20">
+      <div
+        className={`text-center flex animate-slide-in flex-col items-center rounded-r-3xl px-8 py-8 bg-opacity-90 duration-500 relative overflow-hidden z-50 justify-center max-w-md bg-[url("/images/wood-pattern-light.png")] bg-repeat bg-center bg-[length:200px_200px] border-8 shadow border-[#b87d5b]`}
+      >
+        <div className="flex flex-col gap-5 relative z-20 duration-500">
           {connected ? (
             options.map((btn) => (
               <Link
@@ -53,7 +57,7 @@ export default function Home() {
               </Link>
             ))
           ) : (
-            <p className="text-red-100 text-xl">
+            <p className="text-white text-xl">
               Please connect your wallet to create or join a game.
             </p>
           )}
@@ -66,7 +70,7 @@ export default function Home() {
               </div>
 
               <button
-                className={`relative w-72 mx-auto h-14 p-4 flex justify-center items-center z-10 hover:brightness-110 shadow-2xl active:scale-95 rounded-lg duration-150 nes-btn is-warning !bg-amber-500 ${
+                className={`relative w-72 mx-auto h-14 p-4 flex justify-center items-center z-10 hover:brightness-110 shadow-2xl active:scale-95 rounded-lg duration-150 nes-btn ${
                   isLoading ? "opacity-50 cursor-not-allowed" : ""
                 }`}
                 onClick={() => setOpenModal(true)}
@@ -80,7 +84,7 @@ export default function Home() {
 
           {connected && (
             <button
-              className="relative w-72 h-14 p-4 flex justify-center items-center z-10 hover:brightness-110 shadow-2xl active:scale-95 rounded-lg duration-150 nes-btn is-warning !bg-amber-500"
+              className="relative w-72 h-14 p-4 mt-20 flex  whitespace-nowrap text-sm justify-center items-center z-10 hover:brightness-110 shadow-2xl active:scale-95 rounded-lg duration-150 nes-btn is-error"
               onClick={disconnect}
               style={{ backgroundImage: buttonBackground.src }}
             >
@@ -89,15 +93,6 @@ export default function Home() {
           )}
         </div>
       </div>
-      <Image
-        className="w-full h-full object-cover absolute top-0 left-0 -z-40"
-        src={background}
-        alt="background"
-        priority
-        style={{
-          imageRendering: "pixelated",
-        }}
-      />
     </div>
   );
 }

apps/web/src/app/games/[id]/state/actions/gameActions.ts

@@ -1,11 +1,16 @@
+"use client";
+
+import background from "@src/assets/images/main-menu-background.png";
 import type { Metadata } from "next";
 import { Press_Start_2P } from "next/font/google";
+import Image from "next/image";
 import Script from "next/script";
 
 import "./globals.css";
 import "@aptos-labs/wallet-adapter-ant-design/dist/index.css";
 
 import "@jeton/ui/styles.css";
+import { LayoutTransition } from "@src/components/LayoutTransition";
 import { WalletProvider } from "@src/components/WalletProvider";
 
 const pressStart2P = Press_Start_2P({
@@ -15,11 +20,11 @@ const pressStart2P = Press_Start_2P({
   subsets: ["latin"],
 });
 
-export const metadata: Metadata = {
-  title: "Jeton DAO",
-  description:
-    "Decentralized poker protocol enabling trustless, transparent, and community-governed gameplay",
-};
+// export const metadata: Metadata = {
+//   title: "Jeton DAO",
+//   description:
+//     "Decentralized poker protocol enabling trustless, transparent, and community-governed gameplay",
+// };
 
 export default function RootLayout({
   children,
@@ -32,7 +37,20 @@ export default function RootLayout({
     <html lang="en">
       <body className={pressStart2P.className}>
         <WalletProvider>
-          {children}
+          <LayoutTransition initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}>
+            {children}
+          </LayoutTransition>
+
+          <Image
+            quality={20}
+            className="w-full h-full object-cover absolute top-0 left-0 -z-40"
+            src={background}
+            alt="background"
+            priority
+            style={{
+              imageRendering: "pixelated",
+            }}
+          />
           <div>{modal}</div>
         </WalletProvider>
         <Script src="/register-service-worker.js" />