makes keylistener hook-based and mocks Byond a bit (#35)

Co-authored-by: jlsnow301 <[email protected]>

.storybook/preview-head.html

@@ -1,3 +1,14 @@
 <script type="text/javascript">
-  var Byond = (window.Byond = {});
+  var Byond = (window.Byond = {
+    command: function (command) {
+      console.log("Byond.command", command);
+    },
+    winget: function (command) {
+      console.log("Byond.winget", command);
+      return Promise.resolve("FAKE VALUE");
+    },
+    winset: function (command) {
+      console.log("Byond.winset", command);
+    },
+  });
 </script>

lib/components/KeyListener.tsx

@@ -1,39 +1,33 @@
-import { Component } from 'react';
+import { useEffect } from 'react';
 import type { KeyEvent } from '../common/events';
 import { listenForKeyEvents } from '../common/hotkeys';
 
-type KeyListenerProps = Partial<{
+type Props = Partial<{
   onKey: (key: KeyEvent) => void;
   onKeyDown: (key: KeyEvent) => void;
   onKeyUp: (key: KeyEvent) => void;
 }>;
 
-export class KeyListener extends Component<KeyListenerProps> {
-  dispose: () => void;
-
-  constructor(props) {
-    super(props);
-
-    this.dispose = listenForKeyEvents((key) => {
-      if (this.props.onKey) {
-        this.props.onKey(key);
+export function KeyListener(props: Props) {
+  useEffect(() => {
+    const dispose = listenForKeyEvents((key) => {
+      if (props.onKey) {
+        props.onKey(key);
       }
 
-      if (key.isDown() && this.props.onKeyDown) {
-        this.props.onKeyDown(key);
+      if (key.isDown() && props.onKeyDown) {
+        props.onKeyDown(key);
       }
 
-      if (key.isUp() && this.props.onKeyUp) {
-        this.props.onKeyUp(key);
+      if (key.isUp() && props.onKeyUp) {
+        props.onKeyUp(key);
       }
     });
-  }
 
-  componentWillUnmount() {
-    this.dispose();
-  }
+    return () => {
+      dispose();
+    };
+  }, []);
 
-  render() {
-    return null;
-  }
+  return null;
 }

stories/KeyListener.stories.tsx

@@ -1,5 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import type { ComponentProps } from 'react';
+import type { KeyEvent } from 'lib/common/events';
+import { type ComponentProps, useEffect } from 'react';
+import { setupHotKeys } from '../lib/common/hotkeys';
 import { KeyListener } from '../lib/components/KeyListener';
 
 type StoryProps = ComponentProps<typeof KeyListener>;
@@ -11,8 +13,18 @@ export default {
 
 type Story = StoryObj<StoryProps>;
 
-export const Default: Story = {
-  args: {
-    children: 'KeyListener',
+export const onKeyDown: Story = {
+  render: () => {
+    useEffect(() => {
+      setupHotKeys();
+    }, []);
+
+    return (
+      <KeyListener
+        onKeyDown={(e: KeyEvent) => {
+          console.log('onKeyDown', e.toString(), e);
+        }}
+      />
+    );
   },
 };