forked from phenom/healer-man
27 lines
1.7 KiB
TypeScript
27 lines
1.7 KiB
TypeScript
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>;
|
||
}
|