diff --git a/website/app/src/App.tsx b/website/app/src/App.tsx index c04e9e44..8d91437f 100644 --- a/website/app/src/App.tsx +++ b/website/app/src/App.tsx @@ -1,4 +1,4 @@ -import { useRef, useState } from "react"; +import { useEffect, useRef, useState } from "react"; import { Mgba, MgbaHandle } from "./mgba"; import { BindingsControl, DefaultBindingsSet, Bindings } from "./bindings"; import { styled } from "styled-components"; @@ -48,7 +48,7 @@ const StartButtonWrapper = styled.button` function App() { const [{ volume, bindings }, setState] = useLocalStorage( { volume: 1.0, bindings: DefaultBindingsSet() }, - "agbrswebplayer" + "agbrswebplayer", ); const setVolume = (newVolume: number) => @@ -66,6 +66,30 @@ function App() { setShowBindings(!showBindings); }); + useEffect(() => { + const buttonPress = (event: MessageEvent) => { + const data = event.data; + + const { isPressed, button, reset } = data; + + if (isPressed === true) { + mgbaRef.current?.buttonPress(button); + } else if (isPressed === false) { + mgbaRef.current?.buttonRelease(button); + } + + if (reset) { + mgbaRef.current?.restart(); + } + }; + + window.addEventListener("message", buttonPress); + + return () => { + window.removeEventListener("message", buttonPress); + }; + }); + useAvoidItchIoScrolling(); const gameUrl = window.location.hash.slice(1); diff --git a/website/app/src/mgba.tsx b/website/app/src/mgba.tsx index c00cc6e1..e2b14a49 100644 --- a/website/app/src/mgba.tsx +++ b/website/app/src/mgba.tsx @@ -72,7 +72,6 @@ export const Mgba = forwardRef( if (state !== MgbaState.Uninitialised) return; setState(MgbaState.Initialising); - mgbaModule.current = { canvas: canvas.current, }; @@ -89,7 +88,7 @@ export const Mgba = forwardRef( try { mgbaModule.current.quitGame(); mgbaModule.current.quitMgba(); - } catch { } + } catch {} }; }, [state]); @@ -127,10 +126,10 @@ export const Mgba = forwardRef( return { restart: () => mgbaModule.current.quickReload(), buttonPress: (key: GbaKey) => mgbaModule.current.buttonPress(key), - buttonRelease: (key: GbaKey) => mgbaModule.current.buttonRelease(key), + buttonRelease: (key: GbaKey) => mgbaModule.current.buttonUnpress(key), }; }); return ; - } + }, ); diff --git a/website/site/assets/L.png b/website/site/assets/L.png new file mode 100644 index 00000000..75a1aae4 Binary files /dev/null and b/website/site/assets/L.png differ diff --git a/website/site/assets/R.png b/website/site/assets/R.png new file mode 100644 index 00000000..4622cd75 Binary files /dev/null and b/website/site/assets/R.png differ diff --git a/website/site/assets/SELECT.png b/website/site/assets/SELECT.png new file mode 100644 index 00000000..c1e67f77 Binary files /dev/null and b/website/site/assets/SELECT.png differ diff --git a/website/site/assets/START.png b/website/site/assets/START.png new file mode 100644 index 00000000..55895537 Binary files /dev/null and b/website/site/assets/START.png differ diff --git a/website/site/assets/ab.png b/website/site/assets/ab.png new file mode 100644 index 00000000..ed9780b9 Binary files /dev/null and b/website/site/assets/ab.png differ diff --git a/website/site/assets/dpad.png b/website/site/assets/dpad.png new file mode 100644 index 00000000..6c5d140b Binary files /dev/null and b/website/site/assets/dpad.png differ diff --git a/website/site/index.html b/website/site/index.html index 5ab7b13d..9de8f638 100644 --- a/website/site/index.html +++ b/website/site/index.html @@ -1,132 +1,336 @@ + + + agb - a rust framework for making Game Boy Advance games + - + .mobileControls { + display: flex; + gap: 10px; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 40px; + } - -
-

agb - a rust framework for making Game Boy Advance games

-
-
-
-
-
- -
+ .mobileControls img { + image-rendering: pixelated; + height: 100%; + } + + .mobileControlsRow { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + } + + @media (max-width: 800px) { + .desktopHelp { + display: none; + } + } + + @media (min-width: 800px) { + .mobileControls { + display: none; + } + } + + .mobileControlsBig { + height: calc(32px * 6); + } + + .mobileControlsSmall { + height: calc(32px * 3); + } + + + + +
+

agb - a rust framework for making Game Boy Advance games

+
+
+
+
+
+ +
+
-
-
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

+ Press escape to open the menu where you can view or change controls + and restart the game. The game provided is a combination of multiple + Game Boy Advance games made using agb, you can press left or right on + the main menu to switch game. +

+
+
- -
-

- Press escape to open the menu where you can view or change controls - and restart the game. The game provided is a combination of multiple - Game Boy Advance games made using agb, you can press left or right on - the main menu to switch game. -

-
- +
+
+ GitHub + Book +
+
-
-
- GitHub - Book -
-
- + + +