Tom Boullay
931308c92c
- Smaller boxes (36x36 key + 36px-tall label) instead of the previous oversized white pills. - Dark translucent background (rgba(10, 12, 20, 0.55)) with a 1px white outline (rgba(255, 255, 255, 0.7)), no border-radius and white text so the prompt blends with the dark UI instead of being a bright blob over the 3D scene. - Key cube now has a 3D keyboard-key effect (inset top highlight + inset bottom darkening + small bottom drop) so it reads as a physical key. - Key and label are visually separated (gap: 8px) but share the same height for alignment. - InteractPrompt no longer renders the label box when focused.label is empty/whitespace, so callers can show the key prompt alone.
23 lines
771 B
TypeScript
23 lines
771 B
TypeScript
import { INTERACT_KEY } from "@/data/input/keybindings";
|
|
import { useCameraMode } from "@/hooks/debug/useCameraMode";
|
|
import { useInteraction } from "@/hooks/interaction/useInteraction";
|
|
|
|
export function InteractPrompt(): React.JSX.Element | null {
|
|
const cameraMode = useCameraMode();
|
|
const { focused, holding } = useInteraction();
|
|
|
|
if (cameraMode !== "player") return null;
|
|
if (!focused || holding || focused.kind !== "trigger") return null;
|
|
|
|
const label = focused.label?.trim() ?? "";
|
|
|
|
return (
|
|
<div className="interact-prompt" aria-live="polite">
|
|
<kbd className="interact-prompt__key">{INTERACT_KEY.toUpperCase()}</kbd>
|
|
{label.length > 0 ? (
|
|
<span className="interact-prompt__label">{label}</span>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|