import { useEffect, useRef, useState } from "react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; export default function N64Emulator() { const iframeRef = useRef(null); const [romLoaded, setRomLoaded] = useState(false); function handleFile(file) { const reader = new FileReader(); reader.onload = function (ev) { const base64Rom = btoa(ev.target.result); const saveKey = `n64-save-${file.name}`; localStorage.setItem('last-rom-name', file.name); iframeRef.current.contentWindow.postMessage({ type: "loadN64", romData: base64Rom, saveKey: saveKey, }, "*"); setRomLoaded(true); enterFullscreen(); }; reader.readAsBinaryString(file); } function handleFileUpload(e) { const file = e.target.files[0]; if (file) handleFile(file); } function handleDrop(e) { e.preventDefault(); const file = e.dataTransfer.files[0]; if (file) handleFile(file); } function handleDragOver(e) { e.preventDefault(); } function enterFullscreen() { const iframe = iframeRef.current; if (iframe.requestFullscreen) iframe.requestFullscreen(); else if (iframe.webkitRequestFullscreen) iframe.webkitRequestFullscreen(); else if (iframe.mozRequestFullScreen) iframe.mozRequestFullScreen(); else if (iframe.msRequestFullscreen) iframe.msRequestFullscreen(); } useEffect(() => { window.addEventListener("message", (e) => { if (e.data.type === "saveData") { localStorage.setItem(e.data.key, e.data.save); } }); }, []); return (
N64 Emulator
Drag & drop a ROM file or use the input above.
{!romLoaded &&
Select or drop a ROM file to start playing.
}
); }