From 91ce8320d10d236c2b33f7e90c3488815cca6395 Mon Sep 17 00:00:00 2001 From: AzenKain Date: Tue, 30 Sep 2025 15:15:51 +0700 Subject: [PATCH] UPDATE: Responsive for mobile --- messages/vi.json | 4 +- public/icon/ChallengePeakIcon.webp | Bin 0 -> 7098 bytes src/components/monsterBar/as.tsx | 191 ++++++++++++++-------------- src/components/monsterBar/ce.tsx | 8 +- src/components/monsterBar/index.tsx | 90 +++++++------ src/components/monsterBar/moc.tsx | 189 +++++++++++++-------------- src/components/monsterBar/peak.tsx | 172 +++++++++++++------------ src/components/monsterBar/pf.tsx | 187 ++++++++++++++------------- src/components/relicsInfo/index.tsx | 1 + src/components/skillsInfo/index.tsx | 7 +- 10 files changed, 437 insertions(+), 412 deletions(-) create mode 100644 public/icon/ChallengePeakIcon.webp diff --git a/messages/vi.json b/messages/vi.json index 9f4fba6..cf1c9b6 100644 --- a/messages/vi.json +++ b/messages/vi.json @@ -197,6 +197,7 @@ "selectPFEvent": "Chọn sự kiện PF", "selectASEvent": "Chọn sự kiện AS", "selectCEEvent": "Chọn sự kiện CE", + "selectPEAKEvent": "Chọn sự kiện PEAK", "selectEvent": "Chọn sự kiện", "selectFloor": "Chọn tầng", "selectSide": "Chọn nửa trận", @@ -237,10 +238,9 @@ "maxAllSuccess": "Đã thiết lập cấp độ kỹ năng tối đa thành công.", "maxAllFailed": "Thiết lập cấp độ kỹ năng tối đa thất bại.", "noRelicEquipped": "Không có di vật", - "anomalyArbitration": "Phán Quyết Dị Thường", + "anomalyArbitration": "Trọng tài dị tướng", "normalMode": "Chế độ thường", "hardMode": "Chế độ khó", - "selectPEAKEvent": "Chọn sự kiện", "mode": "Chế độ", "selectMode": "Chọn chế độ", "rollBack": "Quay lại bước trước", diff --git a/public/icon/ChallengePeakIcon.webp b/public/icon/ChallengePeakIcon.webp new file mode 100644 index 0000000000000000000000000000000000000000..da86ce0f5ef59dcbabbcb939c3ff3aea51e410c4 GIT binary patch literal 7098 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 literal 0 HcmV?d00001 diff --git a/src/components/monsterBar/as.tsx b/src/components/monsterBar/as.tsx index c1ed15f..1aa87b2 100644 --- a/src/components/monsterBar/as.tsx +++ b/src/components/monsterBar/as.tsx @@ -74,7 +74,7 @@ export default function AsBar() { newBattleConfig.monsters = [] newBattleConfig.stage_id = 0 - if ((as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower") + if ((as_config.floor_side === "Upper" || as_config.floor_side === "Upper -> Lower") && challengeSelected.EventIDList1.length > 0) { newBattleConfig.stage_id = challengeSelected.EventIDList1[0].StageID for (const wave of challengeSelected.EventIDList1[0].MonsterList) { @@ -89,7 +89,7 @@ export default function AsBar() { newBattleConfig.monsters.push(newWave) } } - if ((as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper") + if ((as_config.floor_side === "Lower" || as_config.floor_side === "Lower -> Upper") && challengeSelected.EventIDList2.length > 0) { newBattleConfig.stage_id = challengeSelected.EventIDList2[0].StageID for (const wave of challengeSelected.EventIDList2[0].MonsterList) { @@ -104,7 +104,7 @@ export default function AsBar() { newBattleConfig.monsters.push(newWave) } } - if (as_config.floor_side === "Lower -> Upper" + if (as_config.floor_side === "Lower -> Upper" && challengeSelected.EventIDList1.length > 0) { for (const wave of challengeSelected.EventIDList1[0].MonsterList) { const newWave: MonsterStore[] = [] @@ -117,7 +117,7 @@ export default function AsBar() { } newBattleConfig.monsters.push(newWave) } - } else if (as_config.floor_side === "Upper -> Lower" + } else if (as_config.floor_side === "Upper -> Lower" && challengeSelected.EventIDList2.length > 0) { for (const wave of challengeSelected.EventIDList2[0].MonsterList) { const newWave: MonsterStore[] = [] @@ -146,7 +146,7 @@ export default function AsBar() { if (!ASEvent) return null return ( -
+
{/* Title Card */}
@@ -160,11 +160,11 @@ export default function AsBar() { excludeSet={[]} selectedCustomSet={as_config.event_id.toString()} placeholder={transI18n("selectASEvent")} - setSelectedCustomSet={(id) => setAsConfig({ - ...as_config, - event_id: Number(id), + setSelectedCustomSet={(id) => setAsConfig({ + ...as_config, + event_id: Number(id), challenge_id: mapASInfo[Number(id)]?.Level.slice(-1)[0]?.Id || 0, - buff_id: 0 + buff_id: 0 })} />
@@ -243,106 +243,109 @@ export default function AsBar() {
{/* Enemy Waves */} -
- {/* First Half */} -
-

{transI18n("firstHalfEnemies")}

+ {(as_config?.challenge_id ?? 0) !== 0 && ( +
+ {/* First Half */} +
+

{transI18n("firstHalfEnemies")}

- {challengeSelected && challengeSelected?.EventIDList1?.length > 0 && challengeSelected?.EventIDList1[0].MonsterList.map((wave, waveIndex) => ( -
-

{transI18n("wave")} {waveIndex + 1}

-
- {Object.values(wave).map((waveValue, enemyIndex) => ( -
-
-
- {listMonster.find((monster) => monster.child.includes(waveValue))?.icon && monster.child.includes(waveValue))?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`} - alt="Enemy Icon" - width={376} - height={512} - className="w-full h-full object-cover" - />} -
+ {challengeSelected && challengeSelected?.EventIDList1?.length > 0 && challengeSelected?.EventIDList1[0].MonsterList.map((wave, waveIndex) => ( +
+

{transI18n("wave")} {waveIndex + 1}

+
+ {Object.values(wave).map((waveValue, enemyIndex) => ( +
+
+
+ {listMonster.find((monster) => monster.child.includes(waveValue))?.icon && monster.child.includes(waveValue))?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`} + alt="Enemy Icon" + width={376} + height={512} + className="w-full h-full object-cover" + />} +
-
-
Lv. {challengeSelected?.EventIDList1[0].Level}
-
- {listMonster - .find((monster) => monster.child.includes(waveValue)) - ?.weak?.map((icon, iconIndex) => ( - {icon} - ))} +
+
Lv. {challengeSelected?.EventIDList1[0].Level}
+
+ {listMonster + .find((monster) => monster.child.includes(waveValue)) + ?.weak?.map((icon, iconIndex) => ( + {icon} + ))} +
-
- ))} + ))} +
-
- ))} -
+ ))} +
- {/* Second Half */} -
-

{transI18n("secondHalfEnemies")}

+ {/* Second Half */} +
+

{transI18n("secondHalfEnemies")}

- {challengeSelected && challengeSelected?.EventIDList2?.length > 0 && challengeSelected?.EventIDList2[0].MonsterList.map((wave, waveIndex) => ( -
-

{transI18n("wave")} {waveIndex + 1}

-
- {Object.values(wave).map((waveValue, enemyIndex) => ( -
+ {challengeSelected && challengeSelected?.EventIDList2?.length > 0 && challengeSelected?.EventIDList2[0].MonsterList.map((wave, waveIndex) => ( +
+

{transI18n("wave")} {waveIndex + 1}

+
+ {Object.values(wave).map((waveValue, enemyIndex) => ( +
-
-
- {listMonster.find((monster) => monster.child.includes(waveValue))?.icon && monster.child.includes(waveValue))?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`} - alt="Enemy Icon" - width={376} - height={512} - className="w-full h-full object-cover" - />} -
+
+
+ {listMonster.find((monster) => monster.child.includes(waveValue))?.icon && monster.child.includes(waveValue))?.icon?.split("/")?.pop()?.replace(".png", "")}.webp`} + alt="Enemy Icon" + width={376} + height={512} + className="w-full h-full object-cover" + />} +
-
-
Lv. {challengeSelected?.EventIDList1[0].Level}
-
- {listMonster - .find((monster) => monster.child.includes(waveValue)) - ?.weak?.map((icon, iconIndex) => ( - {icon} - ))} +
+
Lv. {challengeSelected?.EventIDList1[0].Level}
+
+ {listMonster + .find((monster) => monster.child.includes(waveValue)) + ?.weak?.map((icon, iconIndex) => ( + {icon} + ))} +
-
- ))} + ))} +
-
- ))} + ))} +
-
+ )} +
) } \ No newline at end of file diff --git a/src/components/monsterBar/ce.tsx b/src/components/monsterBar/ce.tsx index b1c981e..28243bd 100644 --- a/src/components/monsterBar/ce.tsx +++ b/src/components/monsterBar/ce.tsx @@ -111,7 +111,7 @@ export default function CeBar() { }, [stageSearchTerm]) return ( -
{ +
{ setShowSearchWaveId(null) setShowSearchStage(false) @@ -217,7 +217,7 @@ export default function CeBar() { {ce_config.monsters.map((wave, waveIndex) => (
-
+

{transI18n("wave")} {waveIndex + 1}

+ ))}
@@ -81,7 +89,7 @@ export default function MonsterBar() { {battle_type.toUpperCase() === 'PEAK' && } {battle_type.toUpperCase() === 'SU' && (
- {transI18n("comingSoon")} + {transI18n("comingSoon")}
)} diff --git a/src/components/monsterBar/moc.tsx b/src/components/monsterBar/moc.tsx index 4728815..2ddc6d6 100644 --- a/src/components/monsterBar/moc.tsx +++ b/src/components/monsterBar/moc.tsx @@ -113,7 +113,7 @@ export default function MocBar() { ]) if (!MOCEvent) return null return ( -
+
{/* Title Card */}
@@ -127,10 +127,10 @@ export default function MocBar() { excludeSet={[]} selectedCustomSet={moc_config.event_id.toString()} placeholder={transI18n("selectMOCEvent")} - setSelectedCustomSet={(id) => setMocConfig({ - ...moc_config, - event_id: Number(id), - challenge_id: mapMOCInfo[Number(id)]?.slice(-1)[0]?.Id || 0, + setSelectedCustomSet={(id) => setMocConfig({ + ...moc_config, + event_id: Number(id), + challenge_id: mapMOCInfo[Number(id)]?.slice(-1)[0]?.Id || 0, })} />
@@ -144,9 +144,9 @@ export default function MocBar() {