Merge branch 'main' of https://github.com/z-korp/zkube

client/package.json

@@ -69,6 +69,7 @@
     "react-responsive": "^10.0.0",
     "react-router-dom": "^6.23.1",
     "react-tooltip": "^5.28.0",
+    "recharts": "^2.12.7",
     "rxjs": "^7.8.1",
     "sonner": "^1.5.0",
     "starknet": "6.11.0",
@@ -105,4 +106,4 @@
     "vite": "^4.5.3",
     "vite-plugin-mkcert": "^1.17.5"
   }
-}
+}

client/src/dojo/game/models/game.ts

@@ -42,6 +42,7 @@ export class Game {
   public rows: Row[];
   public player_id: string; 
   public seed: bigint;
+  public start_time: Date;
 
   constructor(game: ComponentValue) {
     this.id = game.id;
@@ -72,6 +73,7 @@ export class Game {
     this.bonuses = game.bonuses;
     this.player_id = "0x" + game.player_id.toString(16);
     this.seed = game.seed;
+    this.start_time = game.start_time;
 
     // Destructure blocks and colors bitmaps in to Rows and Blocks
     this.blocks = Packer.sized_unpack(

client/src/index.css

@@ -137,3 +137,34 @@ body {
     wiggle 0.2s ease-in-out infinite,
     blink 0.5s ease-in-out infinite;
 }
+
+.wiggle {
+  animation: wiggle 0.2s ease-in-out infinite;
+}
+
+.blink {
+  animation: blink 0.5s ease-in-out infinite;
+}
+
+.wiggle-blink {
+  animation:
+    wiggle 0.2s ease-in-out infinite,
+    blink 0.5s ease-in-out infinite;
+}
+
+::-webkit-scrollbar {
+  width: 12px; 
+}
+
+::-webkit-scrollbar-track {
+  border-radius: 10px; 
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #888;
+  border-radius: 10px; 
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #555;
+}

client/src/ui/components/MobileMenu.tsx

@@ -10,6 +10,7 @@ import {
   DrawerTitle,
 } from "../elements/drawer";
 import { Leaderboard } from "../modules/Leaderboard";
+import { ProfilePage } from "../modules/ProfilePage";
 import { MusicPlayer } from "../modules/MusicPlayer";
 import AccountDetails from "./AccountDetails";
 import { ModeToggle } from "./Theme";
@@ -56,6 +57,10 @@ const MobileMenu = () => {
               <p className="self-start">Leaderboard</p>
               <Leaderboard />
             </div>
+            <div className="flex flex-col gap-2 items-center">
+              <p className="self-start">Profile</p>
+              <ProfilePage />
+            </div>
           </div>
         </DrawerContent>
       </Drawer>

client/src/ui/containers/Header.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import { usePlayer } from "@/hooks/usePlayer";
 import { useMediaQuery } from "react-responsive";
 import { Leaderboard } from "../modules/Leaderboard";
+import { ProfilePage } from "../modules/ProfilePage";
 import Connect from "../components/Connect";
 import { ModeType } from "@/dojo/game/types/mode";
 import SettingsDropDown from "../components/SettingsDropDown";
@@ -39,11 +40,11 @@ export const Header = () => {
         <div className="flex flex-col gap-4 items-center md:flex-row">
           {!!player && (
             <div className="flex gap-3">
-              <p className="text-2xl max-w-66 truncate">{player.name}</p>
-              <LevelIndicator currentXP={player.points} />
-              <DailyGameStatus />
+            <ProfilePage />
+            <LevelIndicator currentXP={player.points} />
+          <DailyGameStatus />
               <HeaderBalance />
-            </div>
+          </div>
           )}
 
           {ACCOUNT_CONNECTOR === "controller" && <Connect />}

client/src/ui/elements/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/ui/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }