From f944f35b617c45689e593310121a7bb0747fa4f7 Mon Sep 17 00:00:00 2001
From: Gwilym Inzani <email@gwilym.dev>
Date: Wed, 5 Jul 2023 12:07:47 +0100
Subject: [PATCH] Add itch.io scrolling protection

---
 website/src/App.tsx                    |  3 +++
 website/src/useAvoidItchIoScrolling.ts | 17 +++++++++++++++++
 2 files changed, 20 insertions(+)
 create mode 100644 website/src/useAvoidItchIoScrolling.ts

diff --git a/website/src/App.tsx b/website/src/App.tsx
index 25108a7b..da84fe16 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -4,6 +4,7 @@ import { BindingsControl, DefaultBindingsSet, Bindings } from "./bindings";
 import { styled } from "styled-components";
 import { useOnKeyUp } from "./useOnKeyUp.hook";
 import { useLocalStorage } from "./useLocalStorage.hook";
+import { useAvoidItchIoScrolling } from "./useAvoidItchIoScrolling";
 
 const BindingsDialog = styled.dialog`
   border-radius: 5px;
@@ -47,6 +48,8 @@ function App() {
     setShowBindings(!showBindings);
   });
 
+  useAvoidItchIoScrolling();
+
   return (
     <AppContainer>
       {showBindings && (
diff --git a/website/src/useAvoidItchIoScrolling.ts b/website/src/useAvoidItchIoScrolling.ts
new file mode 100644
index 00000000..cf708dd8
--- /dev/null
+++ b/website/src/useAvoidItchIoScrolling.ts
@@ -0,0 +1,17 @@
+import { useEffect } from "react";
+
+export const useAvoidItchIoScrolling = () => {
+  useEffect(() => {
+    const eventHandler = (e: KeyboardEvent) => {
+      if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+        e.preventDefault();
+      }
+    };
+
+    window.addEventListener("keydown", eventHandler, false);
+
+    return () => {
+      window.removeEventListener("keydown", eventHandler, false);
+    };
+  }, []);
+};