fix(ui): tone down InteractPrompt and support empty label

- 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.
This commit is contained in:
Tom Boullay
2026-06-02 23:27:07 +02:00
parent 4e1ca708b2
commit 931308c92c
2 changed files with 32 additions and 26 deletions
+5 -1
View File
@@ -9,10 +9,14 @@ export function InteractPrompt(): React.JSX.Element | null {
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>
<span className="interact-prompt__label">{focused.label}</span>
{label.length > 0 ? (
<span className="interact-prompt__label">{label}</span>
) : null}
</div>
);
}