1623 lines
66 KiB
TypeScript
1623 lines
66 KiB
TypeScript
import { lazy, Suspense, useEffect, useMemo, useState } from 'react'
|
|
import {
|
|
loadCpuPvpLeaderboard,
|
|
type CpuPvpLeaderboardEntry,
|
|
type PvpContentType,
|
|
} from '../../pvpRoguelike'
|
|
import {
|
|
loadAuthSession,
|
|
logoutAccount,
|
|
type Account,
|
|
type AuthSession,
|
|
type CharacterProfile,
|
|
} from '../../profile'
|
|
import {
|
|
applyCloudSaveSync,
|
|
getCloudSyncStatus,
|
|
getGameMode,
|
|
previewCloudSaveSync,
|
|
type CloudSyncChoice,
|
|
type CloudSyncComparison,
|
|
type GameMode,
|
|
} from '../../gameRepository'
|
|
import { focusFirstControl, useGameAction } from '../../input.tsx'
|
|
import {
|
|
useDualScreen,
|
|
useDualScreenSetupPublisher,
|
|
type DualScreenSetupState,
|
|
} from '../../dualScreen'
|
|
import { barFillStyle } from '../../components/barStyles'
|
|
|
|
const CombatScreen = lazy(() => import('../../components/CombatScreen').then((module) => ({ default: module.CombatScreen })))
|
|
const CustomizeScreen = lazy(() => import('../../components/CustomizeScreen').then((module) => ({ default: module.CustomizeScreen })))
|
|
const EquipmentScreen = lazy(() => import('../../components/EquipmentScreen').then((module) => ({ default: module.EquipmentScreen })))
|
|
const HunterProfileScreen = lazy(() => import('../../components/HunterProfileScreen').then((module) => ({ default: module.HunterProfileScreen })))
|
|
const PvPRoguelikeScreen = lazy(() => import('../../components/PvpRoguelikeScreen').then((module) => ({ default: module.PvPRoguelikeScreen })))
|
|
const PvpStadiumScreen = lazy(() => import('../../components/PvpStadiumScreen').then((module) => ({ default: module.PvpStadiumScreen })))
|
|
const TalentScreen = lazy(() => import('../../components/TalentScreen').then((module) => ({ default: module.TalentScreen })))
|
|
const SettingsScreen = lazy(() => import('../../components/SettingsScreen').then((module) => ({ default: module.SettingsScreen })))
|
|
|
|
type Screen =
|
|
| 'menu'
|
|
| 'dungeons'
|
|
| 'combat'
|
|
| 'raids'
|
|
| 'roguelike'
|
|
| 'pvp'
|
|
| 'customize'
|
|
| 'equipment'
|
|
| 'hunter-profile'
|
|
| 'talents'
|
|
| 'settings'
|
|
|
|
const MENU_ITEMS: Array<{
|
|
screen: Screen
|
|
label: string
|
|
glyph: string
|
|
description: string
|
|
}> = [
|
|
{ screen: 'dungeons', label: 'Dungeons', glyph: 'D', description: 'Guide a six-player party through dangerous encounters.' },
|
|
{ screen: 'raids', label: 'Raids', glyph: 'R', description: 'Guide an eighteen-player party through three-phase challenges.' },
|
|
{ screen: 'roguelike', label: 'Roguelike', glyph: 'L', description: 'Draft upgrades through escalating random encounters.' },
|
|
{ screen: 'pvp', label: 'PvP', glyph: 'P', description: 'Race another healer through roguelike encounters with buffs and sabotage.' },
|
|
{ screen: 'hunter-profile', label: 'Hunter Profile', glyph: 'H', description: 'Review boss kills, PvP record, drops, and pets.' },
|
|
{ screen: 'customize', label: 'Customize Character', glyph: 'C', description: 'Choose your class and prepare a six-ability loadout.' },
|
|
{ screen: 'settings', label: 'Settings', glyph: 'S', description: 'Remap PC and controller inputs.' },
|
|
]
|
|
|
|
const LAST_DIFFICULTY_KEY = 'i-want-to-heal:last-difficulty'
|
|
const SHOW_LEADERBOARDS = false
|
|
const ACTIVITY_PAGE_SIZE = 4
|
|
const HOME_MENU_COLUMNS = 2
|
|
const DUNGEON_NAV_COLUMNS = 2
|
|
|
|
type DungeonNavEntry =
|
|
| { kind: 'spacer'; disabled: true }
|
|
| { kind: 'back'; disabled?: boolean }
|
|
| { kind: 'pagePrev'; disabled?: boolean }
|
|
| { kind: 'pageNext'; disabled?: boolean }
|
|
| { kind: 'activity'; index: number; disabled?: boolean }
|
|
| { kind: 'tier'; index: number; disabled?: boolean }
|
|
| { kind: 'start'; disabled?: boolean }
|
|
| { kind: 'marathon'; disabled?: boolean }
|
|
| { kind: 'loot'; disabled?: boolean }
|
|
| { kind: 'lootSort'; disabled?: boolean }
|
|
|
|
type RoguelikeNavEntry =
|
|
| { kind: 'back' }
|
|
| { kind: 'variantPve' }
|
|
| { kind: 'variantPvp' }
|
|
| { kind: 'pveDungeon' }
|
|
| { kind: 'pveRaid' }
|
|
| { kind: 'pveStart' }
|
|
| { kind: 'pvpDungeon' }
|
|
| { kind: 'pvpRaid' }
|
|
| { kind: 'pvpStadium' }
|
|
| { kind: 'pvpStart' }
|
|
|
|
type RoguelikeNavPosition = {
|
|
row: number
|
|
column: number
|
|
}
|
|
|
|
function formatSaveTimestamp(updatedAt: number | null) {
|
|
if (!updatedAt) return 'Unknown legacy timestamp'
|
|
return new Intl.DateTimeFormat(undefined, {
|
|
dateStyle: 'medium',
|
|
timeStyle: 'short',
|
|
}).format(new Date(updatedAt))
|
|
}
|
|
|
|
function cloudSyncRelationText(comparison: CloudSyncComparison) {
|
|
if (comparison.relation === 'server-newer') return 'Server save is newer than this device.'
|
|
if (comparison.relation === 'local-newer') return 'This device save is newer than the server.'
|
|
if (comparison.relation === 'same') return 'Server and this device have the same save time.'
|
|
return 'One save has no timestamp yet. Choose the copy you want to keep.'
|
|
}
|
|
|
|
function activityInitials(name: string) {
|
|
return name
|
|
.split(/\s+/)
|
|
.filter((word) => /^[A-Za-z0-9]/.test(word))
|
|
.slice(0, 2)
|
|
.map((word) => word[0].toUpperCase())
|
|
.join('')
|
|
}
|
|
|
|
function ScreenLoading() {
|
|
return (
|
|
<main className="game-shell">
|
|
<section className="message-panel">
|
|
<p className="eyebrow">Opening Chronicle</p>
|
|
<h1>Loading...</h1>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
type RoguelikeVariant = 'pve' | 'pvp'
|
|
|
|
type IWantToHeal1AppProps = {
|
|
initialSession: AuthSession
|
|
onAuthenticationCleared: () => void
|
|
onBackToGameSelect: () => void
|
|
}
|
|
|
|
function IWantToHeal1App({
|
|
initialSession,
|
|
onAuthenticationCleared,
|
|
onBackToGameSelect,
|
|
}: IWantToHeal1AppProps) {
|
|
const { enabled: dualScreenEnabled } = useDualScreen()
|
|
const [screen, setScreen] = useState<Screen>('menu')
|
|
const [account, setAccount] = useState<Account | null>(initialSession.account)
|
|
const [profile, setProfile] = useState<CharacterProfile | null>(initialSession.profile)
|
|
const [authChecked, setAuthChecked] = useState(false)
|
|
const [gameMode, setGameMode] = useState<GameMode>(getGameMode())
|
|
const [serverMessage, setServerMessage] = useState('')
|
|
const [selectedDifficultyId, setSelectedDifficultyId] = useState(() => {
|
|
const saved = Number(window.localStorage.getItem(LAST_DIFFICULTY_KEY))
|
|
return Number.isFinite(saved) && saved > 0 ? saved : 1
|
|
})
|
|
const [selectedDungeonId, setSelectedDungeonId] = useState(1)
|
|
const [selectedRaidId, setSelectedRaidId] = useState(20)
|
|
const [roguelikeKind, setRoguelikeKind] = useState<'dungeon' | 'raid'>('dungeon')
|
|
const [roguelikeVariant, setRoguelikeVariant] = useState<RoguelikeVariant>('pve')
|
|
const [pvpContentType, setPvpContentType] = useState<PvpContentType>('dungeon')
|
|
const [selectedMarathonMode, setSelectedMarathonMode] = useState(false)
|
|
const [activityPage, setActivityPage] = useState(0)
|
|
const [combatContentId, setCombatContentId] = useState(1)
|
|
const [leaderboardCategory, setLeaderboardCategory] = useState<'part_1' | 'part_2' | 'part_3' | 'full_run'>('part_1')
|
|
const [showLoot, setShowLoot] = useState(false)
|
|
const [lootSort, setLootSort] = useState<'sequence' | 'boss'>('sequence')
|
|
const [showLeaderboard, setShowLeaderboard] = useState(false)
|
|
const [error, setError] = useState('')
|
|
const [syncingCloud, setSyncingCloud] = useState(false)
|
|
const [syncMessage, setSyncMessage] = useState('')
|
|
const [syncComparison, setSyncComparison] = useState<CloudSyncComparison | null>(null)
|
|
const [homeSelectedIndex, setHomeSelectedIndex] = useState(0)
|
|
const [dungeonSelectedIndex, setDungeonSelectedIndex] = useState(0)
|
|
const [roguelikeSelectedIndex, setRoguelikeSelectedIndex] = useState(1)
|
|
|
|
useEffect(() => {
|
|
loadAuthSession()
|
|
.then((session) => {
|
|
setAccount(session.account)
|
|
setProfile(session.profile)
|
|
})
|
|
.catch((reason: unknown) => {
|
|
setServerMessage(
|
|
reason instanceof Error
|
|
? `${reason.message} Offline play is still available.`
|
|
: 'Unable to reach the server. Offline play is still available.',
|
|
)
|
|
})
|
|
.finally(() => setAuthChecked(true))
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (authChecked && (!account || !profile)) onAuthenticationCleared()
|
|
}, [account, authChecked, onAuthenticationCleared, profile])
|
|
|
|
useEffect(() => {
|
|
const handleModeChange = (event: Event) => {
|
|
const nextMode = (event as CustomEvent<GameMode>).detail
|
|
setGameMode(nextMode)
|
|
}
|
|
window.addEventListener('chronicle:mode-changed', handleModeChange as EventListener)
|
|
return () => {
|
|
window.removeEventListener('chronicle:mode-changed', handleModeChange as EventListener)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
if (screen === 'combat') return
|
|
window.requestAnimationFrame(() => {
|
|
focusFirstControl()
|
|
})
|
|
}, [screen])
|
|
|
|
useEffect(() => {
|
|
if (!authChecked || !account || !profile || screen === 'combat') return
|
|
window.requestAnimationFrame(() => {
|
|
focusFirstControl()
|
|
})
|
|
}, [account, authChecked, profile, screen])
|
|
|
|
useEffect(() => {
|
|
window.localStorage.setItem(LAST_DIFFICULTY_KEY, String(selectedDifficultyId))
|
|
}, [selectedDifficultyId])
|
|
|
|
const [cpuLeaderboard, setCpuLeaderboard] = useState<CpuPvpLeaderboardEntry[]>([])
|
|
|
|
useEffect(() => {
|
|
const frame = window.requestAnimationFrame(() => {
|
|
setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
|
|
})
|
|
return () => window.cancelAnimationFrame(frame)
|
|
}, [pvpContentType, screen, roguelikeVariant])
|
|
|
|
const profileDungeons = profile?.dungeons
|
|
const dungeonOptions = useMemo(
|
|
() => profileDungeons?.filter((candidate) => candidate.contentType === 'dungeon') ?? [],
|
|
[profileDungeons],
|
|
)
|
|
const raidOptions = useMemo(
|
|
() => profileDungeons?.filter((candidate) => candidate.contentType === 'raid') ?? [],
|
|
[profileDungeons],
|
|
)
|
|
const selectedDungeonOption = useMemo(
|
|
() => dungeonOptions.find((candidate) => candidate.id === selectedDungeonId) ?? dungeonOptions[0],
|
|
[dungeonOptions, selectedDungeonId],
|
|
)
|
|
const selectedRaidOption = useMemo(
|
|
() => raidOptions.find((candidate) => candidate.id === selectedRaidId) ?? raidOptions[0],
|
|
[raidOptions, selectedRaidId],
|
|
)
|
|
const activityOptions = useMemo(
|
|
() => screen === 'raids' ? raidOptions : dungeonOptions,
|
|
[dungeonOptions, raidOptions, screen],
|
|
)
|
|
const combatDungeonOption = useMemo(
|
|
() => {
|
|
if (!profileDungeons) return undefined
|
|
return combatContentId < 0
|
|
? profileDungeons.find((candidate) => candidate.contentType === roguelikeKind) ?? profileDungeons[0]
|
|
: profileDungeons.find((candidate) => candidate.id === combatContentId) ?? profileDungeons[0]
|
|
},
|
|
[combatContentId, profileDungeons, roguelikeKind],
|
|
)
|
|
const combatDifficultyOption = useMemo(
|
|
() => combatDungeonOption?.difficulties.find(
|
|
(candidate) => candidate.id === selectedDifficultyId,
|
|
) ?? combatDungeonOption?.difficulties[0],
|
|
[combatDungeonOption, selectedDifficultyId],
|
|
)
|
|
const roguelikePool = useMemo(
|
|
() => profileDungeons
|
|
?.filter((candidate) => candidate.contentType === roguelikeKind)
|
|
.flatMap((candidate) => candidate.encounters) ?? [],
|
|
[profileDungeons, roguelikeKind],
|
|
)
|
|
const pvpPool = useMemo(
|
|
() => profileDungeons
|
|
?.filter((candidate) => candidate.contentType === pvpContentType)
|
|
.flatMap((candidate) => candidate.encounters) ?? [],
|
|
[profileDungeons, pvpContentType],
|
|
)
|
|
const tierOptions = useMemo(
|
|
() => activityOptions
|
|
.flatMap((option) => option.difficulties)
|
|
.filter((difficulty, index, all) => (
|
|
all.findIndex((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel) === index
|
|
))
|
|
.sort((a, b) => a.droppedItemLevel - b.droppedItemLevel),
|
|
[activityOptions],
|
|
)
|
|
const savedDifficulty = useMemo(
|
|
() => profileDungeons
|
|
?.flatMap((option) => option.difficulties)
|
|
.find((candidate) => candidate.id === selectedDifficultyId),
|
|
[profileDungeons, selectedDifficultyId],
|
|
)
|
|
const selectedTier = useMemo(
|
|
() => {
|
|
const characterLevel = profile?.character.level ?? 0
|
|
const savedTier = tierOptions.find((candidate) => (
|
|
candidate.droppedItemLevel === savedDifficulty?.droppedItemLevel
|
|
))
|
|
if (savedTier) return savedTier
|
|
for (let index = tierOptions.length - 1; index >= 0; index -= 1) {
|
|
if (characterLevel >= tierOptions[index].unlockLevel) return tierOptions[index]
|
|
}
|
|
return tierOptions[0]
|
|
},
|
|
[profile?.character.level, savedDifficulty?.droppedItemLevel, tierOptions],
|
|
)
|
|
const selectedTierItemLevel = selectedTier?.droppedItemLevel ?? 0
|
|
const activityPageCount = Math.max(1, Math.ceil(activityOptions.length / ACTIVITY_PAGE_SIZE))
|
|
const currentActivityPage = Math.min(activityPage, activityPageCount - 1)
|
|
const pagedActivityOptions = useMemo(
|
|
() => activityOptions.slice(
|
|
currentActivityPage * ACTIVITY_PAGE_SIZE,
|
|
currentActivityPage * ACTIVITY_PAGE_SIZE + ACTIVITY_PAGE_SIZE,
|
|
),
|
|
[activityOptions, currentActivityPage],
|
|
)
|
|
const selectedActivityOption = useMemo(
|
|
() => {
|
|
const fallback = screen === 'raids' && selectedRaidOption ? selectedRaidOption : selectedDungeonOption
|
|
const selectedActivityId = screen === 'raids' && selectedRaidOption ? selectedRaidOption.id : selectedDungeonOption?.id
|
|
return activityOptions.find((candidate) => candidate.id === selectedActivityId)
|
|
?? activityOptions[0]
|
|
?? fallback
|
|
},
|
|
[activityOptions, screen, selectedDungeonOption, selectedRaidOption],
|
|
)
|
|
const selectedDifficultyOption = useMemo(
|
|
() => selectedActivityOption?.difficulties.find(
|
|
(candidate) => candidate.droppedItemLevel === selectedTierItemLevel,
|
|
) ?? selectedActivityOption?.difficulties[0],
|
|
[selectedActivityOption, selectedTierItemLevel],
|
|
)
|
|
const lootPreviewEncounters = useMemo(
|
|
() => [...(selectedActivityOption?.encounters ?? [])]
|
|
.filter((encounter) => encounter.isBoss)
|
|
.sort((a, b) => lootSort === 'boss'
|
|
? a.enemyName.localeCompare(b.enemyName) || a.sequence - b.sequence
|
|
: a.sequence - b.sequence),
|
|
[lootSort, selectedActivityOption?.encounters],
|
|
)
|
|
const lootPreviewByEncounterId = useMemo(
|
|
() => new Map(lootPreviewEncounters.map((encounter) => [
|
|
encounter.id,
|
|
encounter.lootTables.filter((entry) => entry.difficultyId === selectedDifficultyOption?.id),
|
|
])),
|
|
[lootPreviewEncounters, selectedDifficultyOption?.id],
|
|
)
|
|
const leaderboardEntries = useMemo(
|
|
() => selectedActivityOption?.leaderboards[leaderboardCategory].filter(
|
|
(entry) => entry.difficultyId === selectedDifficultyOption?.id,
|
|
) ?? [],
|
|
[leaderboardCategory, selectedActivityOption?.leaderboards, selectedDifficultyOption?.id],
|
|
)
|
|
|
|
async function signOut() {
|
|
try {
|
|
await logoutAccount()
|
|
setAccount(null)
|
|
setProfile(null)
|
|
setGameMode(getGameMode())
|
|
setScreen('menu')
|
|
setSyncMessage('')
|
|
setSyncComparison(null)
|
|
onAuthenticationCleared()
|
|
} catch (reason) {
|
|
setError(reason instanceof Error ? reason.message : 'Unable to sign out.')
|
|
}
|
|
}
|
|
|
|
async function syncSaveNow() {
|
|
setSyncingCloud(true)
|
|
setSyncMessage('')
|
|
setSyncComparison(null)
|
|
try {
|
|
const comparison = await previewCloudSaveSync()
|
|
setSyncComparison(comparison)
|
|
setSyncMessage('')
|
|
} catch (reason) {
|
|
setSyncMessage(reason instanceof Error ? reason.message : 'Unable to sync cloud save.')
|
|
} finally {
|
|
setSyncingCloud(false)
|
|
}
|
|
}
|
|
|
|
async function keepCloudSave(choice: CloudSyncChoice) {
|
|
setSyncingCloud(true)
|
|
setSyncMessage(choice === 'local' ? 'Uploading this device save...' : 'Downloading server save...')
|
|
try {
|
|
const updated = await applyCloudSaveSync(choice)
|
|
setProfile(updated)
|
|
setGameMode(getGameMode())
|
|
setSyncComparison(null)
|
|
setSyncMessage(choice === 'local'
|
|
? 'Server now uses this device save.'
|
|
: 'This device now uses the server save.')
|
|
} catch (reason) {
|
|
setSyncMessage(reason instanceof Error ? reason.message : 'Unable to sync cloud save.')
|
|
} finally {
|
|
setSyncingCloud(false)
|
|
}
|
|
}
|
|
|
|
const cloudSync = getCloudSyncStatus()
|
|
const canShowCloudSync = Boolean(account && account.id !== -1 && cloudSync.available)
|
|
const cloudSyncEntryCount = canShowCloudSync ? (syncComparison ? 3 : 1) : 0
|
|
const homeMenuOffset = cloudSyncEntryCount
|
|
const homeMenuEntryCount = MENU_ITEMS.length + homeMenuOffset
|
|
const homeActiveIndex = Math.min(homeSelectedIndex, homeMenuEntryCount - 1)
|
|
|
|
function openHomeMenuIndex(index: number) {
|
|
if (canShowCloudSync && index === 0) {
|
|
if (!syncingCloud) void syncSaveNow()
|
|
return
|
|
}
|
|
if (canShowCloudSync && syncComparison && index === 1) {
|
|
if (!syncingCloud) void keepCloudSave('local')
|
|
return
|
|
}
|
|
if (canShowCloudSync && syncComparison && index === 2) {
|
|
if (!syncingCloud) void keepCloudSave('server')
|
|
return
|
|
}
|
|
const item = MENU_ITEMS[index - homeMenuOffset]
|
|
if (!item) return
|
|
if (item.screen === 'pvp') {
|
|
setRoguelikeVariant('pvp')
|
|
setRoguelikeSelectedIndex(2)
|
|
setScreen('roguelike')
|
|
return
|
|
}
|
|
if (item.screen === 'roguelike') {
|
|
setRoguelikeSelectedIndex(1)
|
|
}
|
|
if (item.screen === 'dungeons' || item.screen === 'raids') {
|
|
const nextOptions = item.screen === 'raids' ? raidOptions : dungeonOptions
|
|
setActivityPage(0)
|
|
setDungeonSelectedIndex(firstActivityDungeonEntryIndexForPageCount(
|
|
Math.max(1, Math.ceil(nextOptions.length / ACTIVITY_PAGE_SIZE)),
|
|
))
|
|
}
|
|
setScreen(item.screen)
|
|
}
|
|
|
|
function moveHomeSelection(action: string) {
|
|
setHomeSelectedIndex((current) => {
|
|
const bounded = Math.min(current, homeMenuEntryCount - 1)
|
|
if (canShowCloudSync && syncComparison && bounded <= 2) {
|
|
if (bounded === 0) {
|
|
return action === 'navigateDown' || action === 'navigateRight' ? 1 : 0
|
|
}
|
|
if (bounded === 1) {
|
|
if (action === 'navigateRight') return 2
|
|
if (action === 'navigateDown') return Math.min(homeMenuOffset, homeMenuEntryCount - 1)
|
|
return 0
|
|
}
|
|
if (action === 'navigateLeft') return 1
|
|
if (action === 'navigateDown') return Math.min(homeMenuOffset, homeMenuEntryCount - 1)
|
|
return 0
|
|
}
|
|
if (canShowCloudSync && !syncComparison && bounded === 0) {
|
|
return action === 'navigateDown' || action === 'navigateRight'
|
|
? Math.min(homeMenuOffset, homeMenuEntryCount - 1)
|
|
: 0
|
|
}
|
|
|
|
const menuIndex = bounded - homeMenuOffset
|
|
if (menuIndex < 0) return bounded
|
|
const column = menuIndex % HOME_MENU_COLUMNS
|
|
if (action === 'navigateLeft') {
|
|
if (column > 0) return bounded - 1
|
|
if (canShowCloudSync && syncComparison && menuIndex < HOME_MENU_COLUMNS) return 2
|
|
return bounded
|
|
}
|
|
if (action === 'navigateRight') {
|
|
const nextMenuIndex = menuIndex + 1
|
|
return column < HOME_MENU_COLUMNS - 1 && nextMenuIndex < MENU_ITEMS.length ? bounded + 1 : bounded
|
|
}
|
|
if (action === 'navigateUp') {
|
|
const previousMenuIndex = menuIndex - HOME_MENU_COLUMNS
|
|
if (previousMenuIndex >= 0) return homeMenuOffset + previousMenuIndex
|
|
if (canShowCloudSync && syncComparison) return column === 0 ? 1 : 2
|
|
if (canShowCloudSync) return 0
|
|
return bounded
|
|
}
|
|
const nextMenuIndex = menuIndex + HOME_MENU_COLUMNS
|
|
return nextMenuIndex < MENU_ITEMS.length ? homeMenuOffset + nextMenuIndex : bounded
|
|
})
|
|
}
|
|
|
|
function dungeonEntries() {
|
|
const difficulty = selectedDifficultyOption ?? selectedActivityOption?.difficulties[0]
|
|
const locked = !profile || !difficulty
|
|
const entries: DungeonNavEntry[] = [
|
|
{ kind: 'back' },
|
|
]
|
|
if (activityPageCount > 1) {
|
|
entries.push(
|
|
{ kind: 'pagePrev', disabled: currentActivityPage === 0 },
|
|
{ kind: 'pageNext', disabled: currentActivityPage >= activityPageCount - 1 },
|
|
)
|
|
}
|
|
if (entries.length % DUNGEON_NAV_COLUMNS !== 0) {
|
|
entries.push({ kind: 'spacer', disabled: true })
|
|
}
|
|
pagedActivityOptions.forEach((candidate, index) => {
|
|
const candidateDifficulty = difficulty
|
|
? candidate.difficulties.find(
|
|
(option) => option.droppedItemLevel === difficulty.droppedItemLevel,
|
|
) ?? candidate.difficulties[0]
|
|
: candidate.difficulties[0]
|
|
entries.push({
|
|
kind: 'activity',
|
|
index,
|
|
disabled: !profile || !candidateDifficulty,
|
|
})
|
|
})
|
|
entries.push(
|
|
{ kind: 'start', disabled: locked },
|
|
{ kind: 'marathon', disabled: locked },
|
|
)
|
|
tierOptions.forEach((difficultyOption, index) => {
|
|
entries.push({
|
|
kind: 'tier',
|
|
index,
|
|
disabled: !profile || !difficultyOption,
|
|
})
|
|
})
|
|
entries.push({ kind: 'loot' })
|
|
if (showLoot) entries.push({ kind: 'lootSort' })
|
|
return entries
|
|
}
|
|
|
|
function firstEnabledDungeonEntry(entries: DungeonNavEntry[]) {
|
|
return Math.max(0, entries.findIndex((entry) => !entry.disabled))
|
|
}
|
|
|
|
function firstActivityDungeonEntryIndexForPageCount(pageCount: number) {
|
|
const entryCountBeforeActivities = pageCount > 1 ? 3 : 1
|
|
return entryCountBeforeActivities % DUNGEON_NAV_COLUMNS === 0
|
|
? entryCountBeforeActivities
|
|
: entryCountBeforeActivities + 1
|
|
}
|
|
|
|
function activeDungeonEntry(entries = dungeonEntries()) {
|
|
if (entries[dungeonSelectedIndex] && !entries[dungeonSelectedIndex].disabled) {
|
|
return entries[dungeonSelectedIndex]
|
|
}
|
|
const firstEnabled = firstEnabledDungeonEntry(entries)
|
|
return entries[firstEnabled] ?? entries[0]
|
|
}
|
|
|
|
function dungeonEntrySelected(entry: DungeonNavEntry['kind'], index?: number) {
|
|
const active = activeDungeonEntry()
|
|
return active?.kind === entry && ('index' in active ? active.index === index : index === undefined)
|
|
}
|
|
|
|
function moveDungeonSelection(action: string) {
|
|
const entries = dungeonEntries()
|
|
if (entries.length === 0) return
|
|
setDungeonSelectedIndex((current) => {
|
|
const bounded = entries[current] && !entries[current].disabled
|
|
? current
|
|
: firstEnabledDungeonEntry(entries)
|
|
const column = bounded % DUNGEON_NAV_COLUMNS
|
|
const direction = action === 'navigateLeft' || action === 'navigateUp' ? -1 : 1
|
|
const step = action === 'navigateUp' || action === 'navigateDown' ? DUNGEON_NAV_COLUMNS : 1
|
|
if (action === 'navigateLeft' && column === 0) return bounded
|
|
if (action === 'navigateRight' && column === DUNGEON_NAV_COLUMNS - 1) return bounded
|
|
for (let next = bounded + direction * step; next >= 0 && next < entries.length; next += direction * step) {
|
|
if (!entries[next].disabled) return next
|
|
}
|
|
return bounded
|
|
})
|
|
}
|
|
|
|
function selectActivityByPageIndex(index: number) {
|
|
const candidate = pagedActivityOptions[index]
|
|
if (!candidate) return
|
|
const difficulty = selectedDifficultyOption
|
|
? candidate.difficulties.find(
|
|
(option) => option.droppedItemLevel === selectedDifficultyOption.droppedItemLevel,
|
|
) ?? candidate.difficulties[0]
|
|
: candidate.difficulties[0]
|
|
if (screen === 'raids') setSelectedRaidId(candidate.id)
|
|
else setSelectedDungeonId(candidate.id)
|
|
setSelectedDifficultyId(difficulty.id)
|
|
}
|
|
|
|
function selectTierByIndex(index: number) {
|
|
const difficulty = tierOptions[index]
|
|
const activity = selectedActivityOption ?? activityOptions[0]
|
|
if (!difficulty || !activity) return
|
|
setActivityPage(0)
|
|
const nextActivity = activity.difficulties.some(
|
|
(candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
|
|
)
|
|
? activity
|
|
: activityOptions.find((option) =>
|
|
option.difficulties.some((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel),
|
|
)
|
|
if (!nextActivity) return
|
|
if (screen === 'raids') setSelectedRaidId(nextActivity.id)
|
|
else setSelectedDungeonId(nextActivity.id)
|
|
const nextDifficulty = nextActivity.difficulties.find(
|
|
(candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
|
|
)
|
|
if (nextDifficulty) setSelectedDifficultyId(nextDifficulty.id)
|
|
}
|
|
|
|
function startSelectedRun(marathon: boolean) {
|
|
const activity = selectedActivityOption ?? activityOptions[0]
|
|
const difficulty = selectedDifficultyOption ?? activity?.difficulties[0]
|
|
if (!activity || !difficulty) return
|
|
setSelectedMarathonMode(marathon)
|
|
setCombatContentId(activity.id)
|
|
setSelectedDifficultyId(difficulty.id)
|
|
setScreen('combat')
|
|
}
|
|
|
|
function openDungeonEntry(entry: DungeonNavEntry | undefined) {
|
|
if (!entry || entry.disabled) return
|
|
if (entry.kind === 'back') setScreen('menu')
|
|
else if (entry.kind === 'pagePrev') setActivityPage((page) => Math.max(0, page - 1))
|
|
else if (entry.kind === 'pageNext') setActivityPage((page) => Math.min(activityPageCount - 1, page + 1))
|
|
else if (entry.kind === 'activity') selectActivityByPageIndex(entry.index)
|
|
else if (entry.kind === 'tier') selectTierByIndex(entry.index)
|
|
else if (entry.kind === 'start') startSelectedRun(false)
|
|
else if (entry.kind === 'marathon') startSelectedRun(true)
|
|
else if (entry.kind === 'loot') setShowLoot((current) => !current)
|
|
else if (entry.kind === 'lootSort') setLootSort((current) => current === 'sequence' ? 'boss' : 'sequence')
|
|
}
|
|
|
|
function startPveRoguelike() {
|
|
const baseDungeon = dungeonOptions[0]
|
|
const baseRaid = raidOptions[0]
|
|
if (roguelikeKind === 'raid') {
|
|
setCombatContentId(-2)
|
|
setSelectedDifficultyId(baseRaid?.difficulties[0]?.id ?? 101)
|
|
} else {
|
|
setCombatContentId(-1)
|
|
setSelectedDifficultyId(baseDungeon?.difficulties[0]?.id ?? 1)
|
|
}
|
|
setSelectedMarathonMode(false)
|
|
setScreen('combat')
|
|
}
|
|
|
|
function roguelikeEntries() {
|
|
const entries: RoguelikeNavEntry[] = [
|
|
{ kind: 'back' },
|
|
{ kind: 'variantPve' },
|
|
{ kind: 'variantPvp' },
|
|
]
|
|
if (roguelikeVariant === 'pve') {
|
|
entries.push(
|
|
{ kind: 'pveDungeon' },
|
|
{ kind: 'pveRaid' },
|
|
{ kind: 'pveStart' },
|
|
)
|
|
} else {
|
|
entries.push(
|
|
{ kind: 'pvpDungeon' },
|
|
{ kind: 'pvpRaid' },
|
|
{ kind: 'pvpStadium' },
|
|
{ kind: 'pvpStart' },
|
|
)
|
|
}
|
|
return entries
|
|
}
|
|
|
|
function activeRoguelikeEntry(entries = roguelikeEntries()) {
|
|
return entries[Math.min(roguelikeSelectedIndex, entries.length - 1)] ?? entries[0]
|
|
}
|
|
|
|
function roguelikeEntrySelected(kind: RoguelikeNavEntry['kind']) {
|
|
return activeRoguelikeEntry()?.kind === kind
|
|
}
|
|
|
|
function roguelikeEntryPosition(entry: RoguelikeNavEntry): RoguelikeNavPosition {
|
|
if (entry.kind === 'back') return { row: 0, column: 0 }
|
|
if (entry.kind === 'variantPve') return { row: 1, column: 0 }
|
|
if (entry.kind === 'variantPvp') return { row: 1, column: 1 }
|
|
if (entry.kind === 'pveDungeon' || entry.kind === 'pvpDungeon') return { row: 2, column: 0 }
|
|
if (entry.kind === 'pveRaid' || entry.kind === 'pvpRaid') return { row: 2, column: 1 }
|
|
if (entry.kind === 'pvpStart') return { row: 3, column: 1 }
|
|
return { row: 3, column: 0 }
|
|
}
|
|
|
|
function moveRoguelikeSelection(action: string) {
|
|
const entries = roguelikeEntries()
|
|
setRoguelikeSelectedIndex((current) => {
|
|
const bounded = Math.min(current, entries.length - 1)
|
|
const active = entries[bounded]
|
|
if (!active) return bounded
|
|
const activePosition = roguelikeEntryPosition(active)
|
|
const candidates = entries
|
|
.map((entry, index) => ({ entry, index, position: roguelikeEntryPosition(entry) }))
|
|
.filter(({ index, position }) => {
|
|
if (index === bounded) return false
|
|
if (action === 'navigateLeft') return position.row === activePosition.row && position.column < activePosition.column
|
|
if (action === 'navigateRight') return position.row === activePosition.row && position.column > activePosition.column
|
|
if (action === 'navigateUp') return position.row < activePosition.row
|
|
return position.row > activePosition.row
|
|
})
|
|
if (candidates.length === 0) return bounded
|
|
candidates.sort((a, b) => {
|
|
const aPrimary = Math.abs(a.position.row - activePosition.row)
|
|
+ Math.abs(a.position.column - activePosition.column)
|
|
const bPrimary = Math.abs(b.position.row - activePosition.row)
|
|
+ Math.abs(b.position.column - activePosition.column)
|
|
const aSecondary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? Math.abs(a.position.column - activePosition.column)
|
|
: Math.abs(a.position.row - activePosition.row)
|
|
const bSecondary = action === 'navigateLeft' || action === 'navigateRight'
|
|
? Math.abs(b.position.column - activePosition.column)
|
|
: Math.abs(b.position.row - activePosition.row)
|
|
return aPrimary - bPrimary || aSecondary - bSecondary || a.index - b.index
|
|
})
|
|
return candidates[0]?.index ?? bounded
|
|
})
|
|
}
|
|
|
|
function openRoguelikeEntry(entry: RoguelikeNavEntry | undefined) {
|
|
if (!entry) return
|
|
if (entry.kind === 'back') setScreen('menu')
|
|
else if (entry.kind === 'variantPve') setRoguelikeVariant('pve')
|
|
else if (entry.kind === 'variantPvp') setRoguelikeVariant('pvp')
|
|
else if (entry.kind === 'pveDungeon') setRoguelikeKind('dungeon')
|
|
else if (entry.kind === 'pveRaid') setRoguelikeKind('raid')
|
|
else if (entry.kind === 'pveStart') startPveRoguelike()
|
|
else if (entry.kind === 'pvpDungeon') setPvpContentType('dungeon')
|
|
else if (entry.kind === 'pvpRaid') setPvpContentType('raid')
|
|
else if (entry.kind === 'pvpStadium') setPvpContentType('stadium')
|
|
else if (entry.kind === 'pvpStart') setScreen('pvp')
|
|
}
|
|
|
|
useGameAction((action, device) => {
|
|
if (device !== 'controller') return
|
|
if (screen === 'menu') {
|
|
if (action === 'confirm') {
|
|
openHomeMenuIndex(homeActiveIndex)
|
|
return
|
|
}
|
|
if (!action.startsWith('navigate')) return
|
|
moveHomeSelection(action)
|
|
return
|
|
}
|
|
if (screen === 'dungeons' || screen === 'raids') {
|
|
if (action === 'back') {
|
|
setScreen('menu')
|
|
return
|
|
}
|
|
if (action === 'confirm') {
|
|
openDungeonEntry(activeDungeonEntry())
|
|
return
|
|
}
|
|
if (action.startsWith('navigate')) moveDungeonSelection(action)
|
|
}
|
|
if (screen === 'roguelike') {
|
|
if (action === 'back') {
|
|
setScreen('menu')
|
|
return
|
|
}
|
|
if (action === 'confirm') {
|
|
openRoguelikeEntry(activeRoguelikeEntry())
|
|
return
|
|
}
|
|
if (action.startsWith('navigate')) moveRoguelikeSelection(action)
|
|
}
|
|
})
|
|
|
|
const setupDualScreenState = useMemo<DualScreenSetupState | null>(() => {
|
|
if (
|
|
!(screen === 'dungeons' || screen === 'raids')
|
|
|| !profile
|
|
|| !selectedActivityOption
|
|
|| !selectedDifficultyOption
|
|
) return null
|
|
return {
|
|
contentType: selectedActivityOption.contentType,
|
|
title: selectedActivityOption.name,
|
|
subtitle: `${selectedActivityOption.locationName} | Level ${selectedActivityOption.recommendedLevel} | ${selectedActivityOption.partySize} Players`,
|
|
description: selectedActivityOption.description,
|
|
initials: activityInitials(selectedActivityOption.name),
|
|
difficultyName: selectedDifficultyOption.name,
|
|
itemLevel: selectedDifficultyOption.droppedItemLevel,
|
|
experience: Math.round(selectedActivityOption.experienceReward * selectedDifficultyOption.experienceMultiplier),
|
|
lockedReason: undefined,
|
|
stats: {
|
|
health: `${selectedDifficultyOption.healthMultiplier.toFixed(2)}x`,
|
|
damage: `${selectedDifficultyOption.damageMultiplier.toFixed(2)}x`,
|
|
xp: `${selectedDifficultyOption.experienceMultiplier.toFixed(1)}x`,
|
|
loot: `iLvl ${selectedDifficultyOption.droppedItemLevel}`,
|
|
},
|
|
}
|
|
}, [profile, screen, selectedActivityOption, selectedDifficultyOption])
|
|
|
|
useDualScreenSetupPublisher(setupDualScreenState, dualScreenEnabled)
|
|
|
|
if (error) {
|
|
return (
|
|
<main className="game-shell">
|
|
<section className="message-panel">
|
|
<p className="eyebrow">Database Error</p>
|
|
<h1>Character Unavailable</h1>
|
|
<p>{error}</p>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
if (!authChecked) {
|
|
return (
|
|
<main className="game-shell">
|
|
<section className="message-panel">
|
|
<p className="eyebrow">Opening Chronicle</p>
|
|
<h1>Loading...</h1>
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
if (!account || !profile) {
|
|
return (
|
|
<main className="game-shell">
|
|
<section className="message-panel">
|
|
<p className="eyebrow">Opening Chronicle</p>
|
|
<h1>Returning to Sign In...</h1>
|
|
{serverMessage && <p>{serverMessage}</p>}
|
|
</section>
|
|
</main>
|
|
)
|
|
}
|
|
|
|
if (screen === 'combat') {
|
|
const dungeon = combatDungeonOption ?? profile.dungeons[0]
|
|
const difficulty = combatDifficultyOption ?? dungeon.difficulties[0]
|
|
return (
|
|
<Suspense fallback={<ScreenLoading />}>
|
|
<CombatScreen
|
|
difficulty={difficulty}
|
|
dungeon={dungeon}
|
|
hardMode={false}
|
|
marathonMode={selectedMarathonMode && combatContentId > 0}
|
|
profile={profile}
|
|
roguelikeMode={combatContentId < 0 ? roguelikeKind : undefined}
|
|
roguelikeUpgradeTiming={combatContentId < 0 ? 'encounter' : undefined}
|
|
roguelikeAbilityLabelMode={combatContentId < 0 ? 'ability' : undefined}
|
|
roguelikeEncounterPool={combatContentId < 0 ? roguelikePool : undefined}
|
|
startPart={1}
|
|
onExit={() => {
|
|
setScreen(combatContentId < 0 ? 'roguelike' : dungeon.contentType === 'raid' ? 'raids' : 'dungeons')
|
|
}}
|
|
onMainMenu={() => setScreen('menu')}
|
|
onProfileUpdated={setProfile}
|
|
/>
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
if (screen === 'pvp') {
|
|
if (pvpContentType === 'stadium') {
|
|
return (
|
|
<Suspense fallback={<ScreenLoading />}>
|
|
<PvpStadiumScreen
|
|
gameMode={gameMode}
|
|
onExit={() => {
|
|
setRoguelikeVariant('pvp')
|
|
setScreen('roguelike')
|
|
}}
|
|
onProfileUpdated={setProfile}
|
|
profile={profile}
|
|
/>
|
|
</Suspense>
|
|
)
|
|
}
|
|
return (
|
|
<Suspense fallback={<ScreenLoading />}>
|
|
<PvPRoguelikeScreen
|
|
contentType={pvpContentType}
|
|
encounterPool={pvpPool}
|
|
gameMode={gameMode}
|
|
onExit={() => {
|
|
setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
|
|
setRoguelikeVariant('pvp')
|
|
setScreen('roguelike')
|
|
}}
|
|
onMainMenu={() => {
|
|
setCpuLeaderboard(loadCpuPvpLeaderboard(pvpContentType))
|
|
setScreen('menu')
|
|
}}
|
|
onProfileUpdated={setProfile}
|
|
profile={profile}
|
|
/>
|
|
</Suspense>
|
|
)
|
|
}
|
|
|
|
const levelStart = profile.character.currentLevelExperience
|
|
const levelEnd = profile.character.nextLevelExperience
|
|
const experienceIntoLevel = profile.character.experience - levelStart
|
|
const experienceForLevel = Math.max(1, levelEnd - levelStart)
|
|
const experiencePercent = profile.character.level >= profile.maxLevel
|
|
? 100
|
|
: Math.min(100, (experienceIntoLevel / experienceForLevel) * 100)
|
|
const dungeon = selectedDungeonOption ?? profile.dungeons[0]!
|
|
const activityPageStart = activityOptions.length === 0
|
|
? 0
|
|
: currentActivityPage * ACTIVITY_PAGE_SIZE + 1
|
|
const activityPageEnd = Math.min(activityOptions.length, (currentActivityPage + 1) * ACTIVITY_PAGE_SIZE)
|
|
const activity = selectedActivityOption ?? dungeon
|
|
const selectedDifficulty = selectedDifficultyOption ?? activity.difficulties[0]
|
|
return (
|
|
<main className={`game-shell ${screen === 'dungeons' || screen === 'raids' ? 'dungeon-shell' : ''} ${screen === 'customize' ? 'workshop-shell' : ''} ${screen === 'settings' ? 'settings-shell' : ''}`}>
|
|
{screen !== 'hunter-profile' && (
|
|
<header className="topbar app-header">
|
|
<button
|
|
className="brand-button"
|
|
onClick={onBackToGameSelect}
|
|
type="button"
|
|
>
|
|
<strong>Games</strong>
|
|
</button>
|
|
<button
|
|
className="brand-button"
|
|
onClick={() => setScreen('menu')}
|
|
type="button"
|
|
>
|
|
<strong>Menu</strong>
|
|
</button>
|
|
<div className="character-summary">
|
|
<strong>{profile.character.name}</strong>
|
|
<small>Level {profile.character.level}</small>
|
|
<small>Item Level {profile.gearStats.averageItemLevel.toFixed(1)}</small>
|
|
<div className="header-xp" title={`${profile.character.experience} total experience`}>
|
|
<span style={barFillStyle(experiencePercent)} />
|
|
</div>
|
|
<button className="logout-button" onClick={signOut} type="button">
|
|
{gameMode === 'offline' ? 'Leave Offline' : `Sign Out ${account.username}`}
|
|
</button>
|
|
</div>
|
|
</header>
|
|
)}
|
|
|
|
{screen === 'menu' && (
|
|
<section className="menu-screen" data-game-nav-active="true">
|
|
<div className={`main-menu-grid ${canShowCloudSync ? 'has-cloud-sync' : ''}`}>
|
|
{canShowCloudSync && (
|
|
<div
|
|
className={`menu-card cloud-sync-card ${homeActiveIndex === 0 ? 'game-selected' : ''}`}
|
|
data-game-selected={homeActiveIndex === 0 ? 'true' : undefined}
|
|
onPointerDown={() => setHomeSelectedIndex(0)}
|
|
>
|
|
<span>{syncComparison ? '!' : cloudSync.dirty ? 'S' : 'C'}</span>
|
|
<div>
|
|
<strong>Sync With Server</strong>
|
|
<small>
|
|
{syncComparison
|
|
? cloudSyncRelationText(syncComparison)
|
|
: cloudSync.dirty
|
|
? 'Local progress waiting. Upload when you want to refresh the server copy.'
|
|
: 'Server copy matches this device.'}
|
|
</small>
|
|
{syncComparison && (
|
|
<div className="cloud-sync-times">
|
|
<small>Device: {formatSaveTimestamp(syncComparison.local.updatedAt)}</small>
|
|
<small>Server: {formatSaveTimestamp(syncComparison.server.updatedAt)}</small>
|
|
</div>
|
|
)}
|
|
{syncMessage && <small className="cloud-sync-message">{syncMessage}</small>}
|
|
</div>
|
|
<div className="cloud-sync-control-stack">
|
|
<button
|
|
className="text-button"
|
|
data-controller-nav="skip"
|
|
disabled={syncingCloud}
|
|
onClick={syncSaveNow}
|
|
type="button"
|
|
>
|
|
{syncingCloud ? 'Checking...' : syncComparison ? 'Check Again' : 'Sync With Server'}
|
|
</button>
|
|
{syncComparison && (
|
|
<div className="cloud-sync-actions">
|
|
<button
|
|
className={`text-button ${homeActiveIndex === 1 ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
data-game-selected={homeActiveIndex === 1 ? 'true' : undefined}
|
|
disabled={syncingCloud}
|
|
onClick={() => keepCloudSave('local')}
|
|
onPointerDown={() => setHomeSelectedIndex(1)}
|
|
type="button"
|
|
>
|
|
Keep Device Save
|
|
</button>
|
|
<button
|
|
className={`text-button ${homeActiveIndex === 2 ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
data-game-selected={homeActiveIndex === 2 ? 'true' : undefined}
|
|
disabled={syncingCloud}
|
|
onClick={() => keepCloudSave('server')}
|
|
onPointerDown={() => setHomeSelectedIndex(2)}
|
|
type="button"
|
|
>
|
|
Keep Server Save
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
{MENU_ITEMS.map((item, index) => {
|
|
const homeIndex = index + homeMenuOffset
|
|
return (
|
|
<button
|
|
className={`menu-card ${homeActiveIndex === homeIndex ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
data-game-selected={homeActiveIndex === homeIndex ? 'true' : undefined}
|
|
key={item.screen}
|
|
onClick={() => openHomeMenuIndex(homeIndex)}
|
|
onPointerDown={() => setHomeSelectedIndex(homeIndex)}
|
|
type="button"
|
|
>
|
|
<span>{item.glyph}</span>
|
|
<div>
|
|
<strong>{item.label}</strong>
|
|
<small>{item.description}</small>
|
|
</div>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{screen === 'roguelike' && (
|
|
<section className="content-screen roguelike-screen" data-game-nav-active="true">
|
|
<ScreenHeading
|
|
backClassName={roguelikeEntrySelected('back') ? 'game-selected' : ''}
|
|
backControllerSkip
|
|
eyebrow="Endless Draft"
|
|
title="Roguelike"
|
|
onBack={() => setScreen('menu')}
|
|
onBackPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'back'))}
|
|
/>
|
|
<div className="roguelike-variant-row">
|
|
<button
|
|
className={`text-button ${roguelikeVariant === 'pve' ? 'active' : ''} ${roguelikeEntrySelected('variantPve') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setRoguelikeVariant('pve')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'variantPve'))}
|
|
type="button"
|
|
>
|
|
PvE
|
|
</button>
|
|
<button
|
|
className={`text-button ${roguelikeVariant === 'pvp' ? 'active' : ''} ${roguelikeEntrySelected('variantPvp') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setRoguelikeVariant('pvp')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'variantPvp'))}
|
|
type="button"
|
|
>
|
|
PvP
|
|
</button>
|
|
</div>
|
|
{roguelikeVariant === 'pve' && (
|
|
<>
|
|
<div className="roguelike-option-panel">
|
|
<div>
|
|
<p className="eyebrow">Run Type</p>
|
|
<h2>PvE Roguelike</h2>
|
|
</div>
|
|
<div className="roguelike-timing-row">
|
|
<button
|
|
className={`text-button ${roguelikeKind === 'dungeon' ? 'active' : ''} ${roguelikeEntrySelected('pveDungeon') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setRoguelikeKind('dungeon')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pveDungeon'))}
|
|
type="button"
|
|
>
|
|
Dungeon
|
|
</button>
|
|
<button
|
|
className={`text-button ${roguelikeKind === 'raid' ? 'active' : ''} ${roguelikeEntrySelected('pveRaid') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setRoguelikeKind('raid')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pveRaid'))}
|
|
type="button"
|
|
>
|
|
Raid
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="menu-card pvp-queue-panel">
|
|
<span>{roguelikeKind === 'raid' ? 'R' : 'D'}</span>
|
|
<div>
|
|
<strong>{roguelikeKind === 'raid' ? 'Raid Roguelike' : 'Dungeon Roguelike'}</strong>
|
|
<small>
|
|
{roguelikeKind === 'raid'
|
|
? 'Ten-player party. Raid pools, lighter early scaling, and the same upgrade draft.'
|
|
: 'Five-player party. Two random trash enemies and a boss with a lighter early ramp.'}
|
|
</small>
|
|
</div>
|
|
<button
|
|
className={`text-button ${roguelikeEntrySelected('pveStart') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={startPveRoguelike}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pveStart'))}
|
|
type="button"
|
|
>
|
|
Start Run
|
|
</button>
|
|
</div>
|
|
</>
|
|
)}
|
|
{roguelikeVariant === 'pvp' && (
|
|
<>
|
|
<div className="roguelike-option-panel">
|
|
<div>
|
|
<p className="eyebrow">Match Type</p>
|
|
<h2>PvP Roguelike</h2>
|
|
</div>
|
|
<div className="roguelike-timing-row">
|
|
<button
|
|
className={`text-button ${pvpContentType === 'dungeon' ? 'active' : ''} ${roguelikeEntrySelected('pvpDungeon') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setPvpContentType('dungeon')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pvpDungeon'))}
|
|
type="button"
|
|
>
|
|
Dungeon
|
|
</button>
|
|
<button
|
|
className={`text-button ${pvpContentType === 'raid' ? 'active' : ''} ${roguelikeEntrySelected('pvpRaid') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setPvpContentType('raid')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pvpRaid'))}
|
|
type="button"
|
|
>
|
|
Raid
|
|
</button>
|
|
<button
|
|
className={`text-button ${pvpContentType === 'stadium' ? 'active' : ''} ${roguelikeEntrySelected('pvpStadium') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setPvpContentType('stadium')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pvpStadium'))}
|
|
type="button"
|
|
>
|
|
Stadium
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div className="menu-card pvp-queue-panel">
|
|
<span>{gameMode === 'offline' ? 'C' : 'Q'}</span>
|
|
<div>
|
|
<strong>{gameMode === 'offline' ? 'Offline CPU Match' : 'Queue Then CPU Fallback'}</strong>
|
|
<small>
|
|
{pvpContentType === 'stadium'
|
|
? 'Best-of-5 survival with dampening, equalized gear, and after-round buff buying.'
|
|
: gameMode === 'offline'
|
|
? 'Offline mode always places you against a random CPU 1-5.'
|
|
: 'Online mode searches briefly. If nobody is queued, a random CPU 1-5 takes the slot.'}
|
|
</small>
|
|
</div>
|
|
<button
|
|
className={`text-button ${roguelikeEntrySelected('pvpStart') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setScreen('pvp')}
|
|
onPointerDown={() => setRoguelikeSelectedIndex(roguelikeEntries().findIndex((entry) => entry.kind === 'pvpStart'))}
|
|
type="button"
|
|
>
|
|
Start Match
|
|
</button>
|
|
</div>
|
|
{SHOW_LEADERBOARDS && (
|
|
<div className="leaderboard-section">
|
|
<div className="equipment-heading toggle-heading">
|
|
<div>
|
|
<p className="eyebrow">CPU Leaderboard</p>
|
|
<h2>{pvpContentType === 'stadium' ? 'Stadium' : pvpContentType === 'raid' ? 'Raid Clash' : 'Dungeon Clash'}</h2>
|
|
</div>
|
|
</div>
|
|
<div className="leaderboard-table">
|
|
<div className="leaderboard-header pvp-leaderboard-row">
|
|
<strong>Rank</strong>
|
|
<strong>Player</strong>
|
|
<strong>CPU</strong>
|
|
<strong>Clears</strong>
|
|
<strong>Result</strong>
|
|
</div>
|
|
{cpuLeaderboard.map((entry, index) => (
|
|
<div className="leaderboard-row pvp-leaderboard-row" key={`${entry.characterName}-${entry.completedAt}`}>
|
|
<strong>#{index + 1}</strong>
|
|
<span>{entry.characterName}</span>
|
|
<span>CPU {entry.cpuDifficulty}</span>
|
|
<span>{entry.encountersCleared}</span>
|
|
<span>{entry.result}</span>
|
|
</div>
|
|
))}
|
|
{cpuLeaderboard.length === 0 && (
|
|
<div className="leaderboard-empty">
|
|
No CPU runs recorded yet for this mode.
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</section>
|
|
)}
|
|
|
|
{(screen === 'dungeons' || screen === 'raids') && (
|
|
<section className="content-screen dungeon-run-screen" data-game-nav-active="true">
|
|
<div className="dungeon-run-board">
|
|
<div className="dungeon-run-main">
|
|
<section className="run-setup-panel dungeon-choice-panel">
|
|
<div className="run-setup-heading">
|
|
<div>
|
|
<p className="eyebrow">Pick Run</p>
|
|
<h2>{screen === 'raids' ? 'Raid' : 'Dungeon'}</h2>
|
|
</div>
|
|
<div className="dungeon-heading-actions">
|
|
<button
|
|
className={`back-button inline-back-button ${dungeonEntrySelected('back') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setScreen('menu')}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'back'))}
|
|
type="button"
|
|
>
|
|
Back
|
|
</button>
|
|
{activityPageCount > 1 ? (
|
|
<div className="activity-pager" aria-label={`${screen === 'raids' ? 'Raid' : 'Dungeon'} pages`}>
|
|
<button
|
|
className={dungeonEntrySelected('pagePrev') ? 'game-selected' : ''}
|
|
data-controller-nav="skip"
|
|
disabled={currentActivityPage === 0}
|
|
onClick={() => setActivityPage((page) => Math.max(0, page - 1))}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'pagePrev'))}
|
|
type="button"
|
|
>
|
|
Prev
|
|
</button>
|
|
<span>{activityPageStart}-{activityPageEnd} of {activityOptions.length}</span>
|
|
<button
|
|
className={dungeonEntrySelected('pageNext') ? 'game-selected' : ''}
|
|
data-controller-nav="skip"
|
|
disabled={currentActivityPage >= activityPageCount - 1}
|
|
onClick={() => setActivityPage((page) => Math.min(activityPageCount - 1, page + 1))}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'pageNext'))}
|
|
type="button"
|
|
>
|
|
Next
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<small>{selectedDifficulty.name} rewards iLvl {selectedDifficulty.droppedItemLevel} components.</small>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div className="activity-card-grid dungeon-choice-grid">
|
|
{pagedActivityOptions.map((candidate, index) => {
|
|
const difficulty = candidate.difficulties.find(
|
|
(option) => option.droppedItemLevel === selectedDifficulty.droppedItemLevel,
|
|
) ?? candidate.difficulties[0]
|
|
const selected = candidate.id === activity.id
|
|
return (
|
|
<button
|
|
className={`activity-card ${selected ? 'selected' : ''} ${dungeonEntrySelected('activity', index) ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
key={candidate.id}
|
|
onClick={() => {
|
|
if (screen === 'raids') setSelectedRaidId(candidate.id)
|
|
else setSelectedDungeonId(candidate.id)
|
|
setSelectedDifficultyId(difficulty.id)
|
|
}}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'activity' && 'index' in entry && entry.index === index))}
|
|
type="button"
|
|
>
|
|
<span className={`dungeon-art ${candidate.contentType === 'raid' ? 'raid-art' : ''}`}>
|
|
{activityInitials(candidate.name)}
|
|
</span>
|
|
<strong>{candidate.name}</strong>
|
|
<small>{candidate.locationName}</small>
|
|
<i>
|
|
Level {candidate.recommendedLevel} | {candidate.partySize} Players
|
|
</i>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<aside className="dungeon-setup-rail">
|
|
<section className="run-setup-panel part-setup-panel">
|
|
<div className="run-setup-heading">
|
|
<div>
|
|
<p className="eyebrow">Start</p>
|
|
<h2>Run</h2>
|
|
</div>
|
|
<small>
|
|
Pick a hunt or marathon.
|
|
</small>
|
|
</div>
|
|
<div className="part-picker">
|
|
<button
|
|
className={`primary-button selected-part ${dungeonEntrySelected('start') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => {
|
|
setSelectedMarathonMode(false)
|
|
setCombatContentId(activity.id)
|
|
setSelectedDifficultyId(selectedDifficulty.id)
|
|
setScreen('combat')
|
|
}}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'start'))}
|
|
type="button"
|
|
>
|
|
Start Hunt
|
|
</button>
|
|
<button
|
|
className={`primary-button ${selectedMarathonMode ? 'selected-part' : ''} ${dungeonEntrySelected('marathon') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => {
|
|
setSelectedMarathonMode(true)
|
|
setCombatContentId(activity.id)
|
|
setSelectedDifficultyId(selectedDifficulty.id)
|
|
setScreen('combat')
|
|
}}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'marathon'))}
|
|
type="button"
|
|
>
|
|
Marathon
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="run-setup-panel tier-setup-panel">
|
|
<div className="run-setup-heading">
|
|
<div>
|
|
<p className="eyebrow">Item Level</p>
|
|
<h2>Tier</h2>
|
|
</div>
|
|
<small>{screen === 'raids' ? 'Raid' : 'Dungeon'} tiers are available at every level.</small>
|
|
</div>
|
|
<div className="tier-grid">
|
|
{tierOptions.map((difficulty, index) => {
|
|
const selected = difficulty.droppedItemLevel === selectedDifficulty.droppedItemLevel
|
|
return (
|
|
<button
|
|
className={`${selected ? 'selected' : ''} ${dungeonEntrySelected('tier', index) ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
key={difficulty.id}
|
|
onClick={() => {
|
|
setActivityPage(0)
|
|
const nextActivity = activity.difficulties.some(
|
|
(candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
|
|
)
|
|
? activity
|
|
: activityOptions.find((option) =>
|
|
option.difficulties.some((candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel),
|
|
)
|
|
if (nextActivity) {
|
|
if (screen === 'raids') setSelectedRaidId(nextActivity.id)
|
|
else setSelectedDungeonId(nextActivity.id)
|
|
const nextDifficulty = nextActivity.difficulties.find(
|
|
(candidate) => candidate.droppedItemLevel === difficulty.droppedItemLevel,
|
|
)
|
|
if (nextDifficulty) setSelectedDifficultyId(nextDifficulty.id)
|
|
}
|
|
}}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'tier' && 'index' in entry && entry.index === index))}
|
|
type="button"
|
|
>
|
|
<strong>iLvl {difficulty.droppedItemLevel}</strong>
|
|
<span>{difficulty.name}</span>
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</section>
|
|
|
|
<div className="loot-preview-section">
|
|
<div className="equipment-heading toggle-heading">
|
|
<div>
|
|
<p className="eyebrow">Encounter Rewards</p>
|
|
<h2>{selectedDifficulty.name} Loot Tables</h2>
|
|
</div>
|
|
<button
|
|
className={`text-button ${dungeonEntrySelected('loot') ? 'game-selected' : ''}`}
|
|
data-controller-nav="skip"
|
|
onClick={() => setShowLoot((current) => !current)}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'loot'))}
|
|
type="button"
|
|
>
|
|
{showLoot ? 'Hide Loot' : 'View Loot'}
|
|
</button>
|
|
</div>
|
|
{showLoot && (
|
|
<>
|
|
<div className="loot-toolbar">
|
|
<label className={dungeonEntrySelected('lootSort') ? 'game-selected' : ''}>
|
|
<span>Sort</span>
|
|
<select
|
|
data-controller-nav="skip"
|
|
onChange={(event) => setLootSort(event.target.value as 'sequence' | 'boss')}
|
|
onPointerDown={() => setDungeonSelectedIndex(dungeonEntries().findIndex((entry) => entry.kind === 'lootSort'))}
|
|
value={lootSort}
|
|
>
|
|
<option value="sequence">Encounter order</option>
|
|
<option value="boss">Boss name</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<p className="section-note">
|
|
Bosses drop 1-3 boss coins from one loot roll
|
|
{activity.completionItemLevel
|
|
? ` - full clear guarantees iLvl ${activity.completionItemLevel}`
|
|
: ''}
|
|
</p>
|
|
<div className="loot-preview-grid">
|
|
{lootPreviewEncounters.map((encounter) => {
|
|
const loot = lootPreviewByEncounterId.get(encounter.id) ?? []
|
|
return (
|
|
<article key={encounter.id}>
|
|
<div className="loot-encounter-title">
|
|
{encounter.isBoss ? (
|
|
<img className="loot-boss-icon" src={encounter.imageUrl} alt={`${encounter.enemyName} icon`} />
|
|
) : (
|
|
<span>{encounter.sequence}</span>
|
|
)}
|
|
<div>
|
|
<strong>{encounter.enemyName}</strong>
|
|
<small>{loot.length > 0 ? '1 loot roll, 1-3 coins' : 'No coin table'}</small>
|
|
</div>
|
|
</div>
|
|
<div className="loot-items">
|
|
{loot.map((item) => (
|
|
<div className={`rarity-${item.rarity}`} key={item.id}>
|
|
<span>{item.glyph}</span>
|
|
<div>
|
|
<strong>{item.name}</strong>
|
|
<small>{item.slot} - iLvl {item.itemLevel}</small>
|
|
</div>
|
|
<i>{item.dropWeight}% weight</i>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</article>
|
|
)
|
|
})}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
{SHOW_LEADERBOARDS && (
|
|
<div className="leaderboard-section">
|
|
<div className="equipment-heading toggle-heading">
|
|
<div>
|
|
<p className="eyebrow">Efficiency Rankings</p>
|
|
<h2>{selectedDifficulty.name} Leaderboard</h2>
|
|
</div>
|
|
<button
|
|
className="text-button"
|
|
onClick={() => setShowLeaderboard((current) => !current)}
|
|
type="button"
|
|
>
|
|
{showLeaderboard ? 'Hide Leaderboard' : 'View Leaderboard'}
|
|
</button>
|
|
</div>
|
|
{showLeaderboard && (
|
|
<>
|
|
<p className="section-note">
|
|
{gameMode === 'offline'
|
|
? 'Offline runs are not submitted'
|
|
: canShowCloudSync
|
|
? 'Manual save sync updates your cloud profile.'
|
|
: 'Lowest resource spent ranks first'}
|
|
</p>
|
|
<div className="leaderboard-tabs">
|
|
{([
|
|
{ key: 'part_1', label: 'Run' },
|
|
{ key: 'part_2', label: 'Legacy 2' },
|
|
{ key: 'part_3', label: 'Legacy 3' },
|
|
{ key: 'full_run', label: 'Legacy Full' },
|
|
] as const).map((tab) => (
|
|
<button
|
|
key={tab.key}
|
|
className={`leaderboard-tab ${leaderboardCategory === tab.key ? 'active' : ''}`}
|
|
onClick={() => setLeaderboardCategory(tab.key)}
|
|
type="button"
|
|
>
|
|
{tab.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
<div className="leaderboard-table">
|
|
<div className="leaderboard-header">
|
|
<span>Rank</span>
|
|
<span>Healer</span>
|
|
<span>Class</span>
|
|
<span>Level</span>
|
|
<span>Item Level</span>
|
|
<span>Resource</span>
|
|
<span>Time</span>
|
|
</div>
|
|
{leaderboardEntries
|
|
.map((entry) => (
|
|
<div className="leaderboard-row" key={`${entry.rank}-${entry.completedAt}`}>
|
|
<strong>#{entry.rank}</strong>
|
|
<span>{entry.characterName}</span>
|
|
<span>{entry.className}</span>
|
|
<span>{entry.characterLevel}</span>
|
|
<span>{entry.averageItemLevel.toFixed(1)}</span>
|
|
<strong>{entry.resourceSpent}</strong>
|
|
<span>{entry.durationSeconds}s</span>
|
|
</div>
|
|
))}
|
|
{leaderboardEntries.length === 0 && (
|
|
<div className="leaderboard-empty">
|
|
{gameMode === 'offline'
|
|
? 'Connect with an online character to compete in rankings.'
|
|
: canShowCloudSync
|
|
? 'No leaderboard entries yet.'
|
|
: 'Complete this difficulty to claim the first ranking.'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
<Suspense fallback={<ScreenLoading />}>
|
|
{screen === 'customize' && (
|
|
<CustomizeScreen
|
|
profile={profile}
|
|
onBack={() => setScreen('menu')}
|
|
onSaved={setProfile}
|
|
/>
|
|
)}
|
|
|
|
{screen === 'talents' && (
|
|
<TalentScreen
|
|
profile={profile}
|
|
onBack={() => setScreen('menu')}
|
|
onUpdated={setProfile}
|
|
/>
|
|
)}
|
|
|
|
{screen === 'equipment' && (
|
|
<EquipmentScreen
|
|
profile={profile}
|
|
onBack={() => setScreen('menu')}
|
|
onUpdated={setProfile}
|
|
/>
|
|
)}
|
|
|
|
{screen === 'hunter-profile' && (
|
|
<HunterProfileScreen
|
|
profile={profile}
|
|
onBack={() => setScreen('menu')}
|
|
/>
|
|
)}
|
|
|
|
{screen === 'settings' && (
|
|
<SettingsScreen onBack={() => setScreen('menu')} />
|
|
)}
|
|
</Suspense>
|
|
|
|
</main>
|
|
)
|
|
}
|
|
|
|
function ScreenHeading({
|
|
backClassName = '',
|
|
backControllerSkip = false,
|
|
eyebrow,
|
|
title,
|
|
onBack,
|
|
onBackPointerDown,
|
|
}: {
|
|
backClassName?: string
|
|
backControllerSkip?: boolean
|
|
eyebrow: string
|
|
title: string
|
|
onBack: () => void
|
|
onBackPointerDown?: () => void
|
|
}) {
|
|
return (
|
|
<div className="screen-heading">
|
|
<div>
|
|
<p className="eyebrow">{eyebrow}</p>
|
|
<h1>{title}</h1>
|
|
</div>
|
|
<button
|
|
className={`back-button ${backClassName}`}
|
|
data-controller-nav={backControllerSkip ? 'skip' : undefined}
|
|
onClick={onBack}
|
|
onPointerDown={onBackPointerDown}
|
|
type="button"
|
|
>
|
|
Back
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default IWantToHeal1App
|