diff --git a/justfile b/justfile index 848cf761..f5f7afc9 100644 --- a/justfile +++ b/justfile @@ -91,10 +91,9 @@ build-mgba-wasm: build-combo-rom-site: just _build-rom "examples/combo" "AGBGAMES" + gzip -9 -c examples/target/examples/combo.gba > website/agb/src/app/combo.gba.gz build-site-app: build-mgba-wasm build-combo-rom-site - mkdir -p website/agb/public - gzip -9 -c examples/target/examples/combo.gba > website/agb/public/combo.gba.gz (cd website/agb && npm install --no-save --prefer-offline --no-audit) (cd website/agb && npm run build) diff --git a/website/agb/src/app/mgba/mgba.tsx b/website/agb/src/app/mgba/mgba.tsx index 708323b0..002acb91 100644 --- a/website/agb/src/app/mgba/mgba.tsx +++ b/website/agb/src/app/mgba/mgba.tsx @@ -13,7 +13,7 @@ import { useController } from "./useController.hook"; import { useLocalStorage } from "./useLocalStorage.hook"; interface MgbaProps { - gameUrl: string; + gameUrl: URL; volume?: number; controls: KeyBindings; paused: boolean; @@ -41,10 +41,12 @@ export interface MgbaHandle { buttonRelease: (key: GbaKey) => void; } -async function downloadGame(gameUrl: string): Promise { +async function downloadGame(gameUrl: URL): Promise { const game = await fetch(gameUrl); - if (gameUrl.endsWith(".gz")) { + const gameUrlString = gameUrl.toString(); + + if (gameUrlString.endsWith(".gz")) { const decompressedStream = (await game.blob()) .stream() .pipeThrough(new DecompressionStream("gzip")); @@ -67,13 +69,14 @@ export const Mgba = forwardRef( {}, "agbrswebplayer/savegames" ); + const gameUrlString = gameUrl.toString(); const [state, setState] = useState(MgbaState.Uninitialised); const [gameLoaded, setGameLoaded] = useState(false); useEffect(() => { function beforeUnload() { - const gameSplit = gameUrl.split("/"); + const gameSplit = gameUrlString.split("/"); const gameBaseName = gameSplit[gameSplit.length - 1]; const save = mgbaModule.current?.getSave(); @@ -90,12 +93,12 @@ export const Mgba = forwardRef( return () => { window.removeEventListener("beforeunload", beforeUnload); }; - }, [gameUrl, saveGame, setSaveGame]); + }, [gameUrlString, saveGame, setSaveGame]); useEffect(() => { if (state !== MgbaState.Initialised) return; - const gameSplit = gameUrl.split("/"); + const gameSplit = gameUrlString.split("/"); const gameBaseName = gameSplit[gameSplit.length - 1]; const save = saveGame[gameBaseName]; @@ -104,13 +107,13 @@ export const Mgba = forwardRef( const savePath = `${MGBA_ROM_DIRECTORY}/${gameBaseName}.sav`; mgbaModule.current?.FS.writeFile(savePath, new Uint8Array([0, 1, 2, 3])); - }, [gameUrl, saveGame, state]); + }, [gameUrlString, saveGame, state]); useEffect(() => { if (state !== MgbaState.Initialised) return; (async () => { const gameData = await downloadGame(gameUrl); - const gameSplit = gameUrl.split("/"); + const gameSplit = gameUrlString.split("/"); const gameBaseName = gameSplit[gameSplit.length - 1]; const gamePath = `${MGBA_ROM_DIRECTORY}/${gameBaseName}`; @@ -119,7 +122,7 @@ export const Mgba = forwardRef( mgbaModule.current?.setVolume(0.1); // for some reason you have to do this or you get no sound setGameLoaded(true); })(); - }, [state, gameUrl]); + }, [state, gameUrl, gameUrlString]); // init mgba useEffect(() => { diff --git a/website/agb/src/app/mgba/mgbaWrapper.tsx b/website/agb/src/app/mgba/mgbaWrapper.tsx index ecbba3cc..504da4d9 100644 --- a/website/agb/src/app/mgba/mgbaWrapper.tsx +++ b/website/agb/src/app/mgba/mgbaWrapper.tsx @@ -60,7 +60,7 @@ const StartButtonWrapper = styled.button` `; interface MgbaWrapperProps { - gameUrl: string; + gameUrl: URL; isPlaying?: boolean; setIsPlaying?: (isPlaying: boolean) => void; } diff --git a/website/agb/src/app/page.tsx b/website/agb/src/app/page.tsx index 41c58c8b..0f8e833a 100644 --- a/website/agb/src/app/page.tsx +++ b/website/agb/src/app/page.tsx @@ -78,6 +78,8 @@ function shouldStartPlaying(isTouchScreen: boolean | undefined) { return !isTouchScreen; } +const COMBO_GAME = new URL("combo.gba.gz", import.meta.url); + function MgbaWithControllerSides() { const mgba = useRef(null); @@ -105,7 +107,7 @@ function MgbaWithControllerSides() {