diff --git a/web/public/images/events/cops/0.gif b/web/public/images/events/cops/0.gif deleted file mode 100644 index df40eaab..00000000 Binary files a/web/public/images/events/cops/0.gif and /dev/null differ diff --git a/web/public/images/events/cops/1.gif b/web/public/images/events/cops/1.gif index c606edb2..6e8eabd5 100644 Binary files a/web/public/images/events/cops/1.gif and b/web/public/images/events/cops/1.gif differ diff --git a/web/public/images/events/cops/2.gif b/web/public/images/events/cops/2.gif index df8244db..df40eaab 100644 Binary files a/web/public/images/events/cops/2.gif and b/web/public/images/events/cops/2.gif differ diff --git a/web/public/images/events/cops/3.gif b/web/public/images/events/cops/3.gif index 63007b1c..c606edb2 100644 Binary files a/web/public/images/events/cops/3.gif and b/web/public/images/events/cops/3.gif differ diff --git a/web/public/images/events/cops/4.gif b/web/public/images/events/cops/4.gif index 0e1fc6b8..ddbe4162 100644 Binary files a/web/public/images/events/cops/4.gif and b/web/public/images/events/cops/4.gif differ diff --git a/web/public/images/events/cops/6-intro.gif b/web/public/images/events/cops/6-intro.gif new file mode 100644 index 00000000..0a395d5f Binary files /dev/null and b/web/public/images/events/cops/6-intro.gif differ diff --git a/web/public/images/events/cops/6.gif b/web/public/images/events/cops/6.gif index 0e1fc6b8..df7c07f0 100644 Binary files a/web/public/images/events/cops/6.gif and b/web/public/images/events/cops/6.gif differ diff --git a/web/public/images/events/cops/7.gif b/web/public/images/events/cops/7.gif deleted file mode 100644 index 0e1fc6b8..00000000 Binary files a/web/public/images/events/cops/7.gif and /dev/null differ diff --git a/web/public/images/events/gang/0.gif b/web/public/images/events/gang/0.gif deleted file mode 100644 index 50ef36bc..00000000 Binary files a/web/public/images/events/gang/0.gif and /dev/null differ diff --git a/web/public/images/events/gang/1.gif b/web/public/images/events/gang/1.gif index e9a865ca..50ef36bc 100644 Binary files a/web/public/images/events/gang/1.gif and b/web/public/images/events/gang/1.gif differ diff --git a/web/public/images/events/gang/2.gif b/web/public/images/events/gang/2.gif index 111fc865..e9a865ca 100644 Binary files a/web/public/images/events/gang/2.gif and b/web/public/images/events/gang/2.gif differ diff --git a/web/public/images/events/gang/3.gif b/web/public/images/events/gang/3.gif index 5e801790..53ab5fed 100644 Binary files a/web/public/images/events/gang/3.gif and b/web/public/images/events/gang/3.gif differ diff --git a/web/public/images/events/gang/5.gif b/web/public/images/events/gang/5.gif index 53ab5fed..111fc865 100644 Binary files a/web/public/images/events/gang/5.gif and b/web/public/images/events/gang/5.gif differ diff --git a/web/public/images/events/gang/6.gif b/web/public/images/events/gang/6.gif index 308d8e71..5e801790 100644 Binary files a/web/public/images/events/gang/6.gif and b/web/public/images/events/gang/6.gif differ diff --git a/web/public/images/events/gang/7.gif b/web/public/images/events/gang/7.gif deleted file mode 100644 index b03c0a39..00000000 Binary files a/web/public/images/events/gang/7.gif and /dev/null differ diff --git a/web/src/components/icons/items/PlasticBag.tsx b/web/src/components/icons/items/PlasticBag.tsx index 84f19f9c..766fc91c 100644 --- a/web/src/components/icons/items/PlasticBag.tsx +++ b/web/src/components/icons/items/PlasticBag.tsx @@ -3,15 +3,12 @@ import { Icon, IconProps } from ".."; export const PlasticBag = (props: IconProps) => { return ( - <> - - ); }; diff --git a/web/src/components/layout/Header.tsx b/web/src/components/layout/Header.tsx index 6d717a1d..29bea26e 100644 --- a/web/src/components/layout/Header.tsx +++ b/web/src/components/layout/Header.tsx @@ -1,13 +1,14 @@ import { MediaPlayer, MobileMenu } from "@/components/layout"; -import { Connect } from "@/components/wallet"; +import { Connect, TokenBalance } from "@/components/wallet"; import { useConfigStore, useGameStore, useRouterContext } from "@/dojo/hooks"; import { initSoundStore } from "@/hooks/sound"; import { headerStyles } from "@/theme/styles"; import { IsMobile, formatCashHeader } from "@/utils/ui"; -import { Divider, Flex, HStack } from "@chakra-ui/react"; +import { Card, Divider, Flex, HStack } from "@chakra-ui/react"; import { useAccount } from "@starknet-react/core"; import { observer } from "mobx-react-lite"; import { useEffect } from "react"; +import { PaperIcon } from "../icons"; import { ClaimReward } from "../pages/home"; import { ProfileLink } from "../pages/profile/Profile"; import { CashIndicator, DayIndicator, HealthIndicator } from "../player"; @@ -51,12 +52,12 @@ export const Header = observer(({ back }: HeaderProps) => { - {/* {!game && ( - <> - {config?.ryoAddress.paper && } - {account && } - - )} */} + {!gameId && account && ( + + + + )} + {!gameId && } diff --git a/web/src/components/pages/home/HallOfFame.tsx b/web/src/components/pages/home/HallOfFame.tsx index 3e1357d7..80b47b1b 100644 --- a/web/src/components/pages/home/HallOfFame.tsx +++ b/web/src/components/pages/home/HallOfFame.tsx @@ -1,4 +1,5 @@ import { HustlerIcon } from "@/components/hustlers"; +import { PaperIcon } from "@/components/icons"; import { Loader } from "@/components/layout/Loader"; import { useConfigStore, useDojoContext, useRouterContext } from "@/dojo/hooks"; import { useGameById } from "@/dojo/hooks/useGameById"; @@ -28,6 +29,7 @@ export const HallOfFame = observer(() => { {hallOfFame .filter((i) => i.version !== config?.ryo?.leaderboard_version) + .sort((a, b) => b.version - a.version) .map((i, index) => { return ; })} @@ -42,6 +44,7 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco const { game, isFetched } = useGameById(entry.game_id); const isSelf = useMemo(() => { + if(!account) return false return account?.address === game?.player_id; }, [account?.address, game?.player_id]); @@ -57,15 +60,8 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco if (!isFetched) return null; return ( - - - - SEASON {entry.version} - - {formatCash(entry.paper_balance).replace("$", "")} PAPER - - - + + {game && ( - {shortString.decodeShortString(game?.player_name)} + {shortString.decodeShortString(game?.player_name)} {isSelf && ("(you)")} {formatCash(entry.high_score)} )} {!game && No winner!} + + + SEASON {entry.version} + + {formatCash(entry.paper_balance).replace("$", "")} + + ); diff --git a/web/src/components/pages/home/Leaderboard.tsx b/web/src/components/pages/home/Leaderboard.tsx index 1c79a175..51a5d32d 100644 --- a/web/src/components/pages/home/Leaderboard.tsx +++ b/web/src/components/pages/home/Leaderboard.tsx @@ -10,7 +10,7 @@ import { useAccount } from "@starknet-react/core"; import { observer } from "mobx-react-lite"; import { useEffect, useRef, useState } from "react"; import Countdown from "react-countdown"; -import { Arrow, Skull } from "../../icons"; +import { Arrow, PaperIcon, Skull } from "../../icons"; const renderer = ({ days, @@ -57,8 +57,15 @@ export const Leaderboard = observer(({ nameEntry, ...props }: { nameEntry?: bool //const { leaderboard, isFetchingLeaderboard } = useLeaderboardByVersion(selectedVersion); const { hallOfFame, isFetchingHallOfFame } = useHallOfFame(); - const maxIndex = hallOfFame.length > 0 ? hallOfFame.length - 1 : 0; - const [selectedIndex, setSelectedIndex] = useState(maxIndex); + + const [maxIndex, setMaxIndex] = useState(0); + const [selectedIndex, setSelectedIndex] = useState(0); + + useEffect(() => { + const maxIndex = hallOfFame.length > 0 ? hallOfFame.length - 1 : 0; + setMaxIndex(maxIndex); + setSelectedIndex(maxIndex); + }, [hallOfFame]); const { leaderboardEntries, isFetchingLeaderboardEntries } = useLeaderboardEntries( hallOfFame[selectedIndex]?.version || 0, @@ -97,7 +104,8 @@ export const Leaderboard = observer(({ nameEntry, ...props }: { nameEntry?: bool SEASON {hallOfFame[selectedIndex]?.version} REWARDS - {formatCash(hallOfFame[selectedIndex]?.paper_balance || 0).replace("$", "")} PAPER + + {formatCash(hallOfFame[selectedIndex]?.paper_balance || 0).replace("$", "")} { +export const TokenBalance = ({ address, token, icon }: { address?: string; token?: string, icon?: React.FC }) => { // infinite loop with sn.js 6 // const { data: balance } = useBalance({ address, token, /*watch: true, refetchInterval:5_000*/ }); const { balance, isInitializing } = useTokenBalance({ address, token, refetchInterval: 5_000 }); @@ -20,7 +21,10 @@ export const TokenBalance = ({ address, token }: { address?: string; token?: str {isInitializing ? ( ) : ( + <> + {icon && icon({width:"16px", height:"16px"})} {formatCash(formatEther(balance)).replace("$", "") || 0} + )} {/* {iconsBySymbol[balance?.symbol as iconsBySymbolKeys] && iconsBySymbol[balance?.symbol as iconsBySymbolKeys]({})} */} {/* {balance?.symbol || "?"} */} diff --git a/web/src/pages/index.tsx b/web/src/pages/index.tsx index 075af527..0a1fc640 100644 --- a/web/src/pages/index.tsx +++ b/web/src/pages/index.tsx @@ -65,7 +65,7 @@ export default function Home() { HALL OF FAME - + diff --git a/web/src/theme/components/tabs.tsx b/web/src/theme/components/tabs.tsx index 5bf960f9..163355b3 100644 --- a/web/src/theme/components/tabs.tsx +++ b/web/src/theme/components/tabs.tsx @@ -18,7 +18,7 @@ const baseStyle = definePartsStyle({ color: "neon.300", ...cardPixelatedStyle({ radius: 6, pixelSize: 1 }), bg: "transparent", - border: "2px solid", + border: "0", borderColor: "neon.700", }, },