UPDATE: More ux in relic maker

messages/cn.json

@@ -253,6 +253,8 @@
 		"disableCensorship": "禁用审查",
 		"hideUI": "隐藏界面",
 		"theoryCraftMode": "理论研究模式",
-		"cycleCount": "循环次数"
+		"cycleCount": "循环次数",
+		"pleaseSelectAllSubStats": "请选取所有副属性",
+		"subStatRollCountCannotBeZero": "副属性的行数不能为0"
 	}
 }

messages/en.json

@@ -254,6 +254,8 @@
 		"disableCensorship": "Disable Censorship",
 		"hideUI": "Hide UI",
 		"theoryCraftMode": "Theorycraft Mode",
-		"cycleCount": "Cycle Count"
+		"cycleCount": "Cycle Count",
+		"pleaseSelectAllSubStats": "Please select all sub stats",
+		"subStatRollCountCannotBeZero": "Sub stat roll count cannot be zero"
 	}
 }

messages/ja.json

@@ -253,6 +253,8 @@
 		"disableCensorship": "検閲を無効化",
 		"hideUI": "UIを非表示",
 		"theoryCraftMode": "シアリークラフトモード",
-		"cycleCount": "サイクル数"
+		"cycleCount": "サイクル数",
+		"pleaseSelectAllSubStats": "すべてのサブステータスを選択してください",
+		"subStatRollCountCannotBeZero": "サブステータスの行数は0にできません"
 	}
 }

messages/ko.json

@@ -253,6 +253,8 @@
 		"disableCensorship": "검열 비활성화",
 		"hideUI": "UI 숨기기",
 		"theoryCraftMode": "이론 제작 모드",
-		"cycleCount": "사이클 수"
+		"cycleCount": "사이클 수",
+		"pleaseSelectAllSubStats": "모든 부옵션을 선택하세요",
+		"subStatRollCountCannotBeZero": "부옵션의 줄 수는 0일 수 없습니다"
 	}
 }

messages/vi.json

@@ -253,6 +253,8 @@
 		"disableCensorship": "Tắt kiểm duyệt",
 		"hideUI": "Ẩn giao diện",
 		"theoryCraftMode": "Chế độ Theorycraft",
-		"cycleCount": "Số vòng"
+		"cycleCount": "Số vòng",
+		"pleaseSelectAllSubStats": "Vui lòng chọn tất cả chỉ số phụ",
+		"subStatRollCountCannotBeZero": "Số dòng của chỉ số phụ không thể bằng 0"
 	}
 }

messages/zh.json

@@ -253,6 +253,8 @@
 		"disableCensorship": "禁用审查",
 		"hideUI": "隐藏界面",
 		"theoryCraftMode": "理论研究模式",
-		"cycleCount": "循环次数"
+		"cycleCount": "循环次数",
+		"pleaseSelectAllSubStats": "请选取所有副属性",
+		"subStatRollCountCannotBeZero": "副属性的行数不能为0"
 	}
 }

src/components/relicBar/index.tsx

@@ -2,7 +2,7 @@
 import useRelicStore from '@/stores/relicStore';
 import useUserDataStore from '@/stores/userDataStore';
 import { AffixDetail, RelicDetail } from '@/types';
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import SelectCustomImage from '../select/customSelectImage';
 import { calcAffixBonus, calcMainAffixBonus, randomPartition, randomStep, replaceByParam } from '@/helper';
 import useAffixStore from '@/stores/affixStore';
@@ -14,6 +14,7 @@ import { toast } from 'react-toastify';
 import { useTranslations } from 'next-intl';
 import cloneDeep from 'lodash/cloneDeep'
 import { ChevronDown, ChevronUp } from 'lucide-react';
+import { AnimatePresence, motion } from 'framer-motion';
 
 export default function RelicMaker() {
     const { avatars, setAvatars } = useUserDataStore()
@@ -37,6 +38,7 @@ export default function RelicMaker() {
         popHistory,
         addHistory,
     } = useRelicMakerStore()
+    const [error, setError] = useState<string>("");
 
     const relicSets = useMemo(() => {
         const listSet: Record<string, RelicDetail> = {};
@@ -123,6 +125,7 @@ export default function RelicMaker() {
     }, [mapMainAffix, selectedRelicSlot, selectedMainStat, selectedRelicLevel]);
 
     const handleSubStatChange = (key: string, index: number, rollCount: number, stepCount: number) => {
+        setError("");
         const newSubAffixes = cloneDeep(listSelectedSubStats);
         if (!subAffixOptions[key]) {
             newSubAffixes[index].affixId = "";
@@ -142,6 +145,7 @@ export default function RelicMaker() {
     };
 
     const handlerRollback = (index: number) => {
+        setError("");
         if (!preSelectedSubStats[index]) return;
 
         const keys = Object.keys(preSelectedSubStats[index]);
@@ -204,8 +208,21 @@ export default function RelicMaker() {
         const avatar = avatars[avatarSelected?.id || ""];
         if (!selectedRelicSet || !selectedMainStat || !selectedRelicLevel || !selectedRelicSlot) {
             toast.error(transI18n("pleaseSelectAllOptions"));
+            setError(transI18n("pleaseSelectAllOptions"));
             return;
         };
+
+        if (listSelectedSubStats.find((item) => item.affixId === "")) {
+            setError(transI18n("pleaseSelectAllSubStats"));
+            return;
+        };
+
+        for (let i = 0; i < listSelectedSubStats.length; i++) {
+            if (listSelectedSubStats[i].rollCount === 0) {
+                setError(transI18n("subStatRollCountCannotBeZero"));
+                return;
+            }
+        }
         if (avatar) {
             avatar.profileList[avatar.profileSelect].relics[selectedRelicSlot] = {
                 level: selectedRelicLevel,
@@ -315,6 +332,26 @@ export default function RelicMaker() {
                                 <div className="text-center text-2xl font-bold mt-2">{selectedRelicLevel}</div>
                             </div>
                         </div>
+                        <AnimatePresence>
+                            {error && (
+                                <motion.p
+                                    key="error"
+                                    initial={{ x: 0 }}
+                                    animate={{ x: [0, -2, 2, -2, 2, 0] }}
+                                    transition={{
+                                        duration: 6,
+                                        repeat: Infinity,
+                                        ease: "easeInOut",
+                                        repeatDelay: 1.5,
+                                    }}
+                                    className="text-error my-2 text-center font-bold"
+                                >
+                                    {error}!
+                                </motion.p>
+                            )}
+                        </AnimatePresence>
+
+
 
                         {/* Save Button */}
                         <button onClick={handlerSaveRelic} className="btn btn-success w-full">