Android build v1.1.41

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "com.warren.iwanttoheal"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 118
-        versionName "1.1.37"
+        versionCode 122
+        versionName "1.1.41"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

src/App.css

@@ -236,6 +236,14 @@
   width: 100%;
 }
 
+.iwt2-arena-loading {
+  align-items: center;
+  color: var(--muted);
+  display: flex;
+  font-family: var(--pixel-font);
+  justify-content: center;
+}
+
 .iwt2-phaser-host canvas {
   display: block;
 }
@@ -1429,6 +1437,36 @@
 }
 
 @media (max-width: 1000px) and (max-height: 620px) {
+  .pause-screen.iwt2-arena-overlay {
+    padding: 10px;
+  }
+
+  .pause-screen.iwt2-arena-overlay > .iwt2-result-panel {
+    gap: 8px;
+    max-height: calc(100dvh - 20px);
+    max-width: 460px;
+    min-width: min(460px, calc(100vw - 20px));
+    padding: 12px 14px;
+  }
+
+  .iwt2-result-panel .iwt2-result-crest {
+    display: none;
+  }
+
+  .iwt2-result-panel h1 {
+    font-size: 1.35rem;
+  }
+
+  .iwt2-result-summary {
+    gap: 6px;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .iwt2-result-summary span {
+    min-height: 42px;
+    padding: 6px;
+  }
+
   .iwt2-arena-layout {
     grid-template-columns: 154px minmax(0, 1fr);
   }
@@ -1873,6 +1911,497 @@
   }
 }
 
+/* IWT2 startup save gateway */
+.save-gateway-shell {
+  align-items: stretch;
+  height: 100dvh;
+  min-height: 0;
+  overflow: auto;
+  padding: 14px;
+}
+
+.save-gateway-panel {
+  background: rgba(17, 19, 25, 0.96);
+  border: 3px solid #08090c;
+  box-shadow: 8px 8px 0 #050609;
+  display: grid;
+  gap: 12px;
+  grid-template-rows: auto minmax(0, 1fr) auto auto;
+  margin: auto;
+  max-width: 1080px;
+  min-height: min(512px, calc(100dvh - 28px));
+  outline: 2px solid #4a4653;
+  padding: 16px;
+  width: 100%;
+}
+
+.save-gateway-heading {
+  align-items: end;
+  border-bottom: 2px solid #34343d;
+  display: flex;
+  gap: 22px;
+  justify-content: space-between;
+  padding: 0 2px 10px;
+}
+
+.save-gateway-heading h1 {
+  color: var(--ink);
+  font-family: var(--pixel-font);
+  font-size: clamp(24px, 4vw, 38px);
+  line-height: 1;
+  margin: 4px 0 0;
+}
+
+.save-gateway-heading > p {
+  color: var(--muted);
+  font-size: 14px;
+  line-height: 1.25;
+  margin: 0;
+  max-width: 440px;
+  text-align: right;
+}
+
+.save-option-grid {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  min-height: 0;
+}
+
+.save-option-card {
+  background: #151921;
+  border: 2px solid #090a0d;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 0;
+  outline: 2px solid #3a4250;
+  padding: 12px;
+}
+
+.local-save-card {
+  border-top-color: #5eaf7e;
+}
+
+.new-save-card {
+  border-top-color: #d8af58;
+}
+
+.online-save-card {
+  border-top-color: #5799db;
+}
+
+.save-option-heading {
+  align-items: center;
+  display: flex;
+  gap: 10px;
+}
+
+.save-option-heading > span {
+  align-items: center;
+  background: #202938;
+  border: 2px solid #090a0d;
+  color: var(--gold);
+  display: inline-flex;
+  flex: 0 0 42px;
+  font-family: var(--pixel-font);
+  height: 42px;
+  justify-content: center;
+  outline: 1px solid #4c5667;
+}
+
+.online-save-panel .save-option-heading > span {
+  color: #80bdf2;
+}
+
+.save-option-heading h2 {
+  color: var(--ink);
+  font-family: var(--pixel-font);
+  font-size: 15px;
+  line-height: 1.15;
+  margin: 3px 0 0;
+}
+
+.save-character-name {
+  color: var(--ink);
+  display: block;
+  font-size: 19px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.save-metadata {
+  display: grid;
+  gap: 7px;
+  margin: 0;
+}
+
+.save-metadata > div {
+  background: #101219;
+  border-left: 3px solid #4b5363;
+  display: grid;
+  gap: 3px;
+  padding: 7px 9px;
+}
+
+.save-metadata dt {
+  color: var(--muted);
+  font-family: var(--pixel-font);
+  font-size: 7px;
+  text-transform: uppercase;
+}
+
+.save-metadata dd {
+  color: var(--ink);
+  font-size: 14px;
+  line-height: 1.15;
+  margin: 0;
+}
+
+.save-empty-state {
+  align-items: center;
+  background: #101219;
+  border-left: 3px solid #4b5363;
+  color: var(--muted);
+  display: flex;
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.25;
+  margin: 0;
+  min-height: 58px;
+  padding: 12px;
+}
+
+.save-continue-button,
+.save-secondary-button {
+  border: 2px solid #090a0d;
+  cursor: pointer;
+  font-family: var(--pixel-font);
+  font-size: 8px;
+  line-height: 1.2;
+  min-height: 42px;
+  padding: 8px 10px;
+  width: 100%;
+}
+
+.slot-save-actions {
+  display: grid;
+  gap: 7px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: auto;
+}
+
+.slot-save-actions .save-continue-button {
+  margin-top: 0;
+}
+
+.character-create-form {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 9px;
+  min-height: 0;
+}
+
+.character-create-form label,
+.online-save-destination {
+  color: var(--muted);
+  display: grid;
+  font-family: var(--pixel-font);
+  font-size: 7px;
+  gap: 5px;
+  text-transform: uppercase;
+}
+
+.character-create-form input,
+.online-save-destination select {
+  background: #0e1016;
+  border: 2px solid #090a0d;
+  color: var(--ink);
+  font: 16px var(--body-font);
+  min-height: 38px;
+  outline: 2px solid #3e3d47;
+  padding: 7px 9px;
+  width: 100%;
+}
+
+.character-create-form > small {
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.2;
+}
+
+.online-save-panel {
+  align-items: center;
+  background: #131821;
+  border: 2px solid #090a0d;
+  border-top-color: #5799db;
+  display: grid;
+  gap: 12px;
+  grid-template-columns: 130px minmax(260px, 1fr) 160px minmax(170px, 210px);
+  min-width: 0;
+  outline: 2px solid #3a4250;
+  padding: 10px 12px;
+}
+
+.online-save-heading {
+  min-width: 0;
+}
+
+.online-save-summary {
+  align-items: center;
+  display: grid;
+  gap: 8px;
+  grid-template-columns: minmax(75px, 0.7fr) minmax(0, 1.8fr);
+  min-width: 0;
+}
+
+.online-save-summary .save-character-name {
+  font-size: 16px;
+}
+
+.online-save-summary .save-metadata {
+  gap: 5px;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.online-save-summary .save-metadata > div {
+  padding: 5px 7px;
+}
+
+.online-save-summary .save-metadata dd {
+  font-size: 11px;
+}
+
+.online-save-summary .save-empty-state {
+  min-height: 48px;
+}
+
+.save-continue-button {
+  background: var(--gold);
+  color: #19150e;
+  margin-top: auto;
+  outline: 2px solid #816630;
+}
+
+.save-continue-button.danger {
+  background: var(--red-bright);
+  color: #fff6ee;
+  outline-color: #8d2b38;
+}
+
+.save-continue-button:disabled,
+.save-secondary-button:disabled {
+  cursor: not-allowed;
+  filter: grayscale(0.8);
+  opacity: 0.45;
+}
+
+.save-secondary-button {
+  background: #242630;
+  color: var(--muted);
+  outline: 2px solid #4b4855;
+}
+
+.online-save-login {
+  display: grid;
+  gap: 9px;
+  grid-column: 2 / -1;
+  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 0.75fr);
+  margin: 0;
+}
+
+.online-save-login label {
+  color: var(--muted);
+  display: grid;
+  font-family: var(--pixel-font);
+  font-size: 7px;
+  gap: 5px;
+  text-transform: uppercase;
+}
+
+.online-save-login input {
+  background: #0e1016;
+  border: 2px solid #090a0d;
+  color: var(--ink);
+  font: 16px var(--body-font);
+  min-height: 38px;
+  outline: 2px solid #3e3d47;
+  padding: 7px 9px;
+  width: 100%;
+}
+
+.online-save-actions {
+  display: grid;
+  gap: 7px;
+  margin-top: auto;
+}
+
+.online-save-actions .save-continue-button {
+  margin-top: 0;
+}
+
+.save-gateway-status {
+  color: #a9d7b8;
+  font-size: 13px;
+  line-height: 1.2;
+  margin: 0;
+  min-height: 16px;
+  padding: 0 2px;
+}
+
+.save-gateway-status.error {
+  color: #ff8190;
+}
+
+@media (max-width: 800px) {
+  .auth-shell.save-gateway-shell {
+    align-items: flex-start;
+    overflow: auto;
+  }
+
+  .save-gateway-panel {
+    min-height: auto;
+  }
+
+  .save-gateway-heading {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .save-gateway-heading > p {
+    text-align: left;
+  }
+
+  .save-option-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .online-save-panel {
+    align-items: stretch;
+    grid-template-columns: 1fr;
+  }
+
+  .online-save-login {
+    grid-column: auto;
+    grid-template-columns: 1fr;
+  }
+
+  .online-save-summary {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 1000px) and (max-height: 620px) {
+  .save-gateway-shell {
+    overflow: hidden;
+    padding: 10px;
+  }
+
+  .save-gateway-panel {
+    gap: 9px;
+    min-height: calc(100dvh - 20px);
+    padding: 11px;
+  }
+
+  .save-gateway-heading {
+    padding-bottom: 7px;
+  }
+
+  .save-gateway-heading h1 {
+    font-size: 25px;
+  }
+
+  .save-gateway-heading > p {
+    font-size: 12px;
+  }
+
+  .save-option-grid {
+    gap: 9px;
+  }
+
+  .save-option-card {
+    gap: 6px;
+    padding: 8px;
+  }
+
+  .save-option-heading > span {
+    flex-basis: 36px;
+    height: 36px;
+  }
+
+  .save-option-heading h2 {
+    font-size: 13px;
+  }
+
+  .save-character-name {
+    font-size: 16px;
+  }
+
+  .save-metadata {
+    gap: 5px;
+  }
+
+  .save-metadata > div {
+    padding: 5px 7px;
+  }
+
+  .save-metadata dd {
+    font-size: 12px;
+  }
+
+  .save-continue-button,
+  .save-secondary-button {
+    min-height: 34px;
+    padding: 6px 8px;
+  }
+
+  .slot-save-actions {
+    gap: 5px;
+  }
+
+  .character-create-form {
+    gap: 6px;
+  }
+
+  .character-create-form input,
+  .online-save-destination select {
+    font-size: 14px;
+    min-height: 32px;
+    padding: 5px 7px;
+  }
+
+  .character-create-form > small {
+    font-size: 10px;
+  }
+
+  .online-save-panel {
+    gap: 8px;
+    grid-template-columns: 115px minmax(230px, 1fr) 145px minmax(160px, 190px);
+    padding: 7px 9px;
+  }
+
+  .online-save-summary {
+    gap: 5px;
+  }
+
+  .online-save-login {
+    gap: 6px;
+  }
+
+  .online-save-login input {
+    font-size: 14px;
+    min-height: 32px;
+    padding: 5px 7px;
+  }
+
+  .save-gateway-status {
+    font-size: 11px;
+  }
+}
+
 .combat-touch-lock-status {
   background: #101216;
   border: 2px solid #d9b55a;

src/App.tsx

@@ -1,156 +1,42 @@
-import { useCallback, useEffect, useState } from 'react'
+import { lazy, Suspense, useState } from 'react'
 import { AuthScreen } from './components/AuthScreen'
-import IWantToHeal1App from './modes/iwt1/IWantToHeal1App'
-import { IWantToHeal2App } from './modes/iwt2/IWantToHeal2App'
-import { useGameAction } from './input'
-import {
-  loadAuthSession,
-  type AuthSession,
-} from './profile'
+import type { Iwt2LocalSaveSlot, Iwt2Save } from './modes/iwt2/save/iwt2Repository'
 
-type GameVersion = 'iwt1' | 'iwt2'
+const LazyIWantToHeal2App = lazy(() => import('./modes/iwt2/IWantToHeal2App').then((module) => ({
+  default: module.IWantToHeal2App,
+})))
 
-const GAME_OPTIONS: Array<{
-  version: GameVersion
-  title: string
-  label: string
-  description: string
-  glyph: string
-}> = [
-  {
-    version: 'iwt1',
-    title: 'I Want To Heal 1',
-    label: 'Classic Healer Runs',
-    description: 'Original dungeon, raid, roguelike, PvP, gear, talents, and collection progression.',
-    glyph: 'I',
-  },
-  {
-    version: 'iwt2',
-    title: 'I Want To Heal 2',
-    label: '2D Boss Arena',
-    description: 'Move through boss arenas with a visible party, analog movement, projectiles, and separate progression.',
-    glyph: 'II',
-  },
-]
+type Iwt2Launch = {
+  localSlot: Iwt2LocalSaveSlot
+  onlineBackupsAvailable: boolean
+  save: Iwt2Save
+}
 
 function App() {
-  const [selectedVersion, setSelectedVersion] = useState<GameVersion | null>(null)
-  const [selectedIndex, setSelectedIndex] = useState(0)
-  const [authSession, setAuthSession] = useState<AuthSession | null>(null)
-  const [authChecked, setAuthChecked] = useState(false)
-  const [serverMessage, setServerMessage] = useState('')
+  const [launch, setLaunch] = useState<Iwt2Launch | null>(null)
 
-  useEffect(() => {
-    let cancelled = false
-    loadAuthSession()
-      .then((session) => {
-        if (cancelled) return
-        setAuthSession(session.account && session.profile ? session : null)
-      })
-      .catch((reason: unknown) => {
-        if (cancelled) return
-        setServerMessage(
-          reason instanceof Error
-            ? `${reason.message} Offline play is still available.`
-            : 'Unable to reach the server. Offline play is still available.',
-        )
-      })
-      .finally(() => {
-        if (!cancelled) setAuthChecked(true)
-      })
-    return () => {
-      cancelled = true
-    }
-  }, [])
-
-  const acceptSession = useCallback((session: AuthSession) => {
-    setAuthSession(session)
-    setSelectedVersion(null)
-    setServerMessage('')
-  }, [])
-
-  const clearAuthSession = useCallback(() => {
-    setAuthSession(null)
-    setSelectedVersion(null)
-  }, [])
-
-  useGameAction((action, device) => {
-    if (!authSession || selectedVersion || device !== 'controller') return
-    if (action === 'navigateLeft' || action === 'navigateUp') {
-      setSelectedIndex((current) => Math.max(0, current - 1))
-    } else if (action === 'navigateRight' || action === 'navigateDown') {
-      setSelectedIndex((current) => Math.min(GAME_OPTIONS.length - 1, current + 1))
-    } else if (action === 'confirm') {
-      setSelectedVersion(GAME_OPTIONS[selectedIndex].version)
-    }
-  })
-
-  if (!authChecked) {
+  if (launch) {
     return (
-      <main className="game-shell">
-        <section className="message-panel">
-          <p className="eyebrow">Opening Chronicle</p>
-          <h1>Loading...</h1>
-        </section>
-      </main>
+      <Suspense fallback={<Iwt2LaunchFallback />}>
+        <LazyIWantToHeal2App
+          initialSave={launch.save}
+          localSlot={launch.localSlot}
+          onlineBackupsAvailable={launch.onlineBackupsAvailable}
+          onExitToSaveSelect={() => setLaunch(null)}
+        />
+      </Suspense>
     )
   }
 
-  if (!authSession) {
-    return (
-      <AuthScreen
-        onAuthenticated={acceptSession}
-        serverMessage={serverMessage}
-      />
-    )
-  }
-
-  if (selectedVersion === 'iwt1') {
-    return (
-      <IWantToHeal1App
-        initialSession={authSession}
-        onAuthenticationCleared={clearAuthSession}
-        onBackToGameSelect={() => setSelectedVersion(null)}
-      />
-    )
-  }
-
-  if (selectedVersion === 'iwt2') {
-    return (
-      <IWantToHeal2App
-        onlineBackupsAvailable={authSession.account?.id !== -1}
-        onBackToGameSelect={() => setSelectedVersion(null)}
-      />
-    )
-  }
+  return <AuthScreen onContinue={setLaunch} />
+}
 
+function Iwt2LaunchFallback() {
   return (
-    <main className="game-shell game-version-shell">
-      <section className="game-version-screen" data-game-nav-active="true">
-        <div className="game-version-heading">
-          <p className="eyebrow">Select Game</p>
-          <h1>I Want To Heal</h1>
-        </div>
-        <div className="game-version-grid">
-          {GAME_OPTIONS.map((option, index) => (
-            <button
-              className={`game-version-card ${selectedIndex === index ? 'game-selected' : ''}`}
-              data-controller-nav="skip"
-              data-game-selected={selectedIndex === index ? 'true' : undefined}
-              key={option.version}
-              onClick={() => setSelectedVersion(option.version)}
-              onPointerDown={() => setSelectedIndex(index)}
-              type="button"
-            >
-              <span>{option.glyph}</span>
-              <div>
-                <strong>{option.title}</strong>
-                <small>{option.label}</small>
-                <p>{option.description}</p>
-              </div>
-            </button>
-          ))}
-        </div>
+    <main className="game-shell iwt2-shell">
+      <section className="message-panel" aria-live="polite">
+        <p className="eyebrow">I Want To Heal 2</p>
+        <h1>Loading...</h1>
       </section>
     </main>
   )

src/components/AuthScreen.tsx

@@ -1,192 +1,420 @@
-import { useState } from 'react'
+import { useCallback, useEffect, 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,
+  IWT2_LOCAL_SAVE_SLOTS,
+  loadIwt2OnlineSave,
+  loadIwt2SaveSlots,
+  replaceIwt2Save,
+  selectActiveIwt2SaveSlot,
+  type Iwt2LocalSaveSlot,
+  type Iwt2LocalSaveSlots,
+  type Iwt2Save,
+} from '../modes/iwt2/save/iwt2Repository'
 
-type Props = {
-  onAuthenticated: (session: AuthSession) => void
-  serverMessage?: string
+type Iwt2Launch = {
+  localSlot: Iwt2LocalSaveSlot
+  onlineBackupsAvailable: boolean
+  save: Iwt2Save
 }
 
-export function AuthScreen({ onAuthenticated, serverMessage = '' }: Props) {
-  const [mode, setMode] = useState<'login' | 'register'>('login')
+type Props = {
+  onContinue: (launch: Iwt2Launch) => void
+}
+
+const IWT2_CHARACTER_NAME_PATTERN = /^[A-Za-z][A-Za-z0-9 -]{1,17}$/
+
+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>
+  )
+}
+
+function firstEmptySlot(saves: Iwt2LocalSaveSlots): Iwt2LocalSaveSlot {
+  return IWT2_LOCAL_SAVE_SLOTS.find((slot) => !saves[slot]) ?? 1
+}
+
+export function AuthScreen({ onContinue }: Props) {
+  const [localSaves] = useState(loadIwt2SaveSlots)
+  const [editingSlot, setEditingSlot] = useState<Iwt2LocalSaveSlot | null>(null)
+  const [characterName, setCharacterName] = useState('')
+  const [account, setAccount] = useState<Account | null>(null)
+  const [onlineSave, setOnlineSave] = useState<Iwt2Save | null>(null)
+  const [onlineDestinationSlot, setOnlineDestinationSlot] = useState<Iwt2LocalSaveSlot>(
+    () => firstEmptySlot(localSaves),
+  )
+  const [confirmOnlineDestination, setConfirmOnlineDestination] = useState<Iwt2LocalSaveSlot | 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 [message, setMessage] = useState('Choose a slot or sign in to inspect the online save.')
+  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. Load it below, or continue a local slot and upload it from Cloud Backup.'
+        : 'No online save yet. Continue a local slot, then use Cloud Backup to upload it.')
+      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 slots remain available.`
+            : 'Online service unavailable. Local slots remain available.',
+        )
+        setMessageIsError(true)
+      })
+      .finally(() => {
+        if (!cancelled) setCheckingSession(false)
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [inspectOnlineSave])
+
+  function continueLocal(slot: Iwt2LocalSaveSlot) {
+    const save = localSaves[slot]
+    if (!save) return
+    selectActiveIwt2SaveSlot(slot)
+    selectOfflineMode()
+    onContinue({ localSlot: slot, save, onlineBackupsAvailable: Boolean(account) })
+  }
+
+  function openCharacterEditor(slot: Iwt2LocalSaveSlot) {
+    setEditingSlot(slot)
+    setCharacterName('')
+    setMessage(localSaves[slot]
+      ? `Creating a new character will replace Slot ${slot}.`
+      : `Enter a name for the new character in Slot ${slot}.`)
+    setMessageIsError(false)
+  }
+
+  function createCharacter(event: React.FormEvent, slot: Iwt2LocalSaveSlot) {
     event.preventDefault()
-    setBusy(true)
-    setMessage('')
+    const name = characterName.trim()
+    if (!IWT2_CHARACTER_NAME_PATTERN.test(name)) {
+      setMessage('Character name must be 2–18 characters, start with a letter, and use letters, numbers, spaces, or hyphens.')
+      setMessageIsError(true)
+      return
+    }
+    const save = createDefaultIwt2Save(name)
+    replaceIwt2Save(save, slot)
+    selectActiveIwt2SaveSlot(slot)
+    selectOfflineMode()
+    onContinue({ localSlot: slot, save, onlineBackupsAvailable: Boolean(account) })
+  }
+
+  async function signIn(event: React.FormEvent) {
+    event.preventDefault()
+    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
+    const destinationSave = localSaves[onlineDestinationSlot]
+    if (destinationSave && confirmOnlineDestination !== onlineDestinationSlot) {
+      setConfirmOnlineDestination(onlineDestinationSlot)
+      setMessage(`Online save will replace ${destinationSave.character.name} in Slot ${onlineDestinationSlot}. Select again to confirm.`)
+      setMessageIsError(false)
+      return
+    }
+    replaceIwt2Save(onlineSave, onlineDestinationSlot)
+    selectActiveIwt2SaveSlot(onlineDestinationSlot)
+    selectOnlineMode()
+    onContinue({
+      localSlot: onlineDestinationSlot,
+      onlineBackupsAvailable: true,
+      save: onlineSave,
+    })
+  }
+
+  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>
+    <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 Character</h1>
+          </div>
+          <p>Three local slots. Each character keeps separate progress, timestamp, and XP.</p>
+        </header>
+
+        <div className="save-option-grid">
+          {IWT2_LOCAL_SAVE_SLOTS.map((slot) => {
+            const save = localSaves[slot]
+            const editing = editingSlot === slot
+            return (
+              <article className={`save-option-card local-save-card ${save ? '' : 'empty'}`} key={slot}>
+                <div className="save-option-heading">
+                  <span aria-hidden="true">{slot}</span>
+                  <div>
+                    <p className="eyebrow">Local Save</p>
+                    <h2>Slot {slot}</h2>
+                  </div>
+                </div>
+
+                {editing ? (
+                  <form className="character-create-form" onSubmit={(event) => createCharacter(event, slot)}>
+                    <label>
+                      Character Name
+                      <input
+                        autoFocus
+                        maxLength={18}
+                        minLength={2}
+                        onChange={(event) => setCharacterName(event.target.value)}
+                        pattern="[A-Za-z][A-Za-z0-9 \-]{1,17}"
+                        placeholder="Mira"
+                        required
+                        value={characterName}
+                      />
+                    </label>
+                    <small>
+                      {save ? `Replaces ${save.character.name} in this slot.` : 'Creates a fresh Level 1 character.'}
+                    </small>
+                    <div className="slot-save-actions">
+                      <button
+                        className={`save-continue-button ${save ? 'danger' : ''}`}
+                        type="submit"
+                      >
+                        {save ? `Replace Slot ${slot}` : `Create in Slot ${slot}`}
+                      </button>
+                      <button
+                        className="save-secondary-button"
+                        onClick={() => setEditingSlot(null)}
+                        type="button"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </form>
+                ) : save ? (
+                  <>
+                    <strong className="save-character-name">{save.character.name}</strong>
+                    <SaveMetadata save={save} />
+                    <div className="slot-save-actions">
+                      <button
+                        aria-label={`Continue ${save.character.name} in Slot ${slot}`}
+                        className="save-continue-button"
+                        onClick={() => continueLocal(slot)}
+                        type="button"
+                      >
+                        Continue Offline
+                      </button>
+                      <button
+                        aria-label={`Create new character in Slot ${slot}`}
+                        className="save-secondary-button"
+                        onClick={() => openCharacterEditor(slot)}
+                        type="button"
+                      >
+                        New Character
+                      </button>
+                    </div>
+                  </>
+                ) : (
+                  <>
+                    <p className="save-empty-state">Empty slot</p>
+                    <button
+                      aria-label={`Create character in Slot ${slot}`}
+                      className="save-continue-button"
+                      onClick={() => openCharacterEditor(slot)}
+                      type="button"
+                    >
+                      Create Character
+                    </button>
+                  </>
+                )}
+              </article>
+            )
+          })}
         </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>
+        <section className="online-save-panel">
+          <div className="save-option-heading online-save-heading">
+            <span aria-hidden="true">O</span>
+            <div>
+              <p className="eyebrow">Account</p>
+              <h2>Online Save</h2>
+            </div>
           </div>
 
-          <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' && (
+          {account ? (
+            <>
+              <div className="online-save-summary">
+                <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>
+              <label className="online-save-destination">
+                Copy Into
+                <select
+                  disabled={onlineBusy || !onlineSave}
+                  onChange={(event) => {
+                    setOnlineDestinationSlot(Number(event.target.value) as Iwt2LocalSaveSlot)
+                    setConfirmOnlineDestination(null)
+                  }}
+                  value={onlineDestinationSlot}
+                >
+                  {IWT2_LOCAL_SAVE_SLOTS.map((slot) => (
+                    <option key={slot} value={slot}>
+                      Slot {slot} — {localSaves[slot]?.character.name ?? 'Empty'}
+                    </option>
+                  ))}
+                </select>
+              </label>
+              <div className="online-save-actions">
+                <button
+                  className={`save-continue-button ${confirmOnlineDestination === onlineDestinationSlot ? 'danger' : ''}`}
+                  disabled={onlineBusy || !onlineSave}
+                  onClick={continueOnline}
+                  type="button"
+                >
+                  {confirmOnlineDestination === onlineDestinationSlot
+                    ? `Confirm Replace Slot ${onlineDestinationSlot}`
+                    : `Load Into Slot ${onlineDestinationSlot}`}
+                </button>
+                <button
+                  className="save-secondary-button"
+                  disabled={onlineBusy}
+                  onClick={() => { void handleDifferentAccount() }}
+                  type="button"
+                >
+                  Switch Account
+                </button>
+              </div>
+            </>
+          ) : (
+            <form className="online-save-login" onSubmit={signIn}>
               <label>
-                Character Name
+                Username
                 <input
-                  autoComplete="nickname"
+                  autoComplete="username"
                   maxLength={20}
-                  minLength={2}
-                  onChange={(event) => setCharacterName(event.target.value)}
+                  minLength={3}
+                  onChange={(event) => setUsername(event.target.value)}
+                  pattern="[A-Za-z0-9_]+"
                   required
-                  value={characterName}
+                  value={username}
                 />
               </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>
-            {offlineCharacterExists && (
-              <button
-                className="offline-resume-button"
-                onClick={resumeOffline}
-                type="button"
-              >
-                Continue Offline Character
+              <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>
-            )}
-            <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}
-              type="button"
-            >
-              {offlineCharacterExists ? 'Replace Offline Character' : 'Begin Offline Adventure'}
-            </button>
-          </section>
-        </div>
+            </form>
+          )}
+        </section>
+
+        <p
+          aria-live="polite"
+          className={`save-gateway-status ${messageIsError ? 'error' : ''}`}
+        >
+          {message}
+        </p>
       </section>
     </main>
   )

src/gameRepository.ts

@@ -1841,6 +1841,10 @@ export function selectOnlineMode() {
   writeMode('online')
 }
 
+export function selectOfflineMode() {
+  writeMode('offline-local')
+}
+
 export function createOfflineCharacter(characterName: string): AuthSession {
   const name = characterName.trim() || 'Mira'
   if (!/^[A-Za-z][A-Za-z0-9 '-]{1,19}$/.test(name)) {

src/input.tsx

@@ -1043,7 +1043,11 @@ export function InputProvider({ children }: { children: ReactNode }) {
             <div className="controller-keyboard-heading">
               <div>
                 <p className="eyebrow">Controller Keyboard</p>
-                <strong>{keyboardInput.value || 'Enter text'}</strong>
+                <strong>
+                  {keyboardInput.type === 'password'
+                    ? '•'.repeat(keyboardInput.value.length) || 'Enter password'
+                    : keyboardInput.value || 'Enter text'}
+                </strong>
               </div>
               <button onClick={closeKeyboard} type="button">Done</button>
             </div>

src/modes/iwt2/IWantToHeal2App.tsx

@@ -22,11 +22,7 @@ import {
   Iwt2RoguelikeUpgradeScreen,
   Iwt2SettingsScreen,
 } from './screens/Iwt2ShellScreens'
-import {
-  loadIwt2Save,
-  writeIwt2Save,
-  type Iwt2Save,
-} from './save/iwt2Repository'
+import { writeIwt2Save, type Iwt2LocalSaveSlot, type Iwt2Save } from './save/iwt2Repository'
 import { IWT2_BOSS_METADATA, type Iwt2BossId } from './content/bosses'
 import { iwt2BossCoinRewardFor } from './content/bossRewards'
 import {
@@ -140,8 +136,8 @@ const MENU_ITEMS: Array<{
   },
   {
     screen: 'cloud-save',
-    title: 'Backup Slot',
-    description: 'Choose local, online, or fresh IWT2 progress.',
+    title: 'Cloud Backup',
+    description: 'Compare the active local slot with your online backup.',
     glyph: 'C',
   },
   {
@@ -153,15 +149,19 @@ const MENU_ITEMS: Array<{
 ]
 
 export function IWantToHeal2App({
+  initialSave,
+  localSlot,
   onlineBackupsAvailable,
-  onBackToGameSelect,
+  onExitToSaveSelect,
 }: {
+  initialSave: Iwt2Save
+  localSlot: Iwt2LocalSaveSlot
   onlineBackupsAvailable: boolean
-  onBackToGameSelect: () => void
+  onExitToSaveSelect: () => void
 }) {
   const { enabled: dualScreenEnabled } = useDualScreen()
   const [screen, setScreen] = useState<Iwt2Screen>('menu')
-  const [save, setSave] = useState<Iwt2Save>(loadIwt2Save)
+  const [save, setSave] = useState<Iwt2Save>(initialSave)
   const [selectedIndex, setSelectedIndex] = useState(0)
   const [selectedBossId, setSelectedBossId] = useState<Iwt2BossId>('bulldrome')
   const [arenaModeLabel, setArenaModeLabel] = useState('Dungeon')
@@ -176,8 +176,8 @@ export function IWantToHeal2App({
   const cancelPvpQueueRef = useRef<(() => void) | null>(null)
 
   useEffect(() => {
-    writeIwt2Save(save)
-  }, [save])
+    writeIwt2Save(save, localSlot)
+  }, [localSlot, save])
 
   useEffect(() => () => {
     cancelPvpQueueRef.current?.()
@@ -205,7 +205,7 @@ export function IWantToHeal2App({
   useGameAction((action, device) => {
     if (screen !== 'menu' || device !== 'controller') return
     if (action === 'back') {
-      onBackToGameSelect()
+      onExitToSaveSelect()
       return
     }
     if (action === 'confirm') {
@@ -288,7 +288,7 @@ export function IWantToHeal2App({
   if (screen === 'roguelike-upgrade' && roguelikeRun) {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2RoguelikeUpgradeScreen
           activeBuffSummary={summarizeIwt2Buffs(save, roguelikeRun.buffs)}
           activeDebuffSummary={summarizeIwt2Debuffs(save, roguelikeRun.debuffs)}
@@ -312,7 +312,7 @@ export function IWantToHeal2App({
   if (screen === 'dungeons') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2DungeonsScreen
           difficultySlug={selectedDungeonDifficultySlug}
           save={save}
@@ -333,7 +333,7 @@ export function IWantToHeal2App({
   if (screen === 'roguelike') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2RoguelikeScreen
           contentType={roguelikeContentType}
           variant={roguelikeVariant}
@@ -363,7 +363,7 @@ export function IWantToHeal2App({
   if (screen === 'raids') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2ModeScreen
           difficultySlug={selectedRaidDifficultySlug}
           mode="Raids"
@@ -397,7 +397,7 @@ export function IWantToHeal2App({
           save={save}
           title="Gear Upgrade"
           onBack={() => setScreen('menu')}
-          onBackToGameSelect={onBackToGameSelect}
+          onExitToSaveSelect={onExitToSaveSelect}
         />
         <Iwt2GearUpgradeScreen
           save={save}
@@ -411,7 +411,7 @@ export function IWantToHeal2App({
   if (screen === 'customize-character') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2CustomizeCharacterScreen
           save={save}
           onBack={() => setScreen('menu')}
@@ -424,7 +424,7 @@ export function IWantToHeal2App({
   if (screen === 'cloud-save') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2CloudSaveScreen
           save={save}
           onlineBackupsAvailable={onlineBackupsAvailable}
@@ -438,7 +438,7 @@ export function IWantToHeal2App({
   if (screen === 'settings') {
     return (
       <main className="game-shell iwt2-shell">
-        <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+        <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
         <Iwt2SettingsScreen onBack={() => setScreen('menu')} />
       </main>
     )
@@ -446,7 +446,7 @@ export function IWantToHeal2App({
 
   return (
     <main className="game-shell iwt2-shell">
-      <Iwt2Header save={save} onBackToGameSelect={onBackToGameSelect} />
+      <Iwt2Header save={save} onExitToSaveSelect={onExitToSaveSelect} />
 
       {screen === 'menu' && (
         <section className="iwt2-menu-screen" data-game-nav-active="true">
@@ -692,19 +692,19 @@ function isExtraTargetBuff(choice: Iwt2RoguelikeChoice<Iwt2RoguelikeSelfBuffId>)
 
 function Iwt2Header({
   onBack,
-  onBackToGameSelect,
+  onExitToSaveSelect,
   save,
   title,
 }: {
   onBack?: () => void
-  onBackToGameSelect: () => void
+  onExitToSaveSelect: () => void
   save: Iwt2Save
   title?: string
 }) {
   return (
     <header className="topbar app-header">
-      <button className="brand-button" onClick={onBackToGameSelect} type="button">
-        <strong>Games</strong>
+      <button className="brand-button" onClick={onExitToSaveSelect} type="button">
+        <strong>Saves</strong>
       </button>
       {title && <strong className="iwt2-header-title">{title}</strong>}
       <div className="character-summary">

src/modes/iwt2/render/PhaserArena.tsx

@@ -4,14 +4,18 @@ import type { MovementVector } from '../../../input'
 import { BulldromeArenaScene } from './scenes/BulldromeArenaScene'
 import type { Iwt2ArenaState } from '../sim/arenaState'
 
+const IWT2_ARENA_FPS = 60
+
 type PhaserArenaProps = {
+  active: boolean
   movementRef: MutableRefObject<MovementVector>
   selectedPartyIdRef: MutableRefObject<string>
   stateRef: MutableRefObject<Iwt2ArenaState>
   onStep: (movement: MovementVector, dtSeconds: number) => Iwt2ArenaState
 }
 
-export function PhaserArena({ movementRef, onStep, selectedPartyIdRef, stateRef }: PhaserArenaProps) {
+export function PhaserArena({ active, movementRef, onStep, selectedPartyIdRef, stateRef }: PhaserArenaProps) {
+  const gameRef = useRef<Phaser.Game | null>(null)
   const hostRef = useRef<HTMLDivElement | null>(null)
   const onStepRef = useRef(onStep)
 
@@ -35,17 +39,36 @@ export function PhaserArena({ movementRef, onStep, selectedPartyIdRef, stateRef
       height: initialState.bounds.height,
       backgroundColor: '#10141b',
       pixelArt: false,
+      fps: {
+        target: IWT2_ARENA_FPS,
+        limit: IWT2_ARENA_FPS,
+      },
       scale: {
         mode: Phaser.Scale.FIT,
         autoCenter: Phaser.Scale.CENTER_BOTH,
       },
       scene,
     })
+    gameRef.current = game
 
     return () => {
+      if (gameRef.current === game) gameRef.current = null
       game.destroy(true)
     }
   }, [movementRef, selectedPartyIdRef, stateRef])
 
+  useEffect(() => {
+    const game = gameRef.current
+    if (!game?.loop.started) return
+    if (active) {
+      if (!game.loop.running) {
+        game.loop.resetDelta()
+        game.loop.wake()
+      }
+      return
+    }
+    game.loop.sleep()
+  }, [active])
+
   return <div className="iwt2-phaser-host" ref={hostRef} />
 }

src/modes/iwt2/render/bossAnimation.ts

@@ -52,20 +52,17 @@ const BOSS_PROFILES: Partial<Record<Iwt2BossEntityState['bossId'], BossMotionPro
 const WARM_TINT = 0xffc88a
 const IMPACT_TINT = 0xff9b5f
 
-export function bossRenderMotion(entity: Iwt2BossEntityState, timeSeconds: number): BossRenderMotion {
+export function bossRenderMotion(
+  entity: Iwt2BossEntityState,
+  timeSeconds: number,
+  motion: BossRenderMotion = createBossRenderMotion(),
+): BossRenderMotion {
   const profile = BOSS_PROFILES[entity.bossId] ?? DEFAULT_PROFILE
   const phase = String(entity.attackPhase)
   const speed = Math.hypot(entity.velocity.x, entity.velocity.y)
   const moving = speed > 8 || phase === 'relocating'
   const facingX = entity.facing.x < -0.05 ? -1 : 1
-
-  const motion: BossRenderMotion = {
-    x: 0,
-    y: 0,
-    scaleX: 1,
-    scaleY: 1,
-    rotation: 0,
-  }
+  resetBossRenderMotion(motion)
 
   if (isActionPhase(phase, 'windup')) return windupMotion(motion, entity, phase, timeSeconds, facingX)
   if (isBurstPhase(phase)) return burstMotion(motion, timeSeconds, facingX)
@@ -76,12 +73,10 @@ export function bossRenderMotion(entity: Iwt2BossEntityState, timeSeconds: numbe
 
 function idleMotion(motion: BossRenderMotion, profile: BossMotionProfile, timeSeconds: number): BossRenderMotion {
   const wave = Math.sin(timeSeconds * profile.idleFrequency * Math.PI * 2)
-  return {
-    ...motion,
-    y: -Math.max(0, wave) * profile.idleBob,
-    scaleY: 1 + Math.max(0, wave) * 0.025,
-    scaleX: 1 - Math.max(0, wave) * 0.01,
-  }
+  motion.y = -Math.max(0, wave) * profile.idleBob
+  motion.scaleY = 1 + Math.max(0, wave) * 0.025
+  motion.scaleX = 1 - Math.max(0, wave) * 0.01
+  return motion
 }
 
 function movingMotion(
@@ -94,13 +89,11 @@ function movingMotion(
   const speedFactor = Math.min(1, Math.hypot(entity.velocity.x, entity.velocity.y) / 180)
   const stride = Math.sin(timeSeconds * profile.moveFrequency * Math.PI * 2)
   const lift = Math.abs(stride) * profile.moveBob
-  return {
-    ...motion,
-    y: -lift,
-    scaleX: 1 + 0.012 * speedFactor,
-    scaleY: 1 - 0.009 * Math.abs(stride),
-    rotation: facingX * 0.025 * speedFactor,
-  }
+  motion.y = -lift
+  motion.scaleX = 1 + 0.012 * speedFactor
+  motion.scaleY = 1 - 0.009 * Math.abs(stride)
+  motion.rotation = facingX * 0.025 * speedFactor
+  return motion
 }
 
 function windupMotion(
@@ -112,28 +105,24 @@ function windupMotion(
 ): BossRenderMotion {
   const pulse = 0.5 + Math.sin(timeSeconds * Math.PI * 9) * 0.5
   const isSlam = phase.includes('slam') || phase.includes('quake') || phase.includes('shatter')
-  return {
-    ...motion,
-    x: -facingX * (isSlam ? 1.5 : 3),
-    y: isSlam ? -2 : 2,
-    scaleX: 1.035,
-    scaleY: 0.965,
-    rotation: -facingX * 0.02,
-    tint: pulse > 0.45 || entity.phaseSecondsRemaining < 0.18 ? WARM_TINT : undefined,
-  }
+  motion.x = -facingX * (isSlam ? 1.5 : 3)
+  motion.y = isSlam ? -2 : 2
+  motion.scaleX = 1.035
+  motion.scaleY = 0.965
+  motion.rotation = -facingX * 0.02
+  motion.tint = pulse > 0.45 || entity.phaseSecondsRemaining < 0.18 ? WARM_TINT : undefined
+  return motion
 }
 
 function burstMotion(motion: BossRenderMotion, timeSeconds: number, facingX: number): BossRenderMotion {
   const shake = Math.sin(timeSeconds * Math.PI * 38) * 1.8
-  return {
-    ...motion,
-    x: facingX * 3 + shake,
-    y: Math.cos(timeSeconds * Math.PI * 42) * 1.2,
-    scaleX: 1.045,
-    scaleY: 0.96,
-    rotation: facingX * 0.018,
-    tint: WARM_TINT,
-  }
+  motion.x = facingX * 3 + shake
+  motion.y = Math.cos(timeSeconds * Math.PI * 42) * 1.2
+  motion.scaleX = 1.045
+  motion.scaleY = 0.96
+  motion.rotation = facingX * 0.018
+  motion.tint = WARM_TINT
+  return motion
 }
 
 function recoverMotion(
@@ -145,13 +134,24 @@ function recoverMotion(
   const settle = Math.max(0, Math.min(1, entity.phaseSecondsRemaining / 0.45))
   const impactPulse = Math.abs(Math.sin(timeSeconds * Math.PI * 11)) * settle
   const pop = profile.impactScale * impactPulse
-  return {
-    ...motion,
-    y: -2 * impactPulse,
-    scaleX: 1 + pop,
-    scaleY: 1 + pop * 0.45,
-    tint: impactPulse > 0.45 ? IMPACT_TINT : undefined,
-  }
+  motion.y = -2 * impactPulse
+  motion.scaleX = 1 + pop
+  motion.scaleY = 1 + pop * 0.45
+  motion.tint = impactPulse > 0.45 ? IMPACT_TINT : undefined
+  return motion
+}
+
+function createBossRenderMotion(): BossRenderMotion {
+  return { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 }
+}
+
+function resetBossRenderMotion(motion: BossRenderMotion) {
+  motion.x = 0
+  motion.y = 0
+  motion.scaleX = 1
+  motion.scaleY = 1
+  motion.rotation = 0
+  motion.tint = undefined
 }
 
 function isActionPhase(phase: string, suffix: string): boolean {

src/modes/iwt2/render/partyAnimation.ts

@@ -27,65 +27,59 @@ export function partyRenderMotion(
   entity: Iwt2PartyEntityState,
   timeSeconds: number,
   attackPulse?: PartyAttackPulse,
+  motion: PartyRenderMotion = createPartyRenderMotion(),
 ): PartyRenderMotion {
   const speed = Math.hypot(entity.velocity.x, entity.velocity.y)
   const facingX = entity.facing.x < -0.05 ? -1 : 1
-  const motion: PartyRenderMotion = {
-    x: 0,
-    y: 0,
-    rotation: 0,
-    scaleX: 1,
-    scaleY: 1,
-  }
+  resetPartyRenderMotion(motion)
 
-  if (entity.health <= 0) return { ...motion, rotation: facingX * 0.08, scaleY: 0.92 }
+  if (entity.health <= 0) {
+    motion.rotation = facingX * 0.08
+    motion.scaleY = 0.92
+    return motion
+  }
   if (entity.status.stunnedSeconds > 0 || entity.status.knockedDownSeconds > 0) {
-    return { ...motion, y: 3, rotation: -facingX * 0.12, scaleY: 0.9 }
+    motion.y = 3
+    motion.rotation = -facingX * 0.12
+    motion.scaleY = 0.9
+    return motion
   }
 
   const attackProgress = attackPulse ? attackProgressFor(entity, timeSeconds, attackPulse) : 1
   if (attackProgress < 1) {
     const strike = Math.sin(attackProgress * Math.PI)
     const ranged = entity.projectileSpeed > 0
-    return {
-      ...motion,
-      x: facingX * (ranged ? -3 : 4) * strike,
-      y: -1.5 * strike,
-      rotation: facingX * (ranged ? -0.05 : 0.09) * strike,
-      scaleX: 1 + (ranged ? 0.012 : 0.035) * strike,
-      scaleY: 1 - (ranged ? 0.006 : 0.018) * strike,
-      tint: ranged ? 0xdff3ff : 0xffe1a6,
-    }
+    motion.x = facingX * (ranged ? -3 : 4) * strike
+    motion.y = -1.5 * strike
+    motion.rotation = facingX * (ranged ? -0.05 : 0.09) * strike
+    motion.scaleX = 1 + (ranged ? 0.012 : 0.035) * strike
+    motion.scaleY = 1 - (ranged ? 0.006 : 0.018) * strike
+    motion.tint = ranged ? 0xdff3ff : 0xffe1a6
+    return motion
   }
 
   if (entity.castSecondsRemaining > 0) {
     const pulse = 0.5 + Math.sin(timeSeconds * Math.PI * 12) * 0.5
-    return {
-      ...motion,
-      y: -1 - pulse * 1.5,
-      scaleX: 1 + pulse * 0.012,
-      scaleY: 1 + pulse * 0.012,
-      tint: entity.classId === 'mage' ? 0xefc4ff : 0xb9e3ff,
-    }
+    motion.y = -1 - pulse * 1.5
+    motion.scaleX = 1 + pulse * 0.012
+    motion.scaleY = 1 + pulse * 0.012
+    motion.tint = entity.classId === 'mage' ? 0xefc4ff : 0xb9e3ff
+    return motion
   }
 
   if (speed > 10) {
     const stride = Math.sin(timeSeconds * Math.PI * 9)
     const lift = Math.abs(stride) * Math.min(2.8, speed / 90)
-    return {
-      ...motion,
-      y: -lift,
-      rotation: facingX * 0.025 * Math.min(1, speed / 190),
-      scaleY: 1 - Math.abs(stride) * 0.01,
-    }
+    motion.y = -lift
+    motion.rotation = facingX * 0.025 * Math.min(1, speed / 190)
+    motion.scaleY = 1 - Math.abs(stride) * 0.01
+    return motion
   }
 
   const idle = Math.sin(timeSeconds * Math.PI * 2.2)
-  return {
-    ...motion,
-    y: -Math.max(0, idle) * 0.9,
-    scaleY: 1 + Math.max(0, idle) * 0.008,
-  }
+  motion.y = -Math.max(0, idle) * 0.9
+  motion.scaleY = 1 + Math.max(0, idle) * 0.008
+  return motion
 }
 
 export function isPartyAttackPulseActive(
@@ -101,17 +95,41 @@ export function partyWeaponLayerMotion(
   layer: Iwt2ClassWeaponLayer,
   timeSeconds: number,
   attackPulse?: PartyAttackPulse,
+  motion: PartyWeaponLayerMotion = createPartyWeaponLayerMotion(),
 ): PartyWeaponLayerMotion {
-  if (!attackPulse || entity.health <= 0) return { offsetXScale: 0, offsetYScale: 0, rotation: 0 }
+  resetPartyWeaponLayerMotion(motion)
+  if (!attackPulse || entity.health <= 0) return motion
   const progress = attackProgressFor(entity, timeSeconds, attackPulse)
-  if (progress >= 1) return { offsetXScale: 0, offsetYScale: 0, rotation: 0 }
+  if (progress >= 1) return motion
   const strike = Math.sin(progress * Math.PI)
   const attackMotion = layer.attackMotion
-  return {
-    offsetXScale: (attackMotion?.offsetXScale ?? 0) * strike,
-    offsetYScale: (attackMotion?.offsetYScale ?? 0) * strike,
-    rotation: (attackMotion?.rotation ?? 0) * strike,
-  }
+  motion.offsetXScale = (attackMotion?.offsetXScale ?? 0) * strike
+  motion.offsetYScale = (attackMotion?.offsetYScale ?? 0) * strike
+  motion.rotation = (attackMotion?.rotation ?? 0) * strike
+  return motion
+}
+
+function createPartyRenderMotion(): PartyRenderMotion {
+  return { x: 0, y: 0, rotation: 0, scaleX: 1, scaleY: 1 }
+}
+
+function resetPartyRenderMotion(motion: PartyRenderMotion) {
+  motion.x = 0
+  motion.y = 0
+  motion.rotation = 0
+  motion.scaleX = 1
+  motion.scaleY = 1
+  motion.tint = undefined
+}
+
+function createPartyWeaponLayerMotion(): PartyWeaponLayerMotion {
+  return { offsetXScale: 0, offsetYScale: 0, rotation: 0 }
+}
+
+function resetPartyWeaponLayerMotion(motion: PartyWeaponLayerMotion) {
+  motion.offsetXScale = 0
+  motion.offsetYScale = 0
+  motion.rotation = 0
 }
 
 function attackProgressFor(

src/modes/iwt2/render/scenes/BulldromeArenaScene.ts

@@ -2,12 +2,14 @@ import Phaser from 'phaser'
 import type { MovementVector } from '../../../../input'
 import { IWT2_BOSS_METADATA, type Iwt2BossId } from '../../content/bosses'
 import { IWT2_CLASS_METADATA, type Iwt2PlayerClassId } from '../../content/classes'
-import { bossRenderMotion } from '../bossAnimation'
+import { bossRenderMotion, type BossRenderMotion } from '../bossAnimation'
 import {
   isPartyAttackPulseActive,
   partyRenderMotion,
   partyWeaponLayerMotion,
   type PartyAttackPulse,
+  type PartyRenderMotion,
+  type PartyWeaponLayerMotion,
 } from '../partyAnimation'
 import type {
   Iwt2ArenaEvent,
@@ -41,10 +43,15 @@ type PartyLayerSprites = {
 
 export class BulldromeArenaScene extends Phaser.Scene {
   private deps: SceneDeps
+  private drawableEntities: DrawableEntity[] = []
   private arenaGraphics?: Phaser.GameObjects.Graphics
   private bossUnderlayGraphics?: Phaser.GameObjects.Graphics
   private entityGraphics?: Phaser.GameObjects.Graphics
   private telegraphGraphics?: Phaser.GameObjects.Graphics
+  private liveBossIds = new Set<string>()
+  private liveLabelIds = new Set<string>()
+  private livePartyIds = new Set<string>()
+  private liveProjectileIds = new Set<string>()
   private labels = new Map<string, Phaser.GameObjects.Text>()
   private bossSprites = new Map<string, Phaser.GameObjects.Image>()
   private partySprites = new Map<string, Phaser.GameObjects.Image>()
@@ -54,11 +61,15 @@ export class BulldromeArenaScene extends Phaser.Scene {
   private livePartyEffectIds = new Set<string>()
   private floatingCombatTexts = new Map<number, Phaser.GameObjects.Text>()
   private castGlowEffects = new Set<Phaser.GameObjects.Graphics>()
+  private currentEntityAnchors = new Map<string, FloatingCombatTextAnchor>()
   private lastEntityAnchors = new Map<string, FloatingCombatTextAnchor>()
+  private liveEntityAnchorIds = new Set<string>()
+  private bossMotionScratch: BossRenderMotion = { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 }
+  private partyMotionScratch: PartyRenderMotion = { x: 0, y: 0, scaleX: 1, scaleY: 1, rotation: 0 }
+  private weaponMotionScratch: PartyWeaponLayerMotion = { offsetXScale: 0, offsetYScale: 0, rotation: 0 }
   private lastPartyAnimationEventId = 0
   private lastFloatingEventId = 0
   private lastStateTime = 0
-  private lastHudPublish = 0
 
   constructor(deps: SceneDeps) {
     super('bulldrome-arena')
@@ -66,7 +77,9 @@ export class BulldromeArenaScene extends Phaser.Scene {
   }
 
   preload() {
-    for (const metadata of Object.values(IWT2_BOSS_METADATA)) {
+    const encounterBossIds = new Set(this.deps.getState().bosses.map((boss) => boss.bossId))
+    for (const bossId of encounterBossIds) {
+      const metadata = IWT2_BOSS_METADATA[bossId]
       if (metadata.spriteUrl.endsWith('.svg')) {
         this.load.svg(bossSpriteKey(metadata.id), metadata.spriteUrl, { width: 144, height: 144 })
       } else {
@@ -92,7 +105,9 @@ export class BulldromeArenaScene extends Phaser.Scene {
     this.telegraphGraphics = this.add.graphics().setDepth(10)
     this.bossUnderlayGraphics = this.add.graphics().setDepth(20)
     this.entityGraphics = this.add.graphics().setDepth(35)
-    this.drawState(this.deps.getState())
+    const state = this.deps.getState()
+    this.drawArena(state)
+    this.drawState(state)
   }
 
   update(_: number, delta: number) {
@@ -102,13 +117,11 @@ export class BulldromeArenaScene extends Phaser.Scene {
 
   private drawState(state: Iwt2ArenaState) {
     if (!this.arenaGraphics || !this.entityGraphics || !this.telegraphGraphics) return
-    this.drawArena(state)
     this.drawTelegraphs(state)
     this.updatePartyAnimations(state)
     this.drawEntities(state)
     this.drawProjectiles(state)
     this.drawFloatingCombatTexts(state)
-    this.lastHudPublish += 1
   }
 
   private drawArena(state: Iwt2ArenaState) {
@@ -140,12 +153,30 @@ export class BulldromeArenaScene extends Phaser.Scene {
     bossUnderlay.clear()
     graphics.clear()
     for (const hazard of state.hazards) drawHazard(graphics, hazard)
-    const entities: DrawableEntity[] = [...state.party, ...state.hostileAdds, ...state.bosses]
-    const liveLabelIds = new Set<string>(entities.filter((entity) => shouldDrawLabel(entity)).map((entity) => entity.id))
-    const liveBossIds = new Set<string>(state.bosses.map((boss) => boss.id))
-    const livePartyIds = new Set<string>(state.party.map((member) => member.id))
+    const entities = this.drawableEntities
+    const liveBossIds = this.liveBossIds
+    const liveLabelIds = this.liveLabelIds
+    const livePartyIds = this.livePartyIds
+    entities.length = 0
+    liveBossIds.clear()
+    liveLabelIds.clear()
+    livePartyIds.clear()
+    for (const boss of state.bosses) {
+      entities.push(boss)
+      liveBossIds.add(boss.id)
+      if (shouldDrawLabel(boss)) liveLabelIds.add(boss.id)
+    }
+    for (const add of state.hostileAdds) {
+      entities.push(add)
+      if (shouldDrawLabel(add)) liveLabelIds.add(add.id)
+    }
+    for (const member of state.party) {
+      entities.push(member)
+      livePartyIds.add(member.id)
+      if (shouldDrawLabel(member)) liveLabelIds.add(member.id)
+    }
 
-    for (const entity of entities.sort(entitySort)) {
+    for (const entity of entities) {
       const stunned = entity.kind === 'party' && (entity.status.stunnedSeconds > 0 || entity.status.knockedDownSeconds > 0)
       const alpha = entity.health <= 0 ? 0.35 : stunned ? 0.55 : 1
       const color = entityColor(entity)
@@ -232,8 +263,10 @@ export class BulldromeArenaScene extends Phaser.Scene {
 
   private drawProjectiles(state: Iwt2ArenaState) {
     const graphics = this.entityGraphics!
-    const liveProjectileIds = new Set(state.projectiles.map((projectile) => projectile.id))
+    const liveProjectileIds = this.liveProjectileIds
+    liveProjectileIds.clear()
     for (const projectile of state.projectiles) {
+      liveProjectileIds.add(projectile.id)
       const spriteKey = projectileSpriteKey(projectile.projectileKind)
       if (this.textures.exists(spriteKey)) {
         let sprite = this.projectileSprites.get(projectile.id)
@@ -244,7 +277,6 @@ export class BulldromeArenaScene extends Phaser.Scene {
         const velocityAngle = Math.atan2(projectile.velocity.y, projectile.velocity.x)
         const size = projectileDisplaySize(projectile.projectileKind, projectile.radius)
         sprite
-          .setTexture(spriteKey)
           .setPosition(projectile.position.x, projectile.position.y)
           .setRotation(velocityAngle)
           .setDisplaySize(size.width, size.height)
@@ -280,14 +312,13 @@ export class BulldromeArenaScene extends Phaser.Scene {
     const width = entity.radius * (metadata.spriteWidthScale ?? 3.35)
     const height = entity.radius * (metadata.spriteHeightScale ?? 3.35)
     const yOffset = entity.radius * (metadata.spriteYOffsetScale ?? 0)
-    const motion = bossRenderMotion(entity, timeSeconds)
+    const motion = bossRenderMotion(entity, timeSeconds, this.bossMotionScratch)
     if (motion.tint) {
       sprite.setTint(motion.tint)
     } else {
       sprite.clearTint()
     }
     sprite
-      .setTexture(key)
       .setPosition(entity.position.x + motion.x, entity.position.y + yOffset + motion.y)
       .setDisplaySize(width * motion.scaleX, height * motion.scaleY)
       .setRotation(rotation + motion.rotation)
@@ -314,10 +345,9 @@ export class BulldromeArenaScene extends Phaser.Scene {
     }
 
     const baseHeight = entity.radius * (metadata.bodyHeightScale ?? 4.55)
-    const motion = partyRenderMotion(entity, timeSeconds, this.partyAttackPulses.get(entity.id))
+    const motion = partyRenderMotion(entity, timeSeconds, this.partyAttackPulses.get(entity.id), this.partyMotionScratch)
     applyMotionTint(sprites.body, motion.tint)
     sprites.body
-      .setTexture(classArenaBodySpriteKey(entity.classId))
       .setPosition(entity.position.x + motion.x, entity.position.y + entity.radius * 0.18 + motion.y)
       .setDisplaySize(baseHeight * (sprites.body.width / Math.max(1, sprites.body.height)) * motion.scaleX, baseHeight * motion.scaleY)
       .setRotation(motion.rotation)
@@ -335,7 +365,13 @@ export class BulldromeArenaScene extends Phaser.Scene {
       }
       const flipX = entity.facing.x < -0.05
       const facingSign = flipX ? -1 : 1
-      const layerMotion = partyWeaponLayerMotion(entity, layer, timeSeconds, this.partyAttackPulses.get(entity.id))
+      const layerMotion = partyWeaponLayerMotion(
+        entity,
+        layer,
+        timeSeconds,
+        this.partyAttackPulses.get(entity.id),
+        this.weaponMotionScratch,
+      )
       const layerHeight = entity.radius * layer.heightScale
       const positionX = entity.position.x + motion.x + facingSign * entity.radius * (layer.offsetXScale + layerMotion.offsetXScale)
       const positionY = entity.position.y + entity.radius * 0.18 + motion.y + entity.radius * (layer.offsetYScale + layerMotion.offsetYScale)
@@ -358,7 +394,6 @@ export class BulldromeArenaScene extends Phaser.Scene {
       })
       applyMotionTint(sprite, motion.tint)
       sprite
-        .setTexture(key)
         .setDepth(layer.drawOrder === 'behindBody' ? 38 : 42)
         .setPosition(positionX, positionY)
         .setDisplaySize(displayWidth, displayHeight)
@@ -420,7 +455,6 @@ export class BulldromeArenaScene extends Phaser.Scene {
     }
     accent
       .setVisible(true)
-      .setTexture(key)
       .setDepth(layer.drawOrder === 'behindBody' ? 37 : 41)
       .setPosition(positionX, positionY)
       .setDisplaySize(displayWidth * 1.08, displayHeight * 1.12)
@@ -446,14 +480,13 @@ export class BulldromeArenaScene extends Phaser.Scene {
     }
 
     const displayHeight = entity.radius * 4.55
-    const motion = partyRenderMotion(entity, timeSeconds, this.partyAttackPulses.get(entity.id))
+    const motion = partyRenderMotion(entity, timeSeconds, this.partyAttackPulses.get(entity.id), this.partyMotionScratch)
     if (motion.tint) {
       sprite.setTint(motion.tint)
     } else {
       sprite.clearTint()
     }
     sprite
-      .setTexture(key)
       .setPosition(entity.position.x + motion.x, entity.position.y + entity.radius * 0.18 + motion.y)
       .setDisplaySize(
         displayHeight * (sprite.width / Math.max(1, sprite.height)) * motion.scaleX,
@@ -541,6 +574,8 @@ export class BulldromeArenaScene extends Phaser.Scene {
   }
 
   private drawFloatingCombatTexts(state: Iwt2ArenaState) {
+    const currentEntityAnchors = this.currentEntityAnchors
+    updateEntityAnchors(currentEntityAnchors, this.liveEntityAnchorIds, state)
     if (state.time < this.lastStateTime) {
       this.lastFloatingEventId = 0
       for (const text of this.floatingCombatTexts.values()) text.destroy()
@@ -557,17 +592,21 @@ export class BulldromeArenaScene extends Phaser.Scene {
         this.lastFloatingEventId = Math.max(this.lastFloatingEventId, event.id)
         continue
       }
-      this.spawnFloatingCombatText(event, state)
+      this.spawnFloatingCombatText(event, currentEntityAnchors)
       this.lastFloatingEventId = Math.max(this.lastFloatingEventId, event.id)
     }
 
     this.lastStateTime = state.time
-    this.lastEntityAnchors = entityAnchors(state)
+    this.currentEntityAnchors = this.lastEntityAnchors
+    this.lastEntityAnchors = currentEntityAnchors
   }
 
-  private spawnFloatingCombatText(event: Iwt2ArenaEvent, state: Iwt2ArenaState) {
+  private spawnFloatingCombatText(
+    event: Iwt2ArenaEvent,
+    currentEntityAnchors: Map<string, FloatingCombatTextAnchor>,
+  ) {
     const anchor = event.targetId
-      ? entityAnchors(state).get(event.targetId) ?? this.lastEntityAnchors.get(event.targetId)
+      ? currentEntityAnchors.get(event.targetId) ?? this.lastEntityAnchors.get(event.targetId)
       : undefined
     if (!anchor || !event.value || event.value <= 0) return
 
@@ -630,11 +669,6 @@ export class BulldromeArenaScene extends Phaser.Scene {
   }
 }
 
-function entitySort(a: DrawableEntity, b: DrawableEntity): number {
-  const rank = { boss: 0, hostileAdd: 1, party: 2 } satisfies Record<DrawableEntity['kind'], number>
-  return rank[a.kind] - rank[b.kind]
-}
-
 function entityColor(entity: DrawableEntity): string {
   if (entity.kind === 'boss') return IWT2_BOSS_METADATA[entity.bossId].color
   if (entity.kind === 'hostileAdd') return '#f0b84f'
@@ -710,16 +744,38 @@ function shouldSpawnFloatingCombatText(event: Iwt2ArenaEvent): boolean {
     && event.targetId !== undefined
 }
 
-function entityAnchors(state: Iwt2ArenaState): Map<string, FloatingCombatTextAnchor> {
-  const anchors = new Map<string, FloatingCombatTextAnchor>()
-  for (const entity of [...state.party, ...state.hostileAdds, ...state.bosses]) {
+function updateEntityAnchors(
+  anchors: Map<string, FloatingCombatTextAnchor>,
+  liveIds: Set<string>,
+  state: Iwt2ArenaState,
+) {
+  liveIds.clear()
+  for (const entity of state.party) updateEntityAnchor(anchors, liveIds, entity)
+  for (const entity of state.hostileAdds) updateEntityAnchor(anchors, liveIds, entity)
+  for (const entity of state.bosses) updateEntityAnchor(anchors, liveIds, entity)
+  for (const id of anchors.keys()) {
+    if (!liveIds.has(id)) anchors.delete(id)
+  }
+}
+
+function updateEntityAnchor(
+  anchors: Map<string, FloatingCombatTextAnchor>,
+  liveIds: Set<string>,
+  entity: DrawableEntity,
+) {
+  liveIds.add(entity.id)
+  const anchor = anchors.get(entity.id)
+  if (!anchor) {
     anchors.set(entity.id, {
       kind: entity.kind,
-      position: { ...entity.position },
+      position: entity.position,
       radius: entity.radius,
     })
+    return
   }
-  return anchors
+  anchor.kind = entity.kind
+  anchor.position = entity.position
+  anchor.radius = entity.radius
 }
 
 function floatingTextYOffset(anchor: FloatingCombatTextAnchor): number {
@@ -792,9 +848,7 @@ function drawIndicator(graphics: Phaser.GameObjects.Graphics, indicator: Iwt2Are
   graphics.fillStyle(color, indicator.fillAlpha ?? (active ? 0.16 : 0.09))
 
   if (indicator.kind === 'lane') {
-    const points = laneDangerPolygon(indicator.start, indicator.end, indicator.width)
-    graphics.fillPoints(points, true)
-    graphics.strokePoints(points, true)
+    drawLaneDangerPath(graphics, indicator.start, indicator.end, indicator.width)
     return
   }
 
@@ -805,27 +859,25 @@ function drawIndicator(graphics: Phaser.GameObjects.Graphics, indicator: Iwt2Are
   }
 
   if (indicator.kind === 'cone') {
-    const points = coneDangerPolygon(
+    drawConeDangerPath(
+      graphics,
       indicator.origin,
       indicator.direction,
       indicator.range,
       indicator.angleRadians,
     )
-    graphics.fillPoints(points, true)
-    graphics.strokePoints(points, true)
     return
   }
 
   if (indicator.kind === 'arc') {
-    const points = arcDangerPolygon(
+    drawArcDangerPath(
+      graphics,
       indicator.position,
       indicator.direction,
       indicator.innerRadius,
       indicator.outerRadius,
       indicator.angleRadians,
     )
-    graphics.fillPoints(points, true)
-    graphics.strokePoints(points, true)
     return
   }
 
@@ -835,7 +887,8 @@ function drawIndicator(graphics: Phaser.GameObjects.Graphics, indicator: Iwt2Are
   graphics.strokeCircle(indicator.position.x, indicator.position.y, indicator.innerRadius)
 }
 
-function arcDangerPolygon(
+function drawArcDangerPath(
+  graphics: Phaser.GameObjects.Graphics,
   position: Iwt2Vec2,
   direction: Iwt2Vec2,
   innerRadius: number,
@@ -845,43 +898,50 @@ function arcDangerPolygon(
   const baseAngle = Math.atan2(direction.y, direction.x)
   const halfAngle = angleRadians / 2
   const segmentCount = 18
-  const points: Phaser.Math.Vector2[] = []
+  graphics.beginPath()
   for (let index = 0; index <= segmentCount; index += 1) {
     const t = index / segmentCount
     const angle = baseAngle - halfAngle + angleRadians * t
-    points.push(new Phaser.Math.Vector2(
-      position.x + Math.cos(angle) * outerRadius,
-      position.y + Math.sin(angle) * outerRadius,
-    ))
+    const x = position.x + Math.cos(angle) * outerRadius
+    const y = position.y + Math.sin(angle) * outerRadius
+    if (index === 0) graphics.moveTo(x, y)
+    else graphics.lineTo(x, y)
   }
   for (let index = segmentCount; index >= 0; index -= 1) {
     const t = index / segmentCount
     const angle = baseAngle - halfAngle + angleRadians * t
-    points.push(new Phaser.Math.Vector2(
+    graphics.lineTo(
       position.x + Math.cos(angle) * innerRadius,
       position.y + Math.sin(angle) * innerRadius,
-    ))
+    )
   }
-  return points
+  graphics.closePath().fillPath().strokePath()
 }
 
-function laneDangerPolygon(start: Iwt2Vec2, end: Iwt2Vec2, halfWidth: number) {
+function drawLaneDangerPath(
+  graphics: Phaser.GameObjects.Graphics,
+  start: Iwt2Vec2,
+  end: Iwt2Vec2,
+  halfWidth: number,
+) {
   const dx = end.x - start.x
   const dy = end.y - start.y
   const length = Math.max(1, Math.hypot(dx, dy))
-  const normal = {
-    x: (-dy / length) * halfWidth,
-    y: (dx / length) * halfWidth,
-  }
-  return [
-    new Phaser.Math.Vector2(start.x + normal.x, start.y + normal.y),
-    new Phaser.Math.Vector2(end.x + normal.x, end.y + normal.y),
-    new Phaser.Math.Vector2(end.x - normal.x, end.y - normal.y),
-    new Phaser.Math.Vector2(start.x - normal.x, start.y - normal.y),
-  ]
+  const normalX = (-dy / length) * halfWidth
+  const normalY = (dx / length) * halfWidth
+  graphics
+    .beginPath()
+    .moveTo(start.x + normalX, start.y + normalY)
+    .lineTo(end.x + normalX, end.y + normalY)
+    .lineTo(end.x - normalX, end.y - normalY)
+    .lineTo(start.x - normalX, start.y - normalY)
+    .closePath()
+    .fillPath()
+    .strokePath()
 }
 
-function coneDangerPolygon(
+function drawConeDangerPath(
+  graphics: Phaser.GameObjects.Graphics,
   origin: Iwt2Vec2,
   direction: Iwt2Vec2,
   range: number,
@@ -889,15 +949,15 @@ function coneDangerPolygon(
 ) {
   const baseAngle = Math.atan2(direction.y, direction.x)
   const halfAngle = angleRadians / 2
-  const points = [new Phaser.Math.Vector2(origin.x, origin.y)]
   const segmentCount = 14
+  graphics.beginPath().moveTo(origin.x, origin.y)
   for (let index = 0; index <= segmentCount; index += 1) {
     const t = index / segmentCount
     const angle = baseAngle - halfAngle + angleRadians * t
-    points.push(new Phaser.Math.Vector2(
+    graphics.lineTo(
       origin.x + Math.cos(angle) * range,
       origin.y + Math.sin(angle) * range,
-    ))
+    )
   }
-  return points
+  graphics.closePath().fillPath().strokePath()
 }

src/modes/iwt2/save/iwt2Repository.ts

@@ -101,14 +101,20 @@ export type Iwt2OnlineSaveResult = {
   save: Iwt2Save | null
 }
 
-const IWT2_SAVE_KEY = 'i-want-to-heal-2:save:v1'
+export const IWT2_LOCAL_SAVE_SLOTS = [1, 2, 3] as const
+export type Iwt2LocalSaveSlot = (typeof IWT2_LOCAL_SAVE_SLOTS)[number]
+export type Iwt2LocalSaveSlots = Record<Iwt2LocalSaveSlot, Iwt2Save | null>
 
-export function createDefaultIwt2Save(): Iwt2Save {
+const IWT2_LEGACY_SAVE_KEY = 'i-want-to-heal-2:save:v1'
+const IWT2_SAVE_MIGRATION_KEY = 'i-want-to-heal-2:save-slots:migrated:v1'
+const IWT2_ACTIVE_SAVE_SLOT_KEY = 'i-want-to-heal-2:active-save-slot:v1'
+
+export function createDefaultIwt2Save(characterName = 'Healer'): Iwt2Save {
   return {
     version: 2,
     updatedAt: Date.now(),
     character: {
-      name: 'Healer',
+      name: normalizeCharacterName(characterName),
       level: 1,
       experience: 0,
       healerStyle: 'dawnweaver',
@@ -130,7 +136,11 @@ function normalizeSave(value: unknown): Iwt2Save {
   if (candidate.version !== 1 && candidate.version !== 2) return createDefaultIwt2Save()
   return {
     version: 2,
-    updatedAt: typeof candidate.updatedAt === 'number' ? candidate.updatedAt : Date.now(),
+    updatedAt: typeof candidate.updatedAt === 'number'
+      && Number.isFinite(candidate.updatedAt)
+      && candidate.updatedAt > 0
+      ? candidate.updatedAt
+      : Date.now(),
     character: {
       name: candidate.character?.name || 'Healer',
       level: Math.max(1, Math.floor(candidate.character?.level ?? 1)),
@@ -149,11 +159,51 @@ function normalizeSave(value: unknown): Iwt2Save {
   }
 }
 
-export function loadIwt2Save(): Iwt2Save {
+function iwt2SaveSlotKey(slot: Iwt2LocalSaveSlot) {
+  return `i-want-to-heal-2:save:slot-${slot}:v1`
+}
+
+function migrateLegacyIwt2Save() {
+  if (window.localStorage.getItem(IWT2_SAVE_MIGRATION_KEY)) return
+  const legacySave = window.localStorage.getItem(IWT2_LEGACY_SAVE_KEY)
+  const firstSlotKey = iwt2SaveSlotKey(1)
+  if (legacySave && !window.localStorage.getItem(firstSlotKey)) {
+    window.localStorage.setItem(firstSlotKey, legacySave)
+  }
+  window.localStorage.setItem(IWT2_SAVE_MIGRATION_KEY, 'true')
+}
+
+export function activeIwt2SaveSlot(): Iwt2LocalSaveSlot {
+  const stored = Number(window.localStorage.getItem(IWT2_ACTIVE_SAVE_SLOT_KEY))
+  return IWT2_LOCAL_SAVE_SLOTS.includes(stored as Iwt2LocalSaveSlot)
+    ? stored as Iwt2LocalSaveSlot
+    : 1
+}
+
+export function selectActiveIwt2SaveSlot(slot: Iwt2LocalSaveSlot) {
+  window.localStorage.setItem(IWT2_ACTIVE_SAVE_SLOT_KEY, String(slot))
+}
+
+export function loadIwt2Save(slot = activeIwt2SaveSlot()): Iwt2Save {
+  return loadExistingIwt2Save(slot) ?? createDefaultIwt2Save()
+}
+
+export function loadExistingIwt2Save(slot = activeIwt2SaveSlot()): Iwt2Save | null {
+  migrateLegacyIwt2Save()
+  const serialized = window.localStorage.getItem(iwt2SaveSlotKey(slot))
+  if (!serialized) return null
   try {
-    return normalizeSave(JSON.parse(window.localStorage.getItem(IWT2_SAVE_KEY) ?? 'null'))
+    return normalizeSave(JSON.parse(serialized))
   } catch {
-    return createDefaultIwt2Save()
+    return null
+  }
+}
+
+export function loadIwt2SaveSlots(): Iwt2LocalSaveSlots {
+  return {
+    1: loadExistingIwt2Save(1),
+    2: loadExistingIwt2Save(2),
+    3: loadExistingIwt2Save(3),
   }
 }
 
@@ -175,11 +225,12 @@ export async function writeIwt2OnlineSave(save: Iwt2Save): Promise<Iwt2OnlineSav
   }
 }
 
-export function writeIwt2Save(save: Iwt2Save) {
-  window.localStorage.setItem(IWT2_SAVE_KEY, JSON.stringify({
-    ...save,
-    updatedAt: Date.now(),
-  }))
+export function writeIwt2Save(save: Iwt2Save, slot = activeIwt2SaveSlot()) {
+  replaceIwt2Save(save, slot)
+}
+
+export function replaceIwt2Save(save: Iwt2Save, slot = activeIwt2SaveSlot()) {
+  window.localStorage.setItem(iwt2SaveSlotKey(slot), JSON.stringify(normalizeSave(save)))
 }
 
 export function recordIwt2BossKill(

src/modes/iwt2/screens/BossArenaScreen.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
+import { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState, type CSSProperties } from 'react'
 import type { MovementVector } from '../../../input'
 import { useGameAction, useInput, useMovementVectorRef } from '../../../input'
 import {
@@ -14,7 +14,6 @@ import {
 } from '../sim/arenaState'
 import type { Iwt2ArenaBounds, Iwt2EntityId } from '../sim'
 import { castIwt2HealerAbility } from '../sim'
-import { PhaserArena } from '../render/PhaserArena'
 import {
   recordIwt2BossKillReward,
   type Iwt2BossDropAward,
@@ -47,6 +46,10 @@ import {
 } from '../content/roguelike'
 import { createIwt2PvpNormalizedGearProgress } from '../content/pvpGearNormalization'
 
+const PhaserArena = lazy(() => import('../render/PhaserArena').then((module) => ({
+  default: module.PhaserArena,
+})))
+
 type ArenaStatus = 'playing' | 'paused' | 'victory' | 'defeat'
 type PvpResultReason = 'opponent-defeated' | null
 type OverlayAction = 'primary' | 'requeue' | 'menu'
@@ -56,10 +59,14 @@ type OverlayNavEntry = {
   column: number
 }
 
-const DEFAULT_OVERLAY_NAV_ENTRIES: OverlayNavEntry[] = [
+const PAUSE_OVERLAY_NAV_ENTRIES: OverlayNavEntry[] = [
   { action: 'primary', row: 0, column: 0 },
   { action: 'menu', row: 1, column: 0 },
 ]
+const RESULT_OVERLAY_NAV_ENTRIES: OverlayNavEntry[] = [
+  { action: 'primary', row: 0, column: 0 },
+  { action: 'menu', row: 0, column: 1 },
+]
 const PVP_RESULT_OVERLAY_NAV_ENTRIES: OverlayNavEntry[] = [
   { action: 'primary', row: 0, column: 0 },
   { action: 'requeue', row: 0, column: 1 },
@@ -71,6 +78,7 @@ const IWT2_TOP_PARTY_RAIL_WIDTH = 172
 const IWT2_THOR_TOP_PARTY_RAIL_WIDTH = 154
 const IWT2_THOR_TOP_BREAKPOINT_WIDTH = 1000
 const IWT2_THOR_TOP_BREAKPOINT_HEIGHT = 620
+const IWT2_HUD_PUBLISH_INTERVAL_SECONDS = 0.1
 
 type BossArenaScreenProps = {
   bossId: Iwt2BossId
@@ -157,7 +165,6 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
   const saveRef = useRef(save)
   const recordedKillIdsRef = useRef<Set<Iwt2BossId>>(new Set())
   const lastPublishTimeRef = useRef(0)
-  const lastHudSignatureRef = useRef('')
   const abilityCooldownsRef = useRef<Record<string, number>>({})
   const movementRef = useMovementVectorRef(status === 'playing')
   const {
@@ -169,14 +176,6 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
   const { enabled: dualScreenEnabled } = useDualScreen()
   const activeBindings = bindings[lastDevice]
 
-  useEffect(() => {
-    stateRef.current = arenaState
-  }, [arenaState])
-
-  useEffect(() => {
-    opponentStateRef.current = opponentArenaState
-  }, [opponentArenaState])
-
   useEffect(() => {
     statusRef.current = status
   }, [status])
@@ -219,7 +218,7 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
       : null
     recordedKillIdsRef.current = new Set()
     abilityCooldownsRef.current = {}
-    lastHudSignatureRef.current = arenaHudSignature(next)
+    lastPublishTimeRef.current = next.time
     stateRef.current = next
     opponentStateRef.current = nextOpponentState
     setArenaState(next)
@@ -278,7 +277,7 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
     }
     abilityCooldownsRef.current = nextCooldowns
     stateRef.current = result.state
-    lastHudSignatureRef.current = arenaHudSignature(result.state)
+    lastPublishTimeRef.current = result.state.time
     setAbilityCooldowns(nextCooldowns)
     setArenaState(result.state)
   }, [])
@@ -444,13 +443,8 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
       showOverlay('defeat')
     }
 
-    const hudSignature = arenaHudSignature(next)
-    if (
-      hudSignature !== lastHudSignatureRef.current
-      || next.time - lastPublishTimeRef.current >= 0.08
-      || next.bosses.some((boss) => boss.health <= 0)
-    ) {
-      lastHudSignatureRef.current = hudSignature
+    const fightEnded = statusRef.current !== 'playing'
+    if (fightEnded || next.time - lastPublishTimeRef.current >= IWT2_HUD_PUBLISH_INTERVAL_SECONDS) {
       lastPublishTimeRef.current = next.time
       setArenaState(next)
       if (pvpRoguelike) setOpponentArenaState(nextOpponentState)
@@ -546,12 +540,15 @@ export function BossArenaScreen({ bossId, bossIds, difficulty, modeLabel, save,
             targetBindings={targetBindings}
           />
 
-          <PhaserArena
-            movementRef={movementRef}
-            onStep={onStep}
-            selectedPartyIdRef={selectedPartyIdRef}
-            stateRef={stateRef}
-          />
+          <Suspense fallback={<div className="iwt2-phaser-host iwt2-arena-loading" role="status">Loading arena...</div>}>
+            <PhaserArena
+              active={status === 'playing'}
+              movementRef={movementRef}
+              onStep={onStep}
+              selectedPartyIdRef={selectedPartyIdRef}
+              stateRef={stateRef}
+            />
+          </Suspense>
           {status === 'paused' && (
             <div className="pause-screen iwt2-arena-overlay is-paused" data-game-nav-active="true" role="dialog" aria-modal="true">
               <div>
@@ -700,28 +697,9 @@ function rewardDifficultySlugForKill(
 }
 
 function overlayNavEntriesFor(status: ArenaStatus, pvpRoguelike: boolean): OverlayNavEntry[] {
+  if (status === 'paused') return PAUSE_OVERLAY_NAV_ENTRIES
   if (pvpRoguelike && (status === 'victory' || status === 'defeat')) return PVP_RESULT_OVERLAY_NAV_ENTRIES
-  return DEFAULT_OVERLAY_NAV_ENTRIES
-}
-
-function arenaHudSignature(state: Iwt2ArenaState): string {
-  return [
-    ...state.bosses.map((boss) => [
-      boss.id,
-      Math.ceil(boss.health),
-      boss.attackPhase,
-    ].join(':')),
-    state.hostileAdds.length,
-    state.hazards.length,
-    ...state.party.map((member) => [
-      member.id,
-      Math.ceil(member.health),
-      Math.ceil(member.shield),
-      Math.ceil(member.mana),
-      Math.ceil(Math.max(member.status.stunnedSeconds, member.status.knockedDownSeconds) * 10),
-      member.hotEffects.map((effect) => `${effect.id}:${Math.ceil(effect.remainingSeconds)}:${Math.ceil(effect.nextTickInSeconds * 10)}`).join(','),
-    ].join(':')),
-  ].join('|')
+  return RESULT_OVERLAY_NAV_ENTRIES
 }
 
 function formatBossEncounterTitle(bosses: Iwt2ArenaState['bosses']): string {

src/modes/iwt2/screens/Iwt2ShellScreens.tsx

@@ -9,7 +9,6 @@ import {
 import { useDualScreen, useDualScreenWorkshopPublisher, type DualScreenWorkshopState } from '../../../dualScreen'
 import { getGameMode } from '../../../gameRepository'
 import {
-  createDefaultIwt2Save,
   loadIwt2OnlineSave,
   setIwt2InfusionAbility,
   setIwt2PassiveInfusion,
@@ -1887,7 +1886,9 @@ export function Iwt2CloudSaveScreen({
   const [onlineSave, setOnlineSave] = useState<Iwt2Save | null>(null)
   const [syncingOnlineSave, setSyncingOnlineSave] = useState(false)
   const [message, setMessage] = useState('')
-  const statusMessage = message || (!onlineBackupsAvailable ? 'Online save unavailable in offline mode.' : '')
+  const statusMessage = message || (!onlineBackupsAvailable
+    ? 'Sign in at character select to upload or download this local save.'
+    : '')
 
   const checkOnlineSave = useCallback(async (isCancelled: () => boolean) => {
     setSyncingOnlineSave(true)
@@ -1924,7 +1925,7 @@ export function Iwt2CloudSaveScreen({
 
   const handleUseLocalSave = useCallback(async () => {
     if (!onlineBackupsAvailable) {
-      setMessage('Using local save. Sign in online to update the server copy.')
+      setMessage('Using local save. Sign in at character select to update the server copy.')
       return
     }
     setSyncingOnlineSave(true)
@@ -1946,11 +1947,6 @@ export function Iwt2CloudSaveScreen({
     setMessage('Local save now uses online progress.')
   }, [onlineBackupsAvailable, onlineSave, onSaveUpdated])
 
-  const handleUseNewSave = useCallback(() => {
-    onSaveUpdated(createDefaultIwt2Save())
-    setMessage('Started a new local IWT2 save.')
-  }, [onSaveUpdated])
-
   const actions = useMemo<Iwt2NavAction[]>(() => withBackAction([
     {
       key: 'use-local',
@@ -1970,16 +1966,8 @@ export function Iwt2CloudSaveScreen({
       disabled: syncingOnlineSave || !onlineBackupsAvailable || !onlineSave,
       onConfirm: handleUseOnlineSave,
     },
-    {
-      key: 'new-save',
-      label: 'Use New Save File',
-      detail: 'Start over with a fresh IWT2 character. Online save is not overwritten until you choose local save.',
-      value: 'New',
-      onConfirm: handleUseNewSave,
-    },
   ], onBack), [
     handleUseLocalSave,
-    handleUseNewSave,
     handleUseOnlineSave,
     onlineBackupsAvailable,
     onlineSave,
@@ -1989,7 +1977,7 @@ export function Iwt2CloudSaveScreen({
   ])
 
   return (
-    <Iwt2ScreenShell title="Backup Slot" onBack={onBack}>
+    <Iwt2ScreenShell title="Cloud Backup" onBack={onBack}>
       {statusMessage && <p className="iwt2-screen-note">{statusMessage}</p>}
       <Iwt2ActionList actions={actions} />
     </Iwt2ScreenShell>

src/modes/iwt2/sim/arena.ts

@@ -197,7 +197,7 @@ function initialBossSecondaryCooldown(bossId: Iwt2BossId): number {
 
 export function tickIwt2Arena(state: Iwt2ArenaState, input: Iwt2ArenaInput, dt: number): Iwt2ArenaState {
   const step = Math.max(0, Math.min(dt, MAX_DT))
-  if (step <= 0) return { ...state, events: [...state.events] }
+  if (step <= 0) return state
 
   const inputMove = {
     x: clampInputAxis(input.moveX),
@@ -283,10 +283,18 @@ export function tickIwt2Arena(state: Iwt2ArenaState, input: Iwt2ArenaInput, dt:
     nextAddId: bossResult.nextAddId ?? state.nextAddId,
     nextHazardId: projectileResult.nextHazardId,
     nextEventId: state.nextEventId + nextEvents.length,
-    events: [...state.events, ...nextEvents].slice(-MAX_EVENTS),
+    events: appendEventHistory(state.events, nextEvents),
   }
 }
 
+function appendEventHistory(previous: Iwt2ArenaEvent[], next: Iwt2ArenaEvent[]): Iwt2ArenaEvent[] {
+  if (next.length === 0) return previous
+  const overflow = Math.max(0, previous.length + next.length - MAX_EVENTS)
+  return overflow > 0
+    ? [...previous.slice(overflow), ...next]
+    : [...previous, ...next]
+}
+
 function tickPartyHotEffects(
   party: Iwt2PartyEntityState[],
   dt: number,

src/modes/iwt2/sim/arenaState.ts

@@ -1,60 +1,16 @@
-import { IWT2_BOSS_METADATA, type Iwt2BossId } from '../content/bosses'
-import { IWT2_CLASS_METADATA } from '../content/classes'
+import type { Iwt2BossId } from '../content/bosses'
 import {
   createInitialIwt2ArenaState as createCoreIwt2ArenaState,
   tickIwt2Arena as tickCoreIwt2Arena,
 } from './arena'
 import type {
-  Iwt2ArenaIndicator,
   Iwt2ArenaInput,
   Iwt2ArenaBounds,
   Iwt2ArenaState as Iwt2CoreArenaState,
-  Iwt2BossEntityState,
-  Iwt2HostileAddState,
-  Iwt2PartyEntityState,
   Iwt2RoguelikePressureState,
 } from './types'
 
-export type Iwt2ArenaEntityKind = 'player' | 'party' | 'boss' | 'projectile' | 'hostileAdd'
-
-export type Iwt2ArenaEntity = {
-  id: string
-  kind: Iwt2ArenaEntityKind
-  icon: string
-  color: string
-  x: number
-  y: number
-  radius: number
-  health: number
-  maxHealth: number
-  stunnedFor: number
-}
-
-export type Iwt2ArenaTelegraph =
-  | {
-    kind: 'charge'
-    x: number
-    y: number
-    width: number
-    height: number
-    active: boolean
-  }
-  | {
-    kind: 'slam'
-    x: number
-    y: number
-    radius: number
-    active: boolean
-  }
-
-export type Iwt2ArenaState = Iwt2CoreArenaState & {
-  arena: {
-    width: number
-    height: number
-  }
-  entities: Iwt2ArenaEntity[]
-  telegraphs: Iwt2ArenaTelegraph[]
-}
+export type Iwt2ArenaState = Iwt2CoreArenaState
 
 export function createInitialIwt2ArenaState(
   bossId?: Iwt2BossId,
@@ -64,94 +20,9 @@ export function createInitialIwt2ArenaState(
   roguelikePressure?: Iwt2RoguelikePressureState,
   bounds?: Iwt2ArenaBounds,
 ): Iwt2ArenaState {
-  return decorateArenaState(createCoreIwt2ArenaState(bossId, bossIds, bossHealthScale, partyDamageTakenScale, roguelikePressure, bounds))
+  return createCoreIwt2ArenaState(bossId, bossIds, bossHealthScale, partyDamageTakenScale, roguelikePressure, bounds)
 }
 
 export function tickIwt2Arena(state: Iwt2ArenaState, input: Iwt2ArenaInput, dt: number): Iwt2ArenaState {
-  return decorateArenaState(tickCoreIwt2Arena(state, input, dt))
-}
-
-export function decorateArenaState(state: Iwt2CoreArenaState): Iwt2ArenaState {
-  return {
-    ...state,
-    arena: { ...state.bounds },
-    entities: [
-      ...state.party.map(toArenaEntity),
-      ...state.hostileAdds.map(toHostileAddArenaEntity),
-      ...state.bosses.map(toBossArenaEntity),
-    ],
-    telegraphs: createTelegraphs(state.indicators),
-  }
-}
-
-function toHostileAddArenaEntity(add: Iwt2HostileAddState): Iwt2ArenaEntity {
-  return {
-    id: add.id,
-    kind: 'hostileAdd',
-    icon: 'v',
-    color: '#f0b84f',
-    x: add.position.x,
-    y: add.position.y,
-    radius: add.radius,
-    health: add.health,
-    maxHealth: add.maxHealth,
-    stunnedFor: 0,
-  }
-}
-
-function toArenaEntity(member: Iwt2PartyEntityState): Iwt2ArenaEntity {
-  const metadata = IWT2_CLASS_METADATA[member.classId]
-  return {
-    id: member.id,
-    kind: member.aiRole === 'player' ? 'player' : 'party',
-    icon: metadata.icon,
-    color: metadata.color,
-    x: member.position.x,
-    y: member.position.y,
-    radius: member.radius,
-    health: member.health,
-    maxHealth: member.maxHealth,
-    stunnedFor: Math.max(member.status.stunnedSeconds, member.status.knockedDownSeconds),
-  }
-}
-
-function toBossArenaEntity(boss: Iwt2BossEntityState): Iwt2ArenaEntity {
-  const metadata = IWT2_BOSS_METADATA[boss.bossId]
-  return {
-    id: boss.id,
-    kind: 'boss',
-    icon: metadata.icon,
-    color: metadata.color,
-    x: boss.position.x,
-    y: boss.position.y,
-    radius: boss.radius,
-    health: boss.health,
-    maxHealth: boss.maxHealth,
-    stunnedFor: 0,
-  }
-}
-
-function createTelegraphs(indicators: Iwt2ArenaIndicator[]): Iwt2ArenaTelegraph[] {
-  return indicators.flatMap((indicator): Iwt2ArenaTelegraph[] => {
-    if (indicator.kind === 'lane') {
-      return [{
-        active: indicator.phase === 'active',
-        height: indicator.width * 2,
-        kind: 'charge' as const,
-        width: Math.max(16, Math.hypot(indicator.end.x - indicator.start.x, indicator.end.y - indicator.start.y)),
-        x: Math.min(indicator.start.x, indicator.end.x),
-        y: Math.min(indicator.start.y, indicator.end.y) - indicator.width,
-      }]
-    }
-    if (indicator.kind === 'circle') {
-      return [{
-        active: indicator.phase === 'active',
-        kind: 'slam' as const,
-        radius: indicator.radius,
-        x: indicator.position.x,
-        y: indicator.position.y,
-      }]
-    }
-    return []
-  })
+  return tickCoreIwt2Arena(state, input, dt)
 }