-
Notifications
You must be signed in to change notification settings - Fork 3
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
Showing
9 changed files
with
224 additions
and
45 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
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
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
121 changes: 121 additions & 0 deletions
121
frontend/src/pages/enhance/7-execute/grindStone/grindStone.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,121 @@ | ||
| import { | ||
| Button, | ||
| Flex, | ||
| Icon, | ||
| IconButton, | ||
| Image, | ||
| Stack, | ||
| Tag, | ||
| Text, | ||
| useColorMode, | ||
| } from "@chakra-ui/react"; | ||
| import RequiredText from "../../../../components/content/requiredText"; | ||
| import { useAppSelector } from "../../../../stores/hooks"; | ||
| import GRINDSTONE from "../../../../assets/item/scroll/grindstone.png"; | ||
| import MESO from "../../../../assets/item/meso/coin.png"; | ||
| import { RxPlus, RxDoubleArrowRight } from "react-icons/rx"; | ||
| import { FaPlus, FaMinus, FaPlusCircle } from "react-icons/fa"; | ||
| import Slot from "./slot"; | ||
|
|
||
| export default function GrindStone({ | ||
| inventoryIndex, | ||
| }: { | ||
| inventoryIndex: number; | ||
| }) { | ||
| const inventory = useAppSelector((state) => state.user.inventory); | ||
| const item = inventory[inventoryIndex].after; | ||
|
|
||
| const { colorMode } = useColorMode(); | ||
| const dark = colorMode === "dark"; | ||
| const palette600 = dark ? ".300" : ".600"; | ||
|
|
||
| if (!item.special_ring_level) | ||
| return ( | ||
| <RequiredText>선택한 아이템은 특수 스킬 반지가 아닙니다.</RequiredText> | ||
| ); | ||
|
|
||
| return ( | ||
| <Stack> | ||
| <Tag as={Stack} px={4} py={2} gap={1}> | ||
| <Text> | ||
| 사용할 <b>연마석 수량을 설정</b>해주세요. | ||
| </Text> | ||
| <Text> | ||
| 연마석 수량에 따라 연마 <b>성공 확률</b> 및 연마에 사용되는{" "} | ||
| <b>메소</b>가 설정됩니다. | ||
| </Text> | ||
| </Tag> | ||
| <Flex align="center" gap={2}> | ||
| <Slot | ||
| bgColorScheme="blue" | ||
| spec={ | ||
| <Text> | ||
| Lv. <b>4</b> | ||
| </Text> | ||
| } | ||
| > | ||
| <Image | ||
| src={item.item_icon} | ||
| transform={{ base: undefined, sm: "scale(2)" }} | ||
| /> | ||
| </Slot> | ||
| <Icon | ||
| as={RxPlus} | ||
| boxSize={8} | ||
| strokeWidth={2} | ||
| color={"gray" + palette600} | ||
| /> | ||
| <Slot bgColorScheme="purple" spec={<Text>1 / 5</Text>}> | ||
| <Image | ||
| src={GRINDSTONE} | ||
| transform={{ base: undefined, sm: "scale(2)" }} | ||
| /> | ||
| </Slot> | ||
| <Icon | ||
| as={RxDoubleArrowRight} | ||
| boxSize={8} | ||
| strokeWidth={2} | ||
| color={"gray" + palette600} | ||
| /> | ||
| <Slot | ||
| bgColorScheme="blue" | ||
| spec={ | ||
| <Text> | ||
| Lv. <b>5</b> | ||
| </Text> | ||
| } | ||
| > | ||
| <Image | ||
| src={item.item_icon} | ||
| transform={{ base: undefined, sm: "scale(2)" }} | ||
| /> | ||
| </Slot> | ||
| </Flex> | ||
| <Flex justify="center" gap={1}> | ||
| <IconButton aria-label="decrease" size="xs" icon={<FaMinus />} /> | ||
| <IconButton aria-label="decrease" size="xs" icon={<FaPlus />} /> | ||
| <Button size="xs">MAX</Button> | ||
| </Flex> | ||
| <Flex justify="center" py={2} gap={2}> | ||
| <Tag fontSize={12}> | ||
| <b>성공 확률</b> 10% | ||
| </Tag> | ||
| <Tag> | ||
| <Image src={MESO} pr={2} /> | ||
| <Text fontSize={12}>500,000,000</Text> | ||
| </Tag> | ||
| </Flex> | ||
| <Flex justify="center"> | ||
| <Button | ||
| w={{ base: "100%", md: "auto" }} | ||
| px={8} | ||
| size="sm" | ||
| colorScheme="blue" | ||
| leftIcon={<FaPlusCircle />} | ||
| > | ||
| 강화 | ||
| </Button> | ||
| </Flex> | ||
| </Stack> | ||
| ); | ||
| } |
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,54 @@ | ||
| import { AspectRatio, Box, Flex, useColorMode } from "@chakra-ui/react"; | ||
|
|
||
| export default function Slot({ | ||
| bgColorScheme, | ||
| spec, | ||
| children, | ||
| }: { | ||
| bgColorScheme: string; | ||
| spec?: React.ReactNode; | ||
| children?: React.ReactNode; | ||
| }) { | ||
| const { colorMode } = useColorMode(); | ||
| const dark = colorMode === "dark"; | ||
| const palette50 = dark ? ".900" : ".50"; | ||
| const palette200 = dark ? ".600" : ".200"; | ||
| const palette400 = dark ? ".500" : ".400"; | ||
|
|
||
| return ( | ||
| <AspectRatio | ||
| as={Flex} | ||
| ratio={1} | ||
| flex={1} | ||
| justify="center" | ||
| align="center" | ||
| bgColor={bgColorScheme + palette50} | ||
| borderRadius={4} | ||
| > | ||
| <Box p={2}> | ||
| <Flex | ||
| w="100%" | ||
| h="100%" | ||
| borderWidth={bgColorScheme == "blue" ? 2 : undefined} | ||
| borderStyle="dashed" | ||
| borderRadius={2} | ||
| borderColor={"gray" + palette400} | ||
| justify="center" | ||
| align="center" | ||
| > | ||
| {children} | ||
| <Box | ||
| position="absolute" | ||
| bottom={1} | ||
| px={2} | ||
| fontSize={12} | ||
| bgColor={bgColorScheme + palette200} | ||
| borderRadius="full" | ||
| > | ||
| {spec} | ||
| </Box> | ||
| </Flex> | ||
| </Box> | ||
| </AspectRatio> | ||
| ); | ||
| } |
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,26 @@ | ||
| import { Box, Image } from "@chakra-ui/react"; | ||
| import { ItemEquipmentDetail } from "../../../types/character/itemEquipment/itemEquipment"; | ||
| import { getSpecialRingIcon } from "../../../utils/icon"; | ||
|
|
||
| export default function ItemIcon({ | ||
| item, | ||
| opacity, | ||
| }: { | ||
| item: ItemEquipmentDetail; | ||
| opacity?: number; | ||
| }) { | ||
| return ( | ||
| <Box> | ||
| <Image src={item?.item_icon} opacity={opacity} maxW="none" /> | ||
| {item?.special_ring_level ? ( | ||
| <Image | ||
| position="absolute" | ||
| left={1} | ||
| bottom={1} | ||
| src={getSpecialRingIcon(item?.special_ring_level)} | ||
| opacity={opacity} | ||
| /> | ||
| ) : undefined} | ||
| </Box> | ||
| ); | ||
| } |
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