fix account velords and delegation randomisation

apps/nextjs/src/app/(app)/account/delegates/DelegatesList.tsx

@@ -1,7 +1,9 @@
 "use client";
-import { api } from "@/trpc/react";
+
 import type { RouterOutputs } from "@realms-world/api";
 import { use } from "react";
+import { api } from "@/trpc/react";
+
 import { DelegateCard } from "./DelegateCard";
 
 export const DelegatesList = ({
@@ -18,17 +20,20 @@ export const DelegatesList = ({
     },
   );
 
+  const shuffledDelegates = delegatesInfo.items
+    .filter(
+      (delegate) =>
+        delegate.user !==
+        "0x0000000000000000000000000000000000000000000000000000000000000000",
+    )
+    .sort(() => Math.random() - 0.5)
+    .sort((a, b) => (a.delegatedVotesRaw === "0" ? 1 : -1));
+
   return (
     <div className="my-4 grid grid-cols-1 gap-4 overflow-x-hidden md:grid-cols-3">
-      {delegatesInfo.items
-        .filter(
-          (delegate) =>
-            delegate.user !==
-            "0x0000000000000000000000000000000000000000000000000000000000000000",
-        )
-        .map((delegate) => (
-          <DelegateCard key={delegate.id} delegate={delegate} />
-        ))}
+      {shuffledDelegates.map((delegate) => (
+        <DelegateCard key={delegate.id} delegate={delegate} />
+      ))}
     </div>
   );
 };

apps/nextjs/src/app/(app)/account/lords/velords/VeLords.tsx

@@ -153,7 +153,8 @@ export const VeLords = () => {
     blockIdentifier: BlockTag.PENDING as BlockNumber,
   });
 
-  const { data: veLordsBurns } = api.veLordsBurns.sumByWeek.useQuery();
+  //const { data: veLordsBurns } = api.veLordsBurns.sumByWeek.useQuery();
+  const { data: veLordsBurns } = api.veLordsBurns.all.useQuery({});
 
   const [amount, setAmount] = useState<string>("");
   const [lockWeeks, setLockWeeks] = useState<number>(0);
@@ -310,7 +311,6 @@ export const VeLords = () => {
               </CardHeader>
               <CardContent>
                 <div className="prose text-primary">
-                  {" "}
                   <p>Lock your Lords for veLords and:</p>
                   <ul className="ml-5 list-disc">
                     <li>

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

@@ -24,6 +24,10 @@ import CollectionsList from "./collection/CollectionsList";
 
 export default async function Home() {
   const games = await reader().collections.games.all();
+
+  // Randomize the order of games
+  const shuffledGames = games.sort(() => Math.random() - 0.5);
+
   const carouselItems = games
     .filter((a) => a.slug === "realms-eternum")
     .concat(
@@ -90,11 +94,11 @@ export default async function Home() {
             All Games
           </h2>
           <div className="">
-            <Carousel opts={{ dragFree: true }} className="w-full">
+            <Carousel opts={{ startIndex: 1 }} className="w-full">
               <CarouselContent>
-                {games.map((game, index) => (
+                {shuffledGames.map((game, index) => (
                   <CarouselItem
-                    className="translate-3d flex-[0_0_25%] pl-0"
+                    className="translate-3d flex-[0_0_55%] pl-1 sm:flex-[0_0_25%]"
                     key={index}
                   >
                     <GameCard

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

@@ -9,15 +9,20 @@ export const AgentBanner = () => {
   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">
+      <motion.div
+        className="mx-4 w-full px-16 md:w-1/2"
+        initial={{ x: "-100%", opacity: 0 }}
+        animate={isInView ? { x: 0, opacity: 1 } : {}}
+        transition={{ type: "spring", stiffness: 50, damping: 20 }}
+      >
         <Image
           src="/elizaOS.avif"
           alt="Banner Image"
-          width={800}
-          height={600}
+          width={400}
+          height={300}
           className="h-full w-full object-cover"
         />
-      </div>
+      </motion.div>
       <div className="w-full p-4 md:w-1/2">
         <div className="mx-auto max-w-lg">
           <motion.h2
@@ -40,7 +45,7 @@ export const AgentBanner = () => {
             thrive in Realms World
           </motion.p>
           <motion.a
-            className="mt-4 text-sm sm:text-base md:text-lg"
+            className="mt-4 text-xs underline sm:text-base md:text-lg"
             initial={{ opacity: 0 }}
             animate={isInView ? { opacity: 1 } : {}}
             transition={{ delay: 0.6, duration: 1 }}