✨ Add new content

Author: bal7hazar

client/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}

client/package.json

@@ -12,30 +12,37 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@bal7hazar/arcade-sdk": "0.0.76",
-    "@cartridge/connector": "0.7.4",
-    "@cartridge/controller": "0.7.4",
+    "@bal7hazar/arcade-sdk": "0.0.79",
+    "@cartridge/connector": "0.7.5",
+    "@cartridge/controller": "0.7.5",
     "@cartridge/penpal": "^6.2.3",
     "@cartridge/presets": "0.5.4",
-    "@cartridge/ui-next": "0.7.4",
-    "@cartridge/utils": "0.7.4",
-    "@hookform/resolvers": "^3.9.1",
+    "@cartridge/ui-next": "0.7.5",
+    "@cartridge/utils": "0.7.5",
+    "@hookform/resolvers": "^3.10.0",
+    "@radix-ui/react-label": "^2.1.2",
+    "@radix-ui/react-slot": "^1.1.2",
     "@starknet-react/chains": "^3.1.2",
     "@starknet-react/core": "^3.7.1",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "compare-versions": "^6.1.1",
     "lodash": "^4.17.21",
+    "lucide-react": "^0.479.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.2",
+    "react-hook-form": "^7.54.2",
     "react-query": "^3.39.2",
     "react-router-dom": "^6.27.0",
     "sonner": "^1.4.41",
     "starknet": "^6.11.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7",
     "viem": "^2.22.9",
     "vite-plugin-mkcert": "^1.17.6",
     "vite-plugin-top-level-await": "^1.4.4",
     "vite-plugin-wasm": "^3.3.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

client/pnpm-lock.yaml

@@ -10,19 +10,20 @@ import {
   AchievementSummary,
 } from "@cartridge/ui-next";
 import { useUsername } from "@/hooks/account";
-import { useCallback, useMemo } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { Trophies } from "./trophies";
 import { useArcade } from "@/hooks/arcade";
 import { GameModel } from "@bal7hazar/arcade-sdk";
 import { addAddressPadding } from "starknet";
 import { useAchievements, usePlayerStats } from "@/hooks/achievements";
 import { useAccount } from "@starknet-react/core";
 import { Item } from "@/helpers/achievements";
