Release Healer Man 0.1.40

src/ui/DungeonDifficultySlider.tsx

@@ -0,0 +1,26 @@
+import { bossDifficultyLabel, bossDifficultyMultipliers } from "../game/dungeonDifficulty";
+import { ControllerButton } from "./ControllerButton";
+import "./dungeonRuns.css";
+
+export function DungeonDifficultySlider({ value, onChange, selectedId, select }: {
+  readonly value: number;
+  readonly onChange: (value: number) => void;
+  readonly selectedId: string;
+  readonly select: (id: string) => void;
+}) {
+  const multipliers = bossDifficultyMultipliers(value);
+  const controls = { selectedId, select };
+  return <section className="dungeon-difficulty" aria-label="Boss difficulty">
+    <label htmlFor="boss-difficulty"><strong>Boss difficulty</strong><span>{bossDifficultyLabel(value)}</span></label>
+    <div className="dungeon-difficulty__control">
+      <ControllerButton {...controls} controlId="boss-difficulty-down" className="front-button" aria-label="Decrease boss difficulty"
+        disabled={value === 1} onClick={() => onChange(value - 1)}>−</ControllerButton>
+      <input id="boss-difficulty" aria-label="Boss difficulty" type="range" min="1" max="10" step="1" value={value}
+        aria-valuetext={bossDifficultyLabel(value)} onChange={(event) => onChange(Number(event.target.value))} />
+      <ControllerButton {...controls} controlId="boss-difficulty-up" className="front-button" aria-label="Increase boss difficulty"
+        disabled={value === 10} onClick={() => onChange(value + 1)}>+</ControllerButton>
+    </div>
+    <p>Boss health ×{multipliers.health.toFixed(2)} · Damage ×{multipliers.damage.toFixed(2)}</p>
+    <small>Easy targets 30-second bosses and 45-second final bosses. Difficulty is fixed for the expedition. Each level has its own leaderboard.</small>
+  </section>;
+}