daedalOS/components/apps/SpaceCadet/useSpaceCadet.ts
2023-11-18 21:02:03 -08:00

73 lines
2.0 KiB
TypeScript

import { useEffect, useState } from "react";
import { type ContainerHookProps } from "components/system/Apps/AppContainer";
import useEmscriptenMount from "components/system/Files/FileManager/useEmscriptenMount";
import { type EmscriptenFS } from "contexts/fileSystem/useAsyncFs";
import { useProcesses } from "contexts/process";
import { TRANSITIONS_IN_MILLISECONDS } from "utils/constants";
import { loadFiles } from "utils/functions";
declare global {
interface Window {
Module: {
SDL2?: {
audioContext: AudioContext;
};
canvas: HTMLCanvasElement;
postRun: () => void;
};
}
}
const useSpaceCadet = ({
containerRef,
id,
setLoading,
}: ContainerHookProps): void => {
const { processes: { [id]: { libs = [] } = {} } = {} } = useProcesses();
const [canvas, setCanvas] = useState<HTMLCanvasElement>();
const mountEmFs = useEmscriptenMount();
useEffect(() => {
const containerCanvas = containerRef.current?.querySelector("canvas");
if (containerCanvas instanceof HTMLCanvasElement) {
window.Module = {
canvas: containerCanvas,
postRun: () => {
setLoading(false);
mountEmFs(window.FS as EmscriptenFS, "SpaceCadet");
},
};
setCanvas(containerCanvas);
}
}, [containerRef, mountEmFs, setLoading]);
useEffect(() => {
if (canvas) {
setTimeout(() => {
const { height, width } =
containerRef.current?.getBoundingClientRect() || {};
if (height && width) {
canvas.style.height = `${height}px`;
canvas.style.width = `${width}px`;
loadFiles(libs, undefined, !!window.Module.canvas);
}
}, TRANSITIONS_IN_MILLISECONDS.WINDOW);
}
return () => {
if (canvas && window.Module) {
try {
window.Module.SDL2?.audioContext.close();
} catch {
// Ignore errors during closing
}
}
};
}, [canvas, containerRef, libs]);
};
export default useSpaceCadet;