-
-const PLACEHOLDER =
-  "https://static.cartridge.gg/presets/cartridge/cover-dark.png";
+import { PLACEHOLDER } from "@/constants";
 
 export function Achievements({ game }: { game?: GameModel }) {
+  const [tab, setTab] = useState<"achievements" | "leaderboard">(
+    "achievements",
+  );
   const { address: self } = useAccount();
   const { achievements, globals, players, usernames, isLoading } =
     useAchievements();
@@ -153,6 +154,10 @@ export function Achievements({ game }: { game?: GameModel }) {
     <LayoutContent className="gap-y-6 select-none h-full overflow-clip">
       {isSelf ? (
         <AchievementTabs
+          value={tab}
+          onValueChange={(value) =>
+            setTab(value as "achievements" | "leaderboard")
+          }
           count={!game ? gamesCompleted : count}
           total={!game ? gamesTotal : total}
           rank={!game ? gamesRank : gameRank}
@@ -308,5 +313,5 @@ export function GameRow({
     };
   }, [gameAchievements, game, pinneds]);
 
-  return <AchievementSummary {...summaryProps} variant={variant} />;
+  return <AchievementSummary {...summaryProps} variant={variant} active />;
 }

client/src/components/achievements/index.tsx

@@ -7,6 +7,7 @@ import { useEffect } from "react";
 import { useAchievements } from "@/hooks/achievements";
 import { ArcadeTabs, TabsContent } from "@cartridge/ui-next";
 import { useAccount } from "@starknet-react/core";
+import { DiscoverScene } from "./scenes/discover";
 
 export function App() {
   const { isConnected } = useAccount();
@@ -45,7 +46,7 @@ export function App() {
               >
                 <Games />
                 <TabsContent className="p-0 mt-0 grow w-full" value="discover">
-                  <InventoryScene />
+                  <DiscoverScene />
                 </TabsContent>
                 <TabsContent className="p-0 mt-0 grow w-full" value="inventory">
                   <InventoryScene />

client/src/components/app.tsx

@@ -0,0 +1,92 @@
+import {
+  LayoutContent,
+  LayoutContentLoader,
+  ArcadeDiscoveryGroup,
+} from "@cartridge/ui-next";
+import { useMemo } from "react";
+import { useArcade } from "@/hooks/arcade";
+import { GameModel } from "@bal7hazar/arcade-sdk";
+import { useAchievements } from "@/hooks/achievements";
+import { PLACEHOLDER } from "@/constants";
+
+interface Event {
+  name: string;
+  achievement: { title: string; icon: string };
+  timestamp: number;
+}
+
+export function Discover({ game }: { game?: GameModel }) {
+  const { events, usernames, isLoading } = useAchievements();
+  const { games } = useArcade();
+
+  const filteredGames = useMemo(() => {
+    return !game ? games : [game];
+  }, [games, game]);
+
+  const gameEvents = useMemo(() => {
+    return filteredGames.map((game) => {
+      const data = events[game?.project]?.map((event) => {
+        return {
+          name: usernames[event.player],
+          achievement: event.achievement,
+          timestamp: event.timestamp,
+        };
+      });
+      if (!data) return [];
+      if (filteredGames.length > 1) {
+        return data.slice(0, 3);
+      }
+      return data.slice(0, 20);
+    });
+  }, [events, filteredGames, usernames]);
+
+  if (isLoading) return <LayoutContentLoader />;
+
+  return (
+    <LayoutContent className="gap-y-6 select-none h-full overflow-clip">
+      <div
+        className="p-0 mt-0 pb-6 overflow-y-scroll"
+        style={{ scrollbarWidth: "none" }}
+      >
+        <div className="flex flex-col gap-y-6">
+          {filteredGames.map((item, index) => (
+            <GameRow key={index} game={item} events={gameEvents[index]} />
+          ))}
+        </div>
+      </div>
+    </LayoutContent>
+  );
+}
+
+export function GameRow({
+  game,
+  events,
+}: {
+  game: GameModel;
+  events: Event[];
+}) {
+  const gameData = useMemo(() => {
+    return {
+      metadata: {
+        name: game.metadata.name,
+        logo: game.metadata.image,
+        cover: game.metadata.banner ?? PLACEHOLDER,
+      },
+      socials: game.socials,
+    };
+  }, [game]);
+
+  return (
+    <div className="rounded-lg overflow-hidden">
+      <ArcadeDiscoveryGroup
+        className={
+          game.metadata.color
+            ? `data-[theme=true]:text-[${game.metadata.color}]`
+            : ""
+        }
+        game={gameData}
+        events={events}
+      />
+    </div>
+  );
+}

client/src/components/discover/index.tsx

@@ -1,4 +1,10 @@
-import { ArcadeGameSelect, CardListContent, cn } from "@cartridge/ui-next";
+import {
+  ArcadeGameSelect,
+  Button,
+  CardListContent,
+  cn,
+  GearIcon,
+} from "@cartridge/ui-next";
 import { useCallback, useState } from "react";
 import { useTheme } from "@/hooks/context";
 import {
@@ -8,20 +14,20 @@ import {
 import { useArcade } from "@/hooks/arcade";
 import { useProject } from "@/hooks/project";
 import { usePlayerGameStats, usePlayerStats } from "@/hooks/achievements";
+import { Register } from "./register";
 
 export const Games = () => {
   const [selected, setSelected] = useState(0);
   const { games } = useArcade();
 
   return (
     <div
-      className="flex flex-col gap-y-px min-w-[324px] grow overflow-clip"
+      className="flex flex-col gap-y-px min-w-[324px] h-full overflow-clip pb-6"
       style={{ scrollbarWidth: "none" }}
     >
       <Game
         index={0}
         first={true}
-        last={false}
         project=""
         namespace=""
         preset="default"
@@ -31,15 +37,14 @@ export const Games = () => {
         setSelected={setSelected}
       />
       <CardListContent
-        className="p-0 pb-6 grow overflow-y-scroll"
+        className="p-0 overflow-y-scroll"
         style={{ scrollbarWidth: "none" }}
       >
         {games.map((game, index) => (
           <Game
             key={`${game.worldAddress}-${game.namespace}`}
             index={index + 1}
             first={false}
-            last={index === games.length - 1}
             project={game.project}
             namespace={game.namespace}
             preset={game.preset ?? "default"}
@@ -51,14 +56,14 @@ export const Games = () => {
           />
         ))}
       </CardListContent>
+      <Register />
     </div>
   );
 };
 
 export const Game = ({
   index,
   first,
-  last,
   project,
   namespace,
   preset,
@@ -70,7 +75,6 @@ export const Game = ({
 }: {
   index: number;
   first: boolean;
-  last: boolean;
   project: string;
   namespace: string;
   preset: string;
@@ -126,21 +130,23 @@ export const Game = ({
   ]);
 
   return (
-    <div
-      className={cn(
-        first && "rounded-t overflow-clip",
-        last && "rounded-b overflow-clip",
-      )}
-      onClick={handleClick}
-    >
+    <div className={cn("flex gap-px", first && "rounded-t overflow-clip")}>
       <ArcadeGameSelect
         name={name}
         logo={icon}
         cover={cover}
         points={project ? gameEarnings : totalEarnings}
         active={active}
         onClick={handleClick}
+        className="grow"
       />
+      <Button
+        variant="secondary"
+        size="icon"
+        className="w-7 h-full rounded-none"
+      >
+        <GearIcon size="xs" />
+      </Button>
     </div>
   );
 };