Something went wrong. Try again.
Hopefully a GameBoy Advance emulator... luckasranarison.github.io/boya
gameboy-advance nintendo rust wasm emulator
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212import Tile from "@/components/common/Tile";import { GBA } from "@/lib/gba";import { Badge, Box, Group, Modal, Paper, SimpleGrid, Stack, Text, ThemeIcon,} from "@mantine/core";import { IconArrowsMaximize, IconBlocks, IconCube, IconFlipHorizontal, IconFlipVertical, IconFocus2, IconGrid4x4, IconLayersIntersect, IconPalette,} from "@tabler/icons-react";import { ObjMode, type Obj } from "boya_wasm";import ColorView from "../memory/ColorView";
const objModeMap = { [ObjMode.Normal]: "normal", [ObjMode.Window]: "window", [ObjMode.SemiTransparent]: "semi-transparent",};
function ObjectModal(props: { id: number; object: Obj; opened: boolean; onClose: () => void;}) { const { object: obj } = props;
const flags = [ { label: "Transform", value: obj.transform, icon: <IconFocus2 size={14} />, }, { label: "V-Flip", value: obj.vflip, icon: <IconFlipVertical size={14} />, }, { label: "H-Flip", value: obj.hflip, icon: <IconFlipHorizontal size={14} />, }, { label: "Mosaic", value: obj.mosaic, icon: <IconGrid4x4 size={14} />, }, { label: "Double", value: obj.double_size, icon: <IconArrowsMaximize size={14} />, }, ];
return ( <Modal opened={props.opened} onClose={props.onClose} title={<Text fw={700}>#{props.id}</Text>} centered size="md" radius="md" > <Stack gap="md"> <Stack align="center" gap="xs"> <Tile render={() => GBA.renderObj(props.id)} width={obj.width * 8} height={obj.height * 8} innerWidth={obj.width} innerHeight={obj.height} checkerboard /> <Badge variant="light" color="gray" size="sm"> {obj.width * 8} × {obj.height * 8} px </Badge> </Stack>
<SimpleGrid cols={2} spacing="sm"> <Paper withBorder p="xs" radius="sm"> <Group gap="xs"> <ThemeIcon variant="light" color="blue"> <IconArrowsMaximize size={18} /> </ThemeIcon> <Box> <Text size="xs" c="dimmed"> Position </Text> <Text fw={500} size="sm"> X: {obj.x} Y: {obj.y} </Text> </Box> </Group> </Paper>
<Paper withBorder p="xs" radius="sm"> <Group gap="xs"> <ThemeIcon variant="light" color="grape"> <IconLayersIntersect size={18} /> </ThemeIcon> <Box> <Text size="xs" c="dimmed"> Priority </Text> <Text fw={500} size="sm"> Level {obj.priority} </Text> </Box> </Group> </Paper> </SimpleGrid>
<SimpleGrid cols={2} spacing="sm"> <Paper withBorder p="xs" radius="sm"> <Group gap="xs"> <ThemeIcon variant="light" color="green"> <IconBlocks size={18} /> </ThemeIcon> <Box> <Text size="xs" c="dimmed"> Character </Text> <Text fw={500} size="sm"> {obj.character.toString()} </Text> </Box> </Group> </Paper>
<Paper withBorder p="xs" radius="sm"> <Group gap="xs"> <ThemeIcon variant="light" color="lime"> <IconCube size={18} /> </ThemeIcon> <Box> <Text size="xs" c="dimmed"> Mode </Text> <Text fw={500} size="sm"> {objModeMap[obj.mode]} </Text> </Box> </Group> </Paper> </SimpleGrid>
<Paper withBorder p="xs"> <Stack gap="sm"> <Group justify="space-between" mb="xs"> <Group gap="xs"> <ThemeIcon variant="light" color="orange"> <IconPalette size={18} /> </ThemeIcon> <Box> <Text size="xs" c="dimmed"> Palette </Text> <Text fw={500} size="sm"> ({obj.color_mode === 0 ? "16" : "256"} colors) </Text> </Box> </Group> {obj.color_mode === 0 && ( <Badge variant="dot">Index {obj.palette}</Badge> )} </Group> <ColorView value={Array.from(GBA.getObjectPalette(props.id))} columns={16} /> </Stack> </Paper>
<Stack p="xs"> <Text size="xs" fw="bold" tt="uppercase" c="dimmed"> Attributes </Text> <Group gap="xs"> {flags.map((f) => ( <Badge key={f.label} variant={f.value ? "filled" : "outline"} color={f.value ? "blue" : "gray"} leftSection={f.icon} > {f.label} </Badge> ))} </Group> </Stack> </Stack> </Modal> );}
export default ObjectModal;