diff --git a/website/src/features/toolboxes/modules/randomizer/RandomizerWheel.jsx b/website/src/features/toolboxes/modules/randomizer/RandomizerWheel.jsx
index 94d83b2..bf88848 100644
--- a/website/src/features/toolboxes/modules/randomizer/RandomizerWheel.jsx
+++ b/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 }) {
+
+ {hoveredSegment || ""}
+
diff --git a/website/src/features/toolboxes/modules/randomizer/randomizerUiUtils.js b/website/src/features/toolboxes/modules/randomizer/randomizerUiUtils.js
index 57bd76d..616d745 100644
--- a/website/src/features/toolboxes/modules/randomizer/randomizerUiUtils.js
+++ b/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];
diff --git a/website/src/styles/toolboxes/randomizer/_wheel.scss b/website/src/styles/toolboxes/randomizer/_wheel.scss
index fddf81f..0a60d41 100644
--- a/website/src/styles/toolboxes/randomizer/_wheel.scss
+++ b/website/src/styles/toolboxes/randomizer/_wheel.scss
@@ -38,6 +38,34 @@
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.42));
}
+.randomizer-wheel-tooltip {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ z-index: 3;
+ max-width: min(100%, 210px);
+ overflow: hidden;
+ padding: 5px 10px;
+ border: 1px solid rgba(246, 196, 83, 0.34);
+ border-radius: var(--radius-pill);
+ background: rgba(7, 10, 24, 0.94);
+ box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
+ color: var(--color-text-primary);
+ font-size: var(--font-size-xs);
+ font-weight: 900;
+ line-height: 1.2;
+ opacity: 0;
+ pointer-events: none;
+ text-overflow: ellipsis;
+ transform: translate(-50%, -82%);
+ transition: opacity var(--duration-fast) var(--ease-standard);
+ white-space: nowrap;
+}
+
+.randomizer-wheel-tooltip.is-visible {
+ opacity: 1;
+}
+
.randomizer-wheel {
width: min(100%, 190px);
aspect-ratio: 1;
@@ -110,6 +138,20 @@
stroke-width: 0.8;
}
+.randomizer-wheel-segment {
+ cursor: help;
+ outline: none;
+ transition:
+ filter var(--duration-fast) var(--ease-standard),
+ opacity var(--duration-fast) var(--ease-standard);
+}
+
+.randomizer-wheel-segment:hover,
+.randomizer-wheel-segment:focus-visible {
+ filter: brightness(1.16);
+ opacity: 0.94;
+}
+
.randomizer-wheel-form .randomizer-entry-form {
padding: 0;
}