fix(ui): scope hand-tracking activation + clean MissionNotification video branch
- HandTrackingProvider: drop the physics-mode auto-activation that turned the camera/MediaPipe pipeline on whenever any interactable was nearby (e.g. walking near the ebike to mount it). Hand tracking is now gated *only* by the active repair-mission step (inspected, repairing, reassembling, done). When testing in TestMap, set mainState=ebike + currentStep=inspected via the GameStateDebugPanel. - MissionNotification: video branch no longer inherits the CRT-style enter/scan/flicker/sepia animations applied to the PNG branch via index.css. The webm assets already animate themselves, so the wrapping container is rendered with inline styles only (clip-path silhouette preserved, but no .__image-wrap::before scan line, no .__image flicker filter, no parent enter animation, no drop-shadow).
This commit is contained in:
@@ -6,6 +6,12 @@ import type { RepairMissionId } from "@/types/gameplay/repairMission";
|
||||
// <video> element renders at the wrong dimensions and shifts the layout.
|
||||
const NOTIFICATION_ASPECT_RATIO = "589 / 211";
|
||||
|
||||
// Same clip-path as `.mission-notification__image-wrap` in index.css. Inlined
|
||||
// here so the video branch can re-use the silhouette without inheriting the
|
||||
// scan-line `::before` and CRT animations applied to the PNG branch.
|
||||
const NOTIFICATION_CLIP_PATH =
|
||||
"polygon(0 0, 100% 0, 100% 69%, 88% 100%, 0 100%)";
|
||||
|
||||
interface MissionNotificationProps {
|
||||
mission?: RepairMissionId;
|
||||
imagePath?: string;
|
||||
@@ -24,14 +30,34 @@ export function MissionNotification({
|
||||
return (
|
||||
<div
|
||||
className={`mission-notification${visible ? "" : " mission-notification--hidden"}`}
|
||||
// Webm assets already animate themselves; suppress the CRT entrance
|
||||
// flicker + drop-shadow that index.css applies to all .mission-notification
|
||||
// nodes so the video plays in a clean container.
|
||||
style={
|
||||
isVideo
|
||||
? {
|
||||
animation: "none",
|
||||
filter: "none",
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
aria-live="polite"
|
||||
>
|
||||
<div className="mission-notification__glow" />
|
||||
<span className="mission-notification__image-wrap">
|
||||
{isVideo ? (
|
||||
{isVideo ? null : <div className="mission-notification__glow" />}
|
||||
{isVideo ? (
|
||||
<span
|
||||
style={{
|
||||
position: "relative",
|
||||
display: "block",
|
||||
overflow: "hidden",
|
||||
clipPath: NOTIFICATION_CLIP_PATH,
|
||||
}}
|
||||
>
|
||||
<video
|
||||
className="mission-notification__image"
|
||||
style={{
|
||||
display: "block",
|
||||
width: "100%",
|
||||
height: "auto",
|
||||
aspectRatio: NOTIFICATION_ASPECT_RATIO,
|
||||
objectFit: "cover",
|
||||
}}
|
||||
@@ -43,14 +69,16 @@ export function MissionNotification({
|
||||
playsInline
|
||||
preload="auto"
|
||||
/>
|
||||
) : (
|
||||
</span>
|
||||
) : (
|
||||
<span className="mission-notification__image-wrap">
|
||||
<img
|
||||
className="mission-notification__image"
|
||||
src={src}
|
||||
alt="Nouvel objectif de mission"
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { HAND_TRACKING_LINGER_MS } from "@/data/handTrackingConfig";
|
||||
import { useSceneMode } from "@/hooks/debug/useSceneMode";
|
||||
import { useDebugStore } from "@/hooks/debug/useDebugStore";
|
||||
import { useInteraction } from "@/hooks/interaction/useInteraction";
|
||||
import {
|
||||
HAND_TRACKING_IDLE_SNAPSHOT,
|
||||
HandTrackingContext,
|
||||
@@ -25,8 +23,14 @@ export function HandTrackingProvider({
|
||||
}: {
|
||||
children: ReactNode;
|
||||
}): React.JSX.Element {
|
||||
const sceneMode = useSceneMode();
|
||||
const repairNeedsHands = useGameStore((state) => {
|
||||
// Hand tracking is gated *only* by the active repair-mission step. We
|
||||
// intentionally do NOT activate it from generic interactable proximity
|
||||
// (e.g. standing next to the ebike to mount it) — that previously caused
|
||||
// hand tracking to spin up around any interactable in the physics
|
||||
// (TestMap) scene mode, even though the player wasn't in a step that
|
||||
// actually uses hands. Use the GameStateDebugPanel to set
|
||||
// mainState=ebike + currentStep=inspected when testing in TestMap.
|
||||
const requested = useGameStore((state) => {
|
||||
switch (state.mainState) {
|
||||
case "ebike":
|
||||
return REPAIR_HAND_TRACKING_STEPS.has(state.ebike.currentStep);
|
||||
@@ -39,10 +43,6 @@ export function HandTrackingProvider({
|
||||
return false;
|
||||
}
|
||||
});
|
||||
const { nearby, holding, handHolding } = useInteraction();
|
||||
const requested =
|
||||
repairNeedsHands ||
|
||||
(sceneMode === "physics" && (nearby || holding || handHolding));
|
||||
|
||||
// Keep the runtime active a little after `requested` turns off so
|
||||
// MediaPipe has time to initialize the webcam + model + first frame
|
||||
|
||||
Reference in New Issue
Block a user