Merge branch 'main' into od-hunter-branch

z-korp · Aug 30, 2024 · d50483d · d50483d
2 parents 9b857da + e06d1e8
commit d50483d
Show file tree

Hide file tree

Showing 11 changed files with 20,614 additions and 35 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -13,7 +13,8 @@
       "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
       "preview": "vite preview",
       "codegen": "graphql-codegen",
-      "gen:models": "npx create-models ../contracts/manifests/dev/manifest.json ./src/dojo/generated/contractModels.ts"
+      "gen:models": "npx create-models ../contracts/manifests/dev/manifest.json ./src/dojo/generated/contractModels.ts",
+    "test": "jest"
     },
     "bin": {
       "create-models": "./bin/models.cjs"
@@ -28,11 +29,16 @@
       "@dojoengine/state": "1.0.0-alpha.1",
       "@dojoengine/torii-client": "1.0.0-alpha.1",
       "@dojoengine/utils": "1.0.0-alpha.1",
-      "@fortawesome/free-solid-svg-icons": "^6.5.2",
+      "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
       "@fortawesome/react-fontawesome": "^0.2.2",
-      "@latticexyz/react": "^2.0.12",
+      "@headlessui/react": "^2.1.3",
+    "@latticexyz/react": "^2.0.12",
       "@latticexyz/utils": "^2.0.12",
-      "@radix-ui/react-dialog": "^1.0.5",
+      "@mui/material": "^5.16.7",
+    "@radix-ui/react-dialog": "^1.0.5",
       "@radix-ui/react-dropdown-menu": "^2.0.6",
       "@radix-ui/react-icons": "^1.3.0",
       "@radix-ui/react-progress": "^1.1.0",
@@ -61,7 +67,8 @@
       "react-dom": "^18.3.1",
       "react-responsive": "^10.0.0",
       "react-router-dom": "^6.23.1",
-      "rxjs": "^7.8.1",
+      "react-tooltip": "^5.28.0",
+    "rxjs": "^7.8.1",
       "sonner": "^1.5.0",
       "starknet": "6.11.0",
       "tailwind-merge": "^2.3.0",
@@ -78,7 +85,8 @@
       "@graphql-codegen/typescript": "^4.0.7",
       "@graphql-codegen/typescript-graphql-request": "^5.0.0",
       "@graphql-codegen/typescript-operations": "^4.2.1",
-      "@types/node": "^20.14.2",
+      "@types/jest": "^29.5.12",
+    "@types/node": "^20.14.2",
       "@types/react": "^18.3.3",
       "@types/react-dom": "^18.3.0",
       "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -88,9 +96,11 @@
       "eslint": "^8.57.0",
       "eslint-plugin-react-hooks": "^4.6.2",
       "eslint-plugin-react-refresh": "^0.3.5",
-      "postcss": "^8.4.38",
+      "jest": "^29.7.0",
+    "postcss": "^8.4.38",
       "tailwindcss": "^3.4.4",
-      "typescript": "^5.4.5",
+      "ts-jest": "^29.2.5",
+    "typescript": "^5.4.5",
       "vite": "^4.5.3",
       "vite-plugin-mkcert": "^1.17.5"
     }

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,14 +1,20 @@
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import { Toaster } from "./ui/elements/sonner";
 import { Home } from "./ui/screens/Home";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/ui/elements/tooltip"; 
+
 
 export default () => {
   return (
-    <Router>
+
+    <TooltipProvider>
+  <Router>
       <Routes>
         <Route path="/" element={<Home />} />
       </Routes>
       <Toaster position="bottom-right" />
     </Router>
+  </TooltipProvider>
+
   );
 };
diff --git a/client/src/dojo/game/models/game.ts b/client/src/dojo/game/models/game.ts
@@ -34,12 +34,13 @@ export class Game {
   public max_combo: number;
   public score: number;
   public moves: number;
+  public buyIn: number = 100; // Set default buy-in of $100
   public next_row: number[];
   public next_color: number[];
   public bonuses: number[];
   public blocks: number[][];
   public rows: Row[];
-  public player_id: string;
+  public player_id: string; 
   public seed: bigint;
 
   constructor(game: ComponentValue) {
@@ -61,6 +62,7 @@ export class Game {
     this.combo = game.combo_counter;
     this.max_combo = game.max_combo;
     this.score = game.score;
+    this.buyIn = 100;
     this.moves = game.moves;
     this.next_color = Packer.sized_unpack(
       BigInt(game.next_color),

diff --git a/client/src/hooks/useGames.tsx b/client/src/hooks/useGames.tsx
@@ -26,7 +26,7 @@ export const useGames = (): { games: Game[] } => {
       }
       return new GameClass(component);
     });
-
+ 
     const objectified = components.reduce(
       (obj: any, game: Game | undefined) => {
         if (game) {

diff --git a/client/src/ui/components/GameBoard.tsx b/client/src/ui/components/GameBoard.tsx
@@ -1066,7 +1066,45 @@ const GameBoard: React.FC<GameBoardProps> = ({
             waveCount={waveCount}
           />
         </PlayerPanel>
-
+          <div
+            className={`flex grow ${isMdOrLarger ? "text-4xl" : "text-2xl"} sm:gap-2 gap-[2px] justify-end ml-4`}
+          >
+            {score}
+            <div className="relative inline-block">
+              <FontAwesomeIcon
+                icon={faStar}
+                className="text-yellow-500"
+                width={26}
+                height={26}
+              />
+            </div>
+          </div>
+          <div
+            className={`flex grow ${isMdOrLarger ? "text-4xl" : "text-2xl"} sm:gap-2 gap-[2px] justify-end relative ml-4`}
+          >
+            {combo}
+            <div className="relative inline-block">
+              <FontAwesomeIcon
+                icon={faFire}
+                className="text-slate-500"
+                width={26}
+                height={26}
+              />
+            </div>
+          </div>
+          <div
+            className={`flex grow ${isMdOrLarger ? "text-4xl" : "text-2xl"} sm:gap-2 gap-[2px] justify-end relative ml-4`}
+          >
+            {maxCombo}
+            <FontAwesomeIcon
+              icon={faWebAwesome}
+              className="text-slate-500"
+              width={28}
+              height={28}
+            />
+          </div>
+
+        </div>
         <div className="bg-slate-800 relative">
           <div
             ref={gridRef}

diff --git a/client/src/ui/elements/dialog.tsx b/client/src/ui/elements/dialog.tsx
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[2000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-[2000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background py-6  mx-auto sm:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
         className,
       )}
       {...props}

diff --git a/client/src/ui/elements/table.tsx b/client/src/ui/elements/table.tsx
@@ -104,6 +104,7 @@ const TableCaption = React.forwardRef<
     ref={ref}
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
+
   />
 ));
 TableCaption.displayName = "TableCaption";

diff --git a/client/src/ui/elements/tooltip.tsx b/client/src/ui/elements/tooltip.tsx
@@ -24,5 +24,5 @@ const TooltipContent = React.forwardRef<
   />
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
+ 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/client/src/ui/modules/Leaderboard.tsx b/client/src/ui/modules/Leaderboard.tsx
@@ -32,16 +32,54 @@ import {
   faFire,
   faWebAwesome,
   faStar,
+  faHandHoldingDollar,
+  faTrophy
 } from "@fortawesome/free-solid-svg-icons";
 import { usePlayer } from "@/hooks/usePlayer";
 import { useMediaQuery } from "react-responsive";
 import { ModeType } from "@/dojo/game/types/mode";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/ui/elements/tabs";
 import { Level } from "@/dojo/game/types/level";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "@/ui/elements/tooltip"; 
+
+
+
 
 const GAME_PER_PAGE = 5;
 const MAX_PAGE_COUNT = 5;
 
+// enum ModeType {
+//   Daily = 'daily',
+//   Normal = 'normal',
+// }
+
+interface TabListProps {
+  activeTab: ModeType;
+  setActiveTab: React.Dispatch<React.SetStateAction<ModeType>>;
+}
+
+const TabList: React.FC<TabListProps> = ({ activeTab, setActiveTab }) => (
+  <TabsList className="grid w-[80%] mx-auto sm:w-full grid-cols-2">
+    <TabsTrigger value={ModeType.Daily} onClick={() => setActiveTab(ModeType.Daily)}>Daily</TabsTrigger>
+    <TabsTrigger value={ModeType.Normal} onClick={() => setActiveTab(ModeType.Normal)}>Normal</TabsTrigger>
+  </TabsList>
+);
+
+interface TabContentProps {
+  modeType: ModeType;
+}
+
+const TabContent: React.FC<TabContentProps> = ({ modeType }) => (
+  <>
+    <TabsContent value={ModeType.Daily} hidden={modeType !== ModeType.Daily}>
+      <Content modeType={ModeType.Daily} />
+    </TabsContent>
+    <TabsContent value={ModeType.Normal} hidden={modeType !== ModeType.Normal}>
+      <Content modeType={ModeType.Normal} />
+    </TabsContent>
+  </>
+);
+
 const getNextDailyChallengeTime = () => {
   const now = new Date();
   const nextMidnight = new Date(now);
@@ -67,20 +105,9 @@ export const Leaderboard = () => {
         <DialogHeader className="flex items-center text-2xl">
           <DialogTitle>Leaderboards</DialogTitle>
         </DialogHeader>
-        <Tabs
-          value={activeTab}
-          onValueChange={(value) => setActiveTab(value as ModeType)}
-        >
-          <TabsList className="grid w-full grid-cols-2">
-            <TabsTrigger value={ModeType.Daily}>Daily</TabsTrigger>
-            <TabsTrigger value={ModeType.Normal}>Normal</TabsTrigger>
-          </TabsList>
-          <TabsContent value={ModeType.Daily}>
-            <Content modeType={ModeType.Daily} />
-          </TabsContent>
-          <TabsContent value={ModeType.Normal}>
-            <Content modeType={ModeType.Normal} />
-          </TabsContent>
+        <Tabs value={activeTab}>
+          <TabList activeTab={activeTab} setActiveTab={setActiveTab} />
+          <TabContent modeType={activeTab} />
         </Tabs>
       </DialogContent>
     </Dialog>
@@ -99,13 +126,33 @@ export const Content: React.FC<ContentProps> = ({ modeType }) => {
     return games.filter((game) => game.mode.value === modeType);
   }, [games, modeType]);
 
-  const sortedGames = useMemo(() => {
-    return filteredGames
+  const { sortedGames, totalBuyIn, winningPool } = useMemo(() => {
+    const sorted = filteredGames
       .filter((game) => game.score > 0)
       .sort((a, b) => b.combo - a.combo)
       .sort((a, b) => b.score - a.score);
+
+    const totalBuyIn = sorted.reduce((sum, game) => sum + game.buyIn, 0);
+    const winningPool = totalBuyIn * 0.9; // Assuming 10% goes to Zkube
+
+    return { sortedGames: sorted, totalBuyIn, winningPool };
   }, [filteredGames]);
 
+
+    // Distribute potential winnings amongs top 5 winners
+    const distributionPercentages = [0.4, 0.25, 0.15, 0.1, 0.1];
+
+const gamesWithWinnings = useMemo(() => {
+  return sortedGames.map((game, index) => {
+    let potentialWinnings = 0;
+    if (index < distributionPercentages.length) {
+      potentialWinnings = winningPool * distributionPercentages[index];
+    }
+    return { ...game, potentialWinnings, isOver: () => game.over };
+  });
+}, [sortedGames, winningPool]);
+
+
   useEffect(() => {
     const rem = Math.floor(sortedGames.length / (GAME_PER_PAGE + 1)) + 1;
     setPageCount(rem);
@@ -148,7 +195,7 @@ export const Content: React.FC<ContentProps> = ({ modeType }) => {
             {`${days}d ${hours}h ${minutes}m ${seconds}s`}
           </p>
         </div>
-      <Table className="text-md w-full">
+      <Table className="text-sm sm:text-base sm:w-full ">
         <TableCaption className={`${disabled && "hidden"}`}>
           Leaderboard is waiting for its best players to make history
         </TableCaption>
@@ -175,10 +222,27 @@ export const Content: React.FC<ContentProps> = ({ modeType }) => {
                 />
               </div>
             </TableHead>
+
+            <TableHead className="w-[15%] text-center">
+              <div className="flex items-center justify-center gap-1">
+
+              <Tooltip>
+              <TooltipTrigger asChild>
+              <button className="">
+              <FontAwesomeIcon icon={faTrophy}  className="text-yellow-500" />
+              </button>
+              </TooltipTrigger>
+              <TooltipContent side="top" align="start" className=" w-[180px] text-base">
+              Potential winnnings 1st place: 45%, 2nd place: 25%, 3rd place: 15%, 4th place: 10%, 5th place: 10%, Zkube: 10%
+              </TooltipContent>
+               </Tooltip>
+
+              </div>
+            </TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
-          {sortedGames.slice(start, end).map((game, index) => (
+          {gamesWithWinnings.slice(start, end).map((game, index) => (
             <Row
               key={index}
               rank={(page - 1) * GAME_PER_PAGE + index + 1}
@@ -220,15 +284,15 @@ export const Content: React.FC<ContentProps> = ({ modeType }) => {
   );
 };
 
-export const Row = ({ rank, game }: { rank: number; game: Game }) => {
+export const Row = ({ rank, game }: { rank: number; game: Game & { potentialWinnings: number }}) => {
   const { player } = usePlayer({ playerId: game.player_id });
 
   console.log(player);
 
   return (
     <TableRow className="hover:bg-slate-100 dark:hover:bg-slate-800">
       <TableCell className="text-center font-semibold">{`#${rank}`}</TableCell>
-      <TableCell className="text-left max-w-36 truncate">
+      <TableCell className="text-left sm:max-w-36 truncate">
         {player?.name || "-"}
       </TableCell>
       <TableCell className="text-center">
@@ -237,6 +301,7 @@ export const Row = ({ rank, game }: { rank: number; game: Game }) => {
       <TableCell className="text-center font-bold">{game.score}</TableCell>
       <TableCell className="text-center font-bold">{game.combo}</TableCell>
       <TableCell className="text-center font-bold">{game.max_combo}</TableCell>
+      <TableCell className="text-center font-bold">{game.potentialWinnings.toFixed(2)}</TableCell>
     </TableRow>
   );
 };
diff --git a/client/src/ui/screens/Home.tsx b/client/src/ui/screens/Home.tsx
@@ -269,7 +269,7 @@ export const Home = () => {
             </div>
           </div>
           <AnimatePresence>
-            {!animationDone && (
+            {!animationDone && ( 
               <>
                 <>
                   <PalmTree
-Original file line number
+Diff line change
@@ Expand Up / @@ -24,5 +24,5 @@ const TooltipContent = React.forwardRef< @@
       />
     ));
     TooltipContent.displayName = TooltipPrimitive.Content.displayName;
     export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };