-
diff --git a/website/src/features/toolboxes/modules/NotepadModule.jsx b/website/src/features/toolboxes/modules/NotepadModule.jsx
index 96be374..f61cf15 100644
--- a/website/src/features/toolboxes/modules/NotepadModule.jsx
+++ b/website/src/features/toolboxes/modules/NotepadModule.jsx
@@ -292,7 +292,7 @@ export function NotepadModule({ toolboxId, moduleId, context, textExchangeOpen }
+
onCommand("bold")}>B
diff --git a/website/src/features/toolboxes/modules/RandomizerModule.jsx b/website/src/features/toolboxes/modules/RandomizerModule.jsx
index 0ff93e5..59ae099 100644
--- a/website/src/features/toolboxes/modules/RandomizerModule.jsx
+++ b/website/src/features/toolboxes/modules/RandomizerModule.jsx
@@ -1,71 +1,10 @@
-// Rôle : fournit l'outil Randomizer avec dé, roue pondérée et équipes équilibrées.
-import { useEffect, useMemo, useRef, useState } from "react";
-import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
-import { Icon } from "../../../components/Icon.jsx";
+// Rôle : orchestre les onglets de l'outil Randomizer sans porter les sous-vues.
import { Tabs } from "../../../components/Tabs.jsx";
-import { useDraftForm } from "../../../hooks/useDraftForm.js";
import { TextExchangeActions } from "./TextExchangeActions.jsx";
-import {
- RANDOMIZER_LIMITS,
- RANDOMIZER_TABS,
- addRandomizerHistory,
- buildWheelSegments,
- clampNumber,
- createBalancedTeams,
- drawWeightedEntries,
- filterExclusionsForPlayers,
- getDiceShape,
- rollDice
-} from "./randomizerUtils.js";
-
-const WHEEL_COLORS = ["#8b5cf6", "#f6c453", "#22d3ee", "#d946ef", "#6366f1", "#22c55e"];
-const DRAW_PAUSE_MS = 500;
-const DICE_ROLL_DELAYS = [62, 70, 82, 98, 120, 148, 182, 224, 276, 338, 410];
-const TEAM_REEL_DELAYS = [58, 66, 78, 94, 116, 144, 180, 226, 286, 360];
-const WHEEL_SPIN_MS = 1120;
-const DEFAULT_EXCLUSION_DRAFT = { playerAId: "", playerBIds: [], mode: "group" };
-
-function hasReducedMotion() {
- return window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches;
-}
-
-function polarToCartesian(radius, angle) {
- const radians = (angle * Math.PI) / 180;
- return {
- x: 50 + radius * Math.cos(radians),
- y: 50 + radius * Math.sin(radians)
- };
-}
-
-function describeWheelArc(startAngle, endAngle) {
- const start = polarToCartesian(48, startAngle);
- const end = polarToCartesian(48, endAngle);
- const largeArc = endAngle - startAngle > 180 ? 1 : 0;
- return `M 50 50 L ${start.x} ${start.y} A 48 48 0 ${largeArc} 1 ${end.x} ${end.y} Z`;
-}
-
-function formatDateTime(value) {
- const date = new Date(value);
- return Number.isFinite(date.getTime()) ? date.toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" }) : "";
-}
-
-function getWheelTargetRotation(currentRotation, targetAngle) {
- const pointerAngle = -90;
- const targetRotation = pointerAngle - targetAngle;
- const currentModulo = ((currentRotation % 360) + 360) % 360;
- const targetModulo = ((targetRotation % 360) + 360) % 360;
- const delta = (targetModulo - currentModulo + 360) % 360;
- return currentRotation + 1080 + delta;
-}
-
-function pickRandomItems(items, count) {
- const nextItems = [...items];
- for (let index = nextItems.length - 1; index > 0; index -= 1) {
- const targetIndex = Math.floor(Math.random() * (index + 1));
- [nextItems[index], nextItems[targetIndex]] = [nextItems[targetIndex], nextItems[index]];
- }
- return nextItems.slice(0, count);
-}
+import { RANDOMIZER_TABS } from "./randomizerUtils.js";
+import { DiceRandomizer } from "./randomizer/RandomizerDice.jsx";
+import { TeamsRandomizer } from "./randomizer/RandomizerTeams.jsx";
+import { WheelRandomizer } from "./randomizer/RandomizerWheel.jsx";
export function RandomizerModule({ toolboxId, moduleId, context, textExchangeOpen }) {
const data = context.normalizeRandomizerData(context.getModuleData(toolboxId, moduleId, {}));
@@ -101,773 +40,3 @@ export function RandomizerModule({ toolboxId, moduleId, context, textExchangeOpe
);
}
-
-function DiceRandomizer({ data, textContent, onChange, context }) {
- const [displayValue, setDisplayValue] = useState(data.results[0] || 1);
- const [displayResults, setDisplayResults] = useState(data.results);
- const [rolling, setRolling] = useState(false);
- const [rollingIndex, setRollingIndex] = useState(-1);
- const [rollDuration, setRollDuration] = useState(DICE_ROLL_DELAYS[0]);
- const timersRef = useRef([]);
- const skipDiceSyncRef = useRef(false);
- const shape = getDiceShape(data.faces);
-
- useEffect(() => {
- if (rolling) return;
- if (skipDiceSyncRef.current) {
- skipDiceSyncRef.current = false;
- return;
- }
- setDisplayValue(data.results[0] || 1);
- setDisplayResults(data.results);
- }, [data.results, rolling]);
-
- useEffect(() => () => {
- timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
- timersRef.current = [];
- }, []);
-
- function queueTimer(callback, delay) {
- const timerId = window.setTimeout(callback, delay);
- timersRef.current.push(timerId);
- return timerId;
- }
-
- function clearDiceTimers() {
- timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
- timersRef.current = [];
- }
-
- function stopDice() {
- clearDiceTimers();
- skipDiceSyncRef.current = true;
- setRolling(false);
- setRollingIndex(-1);
- }
-
- function updateDiceField(field, value) {
- const limitMin = field === "faces" ? RANDOMIZER_LIMITS.diceFacesMin : RANDOMIZER_LIMITS.diceRollsMin;
- const limitMax = field === "faces" ? RANDOMIZER_LIMITS.diceFacesMax : RANDOMIZER_LIMITS.diceRollsMax;
- onChange({ ...data, [field]: clampNumber(value, limitMin, limitMax, data[field]) });
- }
-
- function launchDice() {
- clearDiceTimers();
- skipDiceSyncRef.current = false;
- const results = rollDice(data.faces, data.rolls);
- const historyEntry = { id: context.uid("randomizer"), at: new Date().toISOString(), results };
- if (hasReducedMotion()) {
- onChange({ ...data, results, history: addRandomizerHistory(data.history, historyEntry) });
- return;
- }
- setRolling(true);
- setRollingIndex(0);
- setDisplayResults([]);
-
- function animateRoll(index) {
- let ticks = 0;
- const tick = () => {
- ticks += 1;
- const isFinalTick = ticks >= DICE_ROLL_DELAYS.length;
- const tickDelay = DICE_ROLL_DELAYS[Math.min(ticks, DICE_ROLL_DELAYS.length - 1)];
- setDisplayValue(isFinalTick ? results[index] : rollDice(data.faces, 1)[0]);
- setRollDuration(Math.max(54, Math.round(tickDelay * 0.86)));
- if (!isFinalTick) {
- queueTimer(tick, tickDelay);
- return;
- }
- setDisplayResults((current) => [...current, results[index]]);
- if (index < results.length - 1) {
- setRollingIndex(index + 1);
- queueTimer(() => animateRoll(index + 1), DRAW_PAUSE_MS);
- return;
- }
- setRolling(false);
- setRollingIndex(-1);
- onChange({ ...data, results, history: addRandomizerHistory(data.history, historyEntry) });
- };
- tick();
- }
-
- animateRoll(0);
- }
-
- function clearDiceHistory() {
- onChange({ ...data, history: [] });
- }
-
- function removeDiceHistoryEntry(entryId) {
- onChange({ ...data, history: data.history.filter((entry) => entry.id !== entryId) });
- }
-
- return (
-
-
- );
-}
-
-function RandomizerDie({ shape, rolling, value, duration, faces }) {
- const cleanFaces = clampNumber(faces, RANDOMIZER_LIMITS.diceFacesMin, RANDOMIZER_LIMITS.diceFacesMax, 6);
- const valueIndex = clampNumber(value, 1, cleanFaces, 1) - 1;
- const values = useMemo(() => Array.from({ length: cleanFaces }, (_, index) => index + 1), [cleanFaces]);
-
- return (
-
-
-
-
-
-
-
- `${entry.results.join(" - ")} · ${textContent.totalLabel || "Total"} ${entry.results.reduce((sum, result) => sum + result, 0)}`}
- onClear={clearDiceHistory}
- onRemove={removeDiceHistoryEntry}
- disabled={rolling}
- textContent={textContent}
- showEmpty
- />
-
-
-
-
-
-
-
-
-
-
-
-
- {value}
-
-
- );
-}
-
-function WheelRandomizer({ data, textContent, onChange, context }) {
- const [rotation, setRotation] = useState(0);
- const [spinning, setSpinning] = useState(false);
- const [drawing, setDrawing] = useState(false);
- const [displayResults, setDisplayResults] = useState(data.results);
- const [entriesText, setEntriesText] = useState("");
- const timersRef = useRef([]);
- const skipWheelSyncRef = useRef(false);
- const segments = useMemo(() => buildWheelSegments(data.entries), [data.entries]);
-
- useEffect(() => {
- if (drawing) return;
- if (skipWheelSyncRef.current) {
- skipWheelSyncRef.current = false;
- return;
- }
- setDisplayResults(data.results);
- }, [data.results, drawing]);
-
- useEffect(() => () => {
- timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
- timersRef.current = [];
- }, []);
-
- function queueTimer(callback, delay) {
- const timerId = window.setTimeout(callback, delay);
- timersRef.current.push(timerId);
- return timerId;
- }
-
- function clearWheelTimers() {
- timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
- timersRef.current = [];
- }
-
- function stopWheel() {
- clearWheelTimers();
- skipWheelSyncRef.current = true;
- setSpinning(false);
- setDrawing(false);
- }
-
- function addEntries(event) {
- event.preventDefault();
- const availableSlots = RANDOMIZER_LIMITS.wheelEntriesMax - data.entries.length;
- const labels = entriesText
- .split(/\r?\n/)
- .map((label) => label.trim())
- .filter(Boolean)
- .slice(0, availableSlots);
- if (!labels.length) return;
- onChange({
- ...data,
- entries: [
- ...data.entries,
- ...labels.map((label) => ({ id: context.uid("randomizer"), label, weight: 1 }))
- ]
- });
- setEntriesText("");
- }
-
- function updateEntry(entryId, patch) {
- onChange({ ...data, entries: data.entries.map((entry) => entry.id === entryId ? { ...entry, ...patch } : entry) });
- }
-
- function removeEntry(entryId) {
- onChange({ ...data, entries: data.entries.filter((entry) => entry.id !== entryId) });
- }
-
- function clearEntries() {
- onChange({ ...data, entries: [], results: [] });
- }
-
- function clearWheelHistory() {
- onChange({ ...data, history: [] });
- }
-
- function removeWheelHistoryEntry(entryId) {
- onChange({ ...data, history: data.history.filter((entry) => entry.id !== entryId) });
- }
-
- function launchWheel() {
- clearWheelTimers();
- skipWheelSyncRef.current = false;
- const drawnEntries = drawWeightedEntries(data.entries, data.draws);
- if (!drawnEntries.length) {
- context.notify?.(textContent.wheelInvalid || "Ajoutez au moins deux valeurs.");
- return;
- }
- const results = drawnEntries.map((entry) => entry.label);
- const historyEntry = { id: context.uid("randomizer"), at: new Date().toISOString(), results };
- if (hasReducedMotion()) {
- setDisplayResults(results);
- onChange({ ...data, results, history: addRandomizerHistory(data.history, historyEntry) });
- return;
- }
- setDrawing(true);
- setDisplayResults([]);
- let rotationCursor = rotation;
-
- function animateDraw(index) {
- const drawnEntry = drawnEntries[index];
- const winnerSegment = segments.find((segment) => segment.entry.id === drawnEntry.id) || segments[0];
- rotationCursor = getWheelTargetRotation(rotationCursor, winnerSegment.midAngle);
- setSpinning(true);
- setRotation(rotationCursor);
- queueTimer(() => {
- setDisplayResults((current) => [...current, drawnEntry.label]);
- setSpinning(false);
- if (index < drawnEntries.length - 1) {
- queueTimer(() => animateDraw(index + 1), DRAW_PAUSE_MS);
- return;
- }
- setDrawing(false);
- onChange({ ...data, results, history: addRandomizerHistory(data.history, historyEntry) });
- }, WHEEL_SPIN_MS);
- }
-
- animateDraw(0);
- }
-
- return (
-
-
-
-
-
-
-
-
- {segments.length ? segments.map((segment) => (
-
-
-
- {segment.entry.label}
-
- )) : {textContent.wheelInvalid || "Ajoutez au moins deux valeurs."}
} -
-
-
-
-
-