add agent banner, fix client prefetch

Author: RedBeardEth

apps/nextjs/public/elizaOS.avif

@@ -1,17 +1,25 @@
+import type { CollectionEntry } from "@/utils/keystatic";
 import Image from "next/image";
 import Link from "next/link";
-
-import { Button } from "@realms-world/ui/components/ui/button";
 import { Badge } from "@realms-world/ui/components/ui/badge";
+import { Button } from "@realms-world/ui/components/ui/button";
+
 import { BaseCard } from "../../_components/BaseCard";
 import { StatusDot } from "../../_components/StatusDot";
-import type { CollectionEntry } from "@/utils/keystatic";
 
-export const GameCard = ({ game, slug }: { game: CollectionEntry<'games'>, slug: string }) => {
+export const GameCard = ({
+  game,
+  slug,
+  className,
+}: {
+  game: CollectionEntry<"games">;
+  slug: string;
+  className?: string;
+}) => {
   return (
-    <BaseCard>
+    <BaseCard className={className}>
       <Link
-        className="group relative flex h-80 flex-col items-center justify-center  text-center  "
+        className="group relative flex h-80 flex-col items-center justify-center text-center"
         href={`/games/${slug}`} // navigate to a custom game homepage if one is specified, default page otherwise
       >
         <div className="absolute left-4 top-4 z-10 font-sans">
@@ -29,17 +37,17 @@ export const GameCard = ({ game, slug }: { game: CollectionEntry<'games'>, slug:
           alt={game.title}
           width={800}
           height={400}
-          className="absolute bottom-0 rounded top-0 h-full w-full object-cover brightness-75 transition-all duration-300 group-hover:filter-none"
+          className="absolute bottom-0 top-0 h-full w-full rounded object-cover brightness-75 transition-all duration-300 group-hover:filter-none"
         />
-        <div className="relative flex h-full w-full max-w-full flex-col items-center justify-center  object-contain">
+        <div className="relative flex h-full w-full max-w-full flex-col items-center justify-center object-contain">
           <Image
             src={`/content/games/${slug}/${game.icon}`}
             alt={game.title}
             width={80}
             height={80}
             className="max-h-[180px] w-auto max-w-[75%] object-contain"
           />
-          <p className="mt-2  text-lg font-semibold">{game.description}</p>
+          <p className="mt-2 text-lg font-semibold">{game.description}</p>
         </div>
         <div className="invisible z-10 opacity-0 duration-300 group-hover:visible group-hover:-translate-y-3 group-hover:opacity-100">
           <Button variant={"outline"}>Explore</Button>

apps/nextjs/src/app/(app)/games/GameCard.tsx

@@ -2,29 +2,21 @@ import { Suspense } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { GameCard } from "@/app/(app)/games/GameCard";
-import LordsIcon from "@/icons/lords.svg";
 import { api, HydrateClient } from "@/trpc/server";
 import { reader } from "@/utils/keystatic";
 import { Button } from "@realms-world/ui/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@realms-world/ui/components/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
 } from "@realms-world/ui/components/ui/carousel";
-import { formatNumber } from "@realms-world/utils";
 
+import { AgentBanner } from "../_components/AgentBanner";
 import { PageLayout } from "../_components/PageLayout";
 import { Partners } from "../_components/Partners";
 import { VeLordsBanner } from "../_components/VeLordsBanner";
-import { VeLordsRewardsChart } from "./account/lords/velords/VeLordsRewardsChart";
 import { BlogGrid } from "./blogs/BlogGrid";
 import CollectionsList from "./collection/CollectionsList";
 
@@ -97,23 +89,40 @@ export default async function Home() {
           <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">
             All Games
           </h2>
-          <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            {games.map((game, index) => (
-              <GameCard key={index} game={game.entry} slug={game.slug} />
-            ))}
+          <div className="">
+            <Carousel opts={{ dragFree: true }} className="w-full">
+              <CarouselContent>
+                {games.map((game, index) => (
+                  <CarouselItem
+                    className="translate-3d flex-[0_0_25%] pl-0"
+                    key={index}
+                  >
+                    <GameCard
+                      className="embla__scale"
+                      key={index}
+                      game={game.entry}
+                      slug={game.slug}
+                    />
+                  </CarouselItem>
+                ))}
+              </CarouselContent>
+              <CarouselPrevious className="left-2 sm:left-4 md:left-6 lg:left-8" />
+              <CarouselNext className="right-2 sm:right-4 md:right-6 lg:right-8" />
+            </Carousel>
           </div>
 
+          <Suspense fallback={<div>Loading...</div>}>
+            <VeLordsBanner />
+          </Suspense>
+          <AgentBanner />
+
           <div className="my-12 sm:my-16 md:my-20 lg:my-24">
             <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">
               News
             </h2>
             <BlogGrid />
           </div>
 
-          <Suspense fallback={<div>Loading...</div>}>
-            <VeLordsBanner />
-          </Suspense>
-
           <hr className="my-6 border sm:my-8" />
           <div className="my-12 sm:my-16 md:my-20">
             <h2 className="mb-4 font-sans text-xl sm:text-2xl md:text-3xl">

apps/nextjs/src/app/(app)/page.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRef } from "react";
+import Image from "next/image";
+import { motion, useInView } from "framer-motion"; // Import useInView
+
+export const AgentBanner = () => {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { margin: "-250px" }); // Trigger animation once
+  return (
+    <div ref={ref} className="my-12 flex flex-col items-center md:flex-row">
+      <div className="w-full md:w-1/2">
+        <Image
+          src="/elizaOS.avif"
+          alt="Banner Image"
+          width={800}
+          height={600}
+          className="h-full w-full object-cover"
+        />
+      </div>
+      <div className="w-full p-4 md:w-1/2">
+        <div className="mx-auto max-w-lg">
+          <motion.h2
+            className="text-2xl font-bold sm:text-3xl md:text-4xl"
+            initial={{ opacity: 0, y: -20 }}
+            animate={isInView ? { opacity: 1, y: 0 } : {}}
+            transition={{ delay: 0.3, duration: 1 }}
+          >
+            Realms AI x Daydreams x Eliza (AI16z)
+          </motion.h2>
+          <motion.p
+            className="mt-4 text-sm sm:text-base md:text-lg"
+            initial={{ opacity: 0 }}
+            animate={isInView ? { opacity: 1 } : {}}
+            transition={{ delay: 0.6, duration: 1 }}
+          >
+            Play with generative onchain game agents on Eternum and other Dojo
+            games on Starknet. The Eliza Daydreams protocol enables the creation
+            of agents capable of complex problem solving and adaptation to
+            thrive in Realms World
+          </motion.p>
+          <motion.a
+            className="mt-4 text-sm sm:text-base md:text-lg"
+            initial={{ opacity: 0 }}
+            animate={isInView ? { opacity: 1 } : {}}
+            transition={{ delay: 0.6, duration: 1 }}
+            href="https://github.com/daydreamsai/daydreams"
+            target="_blank"
+          >
+            Read more about Eliza Daydreams
+          </motion.a>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/nextjs/src/app/_components/AgentBanner.tsx

@@ -39,7 +39,7 @@ export function VeLordsBanner() {
         <div className="hidden sm:block sm:w-1/2">
           <VeLordsRewardsChart
             data={data}
-            //totalSupply={totalSupply.new_supply}
+            totalSupply={totalSupplyData?.new_supply}
           />
         </div>
       </div>
@@ -67,7 +67,7 @@ export function VeLordsBanner() {
             <CardContent>
               <p className="flex text-2xl font-bold">
                 <LordsIcon className="mr-3 w-5" />
-                {formatNumber(1234567)}
+                {formatNumber(Number(totalSupplyData?.new_supply ?? 0))}
               </p>
             </CardContent>
           </Card>

apps/nextjs/src/app/_components/VeLordsBanner.tsx

@@ -1,24 +1,15 @@
 "use client";
 
+import type { AppRouter } from "@realms-world/api";
+import type { QueryClient } from "@tanstack/react-query";
 import { useState } from "react";
-import { env } from "env";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { QueryClientProvider } from "@tanstack/react-query";
 import { loggerLink, unstable_httpBatchStreamLink } from "@trpc/client";
 import { createTRPCReact } from "@trpc/react-query";
+import { env } from "env";
 import SuperJSON from "superjson";
 
-import type { AppRouter } from "@realms-world/api";
-
-const createQueryClient = () =>
-  new QueryClient({
-    defaultOptions: {
-      queries: {
-        // With SSR, we usually want to set some default staleTime
-        // above 0 to avoid refetching immediately on the client
-        staleTime: 30 * 1000,
-      },
-    },
-  });
+import { createQueryClient } from "./query-client";
 
 let clientQueryClientSingleton: QueryClient | undefined = undefined;
 const getQueryClient = () => {
@@ -33,10 +24,7 @@ const getQueryClient = () => {
 
 export const api = createTRPCReact<AppRouter>();
 
-export function TRPCReactProvider(props: {
-  children: React.ReactNode;
-  headersPromise: Promise<Headers>;
-}) {
+export function TRPCReactProvider(props: { children: React.ReactNode }) {
   const queryClient = getQueryClient();
 
   const [trpcClient] = useState(() =>

apps/nextjs/src/trpc/react.tsx

@@ -1,13 +1,22 @@
 "use client";
 
-import type { UseEmblaCarouselType } from "embla-carousel-react";
+import type {
+  EmblaCarouselType,
+  EmblaEventType,
+  UseEmblaCarouselType,
+} from "embla-carousel";
 import * as React from "react";
 import { cn } from "@realms-world/utils";
 import useEmblaCarousel from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
 
 import { Button } from "./button";
 
+const TWEEN_FACTOR_BASE = 0.15;
+
+const numberWithinRange = (number: number, min: number, max: number): number =>
+  Math.min(Math.max(number, min), max);
+
 type CarouselApi = UseEmblaCarouselType[1];
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
 type CarouselOptions = UseCarouselParameters[0];
@@ -119,6 +128,77 @@ const Carousel = React.forwardRef<
       };
     }, [api, onSelect]);
 
+    const tweenFactor = React.useRef(0);
+    const tweenNodes = React.useRef<HTMLElement[]>([]);
+
+    const setTweenNodes = React.useCallback((api: EmblaCarouselType): void => {
+      tweenNodes.current = api.slideNodes().map((slideNode) => {
+        return slideNode.querySelector(".embla__scale") as HTMLElement;
+      });
+    }, []);
+
+    const setTweenFactor = React.useCallback((api: EmblaCarouselType) => {
+      tweenFactor.current = TWEEN_FACTOR_BASE * api.scrollSnapList().length;
+    }, []);
+
+    const tweenScale = React.useCallback(
+      (api: EmblaCarouselType, eventName?: EmblaEventType) => {
+        const engine = api.internalEngine();
+        const scrollProgress = api.scrollProgress();
+        const slidesInView = api.slidesInView();
+        const isScrollEvent = eventName === "scroll";
+
+        api.scrollSnapList().forEach((scrollSnap, snapIndex) => {
+          let diffToTarget = scrollSnap - scrollProgress;
+          const slidesInSnap = engine.slideRegistry[snapIndex];
+
+          slidesInSnap.forEach((slideIndex) => {
+            if (isScrollEvent && !slidesInView.includes(slideIndex)) return;
+
+            if (engine.options.loop) {
+              engine.slideLooper.loopPoints.forEach((loopItem) => {
+                const target = loopItem.target();
+
+                if (slideIndex === loopItem.index && target !== 0) {
+                  const sign = Math.sign(target);
+
+                  if (sign === -1) {
+                    diffToTarget = scrollSnap - (1 + scrollProgress);
+                  }
+                  if (sign === 1) {
+                    diffToTarget = scrollSnap + (1 - scrollProgress);
+                  }
+                }
+              });
+            }
+
+            const tweenValue = 1 - Math.abs(diffToTarget * tweenFactor.current);
+            const scale = numberWithinRange(tweenValue, 0, 1).toString();
+            const tweenNode = tweenNodes.current[slideIndex];
+            if (tweenNode) {
+              tweenNode.style.transform = `scale(${scale})`;
+            }
+          });
+        });
+      },
+      [],
+    );
+
+    React.useEffect(() => {
+      if (!api) return;
+
+      setTweenNodes(api);
+      setTweenFactor(api);
+      tweenScale(api);
+
+      api
+        .on("reInit", setTweenNodes)
+        .on("reInit", setTweenFactor)
+        .on("reInit", tweenScale)
+        .on("scroll", tweenScale)
+        .on("slideFocus", tweenScale);
+    }, [api, tweenScale]);
+
     return (
       <CarouselContext.Provider
         value={{

apps/ui/src/components/ui/carousel.tsx

@@ -226,3 +226,7 @@ body::-webkit-scrollbar-thumb,
 .mask-transparent {
   position: relative;
 }
+
+.translate-3d {
+  transform: translate3d(0, 0, 0);
+}