From 481e964f0d7b3c51a44cbf1d5ae39535f906f3e2 Mon Sep 17 00:00:00 2001
From: ZeWaka <zewakagamer@gmail.com>
Date: Fri, 22 Nov 2024 13:30:48 -0800
Subject: [PATCH] makes keylistener hook-based and mocks `Byond` a bit (#35)

Co-authored-by: jlsnow301 <jlsnow301@pm.me>
---
 .storybook/preview-head.html    | 13 ++++++++++-
 lib/components/KeyListener.tsx  | 38 ++++++++++++++-------------------
 stories/KeyListener.stories.tsx | 20 +++++++++++++----
 3 files changed, 44 insertions(+), 27 deletions(-)

diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 92758b5..846e0b2 100644
--- a/.storybook/preview-head.html
+++ b/.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>
diff --git a/lib/components/KeyListener.tsx b/lib/components/KeyListener.tsx
index 3f06576..95038dc 100644
--- a/lib/components/KeyListener.tsx
+++ b/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;
 }
diff --git a/stories/KeyListener.stories.tsx b/stories/KeyListener.stories.tsx
index 93f72ac..2421fc5 100644
--- a/stories/KeyListener.stories.tsx
+++ b/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);
+        }}
+      />
+    );
   },
 };