refactor: ui owns key input

src/add-key-listener.js

@@ -1,6 +1,6 @@
 // Handle lame OS key input event behavior. See: https://mzl.la/2Ob0WQE
 // Also "up" all keys on blur.
-export default function addKeyInputListener(target, listener) {
+export default function addKeyListener(target, listener) {
   let keysDown = {};
   let keyUpDelays = {};
   function setAllKeysUp() {

src/components/ui.jsx

@@ -1,11 +1,42 @@
+import {useContext, useEffect} from 'react';
+
+import addKeyListener from '../add-key-listener.js';
 import {RESOLUTION} from '../constants';
+import ServerContext from '../context/server';
 import Dom from './dom';
 import Pixi from './pixi';
 import styles from './ui.module.css';
 
 const ratio = RESOLUTION[0] / RESOLUTION[1];
 
+// Handle input.
+const ACTION_MAP = {
+  w: 'moveUp',
+  d: 'moveRight',
+  s: 'moveDown',
+  a: 'moveLeft',
+};
+const KEY_MAP = {
+  keyDown: 1,
+  keyUp: 0,
+};
+
 export default function Ui() {
+  // Key input.
+  const server = useContext(ServerContext);
+  useEffect(() => {
+    return addKeyListener(document.body, ({type, payload}) => {
+      if (type in KEY_MAP && payload in ACTION_MAP) {
+        server.send({
+          type: 'action',
+          payload: {
+            type: ACTION_MAP[payload],
+            value: KEY_MAP[type],
+          },
+        });
+      }
+    });
+  });
   return (
     <div className={styles.ui}>
       <style>

src/index.js

@@ -1,7 +1,6 @@
 import {createElement} from 'react';
 import {createRoot} from 'react-dom/client';
 
-import addKeyInputListener from './add-key-input-listener.js';
 import Silphius from './components/silphius.jsx';
 import ServerContext from './context/server.js';
 
@@ -13,29 +12,6 @@ const server = new Server();
 await server.connect();
 server.send({type: 'connect'});
 
-// Handle input.
-const ACTION_MAP = {
-  w: 'moveUp',
-  d: 'moveRight',
-  s: 'moveDown',
-  a: 'moveLeft',
-};
-const KEY_MAP = {
-  keyDown: 1,
-  keyUp: 0,
-};
-addKeyInputListener(document.body, ({type, payload}) => {
-  if (type in KEY_MAP && payload in ACTION_MAP) {
-    server.send({
-      type: 'action',
-      payload: {
-        type: ACTION_MAP[payload],
-        value: KEY_MAP[type],
-      },
-    });
-  }
-});
-
 // Setup DOM.
 createRoot(document.querySelector('.silphius'))
   .render(