From c7854f3035f4bd90c2f99fb3057280359af6f573 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Fri, 28 Oct 2022 23:04:41 +0100
Subject: [PATCH] fix: interval running added escape key to exit fullscreen
---
examples/web/react/app.tsx | 13 +++++++++++--
1 file changed, 11 insertions(+), 2 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index c844a19d..4f218598 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useEffect, useState } from "react";
+import React, { FC, useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client";
declare const require: any;
@@ -57,6 +57,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
const [paused, setPaused] = useState(false);
const [fullscreen, setFullscreen] = useState(false);
const [backgroundIndex, setBackgroundIndex] = useState(0);
+ const interval = useRef<number | undefined>(undefined);
const getPauseText = () => (paused ? "Resume" : "Pause");
const getPauseIcon = () =>
paused ? require("../res/play.svg") : require("../res/pause.svg");
@@ -78,13 +79,21 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
setFullscreen(!fullscreen);
};
const onDrawHandler = (handler: DrawHandler) => {
- setInterval(() => {
+ if (interval.current) return;
+ interval.current = setInterval(() => {
handler(emulator.getImageBuffer(), PixelFormat.RGB);
}, 1000);
};
useEffect(() => {
document.body.style.backgroundColor = `#${getBackground()}`;
});
+ useEffect(() => {
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape") {
+ setFullscreen(false);
+ }
+ });
+ }, []);
return (
<div className="app">
<Footer color={getBackground()}>
--
GitLab