Android build v1.1.38
This commit is contained in:
Warren H
+276
-155
@@ -1,192 +1,313 @@
|
||||
import { useState } from 'react'
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import {
|
||||
loadAuthSession,
|
||||
loginAccount,
|
||||
registerAccount,
|
||||
type AuthSession,
|
||||
logoutAccount,
|
||||
type Account,
|
||||
} from '../profile'
|
||||
import { selectOfflineMode, selectOnlineMode } from '../gameRepository'
|
||||
import {
|
||||
createOfflineCharacter,
|
||||
hasOfflineCharacter,
|
||||
resumeOfflineCharacter,
|
||||
selectOnlineMode,
|
||||
} from '../gameRepository'
|
||||
createDefaultIwt2Save,
|
||||
loadExistingIwt2Save,
|
||||
loadIwt2OnlineSave,
|
||||
replaceIwt2Save,
|
||||
type Iwt2Save,
|
||||
} from '../modes/iwt2/save/iwt2Repository'
|
||||
|
||||
type Props = {
|
||||
onAuthenticated: (session: AuthSession) => void
|
||||
serverMessage?: string
|
||||
type Iwt2Launch = {
|
||||
onlineBackupsAvailable: boolean
|
||||
save: Iwt2Save
|
||||
}
|
||||
|
||||
export function AuthScreen({ onAuthenticated, serverMessage = '' }: Props) {
|
||||
const [mode, setMode] = useState<'login' | 'register'>('login')
|
||||
type Props = {
|
||||
onContinue: (launch: Iwt2Launch) => void
|
||||
}
|
||||
|
||||
function formatSaveTimestamp(updatedAt: number) {
|
||||
return new Intl.DateTimeFormat(undefined, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(updatedAt))
|
||||
}
|
||||
|
||||
function SaveMetadata({ save }: { save: Iwt2Save }) {
|
||||
return (
|
||||
<dl className="save-metadata">
|
||||
<div>
|
||||
<dt>Last updated</dt>
|
||||
<dd>
|
||||
<time dateTime={new Date(save.updatedAt).toISOString()}>
|
||||
{formatSaveTimestamp(save.updatedAt)}
|
||||
</time>
|
||||
</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Character XP</dt>
|
||||
<dd>{save.character.experience.toLocaleString()} XP</dd>
|
||||
</div>
|
||||
</dl>
|
||||
)
|
||||
}
|
||||
|
||||
export function AuthScreen({ onContinue }: Props) {
|
||||
const [localSave] = useState(loadExistingIwt2Save)
|
||||
const newSave = useMemo(() => createDefaultIwt2Save(), [])
|
||||
const [account, setAccount] = useState<Account | null>(null)
|
||||
const [onlineSave, setOnlineSave] = useState<Iwt2Save | null>(null)
|
||||
const [username, setUsername] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [characterName, setCharacterName] = useState('')
|
||||
const [offlineName, setOfflineName] = useState('')
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [message, setMessage] = useState('')
|
||||
const offlineCharacterExists = hasOfflineCharacter()
|
||||
const [checkingSession, setCheckingSession] = useState(true)
|
||||
const [checkingOnlineSave, setCheckingOnlineSave] = useState(false)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [confirmNewSave, setConfirmNewSave] = useState(false)
|
||||
const [message, setMessage] = useState('Local play is ready while online saves are checked.')
|
||||
const [messageIsError, setMessageIsError] = useState(false)
|
||||
|
||||
async function submit(event: React.FormEvent) {
|
||||
const inspectOnlineSave = useCallback(async (cancelled: () => boolean = () => false) => {
|
||||
setCheckingOnlineSave(true)
|
||||
try {
|
||||
const result = await loadIwt2OnlineSave()
|
||||
if (cancelled()) return
|
||||
setOnlineSave(result.save)
|
||||
setMessage(result.save ? 'Online save ready to load.' : 'Account has no online IWT2 save yet.')
|
||||
setMessageIsError(false)
|
||||
} catch (reason) {
|
||||
if (cancelled()) return
|
||||
setOnlineSave(null)
|
||||
setMessage(reason instanceof Error ? reason.message : 'Unable to check online save.')
|
||||
setMessageIsError(true)
|
||||
} finally {
|
||||
if (!cancelled()) setCheckingOnlineSave(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false
|
||||
selectOnlineMode()
|
||||
loadAuthSession()
|
||||
.then((session) => {
|
||||
if (cancelled || !session.account) return
|
||||
setAccount(session.account)
|
||||
return inspectOnlineSave(() => cancelled)
|
||||
})
|
||||
.catch((reason: unknown) => {
|
||||
if (cancelled) return
|
||||
setMessage(
|
||||
reason instanceof Error
|
||||
? `${reason.message} Local saves remain available.`
|
||||
: 'Online service unavailable. Local saves remain available.',
|
||||
)
|
||||
setMessageIsError(true)
|
||||
})
|
||||
.finally(() => {
|
||||
if (!cancelled) setCheckingSession(false)
|
||||
})
|
||||
return () => {
|
||||
cancelled = true
|
||||
}
|
||||
}, [inspectOnlineSave])
|
||||
|
||||
function continueLocal() {
|
||||
if (!localSave) return
|
||||
selectOfflineMode()
|
||||
onContinue({ save: localSave, onlineBackupsAvailable: false })
|
||||
}
|
||||
|
||||
function continueNew() {
|
||||
if (localSave && !confirmNewSave) {
|
||||
setConfirmNewSave(true)
|
||||
setMessage('New save replaces current local file. Select again to confirm.')
|
||||
setMessageIsError(false)
|
||||
return
|
||||
}
|
||||
replaceIwt2Save(newSave)
|
||||
selectOfflineMode()
|
||||
onContinue({ save: newSave, onlineBackupsAvailable: false })
|
||||
}
|
||||
|
||||
async function signIn(event: React.FormEvent) {
|
||||
event.preventDefault()
|
||||
setBusy(true)
|
||||
setMessage('')
|
||||
setSubmitting(true)
|
||||
setMessage('Signing in and checking online save...')
|
||||
setMessageIsError(false)
|
||||
try {
|
||||
selectOnlineMode()
|
||||
const session = mode === 'login'
|
||||
? await loginAccount(username, password)
|
||||
: await registerAccount(username, password, characterName)
|
||||
onAuthenticated(session)
|
||||
const session = await loginAccount(username, password)
|
||||
if (!session.account) throw new Error('Account session was not returned.')
|
||||
setAccount(session.account)
|
||||
await inspectOnlineSave()
|
||||
} catch (reason) {
|
||||
setMessage(reason instanceof Error ? reason.message : 'Unable to authenticate.')
|
||||
setAccount(null)
|
||||
setOnlineSave(null)
|
||||
setMessage(reason instanceof Error ? reason.message : 'Unable to sign in.')
|
||||
setMessageIsError(true)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
function beginOffline() {
|
||||
setMessage('')
|
||||
function continueOnline() {
|
||||
if (!account || !onlineSave) return
|
||||
selectOnlineMode()
|
||||
onContinue({ save: onlineSave, onlineBackupsAvailable: true })
|
||||
}
|
||||
|
||||
async function handleDifferentAccount() {
|
||||
setSubmitting(true)
|
||||
try {
|
||||
onAuthenticated(createOfflineCharacter(offlineName))
|
||||
await logoutAccount()
|
||||
setAccount(null)
|
||||
setOnlineSave(null)
|
||||
setPassword('')
|
||||
setMessage('Signed out. Enter account credentials to load another online save.')
|
||||
setMessageIsError(false)
|
||||
} catch (reason) {
|
||||
setMessage(reason instanceof Error ? reason.message : 'Unable to create an offline character.')
|
||||
setMessage(reason instanceof Error ? reason.message : 'Unable to sign out.')
|
||||
setMessageIsError(true)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
function resumeOffline() {
|
||||
const session = resumeOfflineCharacter()
|
||||
if (session) onAuthenticated(session)
|
||||
}
|
||||
const onlineBusy = checkingSession || checkingOnlineSave || submitting
|
||||
|
||||
return (
|
||||
<main className="auth-shell">
|
||||
<section className="auth-panel">
|
||||
<div className="auth-brand">
|
||||
<p className="eyebrow">Healer RPG</p>
|
||||
<h1>I want to Heal</h1>
|
||||
<p>
|
||||
Build your healer, master each dungeon, and compete for the most
|
||||
efficient clears.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="auth-card">
|
||||
<div className="auth-tabs">
|
||||
<button
|
||||
className={mode === 'login' ? 'selected' : ''}
|
||||
onClick={() => {
|
||||
setMode('login')
|
||||
setMessage('')
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Sign In
|
||||
</button>
|
||||
<button
|
||||
className={mode === 'register' ? 'selected' : ''}
|
||||
onClick={() => {
|
||||
setMode('register')
|
||||
setMessage('')
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
Create Account
|
||||
</button>
|
||||
<main className="auth-shell save-gateway-shell">
|
||||
<section className="save-gateway-panel">
|
||||
<header className="save-gateway-heading">
|
||||
<div>
|
||||
<p className="eyebrow">I Want To Heal 2</p>
|
||||
<h1>Choose Save</h1>
|
||||
</div>
|
||||
<p>Compare last update and character XP before entering the arena.</p>
|
||||
</header>
|
||||
|
||||
<form onSubmit={submit}>
|
||||
<label>
|
||||
Username
|
||||
<input
|
||||
autoComplete="username"
|
||||
maxLength={20}
|
||||
minLength={3}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
pattern="[A-Za-z0-9_]+"
|
||||
required
|
||||
value={username}
|
||||
/>
|
||||
</label>
|
||||
{mode === 'register' && (
|
||||
<label>
|
||||
Character Name
|
||||
<input
|
||||
autoComplete="nickname"
|
||||
maxLength={20}
|
||||
minLength={2}
|
||||
onChange={(event) => setCharacterName(event.target.value)}
|
||||
required
|
||||
value={characterName}
|
||||
/>
|
||||
</label>
|
||||
)}
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
autoComplete={mode === 'login' ? 'current-password' : 'new-password'}
|
||||
maxLength={128}
|
||||
minLength={10}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</label>
|
||||
<button className="primary-button" disabled={busy} type="submit">
|
||||
{busy
|
||||
? 'Working...'
|
||||
: mode === 'login'
|
||||
? 'Enter Chronicle'
|
||||
: 'Begin Adventure'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className={`auth-message ${message ? 'error' : ''}`}>
|
||||
{message || serverMessage || (
|
||||
mode === 'register'
|
||||
? 'The first account keeps the current local character and save.'
|
||||
: 'Sign in to continue your character.'
|
||||
)}
|
||||
</p>
|
||||
|
||||
<div className="offline-divider"><span>or</span></div>
|
||||
|
||||
<section className="offline-entry">
|
||||
<div>
|
||||
<p className="eyebrow">Local Save</p>
|
||||
<h2>Play Offline</h2>
|
||||
<p>
|
||||
No account or connection required. Offline progress stays on
|
||||
this device.
|
||||
</p>
|
||||
<div className="save-option-grid">
|
||||
<article className="save-option-card local-save-card">
|
||||
<div className="save-option-heading">
|
||||
<span aria-hidden="true">L</span>
|
||||
<div>
|
||||
<p className="eyebrow">Offline</p>
|
||||
<h2>Local Save</h2>
|
||||
</div>
|
||||
</div>
|
||||
{offlineCharacterExists && (
|
||||
<button
|
||||
className="offline-resume-button"
|
||||
onClick={resumeOffline}
|
||||
type="button"
|
||||
>
|
||||
Continue Offline Character
|
||||
</button>
|
||||
{localSave ? (
|
||||
<>
|
||||
<strong className="save-character-name">{localSave.character.name}</strong>
|
||||
<SaveMetadata save={localSave} />
|
||||
</>
|
||||
) : (
|
||||
<p className="save-empty-state">No local IWT2 save found.</p>
|
||||
)}
|
||||
<label>
|
||||
{offlineCharacterExists ? 'New Character Name' : 'Character Name'}
|
||||
<input
|
||||
maxLength={20}
|
||||
minLength={2}
|
||||
onChange={(event) => setOfflineName(event.target.value)}
|
||||
placeholder="Mira"
|
||||
value={offlineName}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="text-button offline-new-button"
|
||||
onClick={beginOffline}
|
||||
className="save-continue-button"
|
||||
disabled={!localSave}
|
||||
onClick={continueLocal}
|
||||
type="button"
|
||||
>
|
||||
{offlineCharacterExists ? 'Replace Offline Character' : 'Begin Offline Adventure'}
|
||||
Continue Offline — Local
|
||||
</button>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
<article className="save-option-card new-save-card">
|
||||
<div className="save-option-heading">
|
||||
<span aria-hidden="true">N</span>
|
||||
<div>
|
||||
<p className="eyebrow">Offline</p>
|
||||
<h2>New Save</h2>
|
||||
</div>
|
||||
</div>
|
||||
<strong className="save-character-name">{newSave.character.name}</strong>
|
||||
<SaveMetadata save={newSave} />
|
||||
<button
|
||||
className={`save-continue-button ${confirmNewSave ? 'danger' : ''}`}
|
||||
onClick={continueNew}
|
||||
type="button"
|
||||
>
|
||||
{confirmNewSave ? 'Confirm Replace Local Save' : 'Continue Offline — New'}
|
||||
</button>
|
||||
</article>
|
||||
|
||||
<article className="save-option-card online-save-card">
|
||||
<div className="save-option-heading">
|
||||
<span aria-hidden="true">O</span>
|
||||
<div>
|
||||
<p className="eyebrow">Account</p>
|
||||
<h2>Online Save</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{account ? (
|
||||
<>
|
||||
<strong className="save-character-name">
|
||||
{onlineSave?.character.name ?? account.username}
|
||||
</strong>
|
||||
{onlineSave ? (
|
||||
<SaveMetadata save={onlineSave} />
|
||||
) : (
|
||||
<p className="save-empty-state">
|
||||
{onlineBusy ? 'Checking online save...' : 'No online IWT2 save found.'}
|
||||
</p>
|
||||
)}
|
||||
<div className="online-save-actions">
|
||||
<button
|
||||
className="save-continue-button"
|
||||
disabled={onlineBusy || !onlineSave}
|
||||
onClick={continueOnline}
|
||||
type="button"
|
||||
>
|
||||
Load Online Save
|
||||
</button>
|
||||
<button
|
||||
className="save-secondary-button"
|
||||
disabled={onlineBusy}
|
||||
onClick={() => { void handleDifferentAccount() }}
|
||||
type="button"
|
||||
>
|
||||
Use Different Account
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<form className="online-save-login" onSubmit={signIn}>
|
||||
<label>
|
||||
Username
|
||||
<input
|
||||
autoComplete="username"
|
||||
maxLength={20}
|
||||
minLength={3}
|
||||
onChange={(event) => setUsername(event.target.value)}
|
||||
pattern="[A-Za-z0-9_]+"
|
||||
required
|
||||
value={username}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Password
|
||||
<input
|
||||
autoComplete="current-password"
|
||||
maxLength={128}
|
||||
minLength={10}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
required
|
||||
type="password"
|
||||
value={password}
|
||||
/>
|
||||
</label>
|
||||
<button className="save-continue-button" disabled={onlineBusy} type="submit">
|
||||
{onlineBusy ? 'Checking Account...' : 'Sign In & Check Save'}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<p
|
||||
aria-live="polite"
|
||||
className={`save-gateway-status ${messageIsError ? 'error' : ''}`}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user