Fix Notepad render loop and stabilize toolbox modules
Some checks failed
Deploy Sokko G / deploy (push) Failing after 2s
Some checks failed
Deploy Sokko G / deploy (push) Failing after 2s
This commit is contained in:
parent
c096cc07fe
commit
6c61e11f9a
8 changed files with 118 additions and 94 deletions
|
|
@ -4,6 +4,7 @@ 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";
|
||||
import { useTimeoutQueue } from "./useTimeoutQueue.js";
|
||||
|
||||
export function DiceRandomizer({ data, textContent, onChange, context }) {
|
||||
const [displayValue, setDisplayValue] = useState(data.results[0] || 1);
|
||||
|
|
@ -11,7 +12,7 @@ export function DiceRandomizer({ data, textContent, onChange, context }) {
|
|||
const [rolling, setRolling] = useState(false);
|
||||
const [rollingIndex, setRollingIndex] = useState(-1);
|
||||
const [rollDuration, setRollDuration] = useState(DICE_ROLL_DELAYS[0]);
|
||||
const timersRef = useRef([]);
|
||||
const { queueTimer, clearTimers: clearDiceTimers } = useTimeoutQueue();
|
||||
const skipDiceSyncRef = useRef(false);
|
||||
const shape = getDiceShape(data.faces);
|
||||
|
||||
|
|
@ -25,22 +26,6 @@ export function DiceRandomizer({ data, textContent, onChange, context }) {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
// Rôle : gère l'onglet équipes équilibrées du Randomizer et ses exclusions.
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useEffect, 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";
|
||||
import { useTimeoutQueue } from "./useTimeoutQueue.js";
|
||||
|
||||
export function TeamsRandomizer({ data, textContent, onChange, context }) {
|
||||
const exclusionDraft = useDraftForm(DEFAULT_EXCLUSION_DRAFT);
|
||||
|
|
@ -15,7 +16,7 @@ export function TeamsRandomizer({ data, textContent, onChange, context }) {
|
|||
const [reelIndex, setReelIndex] = useState(0);
|
||||
const [reelDuration, setReelDuration] = useState(TEAM_REEL_DELAYS[0]);
|
||||
const [namesText, setNamesText] = useState("");
|
||||
const timersRef = useRef([]);
|
||||
const { queueTimer, clearTimers: clearTeamTimers } = useTimeoutQueue();
|
||||
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));
|
||||
|
|
@ -27,22 +28,6 @@ export function TeamsRandomizer({ data, textContent, onChange, context }) {
|
|||
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));
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ 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";
|
||||
import { useTimeoutQueue } from "./useTimeoutQueue.js";
|
||||
|
||||
export function WheelRandomizer({ data, textContent, onChange, context }) {
|
||||
const [rotation, setRotation] = useState(0);
|
||||
|
|
@ -11,7 +12,7 @@ export function WheelRandomizer({ data, textContent, onChange, context }) {
|
|||
const [drawing, setDrawing] = useState(false);
|
||||
const [displayResults, setDisplayResults] = useState(data.results);
|
||||
const [entriesText, setEntriesText] = useState("");
|
||||
const timersRef = useRef([]);
|
||||
const { queueTimer, clearTimers: clearWheelTimers } = useTimeoutQueue();
|
||||
const skipWheelSyncRef = useRef(false);
|
||||
const segments = useMemo(() => buildWheelSegments(data.entries), [data.entries]);
|
||||
|
||||
|
|
@ -24,22 +25,6 @@ export function WheelRandomizer({ data, textContent, onChange, context }) {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
// Rôle : planifie et nettoie les timers d'animation du Randomizer.
|
||||
import { useCallback, useEffect, useRef } from "react";
|
||||
|
||||
export function useTimeoutQueue() {
|
||||
const timersRef = useRef(new Set());
|
||||
|
||||
const clearTimers = useCallback(() => {
|
||||
timersRef.current.forEach((timerId) => window.clearTimeout(timerId));
|
||||
timersRef.current.clear();
|
||||
}, []);
|
||||
|
||||
const queueTimer = useCallback((callback, delay) => {
|
||||
let timerId;
|
||||
timerId = window.setTimeout(() => {
|
||||
timersRef.current.delete(timerId);
|
||||
callback();
|
||||
}, delay);
|
||||
timersRef.current.add(timerId);
|
||||
return timerId;
|
||||
}, []);
|
||||
|
||||
useEffect(() => clearTimers, [clearTimers]);
|
||||
|
||||
return { queueTimer, clearTimers };
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue