Merge pull request #612 from Hack23/dependabot/npm_and_yarn/systeminformation-5.31.6

build(deps-dev): bump systeminformation from 5.31.5 to 5.31.6

Author: pethers

cypress/e2e/screenshots.cy.ts

@@ -60,7 +60,10 @@ describe("Game Visual Documentation", () => {
       win.dispatchEvent(new CustomEvent('test:targetClick'));
       win.dispatchEvent(new CustomEvent('test:targetClick'));
     });
-    
+
+    // Wait for React to process the state updates (consistent with gameplay.cy.ts pattern)
+    cy.wait(100);
+
     // Verify score updated
     cy.get("[data-testid=score-value]").should("not.contain", "0");
 

package-lock.json

@@ -1,5 +1,5 @@
 import { Canvas } from "@react-three/fiber";
-import { useRef, useState, useCallback, useEffect } from "react";
+import { useRef, useState, useCallback, useEffect, useLayoutEffect } from "react";
 import type { JSX } from "react";
 import { useGameState } from "./hooks/useGameState";
 import { useAudioManager } from "./hooks/useAudioManager";
@@ -96,7 +96,10 @@ function App(): JSX.Element {
   const gameStateRef = useRef(gameState);
   gameStateRef.current = gameState;
 
-  useEffect(() => {
+  // useLayoutEffect (not useEffect) ensures the listener is registered synchronously
+  // before the browser paints, preventing a race where Cypress finds the target-sphere
+  // in the DOM before the test event listener is ready to receive events.
+  useLayoutEffect(() => {
     const handleTestTargetClick = (): void => {
       const gs = gameStateRef.current;
       if (gs.isPlaying && gs.timeLeft > 0 && gs.targets.length > 0) {