-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a8fc802
commit ac84abd
Showing
61 changed files
with
3,506 additions
and
1,224 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +0,0 @@ | ||
| #root { | ||
| max-width: 1280px; | ||
| margin: 0 auto; | ||
| padding: 2rem; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .logo { | ||
| height: 6em; | ||
| padding: 1.5em; | ||
| will-change: filter; | ||
| transition: filter 300ms; | ||
| } | ||
| .logo:hover { | ||
| filter: drop-shadow(0 0 2em #646cffaa); | ||
| } | ||
| .logo.react:hover { | ||
| filter: drop-shadow(0 0 2em #61dafbaa); | ||
| } | ||
|
|
||
| @keyframes logo-spin { | ||
| from { | ||
| transform: rotate(0deg); | ||
| } | ||
| to { | ||
| transform: rotate(360deg); | ||
| } | ||
| } | ||
|
|
||
| @media (prefers-reduced-motion: no-preference) { | ||
| a:nth-of-type(2) .logo { | ||
| animation: logo-spin infinite 20s linear; | ||
| } | ||
| } | ||
|
|
||
| .card { | ||
| padding: 2em; | ||
| } | ||
|
|
||
| .read-the-docs { | ||
| color: #888; | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,17 @@ | ||
| import { useState } from "react"; | ||
| import { LandingPage } from "./components/pages/LandingPage"; | ||
| import { Button } from "./components/ui/button"; | ||
|
|
||
| import "./App.css"; | ||
|
|
||
| import { useGameStateStore } from "@lootsurvivor/core"; | ||
| import { useSurvivorState } from "./hooks/useSurvivorState"; | ||
| import { useConnect } from "@starknet-react/core"; | ||
|
|
||
| function App() { | ||
| const [count, setCount] = useState(0); | ||
|
|
||
| const { gameState } = useGameStateStore.getState(); | ||
| const { survivor } = useSurvivorState(); | ||
|
|
||
| return <></>; | ||
| return ( | ||
| <> | ||
| <LandingPage /> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
123 changes: 123 additions & 0 deletions
123
clients/react-vite/src/components/pages/LandingPage.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,123 @@ | ||
| import { useAdventurersByXPWithScores } from "@/hooks"; | ||
| import { | ||
| Pagination, | ||
| PaginationContent, | ||
| PaginationItem, | ||
| PaginationLink, | ||
| PaginationNext, | ||
| PaginationPrevious, | ||
| } from "@/components/ui/pagination"; | ||
|
|
||
| import { useConnect } from "@starknet-react/core"; | ||
| import { useState } from "react"; | ||
| import { AnimatedNumber } from "../ui/animatedNumber"; | ||
|
|
||
| export const LandingPage = () => { | ||
| const { connect, connectors } = useConnect(); | ||
|
|
||
| const [page, setPage] = useState(1); | ||
|
|
||
| const handlePreviousPage = () => { | ||
| setPage((prev) => Math.max(prev - 1, 1)); | ||
| }; | ||
|
|
||
| const handleNextPage = () => { | ||
| setPage((prev) => Math.min(prev + 1, totalPages)); | ||
| }; | ||
|
|
||
| const { adventurersWithScores, isLoading, isError } = | ||
| useAdventurersByXPWithScores({ page }); | ||
|
|
||
| const itemsPerPage = 10; | ||
| const totalPages = 5; | ||
| const startingRank = (page - 1) * itemsPerPage + 1; | ||
|
|
||
| return ( | ||
| <div className="w-screen h-screen bg-skulls bg-cover bg-no-repeat bg-center flex justify-center"> | ||
| <div className="self-center sm:w-1/2 text-center uppercase"> | ||
| <div className="sm:text-5xl mb-8">Leaderboard</div> | ||
| <div className="bg-black/90 p-10 w-full border border-primary rounded-2xl "> | ||
| <div className="overflow-x-auto "> | ||
| <table className="w-full"> | ||
| <thead> | ||
| <tr> | ||
| <th className="text-xl pb-3 px-4 border-b border-primary"> | ||
| Rank | ||
| </th> | ||
| <th className="text-xl pb-3 px-4 border-b border-primary"> | ||
| Player | ||
| </th> | ||
| <th className="text-xl pb-3 px-4 border-b border-primary"> | ||
| Score | ||
| </th> | ||
| <th className="text-xl pb-3 px-4 border-b border-primary"> | ||
| Lords Payout | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| {isLoading && <div className="p-10 mx-auto">Loading...</div>} | ||
| {isError && <div>Error</div>} | ||
| {adventurersWithScores?.slice(0, 1).map((adventurer, index) => ( | ||
| <tr key={index} className=" bg-primary text-black"> | ||
| <td className="text-xl py-5 px-4 border-b border-primary"> | ||
| {startingRank} | ||
| </td> | ||
| <td className="text-xl py-5 px-4 border-b border-primary"> | ||
| {adventurer.name} | ||
| </td> | ||
| <td className="text-xl py-5 px-4 border-b border-primary"> | ||
| {adventurer.xp} | ||
| </td> | ||
| <td className="text-xl py-5 px-4 border-b border-primary"> | ||
| <AnimatedNumber value={adventurer.totalPayout || 0} /> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| {adventurersWithScores | ||
| ?.slice(1, 12) | ||
| .map((adventurer, index) => ( | ||
| <tr key={index} className=" "> | ||
| <td className="py-3 px-4 border-b border-primary"> | ||
| {startingRank + index + 1} | ||
| </td> | ||
| <td className="py-3 px-4 border-b border-primary"> | ||
| {adventurer.name} | ||
| </td> | ||
| <td className="py-3 px-4 border-b border-primary"> | ||
| {adventurer.xp} | ||
| </td> | ||
| <td className="py-3 px-4 border-b border-primary"> | ||
| <AnimatedNumber value={adventurer.totalPayout || 0} /> | ||
| </td> | ||
| </tr> | ||
| ))} | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <Pagination className="mt-4"> | ||
| <PaginationContent> | ||
| <PaginationItem> | ||
| <PaginationPrevious onClick={handlePreviousPage} /> | ||
| </PaginationItem> | ||
| {[...Array(totalPages)].map((_, i) => ( | ||
| <PaginationItem key={i}> | ||
| <PaginationLink | ||
| href="#" | ||
| onClick={() => setPage(i + 1)} | ||
| isActive={page === i + 1} | ||
| > | ||
| {i + 1} | ||
| </PaginationLink> | ||
| </PaginationItem> | ||
| ))} | ||
| <PaginationItem> | ||
| <PaginationNext onClick={handleNextPage} /> | ||
| </PaginationItem> | ||
| </PaginationContent> | ||
| </Pagination> | ||
| </div> | ||
| </div>{" "} | ||
| </div> | ||
| ); | ||
| }; |
16 changes: 16 additions & 0 deletions
16
clients/react-vite/src/components/providers/QueryProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| import React from "react"; | ||
| import { | ||
| useQuery, | ||
| useMutation, | ||
| useQueryClient, | ||
| QueryClient, | ||
| QueryClientProvider, | ||
| } from "@tanstack/react-query"; | ||
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| export function QueryProvider({ children }: { children: React.ReactNode }) { | ||
| return ( | ||
| <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> | ||
| ); | ||
| } |
19 changes: 19 additions & 0 deletions
19
clients/react-vite/src/components/providers/StarknetProvider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| import React from "react"; | ||
| import CartridgeConnector from "@cartridge/connector"; | ||
| import { sepolia, mainnet } from "@starknet-react/chains"; | ||
| import { StarknetConfig, publicProvider, voyager } from "@starknet-react/core"; | ||
|
|
||
| export function StarknetProvider({ children }: { children: React.ReactNode }) { | ||
| const cartridge = new CartridgeConnector([]); | ||
|
|
||
| return ( | ||
| <StarknetConfig | ||
| chains={[mainnet, sepolia]} | ||
| provider={publicProvider()} | ||
| connectors={[cartridge]} | ||
| explorer={voyager} | ||
| > | ||
| {children} | ||
| </StarknetConfig> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { motion, useMotionValue, useTransform, animate } from "framer-motion"; | ||
| import { useEffect } from "react"; | ||
| export const AnimatedNumber = ({ value }: { value: number }) => { | ||
| const count = useMotionValue(0); | ||
| const rounded = useTransform(count, (latest) => latest.toFixed(2)); | ||
|
|
||
| useEffect(() => { | ||
| const controls = animate(count, value, { duration: 1 }); | ||
| return controls.stop; | ||
| }, [count, value]); | ||
|
|
||
| return <motion.span>{rounded}</motion.span>; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,117 @@ | ||
| import * as React from "react" | ||
| import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react" | ||
|
|
||
| import { cn } from "@/lib/utils" | ||
| import { ButtonProps, buttonVariants } from "@/components/ui/button" | ||
|
|
||
| const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => ( | ||
| <nav | ||
| role="navigation" | ||
| aria-label="pagination" | ||
| className={cn("mx-auto flex w-full justify-center", className)} | ||
| {...props} | ||
| /> | ||
| ) | ||
| Pagination.displayName = "Pagination" | ||
|
|
||
| const PaginationContent = React.forwardRef< | ||
| HTMLUListElement, | ||
| React.ComponentProps<"ul"> | ||
| >(({ className, ...props }, ref) => ( | ||
| <ul | ||
| ref={ref} | ||
| className={cn("flex flex-row items-center gap-1", className)} | ||
| {...props} | ||
| /> | ||
| )) | ||
| PaginationContent.displayName = "PaginationContent" | ||
|
|
||
| const PaginationItem = React.forwardRef< | ||
| HTMLLIElement, | ||
| React.ComponentProps<"li"> | ||
| >(({ className, ...props }, ref) => ( | ||
| <li ref={ref} className={cn("", className)} {...props} /> | ||
| )) | ||
| PaginationItem.displayName = "PaginationItem" | ||
|
|
||
| type PaginationLinkProps = { | ||
| isActive?: boolean | ||
| } & Pick<ButtonProps, "size"> & | ||
| React.ComponentProps<"a"> | ||
|
|
||
| const PaginationLink = ({ | ||
| className, | ||
| isActive, | ||
| size = "icon", | ||
| ...props | ||
| }: PaginationLinkProps) => ( | ||
| <a | ||
| aria-current={isActive ? "page" : undefined} | ||
| className={cn( | ||
| buttonVariants({ | ||
| variant: isActive ? "outline" : "ghost", | ||
| size, | ||
| }), | ||
| className | ||
| )} | ||
| {...props} | ||
| /> | ||
| ) | ||
| PaginationLink.displayName = "PaginationLink" | ||
|
|
||
| const PaginationPrevious = ({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<typeof PaginationLink>) => ( | ||
| <PaginationLink | ||
| aria-label="Go to previous page" | ||
| size="default" | ||
| className={cn("gap-1 pl-2.5", className)} | ||
| {...props} | ||
| > | ||
| <ChevronLeft className="h-4 w-4" /> | ||
| <span>Previous</span> | ||
| </PaginationLink> | ||
| ) | ||
| PaginationPrevious.displayName = "PaginationPrevious" | ||
|
|
||
| const PaginationNext = ({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<typeof PaginationLink>) => ( | ||
| <PaginationLink | ||
| aria-label="Go to next page" | ||
| size="default" | ||
| className={cn("gap-1 pr-2.5", className)} | ||
| {...props} | ||
| > | ||
| <span>Next</span> | ||
| <ChevronRight className="h-4 w-4" /> | ||
| </PaginationLink> | ||
| ) | ||
| PaginationNext.displayName = "PaginationNext" | ||
|
|
||
| const PaginationEllipsis = ({ | ||
| className, | ||
| ...props | ||
| }: React.ComponentProps<"span">) => ( | ||
| <span | ||
| aria-hidden | ||
| className={cn("flex h-9 w-9 items-center justify-center", className)} | ||
| {...props} | ||
| > | ||
| <MoreHorizontal className="h-4 w-4" /> | ||
| <span className="sr-only">More pages</span> | ||
| </span> | ||
| ) | ||
| PaginationEllipsis.displayName = "PaginationEllipsis" | ||
|
|
||
| export { | ||
| Pagination, | ||
| PaginationContent, | ||
| PaginationEllipsis, | ||
| PaginationItem, | ||
| PaginationLink, | ||
| PaginationNext, | ||
| PaginationPrevious, | ||
| } |
Oops, something went wrong.