more mobile stuff

This commit is contained in:
Corwin 2024-04-05 17:09:50 +01:00
parent e43d2d5a3e
commit 552f8f878d
No known key found for this signature in database
3 changed files with 125 additions and 115 deletions

View file

@ -6,7 +6,7 @@ import {
useState, useState,
} from "react"; } from "react";
import mGBA from "./vendor/mgba"; import mGBA from "./vendor/mgba";
import { KeyBindings } from "./bindings"; import { GbaKey, KeyBindings } from "./bindings";
import { styled } from "styled-components"; import { styled } from "styled-components";
type Module = any; type Module = any;
@ -36,6 +36,8 @@ const MgbaCanvas = styled.canvas`
export interface MgbaHandle { export interface MgbaHandle {
restart: () => void; restart: () => void;
buttonPress: (key: GbaKey) => void;
buttonRelease: (key: GbaKey) => void;
} }
export const Mgba = forwardRef<MgbaHandle, MgbaProps>( export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
@ -87,7 +89,7 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
try { try {
mgbaModule.current.quitGame(); mgbaModule.current.quitGame();
mgbaModule.current.quitMgba(); mgbaModule.current.quitMgba();
} catch {} } catch { }
}; };
}, [state]); }, [state]);
@ -124,6 +126,8 @@ export const Mgba = forwardRef<MgbaHandle, MgbaProps>(
useImperativeHandle(ref, () => { useImperativeHandle(ref, () => {
return { return {
restart: () => mgbaModule.current.quickReload(), restart: () => mgbaModule.current.quickReload(),
buttonPress: (key: GbaKey) => mgbaModule.current.buttonPress(key),
buttonRelease: (key: GbaKey) => mgbaModule.current.buttonRelease(key),
}; };
}); });

View file

@ -1,6 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>agbrs crash backtrace</title> <title>agbrs crash backtrace</title>
<style> <style>
body { body {

View file

@ -1,127 +1,132 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<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>
*,
*::before,
*::after {
box-sizing: border-box;
}
body { <head>
font: 1.2em/1.62 sans-serif; <meta name="viewport" content="width=device-width, initial-scale=1.0">
background-color: white; <title>agb - a rust framework for making Game Boy Advance games</title>
font-size: 1.5rem; <style>
line-height: 1.6; *,
min-height: 100vh; *::before,
display: flex; *::after {
flex-direction: column; box-sizing: border-box;
margin: 0; }
}
h1,
h2,
h3 {
line-height: 1.2;
}
.gameDisplay > div {
display: flex;
justify-content: center;
height: 100%;
}
.gameDisplay { body {
height: clamp(480px, 40vh, calc(100vw / 3)); font: 1.2em/1.62 sans-serif;
max-width: 100vw; background-color: white;
margin-top: 20px; font-size: 1.5rem;
overflow-x: hidden; line-height: 1.6;
} min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
}
.gameDisplay .imageWrapper { h1,
aspect-ratio: 15 / 31; h2,
height: 100%; h3 {
} line-height: 1.2;
}
.gameDisplay .imageWrapper > img { .gameDisplay>div {
height: 100%; display: flex;
image-rendering: pixelated; justify-content: center;
} height: 100%;
}
.gameDisplay iframe { .gameDisplay {
border: 0; height: clamp(480px, 40vh, calc(100vw / 3));
height: 100%; max-width: 100vw;
max-width: 100vw; margin-top: 20px;
aspect-ratio: 240 / 160; overflow: hidden;
} }
header, .gameDisplay .imageWrapper {
.help { aspect-ratio: 15 / 31;
max-width: 60%; height: 100%;
margin-left: auto; }
margin-right: auto;
margin-block-end: 40px;
}
.red { .gameDisplay .imageWrapper>img {
background-color: #f5755e; height: 100%;
flex-grow: 1; image-rendering: pixelated;
} }
.links { .gameDisplay iframe {
margin-left: auto; border: 0;
margin-right: auto; height: 100%;
display: flex; max-width: 100vw;
justify-content: space-around; aspect-ratio: 240 / 160;
margin-top: 40px; }
margin-bottom: 40px;
max-width: 40rem;
}
.links > a { header,
text-decoration: none; .desktopHelp {
color: black; max-width: 60%;
background-color: #fad288; margin-left: auto;
border: solid #fad288 2px; margin-right: auto;
border-radius: 5px; margin-block-end: 40px;
padding: 5px 10px; }
}
.links > a:hover { .red {
border: solid black 2px; background-color: #f5755e;
} flex-grow: 1;
</style> }
</head>
<body> .links {
<header> margin-left: auto;
<h1>agb - a rust framework for making Game Boy Advance games</h1> margin-right: auto;
</header> display: flex;
<section> justify-content: space-around;
<div class="gameDisplay"> margin-top: 40px;
<div> margin-bottom: 40px;
<div class="imageWrapper"><img src="assets/left.png" /></div> max-width: 40rem;
<iframe }
onload="this.contentWindow.focus()"
src="mgba/index.html#/assets/combo.gba" .links>a {
></iframe> text-decoration: none;
<div class="imageWrapper"><img src="assets/right.png" /></div> color: black;
</div> background-color: #fad288;
border: solid #fad288 2px;
border-radius: 5px;
padding: 5px 10px;
}
.links>a:hover {
border: solid black 2px;
}
</style>
</head>
<body>
<header>
<h1>agb - a rust framework for making Game Boy Advance games</h1>
</header>
<section>
<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>
<div class="imageWrapper"><img src="assets/right.png" /></div>
</div> </div>
<div class="help"> </div>
<p> <div class="mobileControls">
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 </div>
Game Boy Advance games made using agb, you can press left or right on <div class="desktopHelp">
the main menu to switch game. <p>
</p> Press escape to open the menu where you can view or change controls
</div> and restart the game. The game provided is a combination of multiple
</section> Game Boy Advance games made using agb, you can press left or right on
the main menu to switch game.
</p>
</div>
</section>
<section class="red">
<div class="links">
<a href="https://github.com/agbrs/agb">GitHub</a>
<a href="book/">Book</a>
</div>
</section>
</body>
<section class="red">
<div class="links">
<a href="https://github.com/agbrs/agb">GitHub</a>
<a href="book/">Book</a>
</div>
</section>
</body>
</html> </html>