Elo play level selection (#17)

* feat(play): switch engine UI and logic from skill level to Elo rating (100–3200)

src/components/slider.tsx

@@ -1,13 +1,13 @@
 import { Grid2 as Grid, Slider as MuiSlider, Typography } from "@mui/material";
 
-interface Props {
+export interface Props {
   value: number;
   setValue: (value: number) => void;
   min: number;
   max: number;
   label: string;
   size?: number;
-  marksFilter?: number;
+  step?: number;
 }
 
 export default function Slider({
@@ -17,7 +17,7 @@ export default function Slider({
   value,
   setValue,
   size,
-  marksFilter = 1,
+  step = 1,
 }: Props) {
   return (
     <Grid
@@ -27,18 +27,14 @@ export default function Slider({
       size={size ?? 11}
     >
       <Typography id={`input-${label}`} textAlign="left" width="100%">
-        {label}
+        {`${label}: ${value}`}
       </Typography>
 
       <MuiSlider
         min={min}
         max={max}
-        marks={Array.from({ length: max - min + 1 }, (_, i) => ({
-          value: i + min,
-          label: `${i + min}`,
-        })).filter((_, i) => i % marksFilter === 0)}
-        step={1}
-        valueLabelDisplay="off"
+        step={step}
+        valueLabelDisplay="auto"
         value={value}
         onChange={(_, value) => setValue(value as number)}
         aria-labelledby={`input-${label}`}