From d00f9e3d5e668d9f93149dd5684ea62a37e1c5fb Mon Sep 17 00:00:00 2001 From: AzenKain Date: Tue, 30 Sep 2025 13:17:45 +0700 Subject: [PATCH] UPDATE: Responsive for mobile --- src/components/actionBar/index.tsx | 8 +- src/components/avatarInfo/index.tsx | 2 +- src/components/header/index.tsx | 168 +++++++++--------- src/components/relicBar/index.tsx | 258 ++++++++++++++-------------- src/components/relicsInfo/index.tsx | 8 +- 5 files changed, 223 insertions(+), 221 deletions(-) diff --git a/src/components/actionBar/index.tsx b/src/components/actionBar/index.tsx index e5b0fb1..75f7c79 100644 --- a/src/components/actionBar/index.tsx +++ b/src/components/actionBar/index.tsx @@ -376,8 +376,8 @@ export default function ActionBar() { - -
+ +
-
+
-
+
-
+
{transI18n("exportData")} @@ -341,25 +341,25 @@ export default function Header() {
{transI18n("exportData")}
@@ -495,8 +495,8 @@ export default function Header() {
- -
+ +
)} -
-
+
+ {/* Status */} +
{transI18n("status")}: - + {isConnectPS ? transI18n("connected") : transI18n("unconnected")}
-
+ {/* Buttons */} +
+ {isConnectPS && ( )}
+
- -
+ +
- -
+ +
{ @@ -59,9 +59,9 @@ export default function RelicMaker() { const listSet: Record = {}; const subAffixMap = mapSubAffix["5"]; const mainAffixMap = mapMainAffix["5" + selectedRelicSlot] - + if (Object.keys(subAffixMap || {}).length === 0 || Object.keys(mainAffixMap || {}).length === 0) return listSet; - + for (const [key, value] of Object.entries(subAffixMap)) { if (value.property !== mainAffixMap[selectedMainStat]?.property) { listSet[key] = value; @@ -73,15 +73,15 @@ export default function RelicMaker() { useEffect(() => { const subAffixMap = mapSubAffix["5"]; const mainAffixMap = mapMainAffix["5" + selectedRelicSlot]; - + if (!subAffixMap || !mainAffixMap) return; - + const mainProp = mainAffixMap[selectedMainStat]?.property; if (!mainProp) return; - + const newSubAffixes = cloneDeep(listSelectedSubStats); let updated = false; - + for (let i = 0; i < newSubAffixes.length; i++) { if (newSubAffixes[i].property === mainProp) { newSubAffixes[i].affixId = ""; @@ -91,9 +91,9 @@ export default function RelicMaker() { updated = true; } } - + if (updated) setListSelectedSubStats(newSubAffixes); - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [selectedMainStat, mapSubAffix, mapMainAffix, selectedRelicSlot]); const exSubAffixOptions = useMemo(() => { @@ -119,9 +119,9 @@ export default function RelicMaker() { const data = affixSet[selectedMainStat]; if (!data) return 0; - return calcMainAffixBonus(data, selectedRelicLevel); + return calcMainAffixBonus(data, selectedRelicLevel); }, [mapMainAffix, selectedRelicSlot, selectedMainStat, selectedRelicLevel]); - + const handleSubStatChange = (key: string, index: number, rollCount: number, stepCount: number) => { const newSubAffixes = cloneDeep(listSelectedSubStats); if (!subAffixOptions[key]) { @@ -155,7 +155,7 @@ export default function RelicMaker() { newSubAffixes[index].stepCount = preSubAffixes.stepCount; setListSelectedSubStats(newSubAffixes); popHistory(index); - }; + }; const resetSubStat = (index: number) => { const newSubAffixes = cloneDeep(listSelectedSubStats); @@ -172,7 +172,7 @@ export default function RelicMaker() { const exKeys = Object.keys(exSubAffixOptions); for (let i = 0; i < newSubAffixes.length; i++) { const keys = Object.keys(subAffixOptions).filter((key) => !exKeys.includes(key)); - const randomKey = keys[Math.floor(Math.random() * keys.length )]; + const randomKey = keys[Math.floor(Math.random() * keys.length)]; exKeys.push(randomKey); const randomValue = subAffixOptions[randomKey]; newSubAffixes[i].affixId = randomKey; @@ -326,18 +326,18 @@ export default function RelicMaker() { {/* Right Panel - Sub Stats */}
{/* Total Roll */} -
+

{transI18n("totalRoll")} {listSelectedSubStats.reduce((a, b) => a + b.rollCount, 0)}

-
+
{listSelectedSubStats.map((v, index) => ( -
-
+
+
- {/* Stat Selection */} -
- ({ - value: key, - label: mappingStats[value.property].name + " " + mappingStats[value.property].unit, - imageUrl: mappingStats[value.property].icon - }))} - excludeSet={Object.entries(exSubAffixOptions).map(([key, value]) => ({ - value: key, - label: mappingStats[value.property].name + " " + mappingStats[value.property].unit, - imageUrl: mappingStats[value.property].icon - }))} - selectedCustomSet={v.affixId} - placeholder={transI18n("selectASubStat")} - setSelectedCustomSet={(key) => handleSubStatChange(key, index, 0, 0)} - /> -
+ {/* Stat Selection */} +
+ ({ + value: key, + label: mappingStats[value.property].name + " " + mappingStats[value.property].unit, + imageUrl: mappingStats[value.property].icon + }))} + excludeSet={Object.entries(exSubAffixOptions).map(([key, value]) => ({ + value: key, + label: mappingStats[value.property].name + " " + mappingStats[value.property].unit, + imageUrl: mappingStats[value.property].icon + }))} + selectedCustomSet={v.affixId} + placeholder={transI18n("selectASubStat")} + setSelectedCustomSet={(key) => handleSubStatChange(key, index, 0, 0)} + /> +
- {/* Current Value */} -
- +{ } -
{calcAffixBonus(subAffixOptions[v.affixId], v.stepCount, v.rollCount)}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
-
+ {/* Current Value */} +
+ +{ } +
{calcAffixBonus(subAffixOptions[v.affixId], v.stepCount, v.rollCount)}{mappingStats?.[subAffixOptions[v.affixId]?.property]?.unit || ""}
+
- {/* Up Roll Values */} -
-
- - {transI18n("upRoll")} -
-
- - - -
-
+ {/* Up Roll Values */} +
+
+ + {transI18n("upRoll")} +
+
+ + + +
+
- {/* Down Roll Values */} -
-
- - {transI18n("downRoll")} -
-
- - - -
-
+ {/* Down Roll Values */} +
+
+ + {transI18n("downRoll")} +
+
+ + + +
+
- {/* Reset Button & Roll Info */} -
-
-
- - -
+ {/* Reset Button & Roll Info */} +
+
+
+ + +
-
- {transI18n("roll")}: {v.rollCount} - {transI18n("step")}: {v.stepCount} -
-
-
+
+ {transI18n("roll")}: {v.rollCount} + {transI18n("step")}: {v.stepCount} +
+
+
-
-
-))} +
+
+ ))}
diff --git a/src/components/relicsInfo/index.tsx b/src/components/relicsInfo/index.tsx index 81656d9..83a9674 100644 --- a/src/components/relicsInfo/index.tsx +++ b/src/components/relicsInfo/index.tsx @@ -315,8 +315,8 @@ export default function RelicsInfo() {
- -
+ +
- -
+ +