add keybind info modal (fixes #43) (80f408ad) · Commits · Marius DAVID / Canvas

packages/client/src/components/App.tsx

+2 −0

Original line number	Diff line number	Diff line
		@@ -13,6 +13,7 @@ import { ToastContainer } from "react-toastify";
		import { AuthErrors } from "./AuthErrors";
		import "../lib/keybinds";
		import { PixelWhoisSidebar } from "./PixelWhoisSidebar";
		import { KeybindModal } from "./KeybindModal";

		const Chat = lazy(() => import("./Chat/Chat"));

		@@ -37,6 +38,7 @@ const AppInner = () => {
		<DebugModal />
		<SettingsSidebar />
		<PixelWhoisSidebar />
		<KeybindModal />
		<AuthErrors />

		<ToastContainer position="top-left" />

0 → 100644

+58 −0

Original line number	Diff line number	Diff line
		import {
		Button,
		Kbd,
		KbdKey,
		Modal,
		ModalBody,
		ModalContent,
		ModalFooter,
		ModalHeader,
		} from "@nextui-org/react";
		import { useAppContext } from "../contexts/AppContext";
		import { KeybindManager } from "../lib/keybinds";

		export const KeybindModal = () => {
		const { showKeybinds, setShowKeybinds } = useAppContext();

		return (
		<Modal
		isOpen={showKeybinds}
		onOpenChange={setShowKeybinds}
		placement="center"
		>
		<ModalContent>
		{(onClose) => (
		<>
		<ModalHeader className="flex flex-col gap-1">Keybinds</ModalHeader>
		<ModalBody>
		{Object.entries(KeybindManager.getKeybinds()).map(
		([name, kbs]) => (
		<div className="flex flex-row gap-2">
		<span>{name}</span>
		{kbs.map((kb) => (
		<Kbd
		keys={(
		[
		kb.alt && "option",
		kb.ctrl && "ctrl",
		kb.meta && "command",
		kb.shift && "shift",
		] as KbdKey[]
		).filter((a) => a)}
		>
		{kb.key}
		</Kbd>
		))}
		</div>
		)
		)}
		</ModalBody>
		<ModalFooter>
		<Button onPress={onClose}>Close</Button>
		</ModalFooter>
		</>
		)}
		</ModalContent>
		</Modal>
		);
		};

+13 −2

Original line number	Diff line number	Diff line
		@@ -6,7 +6,8 @@ import { faXmark } from "@fortawesome/free-solid-svg-icons/faXmark";
		import { ChatSettings } from "./ChatSettings";

		export const SettingsSidebar = () => {
		const { settingsSidebar, setSettingsSidebar } = useAppContext();
		const { settingsSidebar, setSettingsSidebar, setShowKeybinds } =
		useAppContext();

		return (
		<div
		@@ -20,7 +21,17 @@ export const SettingsSidebar = () => {
		<FontAwesomeIcon icon={faXmark} />
		</Button>
		</header>
		<section>abc</section>
		<section>
		abc
		<Button
		onPress={() => {
		setShowKeybinds(true);
		setSettingsSidebar(false);
		}}
		>
		Keybinds
		</Button>
		</section>
		<TemplateSettings />
		<ChatSettings />
		</div>

+3 −0

Original line number	Diff line number	Diff line
		@@ -40,6 +40,7 @@ export const AppContext = ({ children }: PropsWithChildren) => {
		y: number;
		surrounding: string[][];
		}>();
		const [showKeybinds, setShowKeybinds] = useState(false);

		const [hasAdmin, setHasAdmin] = useState(false);

		@@ -137,6 +138,8 @@ export const AppContext = ({ children }: PropsWithChildren) => {
		hasAdmin,
		pixelWhois,
		setPixelWhois,
		showKeybinds,
		setShowKeybinds,
		}}
		>
		{!config && (

+4 −0

Original line number	Diff line number	Diff line
		@@ -129,6 +129,10 @@ class KeybindManager_ extends EventEmitter<{
		getKeybind(key: keyof typeof KEYBINDS) {
		return KEYBINDS[key];
		}

		getKeybinds() {
		return { ...KEYBINDS };
		}
		}

		export const KeybindManager = new KeybindManager_();