feat: add starforce execution ui

geoje · Nov 16, 2024 · b9772cc · b9772cc
1 parent 9c030b4
commit b9772cc
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 15 deletions.
diff --git a/...ges/enhance/7-execute/grindStone/slot.tsx → ...es/enhance/7-execute/common/itemSlot2.tsx b/...ges/enhance/7-execute/grindStone/slot.tsx → ...es/enhance/7-execute/common/itemSlot2.tsx
@@ -1,11 +1,19 @@
-import { AspectRatio, Box, Flex, useColorMode } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Box,
+  Flex,
+  ResponsiveValue,
+  useColorMode,
+} from "@chakra-ui/react";
 
-export default function Slot({
+export default function ItemSlot2({
   bgColorScheme,
   spec,
+  w,
   children,
 }: {
-  bgColorScheme: string;
+  bgColorScheme: "blue" | "purple";
+  w?: ResponsiveValue<number | (string & {})>;
   spec?: React.ReactNode;
   children?: React.ReactNode;
 }) {
@@ -19,7 +27,8 @@ export default function Slot({
     <AspectRatio
       as={Flex}
       ratio={1}
-      flex={1}
+      w={w}
+      flex={w ? undefined : 1}
       justify="center"
       align="center"
       bgColor={bgColorScheme + palette50}

diff --git a/frontend/src/pages/enhance/7-execute/execute.tsx b/frontend/src/pages/enhance/7-execute/execute.tsx
@@ -3,6 +3,7 @@ import { MATERIAL_TYPE } from "../../../constants/enhance/material";
 import GrindStone from "./grindStone/grindStone";
 import Potential from "./potential/potential";
 import Rebirth from "./rebirth/rebirth";
+import Startforce from "./starforce/startforce";
 
 export default function Execute({
   inventoryIndex,
@@ -21,6 +22,9 @@ export default function Execute({
     return <RequiredText>{message}</RequiredText>;
   }
 
+  if (materialType == MATERIAL_TYPE.STARFORCE)
+    return <Startforce inventoryIndex={inventoryIndex} />;
+
   if (
     [
       MATERIAL_TYPE.POWERFUL,

diff --git a/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx b/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx
@@ -15,7 +15,7 @@ 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";
+import ItemSlot2 from "../common/itemSlot2";
 
 export default function GrindStone({
   inventoryIndex,
@@ -46,7 +46,7 @@ export default function GrindStone({
         </Text>
       </Tag>
       <Flex align="center" gap={2}>
-        <Slot
+        <ItemSlot2
           bgColorScheme="blue"
           spec={
             <Text>
@@ -59,27 +59,27 @@ export default function GrindStone({
             src={item.item_icon}
             transform={{ base: undefined, sm: "scale(2)" }}
           />
-        </Slot>
+        </ItemSlot2>
         <Icon
           as={RxPlus}
           boxSize={8}
           strokeWidth={2}
           color={"gray" + palette600}
         />
-        <Slot bgColorScheme="purple" spec={<Text>1 / 5</Text>}>
+        <ItemSlot2 bgColorScheme="purple" spec={<Text>1 / 5</Text>}>
           <Image
             pb={2}
             src={GRINDSTONE}
             transform={{ base: undefined, sm: "scale(2)" }}
           />
-        </Slot>
+        </ItemSlot2>
         <Icon
           as={RxDoubleArrowRight}
           boxSize={8}
           strokeWidth={2}
           color={"gray" + palette600}
         />
-        <Slot
+        <ItemSlot2
           bgColorScheme="blue"
           spec={
             <Text>
@@ -92,7 +92,7 @@ export default function GrindStone({
             src={item.item_icon}
             transform={{ base: undefined, sm: "scale(2)" }}
           />
-        </Slot>
+        </ItemSlot2>
       </Flex>
       <Flex justify="center" gap={1}>
         <IconButton aria-label="decrease" size="xs" icon={<FaMinus />} />

diff --git a/frontend/src/pages/enhance/7-execute/potential/potential.tsx b/frontend/src/pages/enhance/7-execute/potential/potential.tsx
@@ -277,17 +277,17 @@ export default function Potential({
       <Flex
         justifyContent="space-between"
         align="center"
-        bgColor={dark ? "gray.800" : "gray.50"}
-        px={1}
+        bgColor={dark ? "gray.900" : "gray.50"}
+        px={2}
         borderRadius={8}
       >
         <Image src={MESO} />
         <Text fontSize={12}>
           {formatNumber(
             costMaterials.find(({ name }) => name.startsWith("메소"))?.value ??
               0
-          )}{" "}
-          메소
+          )}
+          &nbsp;메소
         </Text>
       </Flex>
       <Flex gap={2}>

diff --git a/frontend/src/pages/enhance/7-execute/starforce/startforce.tsx b/frontend/src/pages/enhance/7-execute/starforce/startforce.tsx
@@ -0,0 +1,123 @@
+import {
+  Box,
+  Button,
+  Checkbox,
+  Flex,
+  Image,
+  Stack,
+  Tag,
+  Text,
+  useColorMode,
+} from "@chakra-ui/react";
+import ItemSlot2 from "../common/itemSlot2";
+import { useAppSelector } from "../../../../stores/hooks";
+import { FaAngleRight, FaPlusCircle } from "react-icons/fa";
+import MESO from "../../../../assets/item/meso/coin.png";
+import { formatNumber } from "../../../../utils/formatter";
+
+export default function Startforce({
+  inventoryIndex,
+}: {
+  inventoryIndex: number;
+}) {
+  const inventory = useAppSelector((state) => state.user.inventory);
+  const item = inventory[inventoryIndex].after;
+
+  const dark = useColorMode().colorMode == "dark";
+  const paletteGray50 = dark ? "gray.900" : "gray.50";
+
+  return (
+    <Stack>
+      <Tag px={2} py={1} justifyContent="center">
+        <Text>
+          <b>메소</b>를 사용하여 장비를 강화합니다.
+        </Text>
+      </Tag>
+      <Flex h="min-content" gap={2}>
+        <ItemSlot2 bgColorScheme="blue" w={{ base: 16, sm: 32 }}>
+          <Image
+            src={item.item_icon}
+            transform={{ base: undefined, sm: "scale(2)" }}
+          />
+        </ItemSlot2>
+        <Box
+          w={{ base: "auto", md: 64 }}
+          flex={{ base: 1, md: undefined }}
+          maxHeight={32}
+          borderLeftRadius="var(--chakra-radii-md)"
+          overflowY="auto"
+        >
+          <Box
+            p={2}
+            as={Stack}
+            gap={0}
+            bgColor={paletteGray50}
+            fontSize={12}
+            fontWeight="bold"
+            alignItems="start"
+            borderRightRadius={0}
+          >
+            <Flex h="min-content" gap={1} align="center">
+              <Text>0성</Text>
+              <FaAngleRight size={16} />
+              <Text>1성</Text>
+            </Flex>
+            <Text>성공확률: 95.0%</Text>
+            <Text>실패(유지)확률: 5.0%</Text>
+            <Text>&nbsp;</Text>
+            <Text wordBreak="break-all">
+              STR: +2222222222222222222222222222222222
+            </Text>
+            <Text>DEX: +2</Text>
+            <Text>INT: +2</Text>
+            <Text>LUK: +2</Text>
+          </Box>
+        </Box>
+      </Flex>
+      <Flex gap={2}>
+        <Button
+          px={4}
+          flex={1}
+          size="xs"
+          justifyContent="space-between"
+          rightIcon={<Checkbox />}
+        >
+          스타캐치 해제
+        </Button>
+        <Button
+          px={4}
+          flex={1}
+          isDisabled
+          size="xs"
+          justifyContent="space-between"
+          rightIcon={<Checkbox />}
+        >
+          파괴방지
+        </Button>
+      </Flex>
+      <Flex
+        px={2}
+        gap={2}
+        align="center"
+        bgColor={paletteGray50}
+        fontSize={12}
+        borderRadius={8}
+      >
+        <Image src={MESO} />
+        <Text fontWeight="bold">필요한 메소 :</Text>
+        <Text mx="auto">{formatNumber(21500)}</Text>
+      </Flex>
+      <Flex justify="center">
+        <Button
+          w={{ base: "100%", md: "auto" }}
+          px={8}
+          size="sm"
+          colorScheme="blue"
+          leftIcon={<FaPlusCircle />}
+        >
+          강화
+        </Button>
+      </Flex>
+    </Stack>
+  );
+}