Tribes2/t2-mapper
1
0
Fork 0
mirror of https://github.com/exogen/t2-mapper.git synced 2026-02-18 22:23:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

add keyboard overlay for non-touch devices

Browse source
This commit is contained in:
Brian Beck 2026-02-12 17:54:51 -08:00
parent 0aadb3d6e7
commit d7ef09c576
26 changed files with 215 additions and 107 deletions
Download patch file Download diff file Expand all files Collapse all files

48
src/components/KeyboardOverlay.tsx Normal file
View file

@ -0,0 +1,48 @@
import { useKeyboardControls } from "@react-three/drei";
import { Controls } from "./ObserverControls";
export function KeyboardOverlay() {
const forward = useKeyboardControls<Controls>((s) => s.forward);
const backward = useKeyboardControls<Controls>((s) => s.backward);
const left = useKeyboardControls<Controls>((s) => s.left);
const right = useKeyboardControls<Controls>((s) => s.right);
const up = useKeyboardControls<Controls>((s) => s.up);
const down = useKeyboardControls<Controls>((s) => s.down);
return (
<div className="KeyboardOverlay">
<div className="KeyboardOverlay-column">
<div className="KeyboardOverlay-row">
<div className="KeyboardOverlay-spacer" />
<div className="KeyboardOverlay-key" data-pressed={forward}>
W
</div>
<div className="KeyboardOverlay-spacer" />
</div>
<div className="KeyboardOverlay-row">
<div className="KeyboardOverlay-key" data-pressed={left}>
A
</div>
<div className="KeyboardOverlay-key" data-pressed={backward}>
S
</div>
<div className="KeyboardOverlay-key" data-pressed={right}>
D
</div>
</div>
</div>
<div className="KeyboardOverlay-column">
<div className="KeyboardOverlay-row">
<div className="KeyboardOverlay-key" data-pressed={up}>
<span className="KeyboardOverlay-arrow">&uarr;</span> Space
</div>
</div>
<div className="KeyboardOverlay-row">
<div className="KeyboardOverlay-key" data-pressed={down}>
<span className="KeyboardOverlay-arrow">&darr;</span> Shift
</div>
</div>
</div>
</div>
);
}

12
src/components/ObserverControls.tsx
View file

@ -1,12 +1,12 @@
import { useEffect, useRef } from "react";
import { Euler, Vector3 } from "three";
import { useFrame, useThree } from "@react-three/fiber";
import { KeyboardControls, useKeyboardControls } from "@react-three/drei";
import { useKeyboardControls } from "@react-three/drei";
import { PointerLockControls } from "three-stdlib";
import { useControls } from "./SettingsProvider";
import { useCameras } from "./CamerasProvider";
enum Controls {
export enum Controls {
forward = "forward",
backward = "backward",
left = "left",
@ -215,7 +215,7 @@ function CameraMovement() {
return null;
}
const KEYBOARD_CONTROLS = [
export const KEYBOARD_CONTROLS = [
{ name: Controls.forward, keys: ["KeyW"] },
{ name: Controls.backward, keys: ["KeyS"] },
{ name: Controls.left, keys: ["KeyA"] },
@ -255,9 +255,5 @@ export function ObserverControls() {
};
}, []);
return (
<KeyboardControls map={KEYBOARD_CONTROLS}>
<CameraMovement />
</KeyboardControls>
);
return <CameraMovement />;
}