Skip to content

Commit

Permalink
ui fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
notV4l committed Apr 10, 2024
1 parent cb6b454 commit da99e69
Show file tree
Hide file tree
Showing 22 changed files with 287 additions and 61 deletions.
2 changes: 1 addition & 1 deletion web/src/components/RegisterEntities.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const RegisterEntities = observer(() => {

useEffect(() => {

console.log("RegisterEntities", gameId);
// console.log("RegisterEntities", gameId);

if (gameStore && gameId) {
gameStore.init(gameId);
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/layout/Loader.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { Image, Text, VStack } from "@chakra-ui/react";

export const Loader = () => {
export const Loader = ({ text = "LOADING ..."}: { text?: string}) => {
return (
<VStack gap={3}>
<Image src="/images/loading.gif" alt="loading" width="60px" height="60px" margin="auto" />
<Text fontFamily="broken-console" fontSize="12px" color="neon.500">LOADING ...</Text>
<Text fontFamily="broken-console" fontSize="12px" color="neon.500">{text}</Text>
</VStack>
);
};
36 changes: 36 additions & 0 deletions web/src/components/layout/LoadingModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Modal, ModalBody, ModalContent, ModalOverlay, VStack } from "@chakra-ui/react";
import { observer } from "mobx-react-lite";
import { useState } from "react";
import { Loader } from "./Loader";

export const LoadingModal = observer(() => {
const [isLoading, setIsLoading] = useState(false);

// useLayoutEffect(() => {
// const onDOMContentLoaded = (event: any) => {
// if (event.target.readyState === "complete") {
// setIsLoading(false);
// }
// };

// window.addEventListener("load", (event) => {
// onDOMContentLoaded(event);
// }, false);
// return () => {
// window.removeEventListener("load", onDOMContentLoaded);
// };
// }, []);

return (
<Modal motionPreset="slideInBottom" isCentered isOpen={isLoading} onClose={() =>{}}>
<ModalOverlay />
<ModalContent bg="bg.dark" maxW="360px">
<ModalBody p={6}>
<VStack w="full" gap={6}>
<Loader text="LOADING ASSETS ..." />
</VStack>
</ModalBody>
</ModalContent>
</Modal>
);
});
42 changes: 36 additions & 6 deletions web/src/components/layout/MobileMenu.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
import { useDojoContext, useRouterContext } from "@/dojo/hooks";
import { Sounds, playSound } from "@/hooks/sound";
import { Menu, MenuItem, Popover, PopoverBody, PopoverContent, PopoverTrigger, StyleProps } from "@chakra-ui/react";
import { Dots } from "../icons";
import { Cigarette, Dots, Home } from "../icons";
import { ProfileLinkMobile } from "../pages/profile/Profile";
import { ConnectButtonMobile } from "../wallet";
import { ChainSelector, ConnectButtonMobile } from "../wallet";
import { Burners } from "../wallet/Burners";
import { Predeployed } from "../wallet/Predeployed";
import { HeaderButton } from "./HeaderButton";
import { MediaPlayer } from "./MediaPlayer";

export const MobileMenu = ({ ...props }: StyleProps) => {
const { gameId } = useRouterContext();
const { uiStore } = useDojoContext();
return (
<>
<Popover placement="bottom-end">
Expand All @@ -22,11 +28,35 @@ export const MobileMenu = ({ ...props }: StyleProps) => {
</MenuItem>
<ProfileLinkMobile />
<ConnectButtonMobile />
{/* <MenuItem>
<ChainSelector/>
<Burners />

<MenuItem>
<ChainSelector canChange={!gameId} />{" "}
<Burners />{" "}
<Predeployed />
</MenuItem> */}
</MenuItem>

{gameId && (
<>
<MenuItem
h="48px"
onClick={() => {
playSound(Sounds.Ooo);
//uiStore.openQuitGame();
}}
>
<Cigarette mr={2} /> IM LOST
</MenuItem>

<MenuItem
h="48px"
onClick={() => {
uiStore.openQuitGame();
}}
>
<Home mr={2} /> QUIT GAME
</MenuItem>
</>
)}
</Menu>
</PopoverBody>
</PopoverContent>
Expand Down
44 changes: 44 additions & 0 deletions web/src/components/layout/QuitGameModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import { useDojoContext } from "@/dojo/hooks";
import {
Button,
HStack,
Modal,
ModalBody,
ModalContent,
ModalHeader,
ModalOverlay,
Text,
VStack,
} from "@chakra-ui/react";
import { observer } from "mobx-react-lite";
import { useRouter } from "next/router";

export const QuitGameModal = observer(() => {
const router = useRouter();
const { uiStore } = useDojoContext();

return (
<Modal motionPreset="slideInBottom" isCentered isOpen={uiStore.modals.quitGame !== undefined} onClose={() => {}}>
<ModalOverlay />
<ModalContent bg="bg.dark" maxW="360px">
<ModalHeader textAlign="center">Quit game</ModalHeader>
<ModalBody p={6}>
<VStack w="full" gap={6}>
<Text>Are you sure ?</Text>
<HStack w="full" justifyContent="center">
<Button
onClick={() => {
uiStore.closeQuitGame();
router.push("/");
}}
>
YES
</Button>
<Button onClick={() => uiStore.closeQuitGame()}>CANCEL</Button>
</HStack>
</VStack>
</ModalBody>
</ModalContent>
</Modal>
);
});
2 changes: 2 additions & 0 deletions web/src/components/layout/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,10 @@ export * from "./Footer"
export * from "./Header"
export * from "./HeaderButton"
export * from "./Layout"
export * from "./LoadingModal"
export * from "./MakeItRain"
export * from "./MediaPlayer"
export * from "./MobileMenu"
export * from "./OG"
export * from "./QuitGameModal"

8 changes: 4 additions & 4 deletions web/src/components/map/Map.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const coordinatePercent: CoordinateType = {
[Locations.Brooklyn]: { x: 47, y: 72 },
};

const yOffset = -150;
const yOffset = -180;

export const Map = ({
targetId,
Expand All @@ -53,9 +53,9 @@ export const Map = ({
const point = coordinate[targetId] ? coordinate[targetId] : { x: 0, y: 0 };
const animation = isMobile
? {
scale: 1.5,
x: point.x,
y: point.y + yOffset,
scale: 1.25,
x: point.x * 0.5,
y: point.y * 0.5 + yOffset,
}
: { scale: 1, x: 0, y: 0 };
animate(
Expand Down
54 changes: 38 additions & 16 deletions web/src/components/pages/home/HallOfFame.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,17 +24,28 @@ export const HallOfFame = observer(() => {

return (
<>
{isFetchingHallOfFame && <Loader />}
{!isFetchingHallOfFame && (
<SimpleGrid columns={[1, 2]} w="full" gap={4}>
{hallOfFame
.filter((i) => i.version !== config?.ryo?.leaderboard_version)
.sort((a, b) => b.version - a.version)
.map((i, index) => {
return <HallOfFameEntry entry={i} key={index} account={account} />;
})}
</SimpleGrid>
)}
<VStack
boxSize="full"
maxH={["calc(100vh - 350px)", "calc(100vh - 480px)"]}
sx={{
overflowY: "scroll",
}}
__css={{
"scrollbar-width": "none",
}}
>
{isFetchingHallOfFame && <Loader />}
{!isFetchingHallOfFame && (
<SimpleGrid columns={[1, 2]} w="full" gap={4}>
{hallOfFame
.filter((i) => i.version !== config?.ryo?.leaderboard_version)
.sort((a, b) => b.version - a.version)
.map((i, index) => {
return <HallOfFameEntry entry={i} key={index} account={account} />;
})}
</SimpleGrid>
)}
</VStack>
</>
);
});
Expand All @@ -44,7 +55,7 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
const { game, isFetched } = useGameById(entry.game_id);

const isSelf = useMemo(() => {
if(!account) return false
if (!account) return false;
return account?.address === game?.player_id;
}, [account?.address, game?.player_id]);

Expand All @@ -56,7 +67,7 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
router.push(`/0x${entry.game_id.toString(16)}/logs`);
}, [entry.game_id, game?.player_id, router]);

const color = isSelf ? colors.yellow["400"].toString() : colors.neon["400"].toString()
const color = isSelf ? colors.yellow["400"].toString() : colors.neon["400"].toString();

if (!isFetched) return null;
return (
Expand All @@ -74,18 +85,29 @@ const HallOfFameEntry = ({ entry, account }: { entry: Leaderboard; account: Acco
/>

<VStack w="full" alignItems="flex-start" gap={1}>
<Text>{shortString.decodeShortString(game?.player_name)} {isSelf && ("(you)")}</Text>
<Text>
{shortString.decodeShortString(game?.player_name)} {isSelf && "(you)"}
</Text>
<Text>{formatCash(entry.high_score)}</Text>
</VStack>
</HStack>
)}

{!game && <Text>No winner!</Text>}

<HStack w="full" justifyContent="space-between" borderTop="solid 1px" borderColor="neon.700" pt={1} mt={1} opacity={0.7}>
<HStack
w="full"
justifyContent="space-between"
borderTop="solid 1px"
borderColor="neon.700"
pt={1}
mt={1}
opacity={0.7}
>
<Text>SEASON {entry.version}</Text>
<Text color={color}>
<PaperIcon width="16px" height="16px" color={color} mr={1}/>{formatCash(entry.paper_balance).replace("$", "")}
<PaperIcon width="16px" height="16px" color={color} mr={1} />
{formatCash(entry.paper_balance).replace("$", "")}
</Text>
</HStack>
</VStack>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/pages/profile/Profile.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ProfileLinkMobile = () => {

return (
<>
<MenuItem h="48px" borderRadius={0} onClick={onClick} justifyContent="center">
<MenuItem h="48px" borderRadius={0} onClick={onClick} /*justifyContent="center"*/>
<HustlerIcon hustler={gameInfos.hustler_id as Hustlers} />
<Text ml="10px">{gameEvents.playerName}</Text>
</MenuItem>
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/player/Inventory.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const Inventory = observer(({ hidePawnshop = false, ...props }: StyleProp
<Bag />
<Text textStyle="subheading" fontSize={["9px", "11px"]} lineHeight={1}>
{game.drugs.drug ? game?.drugs.quantity * configStore.getDrug(game.drugs.drug?.drug)!.weight : 0}/
{game.items.transport!.tier.stat} LB
{game.items.transport!.tier.stat}
</Text>
</HStack>

Expand Down
8 changes: 4 additions & 4 deletions web/src/components/wallet/ConnectButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@ export const ConnectButtonMobile = ({ ...props }) => {
)}
{account && (
<MenuItem h="48px" borderRadius={0} onClick={() => uiStore.openAccountDetails()}>
<HStack w="full" justifyContent="center">
<HStack w="full" /*justifyContent="center"*/>
{connector && <Image src={connector.icon.dark} width="24px" height="24px" alt={connector.name} />}
<Text>{frenlyAddress(account.address || "")}</Text>
<HStack gap={1}>
<Text fontFamily="monospace">Ξ</Text>
<Text>{formatEther(balance)}</Text>
</HStack>
<Text fontFamily="monospace">Ξ</Text>
<Text>{formatEther(balance)}</Text>
</HStack>
</HStack>
</MenuItem>
)}
Expand Down
52 changes: 52 additions & 0 deletions web/src/components/wallet/DeployingModal.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import { useDojoContext } from "@/dojo/hooks";
import { Modal, ModalBody, ModalContent, ModalOverlay, VStack } from "@chakra-ui/react";
import { observer } from "mobx-react-lite";
import { useEffect, useState } from "react";
import { Loader } from "../layout/Loader";

export const DeployingModal = observer(() => {
const { burnerManager, isPrefundingPaper } = useDojoContext();

const [text, setText] = useState("Loading ...");

// const isDeploying = useMemo(() => {
// return burnerManager?.isDeploying
// }, [burnerManager, burnerManager?.isDeploying]);

// useEffect(() => {
// setIsDeploying(burnerManager?.isDeploying);
// }, [burnerManager?.isDeploying]);

const [isDeploying, setIsDeploying] = useState(false);
useEffect(() => {
const handle = setInterval(() => {
setIsDeploying(burnerManager?.isDeploying || false);
}, 500);
return () => {
clearInterval(handle);
};
}, []);

useEffect(() => {
if (isDeploying) {
setText("Deploying burner...");
}

if (isPrefundingPaper) {
setText("Paper Airdrop burner...");
}
}, [isDeploying, isPrefundingPaper]);

return (
<Modal motionPreset="slideInBottom" isCentered isOpen={isDeploying || isPrefundingPaper} onClose={() => {}}>
<ModalOverlay />
<ModalContent bg="bg.dark" maxW="360px">
<ModalBody p={6}>
<VStack w="full" gap={6}>
<Loader text={text} />
</VStack>
</ModalBody>
</ModalContent>
</Modal>
);
});
1 change: 1 addition & 0 deletions web/src/components/wallet/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ export * from "./ChainSelector"
export * from "./ChildrenOrConnect"
export * from "./ConnectButton"
export * from "./ConnectModal"
export * from "./DeployingModal"
export * from "./PaperFaucet"
export * from "./StarknetProvider"
export * from "./TokenBalance"
Expand Down
2 changes: 1 addition & 1 deletion web/src/dojo/class/Events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export class EventClass {
lastEncounterResult: computed,
})

console.log("Events", this)
// console.log("Events", this)
}

public static parseWorldEvent(event: World__Event): DojoEvent {
Expand Down
Loading

0 comments on commit da99e69

Please sign in to comment.