add keybind info modal (fixes #43)

packages/client/src/components/App.tsx

@@ -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" />

packages/client/src/components/KeybindModal.tsx

@@ -0,0 +1,58 @@
+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>
+  );
+};

packages/client/src/components/Settings/SettingsSidebar.tsx

@@ -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>

packages/client/src/contexts/AppContext.tsx

@@ -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 && (

packages/client/src/lib/keybinds.ts

@@ -129,6 +129,10 @@ class KeybindManager_ extends EventEmitter<{
   getKeybind(key: keyof typeof KEYBINDS) {
     return KEYBINDS[key];
   }
+
+  getKeybinds() {
+    return { ...KEYBINDS };
+  }
 }
 
 export const KeybindManager = new KeybindManager_();

packages/lib/src/net.ts

@@ -37,15 +37,17 @@ export interface IAppContext {
   cursorPosition?: IPosition;
   setCursorPosition: (v?: IPosition) => void;
   pixels: { available: number };
-  settingsSidebar: boolean;
-  setSettingsSidebar: (v: boolean) => void;
   undo?: { available: true; expireAt: number };
   loadChat: boolean;
   setLoadChat: (v: boolean) => void;
   connected: boolean;
 
+  settingsSidebar: boolean;
+  setSettingsSidebar: (v: boolean) => void;
   pixelWhois?: { x: number; y: number; surrounding: string[][] };
   setPixelWhois: (v: this["pixelWhois"]) => void;
+  showKeybinds: boolean;
+  setShowKeybinds: (v: boolean) => void;
 
   hasAdmin: boolean;
 }