lingo3d/lib/editor/HUD/index.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import HotKey from "./HotKey";
import mainCamera from "../../engine/mainCamera";
import { createPortal } from "preact/compat";
import useInitCSS from "../hooks/useInitCSS";
import Spinner from "../component/Spinner";
import InfoScreen from "./InfoScreen";
import useSyncState from "../hooks/useSyncState";
import { getCameraRendered } from "../../states/useCameraRendered";
import { getLoadingAssetsCount } from "../../states/useLoadingAssetsCount";
import useInitEditor from "../hooks/useInitEditor";
import { overlayContainer } from "../../engine/renderLoop/containers";
import { getTabPaused } from "../../states/useTabPaused";
const HUD = () => {
    useInitCSS();
    useInitEditor();
    const cameraRendered = useSyncState(getCameraRendered);
    const loadingAssetsCount = useSyncState(getLoadingAssetsCount);
    const tabPaused = useSyncState(getTabPaused);
    return createPortal(_jsxs("div", { className: "lingo3d-ui lingo3d-absfull", style: { pointerEvents: "none", padding: 10 }, children: [_jsxs(InfoScreen, { mounted: !!loadingAssetsCount, children: [_jsx(Spinner, { size: 14 }), "loading remote data"] }), _jsx(InfoScreen, { style: { background: "rgba(0, 0, 0, 0.5)" }, mounted: tabPaused, children: "paused" }), cameraRendered === mainCamera && (_jsxs("div", { style: { opacity: 0.5 }, children: [_jsx(HotKey, { hotkey: "\u21E7", description: "accelerate" }), _jsx(HotKey, { hotkey: "W", description: "move forward" }), _jsx(HotKey, { hotkey: "S", description: "move backwards" }), _jsx(HotKey, { hotkey: "A", description: "move left" }), _jsx(HotKey, { hotkey: "D", description: "move right" }), _jsx(HotKey, { hotkey: "\u2191", description: "move up" }), _jsx(HotKey, { hotkey: "\u2193", description: "move down" }), _jsx(HotKey, { hotkey: "C", description: "center selected" }), _jsx(HotKey, { hotkey: "\u232B", description: "delete selected" }), _jsxs("div", { style: { display: "flex", gap: 4 }, children: [_jsx(HotKey, { hotkey: "\u2318" }), _jsx(HotKey, { hotkey: "C", description: "copy selected" })] }), _jsxs("div", { style: { display: "flex", gap: 4 }, children: [_jsx(HotKey, { hotkey: "\u2318" }), _jsx(HotKey, { hotkey: "O", description: "open folder" })] }), _jsxs("div", { style: { display: "flex", gap: 4 }, children: [_jsx(HotKey, { hotkey: "\u2318" }), _jsx(HotKey, { hotkey: "S", description: "save scene" })] }), _jsx(HotKey, { hotkey: "G", description: "toggle grid" })] }))] }), overlayContainer);
};
export default HUD;
//# sourceMappingURL=index.js.map