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

Sort out some of the canvas CSS

Browse source
This commit is contained in:
Gwilym Inzani 2023-07-05 10:27:52 +01:00 committed by Corwin
parent baab2582b5
commit ce75b15716
No known key found for this signature in database
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
website/src/mgba.tsx
View file

@ -1,6 +1,7 @@
import { FC, useEffect, useRef, useState } from "react"; import { FC, useEffect, useRef, useState } from "react";
import mGBA from "./vendor/mgba"; import mGBA from "./vendor/mgba";
import { KeyBindings } from "./bindings"; import { KeyBindings } from "./bindings";
import { styled } from "styled-components";
type Module = any; type Module = any;
@ -19,6 +20,14 @@ enum MgbaState {
const MGBA_ROM_DIRECTORY = "/data/games"; const MGBA_ROM_DIRECTORY = "/data/games";
const MgbaCanvas = styled.canvas`
image-rendering: pixelated;
aspect-ratio: 240 / 160;
width: 100%;
object-fit: contain;
max-height: 100%;
`;
export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => { export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => {
const canvas = useRef(null); const canvas = useRef(null);
const mgbaModule = useRef<Module>({}); const mgbaModule = useRef<Module>({});
@ -107,7 +116,7 @@ export const Mgba: FC<MgbaProps> = ({ gameUrl, volume, controls, paused }) => {
return ( return (
<> <>
<canvas ref={canvas}></canvas> <MgbaCanvas ref={canvas} />
<button <button
onClick={() => { onClick={() => {
if (state !== MgbaState.Initialised) return; if (state !== MgbaState.Initialised) return;