alex/agb
1
0
Fork 0
mirror of https://github.com/italicsjenga/agb.git synced 2024-12-23 08:11:33 +11:00
Code Issues Packages Projects Releases Wiki Activity

finish adding mobile controls

Browse source
This commit is contained in:
Corwin 2024-04-05 19:47:04 +01:00
parent 552f8f878d
commit 48373faa17
No known key found for this signature in database
9 changed files with 345 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
website/app/src/App.tsx
View file

@ -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);

7
website/app/src/mgba.tsx
View file

@ -72,7 +72,6 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
if (state !== MgbaState.Uninitialised) return;
setState(MgbaState.Initialising);
mgbaModule.current = {
canvas: canvas.current,
};
@ -89,7 +88,7 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
try {
mgbaModule.current.quitGame();
mgbaModule.current.quitMgba();
} catch { }
} catch {}
};
}, [state]);
@ -127,10 +126,10 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
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 <MgbaCanvas ref={canvas} />;
}
},
);

BIN
website/site/assets/L.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 163 B

BIN
website/site/assets/R.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 173 B

BIN
website/site/assets/SELECT.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 190 B

BIN
website/site/assets/START.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 189 B

BIN
website/site/assets/ab.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 241 B

BIN
website/site/assets/dpad.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 156 B

232
website/site/index.html
View file

@ -1,8 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>agb - a rust framework for making Game Boy Advance games</title>
<style>
*,
@ -28,7 +27,7 @@
line-height: 1.2;
}
.gameDisplay>div {
.gameDisplay > div {
display: flex;
justify-content: center;
height: 100%;
@ -46,7 +45,7 @@
height: 100%;
}
.gameDisplay .imageWrapper>img {
.gameDisplay .imageWrapper > img {
height: 100%;
image-rendering: pixelated;
}
@ -81,7 +80,7 @@
max-width: 40rem;
}
.links>a {
.links > a {
text-decoration: none;
color: black;
background-color: #fad288;
@ -90,13 +89,54 @@
padding: 5px 10px;
}
.links>a:hover {
.links > a:hover {
border: solid black 2px;
}
</style>
</head>
<body>
.mobileControls {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
flex-direction: column;
margin-bottom: 40px;
}
.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);
}
</style>
</head>
<body>
<header>
<h1>agb - a rust framework for making Game Boy Advance games</h1>
</header>
@ -104,12 +144,30 @@
<div class="gameDisplay">
<div>
<div class="imageWrapper"><img src="assets/left.png" /></div>
<iframe id="gameFrame" onload="this.contentWindow.focus()" src="mgba/index.html#/assets/combo.gba"></iframe>
<iframe
id="gameFrame"
onload="this.contentWindow.focus()"
src="mgba/index.html#/assets/combo.gba"
></iframe>
<div class="imageWrapper"><img src="assets/right.png" /></div>
</div>
</div>
<div class="mobileControls">
<div id="mobileControls" class="mobileControls">
<div class="mobileControlsRow mobileControlsSmall">
<img id="mobileL" src="assets/L.png" />
<img id="mobileR" src="assets/R.png" />
</div>
<div class="mobileControlsRow mobileControlsBig">
<img id="mobileDpad" src="assets/dpad.png" />
<img id="mobileAb" src="assets/ab.png" />
</div>
<div class="mobileControlsRow mobileControlsSmall">
<img id="mobileStart" src="assets/START.png" />
<img id="mobileSelect" src="assets/SELECT.png" />
</div>
<div class="mobileControlsRow">
<button id="mobileRestart">Restart</button>
</div>
</div>
<div class="desktopHelp">
<p>
@ -127,6 +185,152 @@
<a href="book/">Book</a>
</div>
</section>
</body>
<script>
const addSimpleButton = (ele, key) => {
ele.addEventListener("touchstart", (evt) => pressButton(key));
ele.addEventListener("touchend", (evt) => releaseButton(key));
};
mobileRestart.addEventListener("click", () => {
gameFrame.contentWindow.postMessage({ reset: true });
});
const pressButton = (key) => {
gameFrame.contentWindow.postMessage({ isPressed: true, button: key });
};
const releaseButton = (key) => {
gameFrame.contentWindow.postMessage({ isPressed: false, button: key });
};
mobileControls.addEventListener("touchmove", (evt) =>
evt.preventDefault()
);
mobileControls.addEventListener("contextmenu", (evt) =>
evt.preventDefault()
);
addSimpleButton(mobileL, "L");
addSimpleButton(mobileR, "L");
addSimpleButton(mobileStart, "Start");
addSimpleButton(mobileSelect, "Select");
let previouslyPressedButtons = [];
const dpadMovement = (touch) => {
const target = touch.target.getBoundingClientRect();
const touchPoint = { x: touch.clientX, y: touch.clientY };
const targetArea = {
x: target.left,
y: target.top,
width: target.width,
height: target.height,
};
const relativePosition = {
x: touchPoint.x - targetArea.x,
y: touchPoint.y - targetArea.y,
};
const touchedBox = {
x: Math.floor(relativePosition.x / (targetArea.width / 3)),
y: Math.floor(relativePosition.y / (targetArea.height / 3)),
};
const buttonBoxMapping = [
[["Up", "Left"], ["Up"], ["Up", "Right"]],
[["Left"], [], ["Right"]],
[["Down", "Left"], ["Down"], ["Down", "Right"]],
];
const buttonsToPress =
(buttonBoxMapping[touchedBox.y] ?? [])[touchedBox.x] ?? [];
for (let oldButton of previouslyPressedButtons) {
if (!buttonsToPress.includes(oldButton)) {
releaseButton(oldButton);
}
}
for (let newButton of buttonsToPress) {
if (!previouslyPressedButtons.includes(newButton)) {
pressButton(newButton);
}
}
previouslyPressedButtons = buttonsToPress;
};
mobileDpad.addEventListener("touchstart", (evt) =>
dpadMovement(evt.touches[0])
);
mobileDpad.addEventListener("touchmove", (evt) =>
dpadMovement(evt.touches[0])
);
mobileDpad.addEventListener("touchend", (evt) => {
for (let oldButton of previouslyPressedButtons) {
releaseButton(oldButton);
}
previouslyPressedButtons = [];
});
let mobileAbAPress = undefined;
const mobileAbMovement = (touch) => {
const target = touch.target.getBoundingClientRect();
const touchPoint = { x: touch.clientX, y: touch.clientY };
const targetArea = {
x: target.left,
y: target.top,
width: target.width,
height: target.height,
};
const relativePosition = {
x: touchPoint.x - targetArea.x,
y: touchPoint.y - targetArea.y,
};
const aPress = relativePosition.x > relativePosition.y;
if (aPress !== mobileAbAPress) {
if (mobileAbAPress === true) {
releaseButton("A");
} else if (mobileAbAPress === false) {
releaseButton("B");
}
}
if (aPress) {
pressButton("A");
} else {
pressButton("B");
}
mobileAbAPress = aPress;
};
mobileAb.addEventListener("touchstart", (evt) =>
mobileAbMovement(evt.touches[0])
);
mobileAb.addEventListener("touchmove", (evt) =>
mobileAbMovement(evt.touches[0])
);
mobileAb.addEventListener("touchend", (evt) => {
if (mobileAbAPress === true) {
releaseButton("A");
} else if (mobileAbAPress === false) {
releaseButton("B");
}
mobileAbAPress = undefined;
});
</script>
</body>
</html>