Skip to content
Snippets Groups Projects
Verified Commit c7854f30 authored by João Magalhães's avatar João Magalhães :rocket:
Browse files

fix: interval running

added escape key to exit fullscreen
parent 97a8f886
No related branches found
No related tags found
1 merge request!9Version 0.4.0 🍾
Pipeline #1363 passed
import React, { FC, useEffect, useState } from "react"; import React, { FC, useEffect, useRef, useState } from "react";
import ReactDOM from "react-dom/client"; import ReactDOM from "react-dom/client";
declare const require: any; declare const require: any;
...@@ -57,6 +57,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { ...@@ -57,6 +57,7 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
const [paused, setPaused] = useState(false); const [paused, setPaused] = useState(false);
const [fullscreen, setFullscreen] = useState(false); const [fullscreen, setFullscreen] = useState(false);
const [backgroundIndex, setBackgroundIndex] = useState(0); const [backgroundIndex, setBackgroundIndex] = useState(0);
const interval = useRef<number | undefined>(undefined);
const getPauseText = () => (paused ? "Resume" : "Pause"); const getPauseText = () => (paused ? "Resume" : "Pause");
const getPauseIcon = () => const getPauseIcon = () =>
paused ? require("../res/play.svg") : require("../res/pause.svg"); paused ? require("../res/play.svg") : require("../res/pause.svg");
...@@ -78,13 +79,21 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => { ...@@ -78,13 +79,21 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
setFullscreen(!fullscreen); setFullscreen(!fullscreen);
}; };
const onDrawHandler = (handler: DrawHandler) => { const onDrawHandler = (handler: DrawHandler) => {
setInterval(() => { if (interval.current) return;
interval.current = setInterval(() => {
handler(emulator.getImageBuffer(), PixelFormat.RGB); handler(emulator.getImageBuffer(), PixelFormat.RGB);
}, 1000); }, 1000);
}; };
useEffect(() => { useEffect(() => {
document.body.style.backgroundColor = `#${getBackground()}`; document.body.style.backgroundColor = `#${getBackground()}`;
}); });
useEffect(() => {
document.addEventListener("keydown", (event) => {
if (event.key === "Escape") {
setFullscreen(false);
}
});
}, []);
return ( return (
<div className="app"> <div className="app">
<Footer color={getBackground()}> <Footer color={getBackground()}>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment