Improve error handling and code quality across components

.github/workflows/test.yml

@@ -156,7 +156,7 @@ jobs:
         shell: bash
         run: |
           rc=0
-          pnpm run test:ui 2>&1 | tee test-output-vitest-ui.txt || rc=$?
+          pnpm run test:vitest:ui 2>&1 | tee test-output-vitest-ui.txt || rc=$?
           echo "exit_code=$rc" >> "$GITHUB_OUTPUT"
 
       - name: Upload test log artifact (vitest-ui)

package.json

@@ -102,7 +102,9 @@
     "typescript-eslint": "^8.59.1",
     "vite": "8.0.10",
     "vite-plugin-compression": "0.5.1",
+    "vite-plugin-pwa": "1.2.0",
     "vitest": "^4.0.18",
+    "workbox-window": "7.4.0",
     "yaml": "2.8.3"
   },
   "engines": {

public/locales/de/ui.json

@@ -964,6 +964,12 @@
   "unlocked": "FREIGESCHALTET: {{unlock}}!",
   "visual_interface": "VISUELLE SCHNITTSTELLE",
   "volume.set": "Lautstärke auf {{pct}}% setzen",
+  "offline": {
+    "offlineReady": "App bereit, offline zu arbeiten",
+    "needRefresh": "Neuer Inhalt verfügbar, klicke auf Neuladen zum Aktualisieren.",
+    "reload": "Neuladen",
+    "close": "Schließen"
+  },
   "travel": {
     "rivalEncounter": "Deine rivalisierende Band, {{rivalName}}, ist in der Stadt!"
   },

public/locales/en/ui.json

@@ -964,6 +964,12 @@
   "unlocked": "UNLOCKED: {{unlock}}!",
   "visual_interface": "VISUAL INTERFACE",
   "volume.set": "Set volume to {{pct}}%",
+  "offline": {
+    "offlineReady": "App ready to work offline",
+    "needRefresh": "New content available, click on reload button to update.",
+    "reload": "Reload",
+    "close": "Close"
+  },
   "travel": {
     "rivalEncounter": "Your rival band, {{rivalName}}, is in town!"
   },

src/App.tsx

@@ -7,6 +7,7 @@ import { ToastOverlay } from './ui/ToastOverlay'
 import { DebugLogViewer } from './ui/DebugLogViewer'
 import { TutorialManager } from './components/TutorialManager'
 import { ChatterOverlay } from './components/ChatterOverlay'
+import ReloadPrompt from './components/ReloadPrompt'
 import { GameStateProvider, useGameState } from './context/GameState'
 import { ErrorBoundary } from './ui/CrashHandler'
 import { Analytics } from '@vercel/analytics/react'
@@ -104,6 +105,7 @@ function GameContent() {
       {!SCENES_WITHOUT_HUD.has(currentScene) && <HUD />}
 
       <ToastOverlay />
+      <ReloadPrompt />
 
       {/* ChatterOverlay receives read-only state slice */}
       <ChatterOverlay gameState={chatterState} />

src/components/ReloadPrompt.css

@@ -0,0 +1,7 @@
+.ReloadPrompt-container {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: var(--z-toast);
+  pointer-events: auto;
+}

src/components/ReloadPrompt.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRegisterSW } from 'virtual:pwa-register/react'
+import './ReloadPrompt.css'
+
+export default function ReloadPrompt() {
+  const { t } = useTranslation()
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker
+  } = useRegisterSW({
+    onRegisterError(error) {
+      console.warn('SW registration error', error)
+    }
+  })
+
+  const close = () => {
+    setOfflineReady(false)
+    setNeedRefresh(false)
+  }
+
+  if (!offlineReady && !needRefresh) {
+    return null
+  }
+
+  return (
+    <div className='ReloadPrompt-container'>
+      <div
+        role='status'
+        className='ReloadPrompt-toast bg-void-black border-2 border-toxic-green text-toxic-green p-4 font-mono'
+      >
+        <div className='ReloadPrompt-message mb-2'>
+          {offlineReady ? (
+            <span>{t('ui:offline.offlineReady')}</span>
+          ) : (
+            <span>{t('ui:offline.needRefresh')}</span>
+          )}
+        </div>
+        <div className='flex gap-4'>
+          {needRefresh && (
+            <button
+              type='button'
+              className='ReloadPrompt-toast-button border border-toxic-green px-3 py-1 hover:bg-toxic-green hover:text-void-black transition-colors focus-visible:ring-toxic-green focus-visible:ring-offset-void-black'
+              onClick={() => updateServiceWorker(true)}
+            >
+              {t('ui:offline.reload')}
+            </button>
+          )}
+          <button
+            type='button'
+            className='ReloadPrompt-toast-button border border-toxic-green px-3 py-1 hover:bg-toxic-green hover:text-void-black transition-colors focus-visible:ring-toxic-green focus-visible:ring-offset-void-black'
+            onClick={close}
+          >
+            {t('ui:offline.close')}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

src/components/overworld/OverworldMap.tsx

@@ -3,7 +3,13 @@ import { MapConnection } from '../MapConnection'
 import { MapNode } from '../MapNode'
 import { TravelingVan } from './TravelingVan'
 import { calculateEffectiveTicketPrice } from '../../utils/economyEngine'
-import { getGenImageUrl, IMG_PROMPTS } from '../../utils/imageGen'
+import { useNetworkStatus } from '../../hooks/useNetworkStatus'
+import {
+  getGenImageUrl,
+  IMG_PROMPTS,
+  isImageGenerationAvailable,
+  getGeneratedImageFallbackUrl
+} from '../../utils/imageGen'
 import type {
   MapNode as GameMapNode,
   GameMap,
@@ -52,40 +58,93 @@ export const OverworldMap = React.memo(
     activeStoryFlags,
     rivalBand
   }: OverworldMapProps) => {
+    const isOnlineNetwork = useNetworkStatus()
+
     // Memoized URL generators
-    const mapBgUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.OVERWORLD_MAP),
-      []
-    )
-    const vanUrl = useMemo(() => getGenImageUrl(IMG_PROMPTS.ICON_VAN), [])
-    const rivalVanUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_RIVAL_VAN),
-      []
-    )
-    const pinFestivalUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_FESTIVAL),
-      []
-    )
-    const pinHomeUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_HOME),
-      []
-    )
-    const pinClubUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_CLUB),
-      []
-    )
-    const pinRestUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_REST),
-      []
-    )
-    const pinSpecialUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_SPECIAL),
-      []
-    )
-    const pinFinaleUrl = useMemo(
-      () => getGenImageUrl(IMG_PROMPTS.ICON_PIN_FINALE),
-      []
-    )
+    const urls = useMemo(() => {
+      const isOnline = isImageGenerationAvailable() && isOnlineNetwork
+      const createOfflineSvgUrl = (svgMarkup: string) =>
+        `data:image/svg+xml;utf8,${encodeURIComponent(svgMarkup)}`
+      const createOfflinePinUrl = (label: string, symbol: string) =>
+        createOfflineSvgUrl(`
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="${label}">
+            <circle cx="32" cy="24" r="16" fill="white" stroke="black" stroke-width="3"/>
+            <path d="M32 58 21 34h22L32 58Z" fill="white" stroke="black" stroke-width="3" stroke-linejoin="round"/>
+            <text x="32" y="29" text-anchor="middle" font-family="Arial, sans-serif" font-size="16" font-weight="700" fill="black">${symbol}</text>
+          </svg>
+        `)
+      const createOfflineVanUrl = (label: string, text: string) =>
+        createOfflineSvgUrl(`
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="${label}">
+            <rect x="10" y="20" width="34" height="20" rx="4" fill="white" stroke="black" stroke-width="3"/>
+            <path d="M44 26h10l4 8v6H44Z" fill="white" stroke="black" stroke-width="3" stroke-linejoin="round"/>
+            <circle cx="22" cy="44" r="5" fill="white" stroke="black" stroke-width="3"/>
+            <circle cx="48" cy="44" r="5" fill="white" stroke="black" stroke-width="3"/>
+            <text x="31" y="34" text-anchor="middle" font-family="Arial, sans-serif" font-size="10" font-weight="700" fill="black">${text}</text>
+          </svg>
+        `)
+      const offlineAssets = {
+        mapBgUrl: createOfflineSvgUrl(`
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 450" role="img" aria-label="Offline overworld map">
+            <rect width="800" height="450" fill="white"/>
+            <path d="M40 360C140 320 220 330 320 290S520 210 620 230s100 40 140 20" fill="none" stroke="black" stroke-width="10" stroke-linecap="round"/>
+            <path d="M90 110c40 10 70 40 120 30s90-50 150-30 100 70 170 60 110-60 170-50" fill="none" stroke="black" stroke-width="6" stroke-dasharray="18 12" stroke-linecap="round"/>
+            <text x="400" y="60" text-anchor="middle" font-family="Arial, sans-serif" font-size="32" font-weight="700" fill="black">OFFLINE MAP</text>
+            <text x="400" y="410" text-anchor="middle" font-family="Arial, sans-serif" font-size="20" fill="black">Routes and markers remain distinct while offline</text>
+          </svg>
+        `),
+        vanUrl: createOfflineVanUrl('Player van', 'YOU'),
+        rivalVanUrl: createOfflineVanUrl('Rival van', 'RIVAL'),
+        pinFestivalUrl: createOfflinePinUrl('Festival node', 'F'),
+        pinHomeUrl: createOfflinePinUrl('Home node', 'H'),
+        pinClubUrl: createOfflinePinUrl('Club node', 'C'),
+        pinRestUrl: createOfflinePinUrl('Rest node', 'R'),
+        pinSpecialUrl: createOfflinePinUrl('Special node', 'S'),
+        pinFinaleUrl: createOfflinePinUrl('Finale node', '!')
+      }
+      const fallback = getGeneratedImageFallbackUrl()
+      return {
+        mapBgUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.OVERWORLD_MAP)
+          : offlineAssets.mapBgUrl || fallback,
+        vanUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_VAN)
+          : offlineAssets.vanUrl || fallback,
+        rivalVanUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_RIVAL_VAN)
+          : offlineAssets.rivalVanUrl || fallback,
+        pinFestivalUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_FESTIVAL)
+          : offlineAssets.pinFestivalUrl || fallback,
+        pinHomeUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_HOME)
+          : offlineAssets.pinHomeUrl || fallback,
+        pinClubUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_CLUB)
+          : offlineAssets.pinClubUrl || fallback,
+        pinRestUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_REST)
+          : offlineAssets.pinRestUrl || fallback,
+        pinSpecialUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_SPECIAL)
+          : offlineAssets.pinSpecialUrl || fallback,
+        pinFinaleUrl: isOnline
+          ? getGenImageUrl(IMG_PROMPTS.ICON_PIN_FINALE)
+          : offlineAssets.pinFinaleUrl || fallback
+      }
+    }, [isOnlineNetwork])
+
+    const {
+      mapBgUrl,
+      vanUrl,
+      rivalVanUrl,
+      pinFestivalUrl,
+      pinHomeUrl,
+      pinClubUrl,
+      pinRestUrl,
+      pinSpecialUrl,
+      pinFinaleUrl
+    } = urls
 
     // Memoized connection rendering
     const renderedConnections = useMemo(() => {

src/components/postGig/CompletePhase.tsx

@@ -2,7 +2,12 @@ import PropTypes from 'prop-types'
 import { motion } from 'framer-motion'
 import { useTranslation } from 'react-i18next'
 import { ActionButton } from '../../ui/shared'
-import { getGenImageUrl, IMG_PROMPTS } from '../../utils/imageGen'
+import {
+  getGenImageUrl,
+  IMG_PROMPTS,
+  isImageGenerationAvailable,
+  getGeneratedImageFallbackUrl
+} from '../../utils/imageGen'
 import { SideEffectsSummary } from './SideEffectsSummary'
 import type { CompletePhaseProps } from '../../types/components'
 
@@ -34,7 +39,7 @@ export const CompletePhase = ({
       <div
         className='absolute inset-0 opacity-20 bg-cover bg-center mix-blend-screen pointer-events-none z-0'
         style={{
-          backgroundImage: `url("${getGenImageUrl(getOutcomeImagePrompt())}")`
+          backgroundImage: `url("${isImageGenerationAvailable() ? getGenImageUrl(getOutcomeImagePrompt()) : getGeneratedImageFallbackUrl()}")`
         }}
       />
       <motion.div

src/components/postGig/DealCard.tsx

@@ -14,7 +14,12 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ActionButton } from '../../ui/shared'
 import { BRAND_ALIGNMENTS } from '../../context/initialState'
-import { IMG_PROMPTS, getGenImageUrl } from '../../utils/imageGen'
+import {
+  IMG_PROMPTS,
+  getGenImageUrl,
+  isImageGenerationAvailable,
+  getGeneratedImageFallbackUrl
+} from '../../utils/imageGen'
 import type {
   DealImageProps,
   DealInfoProps,
@@ -137,7 +142,11 @@ const getAlignmentColor = (alignment?: string) => {
 const DealImage = memo(({ alignment, name }: DealImageProps) => (
   <div className='shrink-0 w-24 h-24 border border-current opacity-80 overflow-hidden'>
     <img
-      src={getGenImageUrl(getAlignmentImagePrompt(alignment))}
+      src={
+        isImageGenerationAvailable()
+          ? getGenImageUrl(getAlignmentImagePrompt(alignment))
+          : getGeneratedImageFallbackUrl()
+      }
       alt={name}
       className='w-full h-full object-cover object-center grayscale hover:grayscale-0 transition-all duration-300'
       loading='lazy'

src/components/postGig/SocialOptionButton.tsx

@@ -4,7 +4,12 @@ import PropTypes from 'prop-types'
 import { motion } from 'framer-motion'
 import { ActionButton } from '../../ui/shared'
 import { SideEffectsPreview } from './SideEffectsPreview'
-import { getGenImageUrl, IMG_PROMPTS } from '../../utils/imageGen'
+import {
+  getGenImageUrl,
+  IMG_PROMPTS,
+  isImageGenerationAvailable,
+  getGeneratedImageFallbackUrl
+} from '../../utils/imageGen'
 import type { SocialOptionButtonProps } from '../../types/components'
 
 const CATEGORY_PROMPTS = {
@@ -45,7 +50,7 @@ export const SocialOptionButton = memo(function SocialOptionButton({
         <div
           className='absolute inset-0 opacity-80 group-hover:opacity-20 transition-opacity bg-cover bg-center pointer-events-none'
           style={{
-            backgroundImage: `url("${getGenImageUrl(getImagePromptForCategory(opt.category, opt.badges))}")`
+            backgroundImage: `url("${isImageGenerationAvailable() ? getGenImageUrl(getImagePromptForCategory(opt.category, opt.badges)) : getGeneratedImageFallbackUrl()}")`
           }}
         />
 

src/components/postGig/ZealotryGauge.tsx

@@ -2,7 +2,12 @@ import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import PropTypes from 'prop-types'
 import { ZEALOTRY_PROMO_THRESHOLD } from '../../utils/economyEngine'
-import { getGenImageUrl, IMG_PROMPTS } from '../../utils/imageGen'
+import {
+  getGenImageUrl,
+  IMG_PROMPTS,
+  isImageGenerationAvailable,
+  getGeneratedImageFallbackUrl
+} from '../../utils/imageGen'
 
 type ZealotryGaugeProps = { zealotryLevel?: number }
 
@@ -16,7 +21,11 @@ export const ZealotryGauge = memo(
       <div className='flex flex-row items-center gap-4 mb-4 p-3 bg-blood-red/10 border border-blood-red/30 rounded relative overflow-hidden'>
         <div className='w-12 h-12 shrink-0 border border-blood-red/50 rounded overflow-hidden'>
           <img
-            src={getGenImageUrl(IMG_PROMPTS.ZEALOTRY_CULT)}
+            src={
+              isImageGenerationAvailable()
+                ? getGenImageUrl(IMG_PROMPTS.ZEALOTRY_CULT)
+                : getGeneratedImageFallbackUrl()
+            }
             alt={t('ui:postGig.socialPhase.altZealotryCult', {
               defaultValue: 'Zealotry Cult'
             })}