Split randomizer views and align NDS toolbox vocabulary
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
All checks were successful
Deploy Sokko G / deploy (push) Successful in 17s
This commit is contained in:
parent
6b85e58765
commit
fef7735a1d
57 changed files with 4932 additions and 4815 deletions
|
|
@ -49,10 +49,10 @@ export function GoalTreeBranch({ nodes, parentId, selectedNodeId, editing, reord
|
|||
<article className={`goal-tree-node-card ${editing ? "is-editing" : "is-viewing"} ${hasNodeActions ? "has-actions" : ""}`} data-diagram-node={node.id} onClick={selectFromCard}>
|
||||
{!editing && (
|
||||
<div className="goal-tree-node-hover-actions" aria-label={textContent.cardActionsLabel || "Actions de l'objectif"}>
|
||||
<button className="nds-icon-button" data-size="tiny" type="button" onClick={() => onEditNode(node.id)} aria-label={`${textContent.editTitle || "Modifier"} ${node.title}`} title={textContent.editTitle || "Modifier"}>
|
||||
<button className="nds-icon-button" data-size="xxs" type="button" onClick={() => onEditNode(node.id)} aria-label={`${textContent.editTitle || "Modifier"} ${node.title}`} title={textContent.editTitle || "Modifier"}>
|
||||
<Icon name="edit" />
|
||||
</button>
|
||||
<button className="nds-icon-button" data-size="tiny" data-variant="danger" type="button" onClick={() => onDeleteNode(node.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${node.title}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<button className="nds-icon-button" data-size="xxs" data-variant="danger" type="button" onClick={() => onDeleteNode(node.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${node.title}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -292,7 +292,7 @@ export function NotepadModule({ toolboxId, moduleId, context, textExchangeOpen }
|
|||
<CompactDropdown
|
||||
className="notepad-pages-dropdown"
|
||||
menuClassName="notepad-pages-menu"
|
||||
label={textContent.pagesMenuLabel || "Pages du bloc note"}
|
||||
label={textContent.pagesMenuLabel || "Pages du Bloc Note"}
|
||||
renderTrigger={({ open, toggle }) => (
|
||||
<button
|
||||
className={`notepad-pages-toggle nds-icon-button ${open ? "active" : ""}`}
|
||||
|
|
@ -302,9 +302,9 @@ export function NotepadModule({ toolboxId, moduleId, context, textExchangeOpen }
|
|||
data-border="joined"
|
||||
type="button"
|
||||
onClick={toggle}
|
||||
aria-label={textContent.pagesToggleLabel || "Afficher les pages du bloc note"}
|
||||
aria-label={textContent.pagesToggleLabel || "Afficher les pages du Bloc Note"}
|
||||
aria-expanded={open}
|
||||
title={textContent.pagesToggleLabel || "Afficher les pages du bloc note"}
|
||||
title={textContent.pagesToggleLabel || "Afficher les pages du Bloc Note"}
|
||||
>
|
||||
<Icon name="pages" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
// Rôle : rend la barre d'outils de mise en forme du bloc-notes.
|
||||
// Rôle : rend la barre d'outils de mise en forme du Bloc Note.
|
||||
import { CompactDropdown } from "../../../components/CompactDropdown.jsx";
|
||||
import { FormattingColorDropdown } from "./DrawingControls.jsx";
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ export function NotepadToolbar({
|
|||
onHighlightColorApply
|
||||
}) {
|
||||
return (
|
||||
<div className="notepad-toolbar" aria-label={textContent.toolbarLabel || "Mise en page du bloc note"}>
|
||||
<div className="notepad-toolbar" aria-label={textContent.toolbarLabel || "Mise en page du Bloc Note"}>
|
||||
<div className="notepad-format-controls">
|
||||
<div className="notepad-toolbar-group" role="group" aria-label={textContent.textFormatLabel || "Style du texte"}>
|
||||
<ToolbarButton active={activeFormats.bold} title={textContent.boldTitle || "Gras"} onClick={() => onCommand("bold")}>B</ToolbarButton>
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<section className="randomizer-panel randomizer-dice-panel">
|
||||
<div className="randomizer-dice-stage">
|
||||
<RandomizerDie shape={shape} rolling={rolling} value={displayValue} duration={rollDuration} faces={data.faces} />
|
||||
<div className="randomizer-live-results" aria-live="polite">
|
||||
<ResultChips results={displayResults} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="randomizer-dice-grid">
|
||||
<div className="randomizer-dice-form">
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.facesLabel || "Faces"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="2" max="999" value={data.faces} onChange={(event) => updateDiceField("faces", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
<span>{textContent.rollsLabel || "Lancers"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="100" value={data.rolls} onChange={(event) => updateDiceField("rolls", event.target.value)} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant={rolling ? "danger" : "primary"} type="button" onClick={rolling ? stopDice : launchDice}>
|
||||
<Icon name={rolling ? "stop-circle" : "play-circle"} />
|
||||
<span>{rolling ? `${textContent.stopButton || "Arrêter"} ${rollingIndex + 1}/${data.rolls}` : textContent.rollButton || "Lancer"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => `${entry.results.join(" - ")} · ${textContent.totalLabel || "Total"} ${entry.results.reduce((sum, result) => sum + result, 0)}`}
|
||||
onClear={clearDiceHistory}
|
||||
onRemove={removeDiceHistoryEntry}
|
||||
disabled={rolling}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className={`randomizer-die is-${shape} ${rolling ? "is-rolling" : ""}`} aria-live="polite">
|
||||
<svg className="randomizer-die-shape" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
|
||||
{shape === "circle" && <circle cx="60" cy="60" r="52" />}
|
||||
{shape === "triangle" && <path d="M60 9 Q66 9 70 17 L111 96 Q115 105 106 110 L14 110 Q5 105 9 96 L50 17 Q54 9 60 9 Z" />}
|
||||
{shape === "square" && <rect x="10" y="10" width="100" height="100" rx="16" />}
|
||||
{shape === "hexagon" && <path d="M36 9 L84 9 Q92 9 96 16 L115 52 Q119 60 115 68 L96 104 Q92 111 84 111 L36 111 Q28 111 24 104 L5 68 Q1 60 5 52 L24 16 Q28 9 36 9 Z" />}
|
||||
</svg>
|
||||
<span className="randomizer-die-value">
|
||||
<span className="randomizer-die-value-track" style={{ "--randomizer-die-index": valueIndex, "--randomizer-die-duration": `${duration}ms` }} aria-hidden="true">
|
||||
{values.map((item) => <span key={item}>{item}</span>)}
|
||||
</span>
|
||||
<span className="sr-only">{value}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<section className="randomizer-panel randomizer-wheel-panel">
|
||||
<div className="randomizer-wheel-stage" aria-live="polite">
|
||||
<span className="randomizer-wheel-spacer" aria-hidden="true" />
|
||||
<div className="randomizer-wheel-center">
|
||||
<span className="randomizer-wheel-pointer" aria-hidden="true" />
|
||||
<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]} />
|
||||
)) : <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>
|
||||
</div>
|
||||
<div className="randomizer-wheel-legend nds-scrollbox" data-axis="vertical" aria-label={textContent.valuesTitle || "Valeurs"}>
|
||||
{segments.length ? segments.map((segment) => (
|
||||
<div className="randomizer-wheel-legend-row" key={segment.entry.id}>
|
||||
<span className="randomizer-wheel-swatch" style={{ "--randomizer-swatch": WHEEL_COLORS[segment.index % WHEEL_COLORS.length] }} aria-hidden="true" />
|
||||
<span className="randomizer-wheel-label">{segment.entry.label}</span>
|
||||
</div>
|
||||
)) : <p className="randomizer-empty">{textContent.wheelInvalid || "Ajoutez au moins deux valeurs."}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="randomizer-live-results randomizer-wheel-results" aria-live="polite">
|
||||
<ResultChips results={displayResults} />
|
||||
</div>
|
||||
|
||||
<div className="randomizer-wheel-grid">
|
||||
<section className="randomizer-wheel-form">
|
||||
<form className="randomizer-entry-form" onSubmit={addEntries}>
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.valuesImportLabel || "Liste de valeurs"}</span>
|
||||
<textarea className="nds-textarea" data-size="sm" value={entriesText} onChange={(event) => setEntriesText(event.target.value)} placeholder={textContent.valuesImportPlaceholder || "Une valeur par ligne"} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="submit">{textContent.addButton || "Ajouter"}</button>
|
||||
</form>
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.drawsLabel || "Tirages"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="100" value={data.draws} onChange={(event) => onChange({ ...data, draws: clampNumber(event.target.value, 1, 100, data.draws) })} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant={drawing ? "danger" : "primary"} type="button" onClick={drawing ? stopWheel : launchWheel}>
|
||||
<Icon name={drawing ? "stop-circle" : "play-circle"} />
|
||||
<span>{drawing ? textContent.stopButton || "Arrêter" : textContent.drawButton || "Tirer"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="randomizer-wheel-values-section">
|
||||
<div className="randomizer-list-header randomizer-value-row randomizer-wheel-value-row" aria-hidden="true">
|
||||
<span>{textContent.savedValuesLabel || "Valeurs enregistrées"}</span>
|
||||
<span>{textContent.weightLabel || "Poids"}</span>
|
||||
<span />
|
||||
</div>
|
||||
<div className="randomizer-value-list nds-scrollbox" data-axis="vertical" data-variant="ghost" aria-label={textContent.valuesTitle || "Valeurs"}>
|
||||
{data.entries.map((entry) => (
|
||||
<div className="randomizer-value-row randomizer-wheel-value-row" key={entry.id}>
|
||||
<input className="nds-input" data-size="sm" value={entry.label} onChange={(event) => updateEntry(entry.id, { label: event.target.value })} aria-label={textContent.valuePlaceholder || "Valeur"} />
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="999" value={entry.weight} onChange={(event) => updateEntry(entry.id, { weight: clampNumber(event.target.value, 1, 999, entry.weight) })} aria-label={`${textContent.weightLabel || "Poids"} ${entry.label}`} />
|
||||
<button className="nds-icon-button" data-size="sm" data-variant="danger" type="button" onClick={() => removeEntry(entry.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${entry.label}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="button" onClick={clearEntries} disabled={!data.entries.length || drawing}>{textContent.clearValuesButton || "Supprimer toutes les valeurs"}</button>
|
||||
</section>
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => entry.results.join(" - ")}
|
||||
onClear={clearWheelHistory}
|
||||
onRemove={removeWheelHistoryEntry}
|
||||
disabled={drawing}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function TeamsRandomizer({ data, textContent, onChange, context }) {
|
||||
const exclusionDraft = useDraftForm(DEFAULT_EXCLUSION_DRAFT);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
const [animationTeams, setAnimationTeams] = useState([]);
|
||||
const [reelPlayers, setReelPlayers] = useState([]);
|
||||
const [reelIndex, setReelIndex] = useState(0);
|
||||
const [reelDuration, setReelDuration] = useState(TEAM_REEL_DELAYS[0]);
|
||||
const [namesText, setNamesText] = useState("");
|
||||
const timersRef = useRef([]);
|
||||
const activePlayers = data.players.filter((player) => player.active);
|
||||
const storedSelectionCount = clampNumber(data.playerSelectionCount, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, data.teamCount);
|
||||
const [selectionCountDraft, setSelectionCountDraft] = useState(String(storedSelectionCount));
|
||||
const selectionCount = clampNumber(selectionCountDraft, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, storedSelectionCount);
|
||||
const displayedTeams = animating ? animationTeams : data.teams;
|
||||
const exclusionMode = exclusionDraft.values.mode === "source" ? "source" : "group";
|
||||
|
||||
useEffect(() => {
|
||||
setSelectionCountDraft(String(storedSelectionCount));
|
||||
}, [storedSelectionCount]);
|
||||
|
||||
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 clearTeamTimers() {
|
||||
timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
|
||||
timersRef.current = [];
|
||||
}
|
||||
|
||||
function commitSelectionCount(value = selectionCountDraft) {
|
||||
const nextSelectionCount = clampNumber(value, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, storedSelectionCount);
|
||||
setSelectionCountDraft(String(nextSelectionCount));
|
||||
onChange({ ...data, playerSelectionCount: nextSelectionCount });
|
||||
}
|
||||
|
||||
function importPlayers(event) {
|
||||
event.preventDefault();
|
||||
const availableSlots = RANDOMIZER_LIMITS.teamPlayersMax - data.players.length;
|
||||
const names = namesText
|
||||
.split(/\r?\n/)
|
||||
.map((name) => name.trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, availableSlots);
|
||||
if (!names.length) return;
|
||||
onChange({
|
||||
...data,
|
||||
players: [
|
||||
...data.players,
|
||||
...names.map((name) => ({ id: context.uid("randomizer"), name, score: 0, active: true }))
|
||||
]
|
||||
});
|
||||
setNamesText("");
|
||||
}
|
||||
|
||||
function updatePlayer(playerId, patch) {
|
||||
onChange({ ...data, players: data.players.map((player) => player.id === playerId ? { ...player, ...patch } : player) });
|
||||
}
|
||||
|
||||
function removePlayer(playerId) {
|
||||
onChange({
|
||||
...data,
|
||||
players: data.players.filter((player) => player.id !== playerId),
|
||||
exclusions: data.exclusions
|
||||
.filter((exclusion) => exclusion.playerAId !== playerId)
|
||||
.map((exclusion) => ({ ...exclusion, playerBIds: (exclusion.playerBIds || []).filter((targetId) => targetId !== playerId) }))
|
||||
.filter((exclusion) => exclusion.playerBIds.length)
|
||||
});
|
||||
}
|
||||
|
||||
function clearPlayers() {
|
||||
onChange({ ...data, players: [], exclusions: [], teams: [] });
|
||||
}
|
||||
|
||||
function toggleExclusionTarget(playerId) {
|
||||
const currentIds = exclusionDraft.values.playerBIds || [];
|
||||
exclusionDraft.setField(
|
||||
"playerBIds",
|
||||
currentIds.includes(playerId) ? currentIds.filter((targetId) => targetId !== playerId) : [...currentIds, playerId]
|
||||
);
|
||||
}
|
||||
|
||||
function addExclusion(event) {
|
||||
exclusionDraft.handleSubmit(event, (draft, { reset }) => {
|
||||
const mode = draft.mode === "source" ? "source" : "group";
|
||||
const selectedIds = [...new Set(Array.isArray(draft.playerBIds) ? draft.playerBIds.filter(Boolean) : [])];
|
||||
const playerAId = mode === "group" ? selectedIds[0] : draft.playerAId;
|
||||
const playerBIds = mode === "group" ? selectedIds.slice(1) : selectedIds.filter((playerId) => playerId !== draft.playerAId);
|
||||
if (!playerAId || !playerBIds.length) return;
|
||||
const exists = data.exclusions.some((exclusion) => exclusion.playerAId === playerAId && (exclusion.mode || "source") === mode && [...(exclusion.playerBIds || [])].sort().join(":") === [...playerBIds].sort().join(":"));
|
||||
if (exists) return;
|
||||
onChange({ ...data, exclusions: [...data.exclusions, { id: context.uid("randomizer"), playerAId, playerBIds, mode }] });
|
||||
reset();
|
||||
});
|
||||
}
|
||||
|
||||
function launchTeams() {
|
||||
clearTeamTimers();
|
||||
const selectedPlayers = data.playerSelectionMode === "count" ? pickRandomItems(activePlayers, Math.min(selectionCount, activePlayers.length)) : activePlayers;
|
||||
const selectedExclusions = filterExclusionsForPlayers(data.exclusions, selectedPlayers);
|
||||
const result = createBalancedTeams(selectedPlayers, data.teamCount, selectedExclusions);
|
||||
if (!result.ok) {
|
||||
context.notify?.(result.error === "not_enough_players" ? textContent.notEnoughPlayers || "Pas assez de joueurs actifs." : textContent.constraintsImpossible || "Contraintes impossibles à satisfaire.");
|
||||
return;
|
||||
}
|
||||
const historyEntry = { id: context.uid("randomizer"), at: new Date().toISOString(), teams: result.teams };
|
||||
if (hasReducedMotion()) {
|
||||
onChange({ ...data, teams: result.teams, history: addRandomizerHistory(data.history, historyEntry) });
|
||||
return;
|
||||
}
|
||||
const emptyTeams = result.teams.map((team) => ({ ...team, score: 0, players: [] }));
|
||||
const assignments = result.teams.flatMap((team) => team.players.map((player) => ({ teamId: team.id, player })));
|
||||
setAnimating(true);
|
||||
setAnimationTeams(emptyTeams);
|
||||
setReelPlayers(selectedPlayers);
|
||||
setReelIndex(0);
|
||||
setReelDuration(TEAM_REEL_DELAYS[0]);
|
||||
|
||||
function animateAssignment(index) {
|
||||
const assignment = assignments[index];
|
||||
if (!assignment) {
|
||||
setAnimating(false);
|
||||
setReelPlayers([]);
|
||||
setReelIndex(0);
|
||||
onChange({ ...data, teams: result.teams, history: addRandomizerHistory(data.history, historyEntry) });
|
||||
return;
|
||||
}
|
||||
|
||||
let ticks = 0;
|
||||
const tick = () => {
|
||||
ticks += 1;
|
||||
const isFinalTick = ticks >= TEAM_REEL_DELAYS.length;
|
||||
const tickDelay = TEAM_REEL_DELAYS[Math.min(ticks, TEAM_REEL_DELAYS.length - 1)];
|
||||
const nextIndex = isFinalTick
|
||||
? Math.max(0, selectedPlayers.findIndex((player) => player.id === assignment.player.id))
|
||||
: Math.floor(Math.random() * selectedPlayers.length);
|
||||
setReelIndex(nextIndex);
|
||||
setReelDuration(Math.max(54, Math.round(tickDelay * 0.86)));
|
||||
if (!isFinalTick) {
|
||||
queueTimer(tick, tickDelay);
|
||||
return;
|
||||
}
|
||||
queueTimer(() => {
|
||||
setAnimationTeams((currentTeams) => currentTeams.map((team) => {
|
||||
if (team.id !== assignment.teamId) return team;
|
||||
return {
|
||||
...team,
|
||||
score: team.score + assignment.player.score,
|
||||
players: [...team.players, { ...assignment.player, arriving: true }]
|
||||
};
|
||||
}));
|
||||
queueTimer(() => animateAssignment(index + 1), 260);
|
||||
}, 220);
|
||||
};
|
||||
tick();
|
||||
}
|
||||
|
||||
animateAssignment(0);
|
||||
}
|
||||
|
||||
function clearTeamsHistory() {
|
||||
onChange({ ...data, history: [] });
|
||||
}
|
||||
|
||||
function removeTeamsHistoryEntry(entryId) {
|
||||
onChange({ ...data, history: data.history.filter((entry) => entry.id !== entryId) });
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="randomizer-panel randomizer-teams-panel">
|
||||
<div className="randomizer-team-stage">
|
||||
<div className={`randomizer-team-reel ${animating ? "is-spinning" : ""}`} aria-live="polite">
|
||||
{reelPlayers.length ? (
|
||||
<>
|
||||
<div className="randomizer-team-reel-track" style={{ "--randomizer-reel-index": reelIndex, "--randomizer-reel-duration": `${reelDuration}ms` }} aria-hidden="true">
|
||||
{reelPlayers.map((player) => <span key={player.id}>{player.name}</span>)}
|
||||
</div>
|
||||
<span className="sr-only">{reelPlayers[reelIndex]?.name || ""}</span>
|
||||
</>
|
||||
) : <span className="randomizer-team-reel-placeholder" />}
|
||||
</div>
|
||||
<div className={`randomizer-teams ${displayedTeams.length === 1 ? "is-single-team" : ""} ${animating ? "is-animating" : ""}`} aria-live="polite">
|
||||
{displayedTeams.length ? displayedTeams.map((team) => (
|
||||
<article className="randomizer-team" key={team.id}>
|
||||
<h3>{team.name}</h3>
|
||||
<span>{textContent.teamScoreLabel || "Score"} {team.score}</span>
|
||||
{team.players.map((player) => <b className={player.arriving ? "is-arriving" : ""} key={player.id}>{player.name}</b>)}
|
||||
</article>
|
||||
)) : <p className="randomizer-empty">{textContent.emptyTeams ?? ""}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="randomizer-team-settings-grid">
|
||||
<section className="randomizer-team-basic">
|
||||
<form className="randomizer-player-import-form" onSubmit={importPlayers}>
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.namesImportLabel || "Liste de noms"}</span>
|
||||
<textarea className="nds-textarea" data-size="sm" value={namesText} onChange={(event) => setNamesText(event.target.value)} placeholder={textContent.namesImportPlaceholder || "Un nom par ligne"} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="submit">{textContent.importNamesButton || "Ajouter"}</button>
|
||||
</form>
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.teamCountLabel || "Équipes"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min={RANDOMIZER_LIMITS.teamCountMin} max={RANDOMIZER_LIMITS.teamCountMax} value={data.teamCount} onChange={(event) => onChange({ ...data, teamCount: clampNumber(event.target.value, RANDOMIZER_LIMITS.teamCountMin, RANDOMIZER_LIMITS.teamCountMax, data.teamCount) })} />
|
||||
</label>
|
||||
<label>
|
||||
<span>{textContent.playerSelectionModeLabel || "Répartition"}</span>
|
||||
<select className="nds-select" data-size="sm" value={data.playerSelectionMode} onChange={(event) => onChange({ ...data, playerSelectionMode: event.target.value })}>
|
||||
<option value="all">{textContent.playerSelectionAll || "Tous"}</option>
|
||||
<option value="count">{textContent.playerSelectionCount || "Nombre défini"}</option>
|
||||
</select>
|
||||
</label>
|
||||
{data.playerSelectionMode === "count" && (
|
||||
<label>
|
||||
<span>{textContent.playerSelectionCountLabel || "Nombre"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min={data.teamCount} max={RANDOMIZER_LIMITS.teamPlayersMax} value={selectionCountDraft} onChange={(event) => setSelectionCountDraft(event.target.value)} onBlur={(event) => commitSelectionCount(event.target.value)} />
|
||||
</label>
|
||||
)}
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="button" onClick={launchTeams} disabled={animating}>
|
||||
<Icon name="play-circle" />
|
||||
<span>{textContent.createTeamsButton || "Créer les équipes"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="randomizer-team-advanced">
|
||||
<section className="randomizer-team-advanced-section">
|
||||
<div className="randomizer-list-header randomizer-value-row randomizer-player-row" aria-hidden="true">
|
||||
<span>{textContent.activeLabel || "Actif"}</span>
|
||||
<span>{textContent.nameLabel || "Nom"}</span>
|
||||
<span>{textContent.scoreLabel || "Score"}</span>
|
||||
<span />
|
||||
</div>
|
||||
<div className="randomizer-value-list nds-scrollbox" data-axis="vertical" data-variant="ghost">
|
||||
{data.players.map((player) => (
|
||||
<div className="randomizer-value-row randomizer-player-row" key={player.id}>
|
||||
<input className="nds-checkbox" data-size="sm" type="checkbox" checked={player.active} onChange={(event) => updatePlayer(player.id, { active: event.target.checked })} aria-label={`${textContent.activeLabel || "Actif"} ${player.name}`} />
|
||||
<input className="nds-input" data-size="sm" value={player.name} onChange={(event) => updatePlayer(player.id, { name: event.target.value })} aria-label={textContent.nameLabel || "Nom"} />
|
||||
<input className="nds-input" data-size="sm" type="number" min="0" max="9999" value={player.score} onChange={(event) => updatePlayer(player.id, { score: clampNumber(event.target.value, 0, 9999, player.score) })} aria-label={textContent.scoreLabel || "Score"} />
|
||||
<button className="nds-icon-button" data-size="sm" data-variant="danger" type="button" onClick={() => removePlayer(player.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${player.name}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="button" onClick={clearPlayers} disabled={!data.players.length || animating}>{textContent.clearNamesButton || "Supprimer tous les noms"}</button>
|
||||
</section>
|
||||
<section className="randomizer-team-advanced-section randomizer-exclusion-block">
|
||||
<form className={`inline-form randomizer-exclusion-form ${exclusionMode === "group" ? "is-group-mode" : ""}`} onSubmit={addExclusion}>
|
||||
<label className="randomizer-field randomizer-exclusion-mode-field">
|
||||
<span>{textContent.exclusionModeLabel || "Type"}</span>
|
||||
<select className="nds-select" data-size="sm" value={exclusionMode} onChange={(event) => exclusionDraft.updateValues({ mode: event.target.value, playerAId: event.target.value === "group" ? "" : exclusionDraft.values.playerAId })} aria-label={textContent.exclusionModeLabel || "Type"}>
|
||||
<option value="group">{textContent.exclusionModeGroup || "Tous séparés"}</option>
|
||||
<option value="source">{textContent.exclusionModeSource || "Exclusions granulaires"}</option>
|
||||
</select>
|
||||
</label>
|
||||
{exclusionMode === "source" && (
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.firstPlayerLabel || "Nom source"}</span>
|
||||
<select className="nds-select" data-size="sm" value={exclusionDraft.values.playerAId} onChange={(event) => exclusionDraft.updateValues({ playerAId: event.target.value, playerBIds: (exclusionDraft.values.playerBIds || []).filter((playerId) => playerId !== event.target.value) })} aria-label={textContent.firstPlayerLabel || "Nom source"}>
|
||||
<option value="">{textContent.selectNamesButton || "Choisir"}</option>
|
||||
{activePlayers.map((player) => <option key={player.id} value={player.id}>{player.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<div className="randomizer-field">
|
||||
<span>{textContent.secondPlayerLabel || "Noms exclus"}</span>
|
||||
<CompactDropdown
|
||||
className="randomizer-checkbox-dropdown"
|
||||
menuClassName="randomizer-checkbox-menu nds-scrollbox"
|
||||
label={textContent.secondPlayerLabel || "Noms exclus"}
|
||||
renderTrigger={({ open, toggle }) => (
|
||||
<button className={`randomizer-multi-trigger nds-select-trigger ${open ? "active" : ""}`} data-size="sm" type="button" onClick={toggle} aria-expanded={open}>
|
||||
<span className="randomizer-multi-trigger-label">{exclusionDraft.values.playerBIds?.length ? `${exclusionDraft.values.playerBIds.length} ${textContent.selectedNamesLabel || "noms"}` : textContent.selectNamesButton || "Choisir"}</span>
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
{activePlayers.map((player) => (
|
||||
<label className="randomizer-checkbox-option" key={player.id}>
|
||||
<input className="nds-checkbox" data-size="sm" type="checkbox" checked={(exclusionDraft.values.playerBIds || []).includes(player.id)} disabled={exclusionMode === "source" && player.id === exclusionDraft.values.playerAId} onChange={() => toggleExclusionTarget(player.id)} />
|
||||
<span>{player.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</CompactDropdown>
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="submit">{textContent.addExclusionButton || "Exclure"}</button>
|
||||
</form>
|
||||
<span className="randomizer-section-label">{textContent.exclusionsListLabel || "Combinaisons exclues"}</span>
|
||||
<div className="randomizer-exclusions">
|
||||
{data.exclusions.map((exclusion) => {
|
||||
const playerA = data.players.find((player) => player.id === exclusion.playerAId);
|
||||
const playerBs = (exclusion.playerBIds || []).map((playerId) => data.players.find((player) => player.id === playerId)).filter(Boolean);
|
||||
if (!playerA || !playerBs.length) return null;
|
||||
const exclusionLabel = exclusion.mode === "group"
|
||||
? [playerA, ...playerBs].map((player) => player.name).join(" / ")
|
||||
: `${playerA.name} / ${playerBs.map((player) => player.name).join(" ou ")}`;
|
||||
return (
|
||||
<span className="randomizer-chip" key={exclusion.id}>
|
||||
<span className="randomizer-chip-label">{exclusionLabel}</span>
|
||||
<button className="nds-icon-button" data-size="xxs" data-variant="danger" type="button" onClick={() => onChange({ ...data, exclusions: data.exclusions.filter((item) => item.id !== exclusion.id) })} aria-label={`${textContent.deleteTitle || "Supprimer"} ${playerA.name}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => `${entry.teams.length} ${entry.teams.length > 1 ? textContent.teamsPluralLabel || "équipes" : textContent.teamsSingularLabel || "équipe"}`}
|
||||
renderDetails={(entry) => (
|
||||
<div className={`randomizer-history-teams ${entry.teams.length > 4 ? "has-team-rows" : ""}`}>
|
||||
{entry.teams.map((team) => (
|
||||
<div className="randomizer-history-team" key={team.id}>
|
||||
<strong>{team.name}</strong>
|
||||
<span>{textContent.teamScoreLabel || "Score"} {team.score}</span>
|
||||
<ul>
|
||||
{team.players.map((player) => <li key={player.id}>{player.name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
onClear={clearTeamsHistory}
|
||||
onRemove={removeTeamsHistoryEntry}
|
||||
disabled={animating}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
function ResultChips({ results, onRemove, disabled = false, textContent = {} }) {
|
||||
if (!results?.length) return null;
|
||||
return (
|
||||
<div className="randomizer-results">
|
||||
{results.map((result, index) => (
|
||||
<span className="randomizer-chip" key={`${result}-${index}`}>
|
||||
{result}
|
||||
{onRemove && (
|
||||
<button className="nds-icon-button" data-size="xs" data-variant="danger" type="button" onClick={() => onRemove(index)} disabled={disabled} aria-label={`${textContent.deleteTitle || "Supprimer"} ${result}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RandomizerHistory({ title, history, renderEntry, renderDetails, onClear, onRemove, disabled = false, textContent = {}, showEmpty = false }) {
|
||||
const hasHistory = Boolean(history?.length);
|
||||
if (!hasHistory && !showEmpty) return null;
|
||||
return (
|
||||
<section className="randomizer-history nds-scrollbox" data-axis="vertical">
|
||||
<header>
|
||||
<h3>{title}</h3>
|
||||
<button className="nds-button randomizer-history-clear" data-size="xs" type="button" onClick={onClear} disabled={disabled || !hasHistory}>{textContent.clearHistoryButton || "Effacer tout"}</button>
|
||||
</header>
|
||||
{hasHistory ? (
|
||||
<div className="randomizer-list">
|
||||
{history.map((entry, index) => (
|
||||
<div className={`randomizer-history-row ${index === 0 ? "is-latest" : ""} ${onRemove ? "has-action" : ""}`} key={entry.id}>
|
||||
{renderDetails ? (
|
||||
<details className="randomizer-history-main randomizer-history-accordion">
|
||||
<summary>
|
||||
<Icon name="chevron-down" />
|
||||
<span className="randomizer-history-value">{renderEntry(entry)}</span>
|
||||
<time dateTime={entry.at}>{formatDateTime(entry.at)}</time>
|
||||
</summary>
|
||||
{renderDetails(entry)}
|
||||
</details>
|
||||
) : (
|
||||
<div className="randomizer-history-main">
|
||||
<span className="randomizer-history-value">{renderEntry(entry)}</span>
|
||||
<time dateTime={entry.at}>{formatDateTime(entry.at)}</time>
|
||||
</div>
|
||||
)}
|
||||
{onRemove && (
|
||||
<button className="nds-icon-button" data-size="md" data-variant="danger" type="button" onClick={() => onRemove(entry.id)} disabled={disabled} aria-label={`${textContent.deleteTitle || "Supprimer"} ${formatDateTime(entry.at)}`}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : <p className="randomizer-empty">{textContent.emptyHistory || "Aucun historique."}</p>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,168 @@
|
|||
// Rôle : gère l'onglet dé du Randomizer et son animation.
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../../components/Icon.jsx";
|
||||
import { RANDOMIZER_LIMITS, addRandomizerHistory, clampNumber, getDiceShape, rollDice } from "../randomizerUtils.js";
|
||||
import { ResultChips, RandomizerHistory } from "./RandomizerShared.jsx";
|
||||
import { DICE_ROLL_DELAYS, DRAW_PAUSE_MS, hasReducedMotion } from "./randomizerUiUtils.js";
|
||||
|
||||
export 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 (
|
||||
<section className="randomizer-panel randomizer-dice-panel">
|
||||
<div className="randomizer-dice-stage">
|
||||
<RandomizerDie shape={shape} rolling={rolling} value={displayValue} duration={rollDuration} faces={data.faces} />
|
||||
<div className="randomizer-live-results" aria-live="polite">
|
||||
<ResultChips results={displayResults} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="randomizer-dice-grid">
|
||||
<div className="randomizer-dice-form">
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.facesLabel || "Faces"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="2" max="999" value={data.faces} onChange={(event) => updateDiceField("faces", event.target.value)} />
|
||||
</label>
|
||||
<label>
|
||||
<span>{textContent.rollsLabel || "Lancers"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="100" value={data.rolls} onChange={(event) => updateDiceField("rolls", event.target.value)} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant={rolling ? "danger" : "primary"} type="button" onClick={rolling ? stopDice : launchDice}>
|
||||
<Icon name={rolling ? "stop-circle" : "play-circle"} />
|
||||
<span>{rolling ? `${textContent.stopButton || "Arrêter"} ${rollingIndex + 1}/${data.rolls}` : textContent.rollButton || "Lancer"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => `${entry.results.join(" - ")} · ${textContent.totalLabel || "Total"} ${entry.results.reduce((sum, result) => sum + result, 0)}`}
|
||||
onClear={clearDiceHistory}
|
||||
onRemove={removeDiceHistoryEntry}
|
||||
disabled={rolling}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
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 (
|
||||
<div className={`randomizer-die is-${shape} ${rolling ? "is-rolling" : ""}`} aria-live="polite">
|
||||
<svg className="randomizer-die-shape" viewBox="0 0 120 120" aria-hidden="true" focusable="false">
|
||||
{shape === "circle" && <circle cx="60" cy="60" r="52" />}
|
||||
{shape === "triangle" && <path d="M60 9 Q66 9 70 17 L111 96 Q115 105 106 110 L14 110 Q5 105 9 96 L50 17 Q54 9 60 9 Z" />}
|
||||
{shape === "square" && <rect x="10" y="10" width="100" height="100" rx="16" />}
|
||||
{shape === "hexagon" && <path d="M36 9 L84 9 Q92 9 96 16 L115 52 Q119 60 115 68 L96 104 Q92 111 84 111 L36 111 Q28 111 24 104 L5 68 Q1 60 5 52 L24 16 Q28 9 36 9 Z" />}
|
||||
</svg>
|
||||
<span className="randomizer-die-value">
|
||||
<span className="randomizer-die-value-track" style={{ "--randomizer-die-index": valueIndex, "--randomizer-die-duration": `${duration}ms` }} aria-hidden="true">
|
||||
{values.map((item) => <span key={item}>{item}</span>)}
|
||||
</span>
|
||||
<span className="sr-only">{value}</span>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
// Rôle : fournit les composants partagés de résultats et historique du Randomizer.
|
||||
import { Icon } from "../../../../components/Icon.jsx";
|
||||
import { formatDateTime } from "./randomizerUiUtils.js";
|
||||
|
||||
export function ResultChips({ results, onRemove, disabled = false, textContent = {} }) {
|
||||
if (!results?.length) return null;
|
||||
return (
|
||||
<div className="randomizer-results">
|
||||
{results.map((result, index) => (
|
||||
<span className="randomizer-chip" key={`${result}-${index}`}>
|
||||
{result}
|
||||
{onRemove && (
|
||||
<button className="nds-icon-button" data-size="xs" data-variant="danger" type="button" onClick={() => onRemove(index)} disabled={disabled} aria-label={`${textContent.deleteTitle || "Supprimer"} ${result}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function RandomizerHistory({ title, history, renderEntry, renderDetails, onClear, onRemove, disabled = false, textContent = {}, showEmpty = false }) {
|
||||
const hasHistory = Boolean(history?.length);
|
||||
if (!hasHistory && !showEmpty) return null;
|
||||
return (
|
||||
<section className="randomizer-history nds-scrollbox" data-axis="vertical">
|
||||
<header>
|
||||
<h3>{title}</h3>
|
||||
<button className="nds-button randomizer-history-clear" data-size="xs" type="button" onClick={onClear} disabled={disabled || !hasHistory}>{textContent.clearHistoryButton || "Effacer tout"}</button>
|
||||
</header>
|
||||
{hasHistory ? (
|
||||
<div className="randomizer-list">
|
||||
{history.map((entry, index) => (
|
||||
<div className={`randomizer-history-row ${index === 0 ? "is-latest" : ""} ${onRemove ? "has-action" : ""}`} key={entry.id}>
|
||||
{renderDetails ? (
|
||||
<details className="randomizer-history-main randomizer-history-accordion">
|
||||
<summary>
|
||||
<Icon name="chevron-down" />
|
||||
<span className="randomizer-history-value">{renderEntry(entry)}</span>
|
||||
<time dateTime={entry.at}>{formatDateTime(entry.at)}</time>
|
||||
</summary>
|
||||
{renderDetails(entry)}
|
||||
</details>
|
||||
) : (
|
||||
<div className="randomizer-history-main">
|
||||
<span className="randomizer-history-value">{renderEntry(entry)}</span>
|
||||
<time dateTime={entry.at}>{formatDateTime(entry.at)}</time>
|
||||
</div>
|
||||
)}
|
||||
{onRemove && (
|
||||
<button className="nds-icon-button" data-size="md" data-variant="danger" type="button" onClick={() => onRemove(entry.id)} disabled={disabled} aria-label={`${textContent.deleteTitle || "Supprimer"} ${formatDateTime(entry.at)}`}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : <p className="randomizer-empty">{textContent.emptyHistory || "Aucun historique."}</p>}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,356 @@
|
|||
// Rôle : gère l'onglet équipes équilibrées du Randomizer et ses exclusions.
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { CompactDropdown } from "../../../../components/CompactDropdown.jsx";
|
||||
import { Icon } from "../../../../components/Icon.jsx";
|
||||
import { useDraftForm } from "../../../../hooks/useDraftForm.js";
|
||||
import { RANDOMIZER_LIMITS, addRandomizerHistory, clampNumber, createBalancedTeams, filterExclusionsForPlayers } from "../randomizerUtils.js";
|
||||
import { RandomizerHistory } from "./RandomizerShared.jsx";
|
||||
import { DEFAULT_EXCLUSION_DRAFT, TEAM_REEL_DELAYS, hasReducedMotion, pickRandomItems } from "./randomizerUiUtils.js";
|
||||
|
||||
export function TeamsRandomizer({ data, textContent, onChange, context }) {
|
||||
const exclusionDraft = useDraftForm(DEFAULT_EXCLUSION_DRAFT);
|
||||
const [animating, setAnimating] = useState(false);
|
||||
const [animationTeams, setAnimationTeams] = useState([]);
|
||||
const [reelPlayers, setReelPlayers] = useState([]);
|
||||
const [reelIndex, setReelIndex] = useState(0);
|
||||
const [reelDuration, setReelDuration] = useState(TEAM_REEL_DELAYS[0]);
|
||||
const [namesText, setNamesText] = useState("");
|
||||
const timersRef = useRef([]);
|
||||
const activePlayers = data.players.filter((player) => player.active);
|
||||
const storedSelectionCount = clampNumber(data.playerSelectionCount, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, data.teamCount);
|
||||
const [selectionCountDraft, setSelectionCountDraft] = useState(String(storedSelectionCount));
|
||||
const selectionCount = clampNumber(selectionCountDraft, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, storedSelectionCount);
|
||||
const displayedTeams = animating ? animationTeams : data.teams;
|
||||
const exclusionMode = exclusionDraft.values.mode === "source" ? "source" : "group";
|
||||
|
||||
useEffect(() => {
|
||||
setSelectionCountDraft(String(storedSelectionCount));
|
||||
}, [storedSelectionCount]);
|
||||
|
||||
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 clearTeamTimers() {
|
||||
timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
|
||||
timersRef.current = [];
|
||||
}
|
||||
|
||||
function commitSelectionCount(value = selectionCountDraft) {
|
||||
const nextSelectionCount = clampNumber(value, data.teamCount, RANDOMIZER_LIMITS.teamPlayersMax, storedSelectionCount);
|
||||
setSelectionCountDraft(String(nextSelectionCount));
|
||||
onChange({ ...data, playerSelectionCount: nextSelectionCount });
|
||||
}
|
||||
|
||||
function importPlayers(event) {
|
||||
event.preventDefault();
|
||||
const availableSlots = RANDOMIZER_LIMITS.teamPlayersMax - data.players.length;
|
||||
const names = namesText
|
||||
.split(/\r?\n/)
|
||||
.map((name) => name.trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, availableSlots);
|
||||
if (!names.length) return;
|
||||
onChange({
|
||||
...data,
|
||||
players: [
|
||||
...data.players,
|
||||
...names.map((name) => ({ id: context.uid("randomizer"), name, score: 0, active: true }))
|
||||
]
|
||||
});
|
||||
setNamesText("");
|
||||
}
|
||||
|
||||
function updatePlayer(playerId, patch) {
|
||||
onChange({ ...data, players: data.players.map((player) => player.id === playerId ? { ...player, ...patch } : player) });
|
||||
}
|
||||
|
||||
function removePlayer(playerId) {
|
||||
onChange({
|
||||
...data,
|
||||
players: data.players.filter((player) => player.id !== playerId),
|
||||
exclusions: data.exclusions
|
||||
.filter((exclusion) => exclusion.playerAId !== playerId)
|
||||
.map((exclusion) => ({ ...exclusion, playerBIds: (exclusion.playerBIds || []).filter((targetId) => targetId !== playerId) }))
|
||||
.filter((exclusion) => exclusion.playerBIds.length)
|
||||
});
|
||||
}
|
||||
|
||||
function clearPlayers() {
|
||||
onChange({ ...data, players: [], exclusions: [], teams: [] });
|
||||
}
|
||||
|
||||
function toggleExclusionTarget(playerId) {
|
||||
const currentIds = exclusionDraft.values.playerBIds || [];
|
||||
exclusionDraft.setField(
|
||||
"playerBIds",
|
||||
currentIds.includes(playerId) ? currentIds.filter((targetId) => targetId !== playerId) : [...currentIds, playerId]
|
||||
);
|
||||
}
|
||||
|
||||
function addExclusion(event) {
|
||||
exclusionDraft.handleSubmit(event, (draft, { reset }) => {
|
||||
const mode = draft.mode === "source" ? "source" : "group";
|
||||
const selectedIds = [...new Set(Array.isArray(draft.playerBIds) ? draft.playerBIds.filter(Boolean) : [])];
|
||||
const playerAId = mode === "group" ? selectedIds[0] : draft.playerAId;
|
||||
const playerBIds = mode === "group" ? selectedIds.slice(1) : selectedIds.filter((playerId) => playerId !== draft.playerAId);
|
||||
if (!playerAId || !playerBIds.length) return;
|
||||
const exists = data.exclusions.some((exclusion) => exclusion.playerAId === playerAId && (exclusion.mode || "source") === mode && [...(exclusion.playerBIds || [])].sort().join(":") === [...playerBIds].sort().join(":"));
|
||||
if (exists) return;
|
||||
onChange({ ...data, exclusions: [...data.exclusions, { id: context.uid("randomizer"), playerAId, playerBIds, mode }] });
|
||||
reset();
|
||||
});
|
||||
}
|
||||
|
||||
function launchTeams() {
|
||||
clearTeamTimers();
|
||||
const selectedPlayers = data.playerSelectionMode === "count" ? pickRandomItems(activePlayers, Math.min(selectionCount, activePlayers.length)) : activePlayers;
|
||||
const selectedExclusions = filterExclusionsForPlayers(data.exclusions, selectedPlayers);
|
||||
const result = createBalancedTeams(selectedPlayers, data.teamCount, selectedExclusions);
|
||||
if (!result.ok) {
|
||||
context.notify?.(result.error === "not_enough_players" ? textContent.notEnoughPlayers || "Pas assez de joueurs actifs." : textContent.constraintsImpossible || "Contraintes impossibles à satisfaire.");
|
||||
return;
|
||||
}
|
||||
const historyEntry = { id: context.uid("randomizer"), at: new Date().toISOString(), teams: result.teams };
|
||||
if (hasReducedMotion()) {
|
||||
onChange({ ...data, teams: result.teams, history: addRandomizerHistory(data.history, historyEntry) });
|
||||
return;
|
||||
}
|
||||
const emptyTeams = result.teams.map((team) => ({ ...team, score: 0, players: [] }));
|
||||
const assignments = result.teams.flatMap((team) => team.players.map((player) => ({ teamId: team.id, player })));
|
||||
setAnimating(true);
|
||||
setAnimationTeams(emptyTeams);
|
||||
setReelPlayers(selectedPlayers);
|
||||
setReelIndex(0);
|
||||
setReelDuration(TEAM_REEL_DELAYS[0]);
|
||||
|
||||
function animateAssignment(index) {
|
||||
const assignment = assignments[index];
|
||||
if (!assignment) {
|
||||
setAnimating(false);
|
||||
setReelPlayers([]);
|
||||
setReelIndex(0);
|
||||
onChange({ ...data, teams: result.teams, history: addRandomizerHistory(data.history, historyEntry) });
|
||||
return;
|
||||
}
|
||||
|
||||
let ticks = 0;
|
||||
const tick = () => {
|
||||
ticks += 1;
|
||||
const isFinalTick = ticks >= TEAM_REEL_DELAYS.length;
|
||||
const tickDelay = TEAM_REEL_DELAYS[Math.min(ticks, TEAM_REEL_DELAYS.length - 1)];
|
||||
const nextIndex = isFinalTick
|
||||
? Math.max(0, selectedPlayers.findIndex((player) => player.id === assignment.player.id))
|
||||
: Math.floor(Math.random() * selectedPlayers.length);
|
||||
setReelIndex(nextIndex);
|
||||
setReelDuration(Math.max(54, Math.round(tickDelay * 0.86)));
|
||||
if (!isFinalTick) {
|
||||
queueTimer(tick, tickDelay);
|
||||
return;
|
||||
}
|
||||
queueTimer(() => {
|
||||
setAnimationTeams((currentTeams) => currentTeams.map((team) => {
|
||||
if (team.id !== assignment.teamId) return team;
|
||||
return {
|
||||
...team,
|
||||
score: team.score + assignment.player.score,
|
||||
players: [...team.players, { ...assignment.player, arriving: true }]
|
||||
};
|
||||
}));
|
||||
queueTimer(() => animateAssignment(index + 1), 260);
|
||||
}, 220);
|
||||
};
|
||||
tick();
|
||||
}
|
||||
|
||||
animateAssignment(0);
|
||||
}
|
||||
|
||||
function clearTeamsHistory() {
|
||||
onChange({ ...data, history: [] });
|
||||
}
|
||||
|
||||
function removeTeamsHistoryEntry(entryId) {
|
||||
onChange({ ...data, history: data.history.filter((entry) => entry.id !== entryId) });
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="randomizer-panel randomizer-teams-panel">
|
||||
<div className="randomizer-team-stage">
|
||||
<div className={`randomizer-team-reel ${animating ? "is-spinning" : ""}`} aria-live="polite">
|
||||
{reelPlayers.length ? (
|
||||
<>
|
||||
<div className="randomizer-team-reel-track" style={{ "--randomizer-reel-index": reelIndex, "--randomizer-reel-duration": `${reelDuration}ms` }} aria-hidden="true">
|
||||
{reelPlayers.map((player) => <span key={player.id}>{player.name}</span>)}
|
||||
</div>
|
||||
<span className="sr-only">{reelPlayers[reelIndex]?.name || ""}</span>
|
||||
</>
|
||||
) : <span className="randomizer-team-reel-placeholder" />}
|
||||
</div>
|
||||
<div className={`randomizer-teams ${displayedTeams.length === 1 ? "is-single-team" : ""} ${animating ? "is-animating" : ""}`} aria-live="polite">
|
||||
{displayedTeams.length ? displayedTeams.map((team) => (
|
||||
<article className="randomizer-team" key={team.id}>
|
||||
<h3>{team.name}</h3>
|
||||
<span>{textContent.teamScoreLabel || "Score"} {team.score}</span>
|
||||
{team.players.map((player) => <b className={player.arriving ? "is-arriving" : ""} key={player.id}>{player.name}</b>)}
|
||||
</article>
|
||||
)) : <p className="randomizer-empty">{textContent.emptyTeams ?? ""}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="randomizer-team-settings-grid">
|
||||
<section className="randomizer-team-basic">
|
||||
<form className="randomizer-player-import-form" onSubmit={importPlayers}>
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.namesImportLabel || "Liste de noms"}</span>
|
||||
<textarea className="nds-textarea" data-size="sm" value={namesText} onChange={(event) => setNamesText(event.target.value)} placeholder={textContent.namesImportPlaceholder || "Un nom par ligne"} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="submit">{textContent.importNamesButton || "Ajouter"}</button>
|
||||
</form>
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.teamCountLabel || "Équipes"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min={RANDOMIZER_LIMITS.teamCountMin} max={RANDOMIZER_LIMITS.teamCountMax} value={data.teamCount} onChange={(event) => onChange({ ...data, teamCount: clampNumber(event.target.value, RANDOMIZER_LIMITS.teamCountMin, RANDOMIZER_LIMITS.teamCountMax, data.teamCount) })} />
|
||||
</label>
|
||||
<label>
|
||||
<span>{textContent.playerSelectionModeLabel || "Répartition"}</span>
|
||||
<select className="nds-select" data-size="sm" value={data.playerSelectionMode} onChange={(event) => onChange({ ...data, playerSelectionMode: event.target.value })}>
|
||||
<option value="all">{textContent.playerSelectionAll || "Tous"}</option>
|
||||
<option value="count">{textContent.playerSelectionCount || "Nombre défini"}</option>
|
||||
</select>
|
||||
</label>
|
||||
{data.playerSelectionMode === "count" && (
|
||||
<label>
|
||||
<span>{textContent.playerSelectionCountLabel || "Nombre"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min={data.teamCount} max={RANDOMIZER_LIMITS.teamPlayersMax} value={selectionCountDraft} onChange={(event) => setSelectionCountDraft(event.target.value)} onBlur={(event) => commitSelectionCount(event.target.value)} />
|
||||
</label>
|
||||
)}
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="button" onClick={launchTeams} disabled={animating}>
|
||||
<Icon name="play-circle" />
|
||||
<span>{textContent.createTeamsButton || "Créer les équipes"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="randomizer-team-advanced">
|
||||
<section className="randomizer-team-advanced-section">
|
||||
<div className="randomizer-list-header randomizer-value-row randomizer-player-row" aria-hidden="true">
|
||||
<span>{textContent.activeLabel || "Actif"}</span>
|
||||
<span>{textContent.nameLabel || "Nom"}</span>
|
||||
<span>{textContent.scoreLabel || "Score"}</span>
|
||||
<span />
|
||||
</div>
|
||||
<div className="randomizer-value-list nds-scrollbox" data-axis="vertical" data-variant="ghost">
|
||||
{data.players.map((player) => (
|
||||
<div className="randomizer-value-row randomizer-player-row" key={player.id}>
|
||||
<input className="nds-checkbox" data-size="sm" type="checkbox" checked={player.active} onChange={(event) => updatePlayer(player.id, { active: event.target.checked })} aria-label={`${textContent.activeLabel || "Actif"} ${player.name}`} />
|
||||
<input className="nds-input" data-size="sm" value={player.name} onChange={(event) => updatePlayer(player.id, { name: event.target.value })} aria-label={textContent.nameLabel || "Nom"} />
|
||||
<input className="nds-input" data-size="sm" type="number" min="0" max="9999" value={player.score} onChange={(event) => updatePlayer(player.id, { score: clampNumber(event.target.value, 0, 9999, player.score) })} aria-label={textContent.scoreLabel || "Score"} />
|
||||
<button className="nds-icon-button" data-size="sm" data-variant="danger" type="button" onClick={() => removePlayer(player.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${player.name}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="button" onClick={clearPlayers} disabled={!data.players.length || animating}>{textContent.clearNamesButton || "Supprimer tous les noms"}</button>
|
||||
</section>
|
||||
<section className="randomizer-team-advanced-section randomizer-exclusion-block">
|
||||
<form className={`inline-form randomizer-exclusion-form ${exclusionMode === "group" ? "is-group-mode" : ""}`} onSubmit={addExclusion}>
|
||||
<label className="randomizer-field randomizer-exclusion-mode-field">
|
||||
<span>{textContent.exclusionModeLabel || "Type"}</span>
|
||||
<select className="nds-select" data-size="sm" value={exclusionMode} onChange={(event) => exclusionDraft.updateValues({ mode: event.target.value, playerAId: event.target.value === "group" ? "" : exclusionDraft.values.playerAId })} aria-label={textContent.exclusionModeLabel || "Type"}>
|
||||
<option value="group">{textContent.exclusionModeGroup || "Tous séparés"}</option>
|
||||
<option value="source">{textContent.exclusionModeSource || "Exclusions granulaires"}</option>
|
||||
</select>
|
||||
</label>
|
||||
{exclusionMode === "source" && (
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.firstPlayerLabel || "Nom source"}</span>
|
||||
<select className="nds-select" data-size="sm" value={exclusionDraft.values.playerAId} onChange={(event) => exclusionDraft.updateValues({ playerAId: event.target.value, playerBIds: (exclusionDraft.values.playerBIds || []).filter((playerId) => playerId !== event.target.value) })} aria-label={textContent.firstPlayerLabel || "Nom source"}>
|
||||
<option value="">{textContent.selectNamesButton || "Choisir"}</option>
|
||||
{activePlayers.map((player) => <option key={player.id} value={player.id}>{player.name}</option>)}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
<div className="randomizer-field">
|
||||
<span>{textContent.secondPlayerLabel || "Noms exclus"}</span>
|
||||
<CompactDropdown
|
||||
className="randomizer-checkbox-dropdown"
|
||||
menuClassName="randomizer-checkbox-menu nds-scrollbox"
|
||||
label={textContent.secondPlayerLabel || "Noms exclus"}
|
||||
renderTrigger={({ open, toggle }) => (
|
||||
<button className={`randomizer-multi-trigger nds-select-trigger ${open ? "active" : ""}`} data-size="sm" type="button" onClick={toggle} aria-expanded={open}>
|
||||
<span className="randomizer-multi-trigger-label">{exclusionDraft.values.playerBIds?.length ? `${exclusionDraft.values.playerBIds.length} ${textContent.selectedNamesLabel || "noms"}` : textContent.selectNamesButton || "Choisir"}</span>
|
||||
</button>
|
||||
)}
|
||||
>
|
||||
{() => (
|
||||
<>
|
||||
{activePlayers.map((player) => (
|
||||
<label className="randomizer-checkbox-option" key={player.id}>
|
||||
<input className="nds-checkbox" data-size="sm" type="checkbox" checked={(exclusionDraft.values.playerBIds || []).includes(player.id)} disabled={exclusionMode === "source" && player.id === exclusionDraft.values.playerAId} onChange={() => toggleExclusionTarget(player.id)} />
|
||||
<span>{player.name}</span>
|
||||
</label>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</CompactDropdown>
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="submit">{textContent.addExclusionButton || "Exclure"}</button>
|
||||
</form>
|
||||
<span className="randomizer-section-label">{textContent.exclusionsListLabel || "Combinaisons exclues"}</span>
|
||||
<div className="randomizer-exclusions">
|
||||
{data.exclusions.map((exclusion) => {
|
||||
const playerA = data.players.find((player) => player.id === exclusion.playerAId);
|
||||
const playerBs = (exclusion.playerBIds || []).map((playerId) => data.players.find((player) => player.id === playerId)).filter(Boolean);
|
||||
if (!playerA || !playerBs.length) return null;
|
||||
const exclusionLabel = exclusion.mode === "group"
|
||||
? [playerA, ...playerBs].map((player) => player.name).join(" / ")
|
||||
: `${playerA.name} / ${playerBs.map((player) => player.name).join(" ou ")}`;
|
||||
return (
|
||||
<span className="randomizer-chip" key={exclusion.id}>
|
||||
<span className="randomizer-chip-label">{exclusionLabel}</span>
|
||||
<button className="nds-icon-button" data-size="xxs" data-variant="danger" type="button" onClick={() => onChange({ ...data, exclusions: data.exclusions.filter((item) => item.id !== exclusion.id) })} aria-label={`${textContent.deleteTitle || "Supprimer"} ${playerA.name}`}>
|
||||
<Icon name="close" />
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => `${entry.teams.length} ${entry.teams.length > 1 ? textContent.teamsPluralLabel || "équipes" : textContent.teamsSingularLabel || "équipe"}`}
|
||||
renderDetails={(entry) => (
|
||||
<div className={`randomizer-history-teams ${entry.teams.length > 4 ? "has-team-rows" : ""}`}>
|
||||
{entry.teams.map((team) => (
|
||||
<div className="randomizer-history-team" key={team.id}>
|
||||
<strong>{team.name}</strong>
|
||||
<span>{textContent.teamScoreLabel || "Score"} {team.score}</span>
|
||||
<ul>
|
||||
{team.players.map((player) => <li key={player.id}>{player.name}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
onClear={clearTeamsHistory}
|
||||
onRemove={removeTeamsHistoryEntry}
|
||||
disabled={animating}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,207 @@
|
|||
// Rôle : gère l'onglet roue pondérée du Randomizer et son animation.
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Icon } from "../../../../components/Icon.jsx";
|
||||
import { RANDOMIZER_LIMITS, addRandomizerHistory, buildWheelSegments, clampNumber, drawWeightedEntries } from "../randomizerUtils.js";
|
||||
import { ResultChips, RandomizerHistory } from "./RandomizerShared.jsx";
|
||||
import { DRAW_PAUSE_MS, WHEEL_COLORS, WHEEL_SPIN_MS, describeWheelArc, getWheelTargetRotation, hasReducedMotion } from "./randomizerUiUtils.js";
|
||||
|
||||
export 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 (
|
||||
<section className="randomizer-panel randomizer-wheel-panel">
|
||||
<div className="randomizer-wheel-stage" aria-live="polite">
|
||||
<span className="randomizer-wheel-spacer" aria-hidden="true" />
|
||||
<div className="randomizer-wheel-center">
|
||||
<span className="randomizer-wheel-pointer" aria-hidden="true" />
|
||||
<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]} />
|
||||
)) : <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>
|
||||
</div>
|
||||
<div className="randomizer-wheel-legend nds-scrollbox" data-axis="vertical" aria-label={textContent.valuesTitle || "Valeurs"}>
|
||||
{segments.length ? segments.map((segment) => (
|
||||
<div className="randomizer-wheel-legend-row" key={segment.entry.id}>
|
||||
<span className="randomizer-wheel-swatch" style={{ "--randomizer-swatch": WHEEL_COLORS[segment.index % WHEEL_COLORS.length] }} aria-hidden="true" />
|
||||
<span className="randomizer-wheel-label">{segment.entry.label}</span>
|
||||
</div>
|
||||
)) : <p className="randomizer-empty">{textContent.wheelInvalid || "Ajoutez au moins deux valeurs."}</p>}
|
||||
</div>
|
||||
</div>
|
||||
<div className="randomizer-live-results randomizer-wheel-results" aria-live="polite">
|
||||
<ResultChips results={displayResults} />
|
||||
</div>
|
||||
|
||||
<div className="randomizer-wheel-grid">
|
||||
<section className="randomizer-wheel-form">
|
||||
<form className="randomizer-entry-form" onSubmit={addEntries}>
|
||||
<label className="randomizer-field">
|
||||
<span>{textContent.valuesImportLabel || "Liste de valeurs"}</span>
|
||||
<textarea className="nds-textarea" data-size="sm" value={entriesText} onChange={(event) => setEntriesText(event.target.value)} placeholder={textContent.valuesImportPlaceholder || "Une valeur par ligne"} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant="primary" type="submit">{textContent.addButton || "Ajouter"}</button>
|
||||
</form>
|
||||
<div className="randomizer-controls">
|
||||
<label>
|
||||
<span>{textContent.drawsLabel || "Tirages"}</span>
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="100" value={data.draws} onChange={(event) => onChange({ ...data, draws: clampNumber(event.target.value, 1, 100, data.draws) })} />
|
||||
</label>
|
||||
<button className="nds-button" data-size="sm" data-variant={drawing ? "danger" : "primary"} type="button" onClick={drawing ? stopWheel : launchWheel}>
|
||||
<Icon name={drawing ? "stop-circle" : "play-circle"} />
|
||||
<span>{drawing ? textContent.stopButton || "Arrêter" : textContent.drawButton || "Tirer"}</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
<section className="randomizer-wheel-values-section">
|
||||
<div className="randomizer-list-header randomizer-value-row randomizer-wheel-value-row" aria-hidden="true">
|
||||
<span>{textContent.savedValuesLabel || "Valeurs enregistrées"}</span>
|
||||
<span>{textContent.weightLabel || "Poids"}</span>
|
||||
<span />
|
||||
</div>
|
||||
<div className="randomizer-value-list nds-scrollbox" data-axis="vertical" data-variant="ghost" aria-label={textContent.valuesTitle || "Valeurs"}>
|
||||
{data.entries.map((entry) => (
|
||||
<div className="randomizer-value-row randomizer-wheel-value-row" key={entry.id}>
|
||||
<input className="nds-input" data-size="sm" value={entry.label} onChange={(event) => updateEntry(entry.id, { label: event.target.value })} aria-label={textContent.valuePlaceholder || "Valeur"} />
|
||||
<input className="nds-input" data-size="sm" type="number" min="1" max="999" value={entry.weight} onChange={(event) => updateEntry(entry.id, { weight: clampNumber(event.target.value, 1, 999, entry.weight) })} aria-label={`${textContent.weightLabel || "Poids"} ${entry.label}`} />
|
||||
<button className="nds-icon-button" data-size="sm" data-variant="danger" type="button" onClick={() => removeEntry(entry.id)} aria-label={`${textContent.deleteTitle || "Supprimer"} ${entry.label}`} title={textContent.deleteTitle || "Supprimer"}>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<button className="nds-button" data-size="sm" type="button" onClick={clearEntries} disabled={!data.entries.length || drawing}>{textContent.clearValuesButton || "Supprimer toutes les valeurs"}</button>
|
||||
</section>
|
||||
<RandomizerHistory
|
||||
title={textContent.historyTitle || "Historique"}
|
||||
history={data.history}
|
||||
renderEntry={(entry) => entry.results.join(" - ")}
|
||||
onClear={clearWheelHistory}
|
||||
onRemove={removeWheelHistoryEntry}
|
||||
disabled={drawing}
|
||||
textContent={textContent}
|
||||
showEmpty
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
// Rôle : regroupe les helpers UI et animation purs du Randomizer.
|
||||
export const WHEEL_COLORS = ["#8b5cf6", "#f6c453", "#22d3ee", "#d946ef", "#6366f1", "#22c55e"];
|
||||
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];
|
||||
export const WHEEL_SPIN_MS = 1120;
|
||||
export const DEFAULT_EXCLUSION_DRAFT = { playerAId: "", playerBIds: [], mode: "group" };
|
||||
|
||||
export 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)
|
||||
};
|
||||
}
|
||||
|
||||
export 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`;
|
||||
}
|
||||
|
||||
export function formatDateTime(value) {
|
||||
const date = new Date(value);
|
||||
return Number.isFinite(date.getTime()) ? date.toLocaleString("fr-FR", { dateStyle: "short", timeStyle: "short" }) : "";
|
||||
}
|
||||
|
||||
export 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;
|
||||
}
|
||||
|
||||
export 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);
|
||||
}
|
||||
|
|
@ -104,7 +104,7 @@ export function importNotepadText(text, context) {
|
|||
if (currentPage.drawings.strokes.length) currentPage.drawingMode = "permanent";
|
||||
return;
|
||||
}
|
||||
throw lineError(index, `ligne bloc note invalide: ${cleanLine}`);
|
||||
throw lineError(index, `ligne Bloc Note invalide: ${cleanLine}`);
|
||||
});
|
||||
if (readingHtml) throw new Error("Bloc HTML non terminé.");
|
||||
flushPage();
|
||||
|
|
|
|||
|
|
@ -11,8 +11,8 @@ export const TOOLBOX_MODULE_DEFINITIONS = {
|
|||
libraryCategory: "notesTracking"
|
||||
},
|
||||
memos: {
|
||||
label: "Memos",
|
||||
defaultTitle: "Memos",
|
||||
label: "Mémos",
|
||||
defaultTitle: "Mémos",
|
||||
mode: "Post-it courts",
|
||||
icon: "memos",
|
||||
editable: true,
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export function useToolboxActions({ store, notify, creationTemplate, setConfirmM
|
|||
name: name.trim() || "Nouvelle toolbox",
|
||||
updatedAt: now,
|
||||
modules: [
|
||||
{ id: memosModuleId, type: "memos", title: creationTemplate?.memos?.title || "Memos" },
|
||||
{ id: memosModuleId, type: "memos", title: creationTemplate?.memos?.title || "Mémos" },
|
||||
{ id: linksModuleId, type: "links", title: creationTemplate?.links?.moduleTitle || "Liens utiles" }
|
||||
]
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue