From 48373faa1765b7ac268fe2d997047e69c1c5c5bf Mon Sep 17 00:00:00 2001 From: Corwin Date: Fri, 5 Apr 2024 19:47:04 +0100 Subject: [PATCH] finish adding mobile controls --- website/app/src/App.tsx | 28 ++- website/app/src/mgba.tsx | 7 +- website/site/assets/L.png | Bin 0 -> 163 bytes website/site/assets/R.png | Bin 0 -> 173 bytes website/site/assets/SELECT.png | Bin 0 -> 190 bytes website/site/assets/START.png | Bin 0 -> 189 bytes website/site/assets/ab.png | Bin 0 -> 241 bytes website/site/assets/dpad.png | Bin 0 -> 156 bytes website/site/index.html | 428 ++++++++++++++++++++++++--------- 9 files changed, 345 insertions(+), 118 deletions(-) create mode 100644 website/site/assets/L.png create mode 100644 website/site/assets/R.png create mode 100644 website/site/assets/SELECT.png create mode 100644 website/site/assets/START.png create mode 100644 website/site/assets/ab.png create mode 100644 website/site/assets/dpad.png 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 0000000000000000000000000000000000000000..75a1aae4c790f5b9dc699a7233916ffe27b1d3b7 GIT binary patch literal 163 zcmeAS@N?(olHy`uVBq!ia0vp^0wB!61|;P_|4#%`jKx9jP7LeL$-D$|Vm)0PLo9l) zPCCffV8G!V{rLa?qP;V28v1aE$M$o-&pptv{_vZCNnQpgjhjzik$%m<;LiSyr}6Mn zJ~_wd&z`d0&C!~`a?d&XU!!=3tm~B}?sP@nI3~29?Sa*8;aG)!mA2 zSn@b^LJ`xX&%qp(DT-Zzran(|PI`;!F-*#t=VW(K>q*K%=QZzh*b~2<&8(NV=KgD} U=<{IO2cVSzopr0CKQCW&i*H literal 0 HcmV?d00001 diff --git a/website/site/assets/SELECT.png b/website/site/assets/SELECT.png new file mode 100644 index 0000000000000000000000000000000000000000..c1e67f77b59b624797a7d704e1a0ebde44066617 GIT binary patch literal 190 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et!3HGD8EPYe6k~CayA#8@b22Z1oC;4D#}JRs zx04;Y4k+-j+`aU_zOp*#+Jp=NomQ*uM-q;$SSs_6FQ-XmyE$vreZK~k)Ldzm*(@qI zXT26+*s-xI?UiX*r}d^SlV|v*g}nC+Uzg!LY3|P6^skY3I9)ff- o#~ttgFipLo+hFcjdEyhp|J7k4Ugyou0o}mh>FVdQ&MBb@03E(a=>Px# literal 0 HcmV?d00001 diff --git a/website/site/assets/START.png b/website/site/assets/START.png new file mode 100644 index 0000000000000000000000000000000000000000..5589553759fe04742a1ba1f26ed129f14e73964f GIT binary patch literal 189 zcmeAS@N?(olHy`uVBq!ia0vp^3P3Et!3HGD8EPYe6k~CayA#8@b22YMVxBIJAs(G? zryS&KFyL@r`SE}K&&rFfg6*FTObhqwERoh_Ni+LceuAChFzZsU%`6O!(o74C7Eard z-?rr4j}yW_r**0pYp=BFdmj17SUEh_mzQB$uj`X&!jfi=T}g3wP4&sQBdHnUqeVJ>^`7qJ~20)mpdJLffhv3<~Y z#dn3v6qmrb4YFr8<)p4OUSZTFw^ZrE+!*!WS>AIUcZrwWy|C+Q3unfcyRi;c+?SRs o)bdBDRL&0Q)TsZbTgs>>xZ&WTi~uDeptBh~UHx3vIVCg!0LA25`~Uy| literal 0 HcmV?d00001 diff --git a/website/site/assets/dpad.png b/website/site/assets/dpad.png new file mode 100644 index 0000000000000000000000000000000000000000..6c5d140bcec5885857d110d2a1da7f6922ecaf37 GIT binary patch literal 156 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdz#^NA%Cx&(BWL^R}VV*9IArY-_ zuNiVNDDbcxob%(q{_$h%YZlyibJg7_!sF6i*U2r@oS*aU`5VZ>A)xTUS|Rl4|3~aU z|1mKE`4bM?*?GM@P+1}RSdT4c{*K3ydJYW?vshUt@>{PiK70*m1B0ilpUXO@geCyA C{x(Jc literal 0 HcmV?d00001 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 -
-
- + + +