diff --git a/src/components/three/gameplay/RepairRepairingStep.tsx b/src/components/three/gameplay/RepairRepairingStep.tsx index 13109f8..3aba456 100644 --- a/src/components/three/gameplay/RepairRepairingStep.tsx +++ b/src/components/three/gameplay/RepairRepairingStep.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import * as THREE from "three"; import type { RepairCasePlaceholder } from "@/components/three/gameplay/RepairCaseModel"; import { RepairObjectModel } from "@/components/three/gameplay/RepairObjectModel"; @@ -42,10 +42,12 @@ interface RepairRepairingStepProps { } interface RepairInstallTargetProps { + blockedFeedback: boolean; fillColor: string; isReadyToInstall: boolean; label: string; ringColor: string; + onBlocked: () => void; onRepair: () => void; } @@ -71,6 +73,8 @@ export function RepairRepairingStep({ const [depositedBrokenPartIds, setDepositedBrokenPartIds] = useState< Record >({}); + const [showBlockedInstallFeedback, setShowBlockedInstallFeedback] = + useState(false); const replacementParts = getReplacementParts(config); const brokenPartsToDeposit = getBrokenPartsToDeposit(config, brokenParts); const requiredReplacementPart = replacementParts.find( @@ -111,6 +115,18 @@ export function RepairRepairingStep({ ? `Ranger pièce cassée` : `Approcher ${requiredReplacementLabel}`; + useEffect(() => { + if (!showBlockedInstallFeedback) return undefined; + + const timeoutId = window.setTimeout(() => { + setShowBlockedInstallFeedback(false); + }, 900); + + return () => { + window.clearTimeout(timeoutId); + }; + }, [showBlockedInstallFeedback]); + function handleReplacementPosition( partId: string, position: THREE.Vector3, @@ -161,10 +177,12 @@ export function RepairRepairingStep({ return ( setShowBlockedInstallFeedback(true)} onRepair={onRepair} /> @@ -268,10 +286,12 @@ export function RepairRepairingStep({ } function RepairInstallTarget({ + blockedFeedback, fillColor, isReadyToInstall, label, ringColor, + onBlocked, onRepair, }: RepairInstallTargetProps): React.JSX.Element { return ( @@ -280,7 +300,10 @@ function RepairInstallTarget({ colliders="ball" label={label} onTrigger={() => { - if (!isReadyToInstall) return; + if (!isReadyToInstall) { + onBlocked(); + return; + } onRepair(); }} @@ -293,6 +316,18 @@ function RepairInstallTarget({ + {blockedFeedback ? ( + + + + + + + + + + + ) : null} ); }