Add wheel segment colors and hover labels

website/src/features/toolboxes/modules/randomizer/RandomizerWheel.jsx

@@ -12,6 +12,7 @@ export function WheelRandomizer({ data, textContent, onChange, context }) {
   const [drawing, setDrawing] = useState(false);
   const [displayResults, setDisplayResults] = useState(data.results);
   const [entriesText, setEntriesText] = useState("");
+  const [hoveredSegment, setHoveredSegment] = useState(null);
   const { queueTimer, clearTimers: clearWheelTimers } = useTimeoutQueue();
   const skipWheelSyncRef = useRef(false);
   const segments = useMemo(() => buildWheelSegments(data.entries), [data.entries]);
@@ -117,9 +118,26 @@ export function WheelRandomizer({ data, textContent, onChange, context }) {
         <span className="randomizer-wheel-spacer" aria-hidden="true" />
         <div className="randomizer-wheel-center">
           <span className="randomizer-wheel-pointer" aria-hidden="true" />
+          <span className={`randomizer-wheel-tooltip ${hoveredSegment ? "is-visible" : ""}`} aria-live="polite">
+            {hoveredSegment || ""}
+          </span>
           <svg className={`randomizer-wheel ${spinning ? "is-spinning" : ""}`} viewBox="0 0 100 100" style={{ "--randomizer-wheel-rotation": `${rotation}deg` }}>
             {segments.length ? segments.map((segment) => (
-              <path key={segment.entry.id} d={describeWheelArc(segment.startAngle, segment.endAngle)} fill={WHEEL_COLORS[segment.index % WHEEL_COLORS.length]} />
+              <path
+                className="randomizer-wheel-segment"
+                key={segment.entry.id}
+                d={describeWheelArc(segment.startAngle, segment.endAngle)}
+                fill={WHEEL_COLORS[segment.index % WHEEL_COLORS.length]}
+                tabIndex="0"
+                role="img"
+                aria-label={segment.entry.label}
+                onBlur={() => setHoveredSegment(null)}
+                onFocus={() => setHoveredSegment(segment.entry.label)}
+                onMouseEnter={() => setHoveredSegment(segment.entry.label)}
+                onMouseLeave={() => setHoveredSegment(null)}
+              >
+                <title>{segment.entry.label}</title>
+              </path>
             )) : <circle cx="50" cy="50" r="48" fill="rgba(139, 92, 246, 0.18)" />}
             <circle cx="50" cy="50" r="12" fill="rgba(7, 10, 24, 0.92)" />
           </svg>

website/src/features/toolboxes/modules/randomizer/randomizerUiUtils.js

@@ -1,5 +1,30 @@
 // Rôle : regroupe les helpers UI et animation purs du Randomizer.
-export const WHEEL_COLORS = ["#8b5cf6", "#f6c453", "#22d3ee", "#d946ef", "#6366f1", "#22c55e"];
+export const WHEEL_COLORS = [
+  "#8b5cf6",
+  "#f6c453",
+  "#22d3ee",
+  "#d946ef",
+  "#6366f1",
+  "#22c55e",
+  "#f97316",
+  "#ec4899",
+  "#14b8a6",
+  "#eab308",
+  "#3b82f6",
+  "#f43f5e",
+  "#84cc16",
+  "#a855f7",
+  "#06b6d4",
+  "#fb7185",
+  "#10b981",
+  "#c084fc",
+  "#38bdf8",
+  "#f59e0b",
+  "#4ade80",
+  "#818cf8",
+  "#f472b6",
+  "#2dd4bf"
+];
 export const DRAW_PAUSE_MS = 500;
 export const DICE_ROLL_DELAYS = [62, 70, 82, 98, 120, 148, 182, 224, 276, 338, 410];
 export const TEAM_REEL_DELAYS = [58, 66, 78, 94, 116, 144, 180, 226, 286, 360];