Release Healer Man 0.1.9

src/ui/OptionsPanel.tsx

@@ -11,6 +11,14 @@ import {
   type CombatPresentationSettings,
   type CombatVfxQuality,
 } from "../game/combatPresentation";
+import {
+  GAMEPLAY_FRAME_RATE_LIMITS,
+  PREVIEW_FRAME_RATE_LIMITS,
+  frameRateLimitLabel,
+  nextFrameRateLimit,
+  type GameplayFrameRateLimit,
+  type PreviewFrameRateLimit,
+} from "../game/frameRateSettings";
 
 export interface OptionsPanelSettings {
   showMobHealthBars: boolean;
@@ -24,6 +32,8 @@ export interface OptionsPanelSettings {
   masterVolume: number;
   uiScale: number;
   minimapRotation: "north-up" | "player-up";
+  gameplayFrameRate: GameplayFrameRateLimit;
+  previewFrameRate: PreviewFrameRateLimit;
 }
 
 export interface OptionsPanelProps {
@@ -87,7 +97,15 @@ function OptionsDialog({
     const index = VFX_QUALITY_ORDER.indexOf(presentationSettings.vfxQuality);
     onPresentationChange({ vfxQuality: VFX_QUALITY_ORDER[(index + 1) % VFX_QUALITY_ORDER.length] });
   };
+  const cycleGameplayFrameRate = () => onChange({
+    gameplayFrameRate: nextFrameRateLimit(settings.gameplayFrameRate, GAMEPLAY_FRAME_RATE_LIMITS),
+  });
+  const cyclePreviewFrameRate = () => onChange({
+    previewFrameRate: nextFrameRateLimit(settings.previewFrameRate, PREVIEW_FRAME_RATE_LIMITS),
+  });
   const actions = useMemo<MenuAction[]>(() => [
+    { id: "option-gameplay-frame-rate", run: cycleGameplayFrameRate },
+    { id: "option-preview-frame-rate", run: cyclePreviewFrameRate },
     ...TOGGLES.map((option) => ({
       id: `option-${option.id}`,
       run: () => onChange({ [option.id]: !settings[option.id] }),
@@ -141,6 +159,24 @@ function OptionsDialog({
         </header>
 
         <div className="options-panel__list">
+          <h3 className="options-panel__section-title">Performance</h3>
+          <div className="option-row">
+            <span><strong>Gameplay frame rate</strong><small>Limit 3D gameplay rendering without changing combat or physics timing.</small></span>
+            {optionButton(
+              "option-gameplay-frame-rate",
+              frameRateLimitLabel(settings.gameplayFrameRate),
+              cycleGameplayFrameRate,
+            )}
+          </div>
+          <div className="option-row">
+            <span><strong>Character preview frame rate</strong><small>Limit animated character previews shown in menus.</small></span>
+            {optionButton(
+              "option-preview-frame-rate",
+              frameRateLimitLabel(settings.previewFrameRate),
+              cyclePreviewFrameRate,
+            )}
+          </div>
+          <h3 className="options-panel__section-title">Gameplay and interface</h3>
           {TOGGLES.map((option) => (
             <div key={option.id} className="option-row">
               <span><strong>{option.label}</strong><small>{option.description}</small></span>
@@ -185,7 +221,7 @@ function OptionsDialog({
           </div>
           <h3 className="options-panel__section-title">Combat presentation</h3>
           <div className="option-row">
-            <span><strong>VFX quality</strong><small>High uses the full particle budget; Low reduces particles and lights; Off skips combat VFX.</small></span>
+            <span><strong>VFX quality</strong><small>High uses the full effect budget; Low reduces particles and simultaneous effects; Off skips combat VFX.</small></span>
             {optionButton("option-vfx-quality", presentationSettings.vfxQuality[0].toUpperCase() + presentationSettings.vfxQuality.slice(1), cycleVfxQuality)}
           </div>
           {COMBAT_ACTOR_GROUPS.map((group) => (