feat: add rebirth execution ui

geoje · Nov 16, 2024 · b174172 · b174172
1 parent 4e63eae
commit b174172
Show file tree

Hide file tree

Showing 10 changed files with 156 additions and 41 deletions.
diff --git a/frontend/src/constants/enhance/rebirth.ts b/frontend/src/constants/enhance/rebirth.ts
@@ -0,0 +1 @@
+export const MAX_REBIRTHS = 6;
diff --git a/frontend/src/pages/crystal/1-character/characterButton.tsx b/frontend/src/pages/crystal/1-character/characterButton.tsx
@@ -63,6 +63,7 @@ export default function CharacterButton({
         h="fit-content"
         justifyContent="space-between"
         variant={selected == index ? undefined : "ghost"}
+        borderWidth={1}
         opacity={isDragging ? 0.4 : undefined}
         transform={transform ? transformToString(transform) : undefined}
         transition={transition ?? "transform 0ms linear"}

diff --git a/frontend/src/pages/enhance/7-execute/common/itemSlot.tsx b/frontend/src/pages/enhance/7-execute/common/itemSlot.tsx
@@ -0,0 +1,28 @@
+import { Flex, Image, useColorMode } from "@chakra-ui/react";
+
+export default function ItemSlot({ image }: { image?: string }) {
+  const dark = useColorMode().colorMode == "dark";
+
+  return (
+    <Flex
+      p={4}
+      bgColor={dark ? "gray.900" : "gray.50"}
+      borderRadius={8}
+      justify="center"
+      align="center"
+    >
+      <Flex
+        w={12}
+        h={12}
+        justify="center"
+        align="center"
+        backgroundColor={dark ? "gray.800" : "gray.200"}
+        borderWidth={1}
+        borderColor={dark ? "gray.400" : "gray.600"}
+        borderStyle="dashed"
+      >
+        <Image src={image} />
+      </Flex>
+    </Flex>
+  );
+}
diff --git a/...ance/7-execute/potential/optionButton.tsx → ...enhance/7-execute/common/optionButton.tsx b/...ance/7-execute/potential/optionButton.tsx → ...enhance/7-execute/common/optionButton.tsx
@@ -1,5 +1,6 @@
 import {
   Badge,
+  Box,
   Button,
   Flex,
   Heading,
@@ -10,7 +11,6 @@ import {
   useColorMode,
 } from "@chakra-ui/react";
 import {
-  MAX_POTENTIALS,
   POTENTIAL_GRADE,
   POTENTIAL_INFOS,
 } from "../../../../constants/enhance/potential";
@@ -19,13 +19,17 @@ export default function OptionsButton({
   title,
   grade,
   options,
+  borderColor,
+  maxOptionCount,
   isDisabled,
   onClick,
 }: {
   title: string;
   grade?: POTENTIAL_GRADE;
   options: string[];
-  isDisabled: boolean;
+  borderColor?: string;
+  maxOptionCount: number;
+  isDisabled?: boolean;
   onClick?: () => void;
 }) {
   const dark = useColorMode().colorMode == "dark";
@@ -46,7 +50,7 @@ export default function OptionsButton({
         alignItems="stretch"
         textAlign="start"
         borderWidth={1}
-        borderColor={grade ? POTENTIAL_INFOS[grade].borderColor : undefined}
+        borderColor={borderColor}
         isDisabled={isDisabled}
         cursor={onClick ? undefined : "default"}
         onClick={onClick}
@@ -72,19 +76,21 @@ export default function OptionsButton({
           borderRadius={4}
           backgroundColor={dark ? "gray.800" : "gray.300"}
         >
-          <Flex
-            h={4}
-            mb={1}
-            gap={1}
-            justify="center"
-            align="center"
-            borderTopRadius={4}
-            backgroundColor={dark ? "gray.700" : "gray.400"}
-          >
-            {grade && <Image src={POTENTIAL_INFOS[grade].icon} />}
-            <Text fontSize={12}>{grade && POTENTIAL_INFOS[grade].name}</Text>
-          </Flex>
-          {new Array(MAX_POTENTIALS).fill(0).map((_, i) => (
+          {borderColor == undefined || (
+            <Flex
+              h={4}
+              gap={1}
+              justify="center"
+              align="center"
+              borderTopRadius={4}
+              backgroundColor={dark ? "gray.700" : "gray.400"}
+            >
+              {grade && <Image src={POTENTIAL_INFOS[grade].icon} />}
+              <Text fontSize={12}>{grade && POTENTIAL_INFOS[grade].name}</Text>
+            </Flex>
+          )}
+          <Box h={1} />
+          {new Array(maxOptionCount).fill(0).map((_, i) => (
             <OptionText key={"option-" + i} text={options[i]} />
           ))}
         </Stack>

diff --git a/frontend/src/pages/enhance/7-execute/execute.tsx b/frontend/src/pages/enhance/7-execute/execute.tsx
@@ -2,6 +2,7 @@ import RequiredText from "../../../components/content/requiredText";
 import { MATERIAL_TYPE } from "../../../constants/enhance/material";
 import GrindStone from "./grindStone/grindStone";
 import Potential from "./potential/potential";
+import Rebirth from "./rebirth/rebirth";
 
 export default function Execute({
   inventoryIndex,
@@ -20,6 +21,21 @@ export default function Execute({
     return <RequiredText>{message}</RequiredText>;
   }
 
+  if (
+    [
+      MATERIAL_TYPE.POWERFUL,
+      MATERIAL_TYPE.ETERNAL,
+      MATERIAL_TYPE.BLACK_REBIRTH,
+      MATERIAL_TYPE.ABYSS,
+    ].includes(materialType)
+  )
+    return (
+      <Rebirth inventoryIndex={inventoryIndex} materialType={materialType} />
+    );
+
+  if (materialType == MATERIAL_TYPE.GRINDSTONE)
+    return <GrindStone inventoryIndex={inventoryIndex} />;
+
   if (
     [
       MATERIAL_TYPE.STRANGE,
@@ -38,8 +54,5 @@ export default function Execute({
       <Potential inventoryIndex={inventoryIndex} materialType={materialType} />
     );
 
-  if (materialType == MATERIAL_TYPE.GRINDSTONE)
-    return <GrindStone inventoryIndex={inventoryIndex} />;
-
   return <RequiredText>개발중인 기능입니다.</RequiredText>;
 }
diff --git a/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx b/frontend/src/pages/enhance/7-execute/grindStone/grindStone.tsx
@@ -55,6 +55,7 @@ export default function GrindStone({
           }
         >
           <Image
+            pb={1}
             src={item.item_icon}
             transform={{ base: undefined, sm: "scale(2)" }}
           />
@@ -67,6 +68,7 @@ export default function GrindStone({
         />
         <Slot bgColorScheme="purple" spec={<Text>1 / 5</Text>}>
           <Image
+            pb={2}
             src={GRINDSTONE}
             transform={{ base: undefined, sm: "scale(2)" }}
           />
@@ -86,6 +88,7 @@ export default function GrindStone({
           }
         >
           <Image
+            pb={1}
             src={item.item_icon}
             transform={{ base: undefined, sm: "scale(2)" }}
           />

diff --git a/frontend/src/pages/enhance/7-execute/potential/potential.tsx b/frontend/src/pages/enhance/7-execute/potential/potential.tsx
@@ -14,9 +14,10 @@ import {
   MATERIAL_TYPE,
 } from "../../../../constants/enhance/material";
 import { useAppDispatch, useAppSelector } from "../../../../stores/hooks";
-import OptionsButton from "./optionButton";
+import OptionsButton from "../common/optionButton";
 import { useEffect, useRef, useState } from "react";
 import {
+  MAX_POTENTIALS,
   POTENTIAL_CRITERIA,
   POTENTIAL_GRADE,
   POTENTIAL_INFOS,
@@ -48,6 +49,7 @@ import AutoModal from "./autoModal";
 import PotentialCondition from "../../../../types/character/itemEquipment/potential/potentialCondition";
 import { FaPlay, FaStop } from "react-icons/fa6";
 import { isFitConditions } from "../../../../services/enhance/potentialCondition";
+import ItemSlot from "../common/itemSlot";
 
 const AUTO_DELAY = 100;
 
@@ -96,7 +98,11 @@ export default function Potential({
     level,
   });
 
-  useEffect(() => () => clearInterval(intervalId), []);
+  useEffect(
+    () => () => clearInterval(intervalId),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
   useEffect(() => {
     optionsRef.current = options;
   }, [options]);
@@ -120,6 +126,8 @@ export default function Potential({
       setIntervalId(undefined);
       clearInterval(intervalId);
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inventoryIndex, materialType]);
 
   const clearNewOptions = () => {
@@ -236,31 +244,20 @@ export default function Potential({
 
   return (
     <Stack width={{ base: "100%", md: 60 }}>
-      <Flex
-        p={4}
-        bgColor={dark ? "gray.800" : "gray.50"}
-        borderRadius={8}
-        justify="center"
-        align="center"
-      >
-        <Flex
-          w={12}
-          h={12}
-          justify="center"
-          align="center"
-          backgroundColor={dark ? "gray.700" : "gray.200"}
-          borderWidth={1}
-          borderColor={dark ? "gray.400" : "gray.600"}
-          borderStyle="dashed"
-        >
-          <Image src={item?.item_icon} />
-        </Flex>
-      </Flex>
+      <Tag as={Flex} px={2} py={1} gap={2}>
+        <Image src={MATERIAL_INFOS[materialType].icon} />
+        <Text size="xs">
+          아이템의 <b>잠재능력을</b> 재설정합니다.
+        </Text>
+      </Tag>
+      <ItemSlot image={item?.item_icon} />
 
       <OptionsButton
         title={selectable ? "BEFORE" : "RESULT"}
         grade={grade}
         options={options}
+        borderColor={grade ? POTENTIAL_INFOS[grade].borderColor : ""}
+        maxOptionCount={MAX_POTENTIALS}
         isDisabled={!options[0]}
         onClick={selectable ? clearNewOptions : undefined}
       />
@@ -270,6 +267,8 @@ export default function Potential({
           grade={newGrade}
           options={formatOptions(newOptions)}
           isDisabled={!newOptions[0]}
+          borderColor={grade ? POTENTIAL_INFOS[grade].borderColor : ""}
+          maxOptionCount={MAX_POTENTIALS}
           onClick={
             selectable ? () => applyOptions(newOptions, newGrade) : undefined
           }

diff --git a/frontend/src/pages/enhance/7-execute/rebirth/rebirth.tsx b/frontend/src/pages/enhance/7-execute/rebirth/rebirth.tsx
@@ -0,0 +1,56 @@
+import { Flex, Image, Stack, Tag, Text, useColorMode } from "@chakra-ui/react";
+import {
+  MATERIAL_INFOS,
+  MATERIAL_TYPE,
+} from "../../../../constants/enhance/material";
+import { useAppSelector } from "../../../../stores/hooks";
+import ItemSlot from "../common/itemSlot";
+import OptionsButton from "../common/optionButton";
+import { MAX_REBIRTHS } from "../../../../constants/enhance/rebirth";
+import { isSelectable } from "../../../../services/enhance/rebirth";
+
+export default function Rebirth({
+  inventoryIndex,
+  materialType,
+}: {
+  inventoryIndex: number;
+  materialType: MATERIAL_TYPE;
+}) {
+  const inventory = useAppSelector((state) => state.user.inventory);
+
+  const item = inventory[inventoryIndex].after;
+  const selectable = isSelectable(materialType);
+
+  return (
+    <Stack width={{ base: "100%", md: 60 }}>
+      <Tag as={Flex} px={2} py={1} gap={2}>
+        <Image src={MATERIAL_INFOS[materialType].icon} />
+        <Text size="xs">
+          아이템의 <b>추가옵션을</b> 재설정합니다.
+        </Text>
+      </Tag>
+      <ItemSlot image={item?.item_icon} />
+      <OptionsButton
+        title={selectable ? "BEFORE" : "RESULT"}
+        options={[
+          "STR: +30",
+          "DEX: +30",
+          "INT: +25",
+          "LUK: +25",
+          "공격력: +5",
+          "올스탯: +6%",
+        ]}
+        maxOptionCount={MAX_REBIRTHS}
+        onClick={selectable ? () => {} : undefined}
+      />
+      {selectable && (
+        <OptionsButton
+          title="AFTER"
+          options={["STR: +30", "DEX: +25", "LUK: +109", "올스탯: +6%"]}
+          maxOptionCount={MAX_REBIRTHS}
+          onClick={() => {}}
+        />
+      )}
+    </Stack>
+  );
+}
diff --git a/frontend/src/pages/home/2-character/characterButton.tsx b/frontend/src/pages/home/2-character/characterButton.tsx
@@ -80,6 +80,7 @@ export default function CharacterButton({
       flexDir="column"
       variant={name && selected ? undefined : "ghost"}
       opacity={isDragging ? 0.4 : undefined}
+      borderWidth={1}
       transform={transform ? transformToString(transform) : undefined}
       transition={transition ?? "transform 0ms linear"}
       onClick={onClick}

diff --git a/frontend/src/services/enhance/rebirth.ts b/frontend/src/services/enhance/rebirth.ts
@@ -0,0 +1,7 @@
+import { MATERIAL_TYPE } from "../../constants/enhance/material";
+
+export function isSelectable(materialType: MATERIAL_TYPE) {
+  return [MATERIAL_TYPE.BLACK_REBIRTH, MATERIAL_TYPE.ABYSS].includes(
+    materialType
+  );
+}