Next.js Discord

Discord Forum

Function not working properly.

Unanswered
! nolikas posted this in #help-forum
Open in Discord
! nolikasOP
I'm trying to make a CS:GO game called "Crash". The program generates a random number and my function is supposed to stop when the multiplier reaches a generated value. Tho for some reason the multiplier is going above generated value and only ends a few seconds later. Does anyone know why this could be happening?

9 Replies

! nolikasOP
So in this ex, program generated a value of 1.04 but multiplier managed to reach 1.18
export default function Crash() {
  const [multiplier, setMultiplier] = useState<number>(1); // MULTIPLIER
  const [isGrowing, setIsGrowing] = useState<boolean>(false); // RUNNING / OFF
  const [speedMultiplier, setSpeedMultiplier] = useState<number>(0.4); // MULTIPLIER SPEED
  const [betAmount, setBetAmount] = useState<number>(0); // BET AMOUNT
  const [crashValue, setCrashValue] = useState<number>(1); // CRASH VALUE

  useEffect(() => {
    let lastUpdateTime = Date.now();
    let lastSpeedUpdateTime = Date.now();
    let animationFrameId: number;

    const updateMultiplier = () => {
      const currentTime = Date.now();
      const elapsedTime = currentTime - lastUpdateTime;
      const increment = elapsedTime * 0.00015 * speedMultiplier;
      setMultiplier((prevMultiplier) => prevMultiplier + increment);
      lastUpdateTime = currentTime;

      // INCREASE MULTIPLIER
      if (currentTime - lastSpeedUpdateTime >= 3000) {
        setSpeedMultiplier((prevSpeedMultiplier) => prevSpeedMultiplier * 1.15);
        lastSpeedUpdateTime = currentTime;
      }
      // UPDATE CRASH LIMIT
      if (multiplier >= crashValue) {
        handleStop();
      } else {
        animationFrameId = requestAnimationFrame(updateMultiplier);
      }
    };
    if (isGrowing) {
      animationFrameId = requestAnimationFrame(updateMultiplier);
    }

    return () => cancelAnimationFrame(animationFrameId);
  }, [isGrowing, speedMultiplier]);

const generateCrashValue = () => {
    const crash = Math.floor(Math.random() * (1000 - 100) + 100) / 100;
    setCrashValue(crash);
  };

  const handleStart = () => {
    generateCrashValue();
    setIsGrowing(true);
  };

  const handleStop = () => {
    setIsGrowing(false);
    setSpeedMultiplier(0.4);

    // RESET MULTIPLIER
    setTimeout(() => {
      setSpeedMultiplier(0.4);
      setMultiplier(1);
    }, 3000);
  };
! nolikasOP
bump?
DirtyCajunRice | AppDir
useEffect isnt gonna rerender unless the values bound change. instead set an interval and do your checks in there.
@! nolikas tsx export default function Crash() { const [multiplier, setMultiplier] = useState<number>(1); // MULTIPLIER const [isGrowing, setIsGrowing] = useState<boolean>(false); // RUNNING / OFF const [speedMultiplier, setSpeedMultiplier] = useState<number>(0.4); // MULTIPLIER SPEED const [betAmount, setBetAmount] = useState<number>(0); // BET AMOUNT const [crashValue, setCrashValue] = useState<number>(1); // CRASH VALUE useEffect(() => { let lastUpdateTime = Date.now(); let lastSpeedUpdateTime = Date.now(); let animationFrameId: number; const updateMultiplier = () => { const currentTime = Date.now(); const elapsedTime = currentTime - lastUpdateTime; const increment = elapsedTime * 0.00015 * speedMultiplier; setMultiplier((prevMultiplier) => prevMultiplier + increment); lastUpdateTime = currentTime; // INCREASE MULTIPLIER if (currentTime - lastSpeedUpdateTime >= 3000) { setSpeedMultiplier((prevSpeedMultiplier) => prevSpeedMultiplier * 1.15); lastSpeedUpdateTime = currentTime; } // UPDATE CRASH LIMIT if (multiplier >= crashValue) { handleStop(); } else { animationFrameId = requestAnimationFrame(updateMultiplier); } }; if (isGrowing) { animationFrameId = requestAnimationFrame(updateMultiplier); } return () => cancelAnimationFrame(animationFrameId); }, [isGrowing, speedMultiplier]); const generateCrashValue = () => { const crash = Math.floor(Math.random() * (1000 - 100) + 100) / 100; setCrashValue(crash); }; const handleStart = () => { generateCrashValue(); setIsGrowing(true); }; const handleStop = () => { setIsGrowing(false); setSpeedMultiplier(0.4); // RESET MULTIPLIER setTimeout(() => { setSpeedMultiplier(0.4); setMultiplier(1); }, 3000); };
! nolikasOP
If I add multiplier to the useEffect's dependency array, it stops at the right multiplier, but then it's always growing at the same speed while what I want is that multiplier speed constantly keeps growing.
! nolikasOP
What I have found is that if I add multiplier to dependencies array, this part of code is skipped:
if (currentTime - lastSpeedUpdateTime >= 3000) {
    setSpeedMultiplier((prevSpeedMultiplier) => prevSpeedMultiplier * 1.15);
    lastSpeedUpdateTime = currentTime;
}
...

    [isGrowing, speedMultiplier, multiplier]);
... because useEffect is used more frequently and less than 3 seconds had passed.........
! nolikasOP
How do I still make it be called every 3 seconds?