68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
import React, { useState } from "react";
|
|
import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
|
|
import useModuleStore from "../../../store/useModuleStore";
|
|
import { PlayIcon } from "../../icons/ShortcutIcons";
|
|
import InputToggle from "../../ui/inputs/InputToggle";
|
|
import { EyeCloseIcon, WalkIcon } from "../../icons/ExportCommonIcons";
|
|
import { ExitIcon } from "../../icons/SimulationIcons";
|
|
|
|
const ControlsPlayer = () => {
|
|
const { setIsPlaying } = usePlayButtonStore();
|
|
const { activeModule } = useModuleStore();
|
|
const [walkMode, setWalkMode] = useState(false);
|
|
const [hidePlayer, setHidePlayer] = useState(false);
|
|
|
|
const changeCamMode = () => {
|
|
setWalkMode(!walkMode);
|
|
console.log("switch camera mode to first person");
|
|
};
|
|
return (
|
|
<div className="controls-player-container">
|
|
{!hidePlayer && (
|
|
<div className="controls-left">
|
|
<PlayIcon />
|
|
<div className="label">Running {activeModule}...</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="controls-right">
|
|
{!hidePlayer && (
|
|
<div className="walkMode-wrapper">
|
|
<WalkIcon />
|
|
<InputToggle
|
|
value={walkMode}
|
|
inputKey="1"
|
|
label="Walk Mode"
|
|
onClick={changeCamMode}
|
|
/>
|
|
</div>
|
|
)}
|
|
<button
|
|
id="controls-player-play-button"
|
|
className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
|
|
onClick={() => setIsPlaying(false)}
|
|
>
|
|
<div className="icon">
|
|
<ExitIcon />
|
|
</div>
|
|
{!hidePlayer && "Exit"}
|
|
</button>
|
|
<button
|
|
className={`btn-wrapper${hidePlayer ? " hide" : ""}`}
|
|
id="hide-btn"
|
|
onClick={() => {
|
|
setHidePlayer(!hidePlayer);
|
|
}}
|
|
>
|
|
<div className="icon">
|
|
<EyeCloseIcon />
|
|
</div>
|
|
{!hidePlayer && "Hide"}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ControlsPlayer;
|