diff --git a/src/components/gameboy.tsx b/src/components/gameboy.tsx index 47d8e060a..e7bbe9309 100644 --- a/src/components/gameboy.tsx +++ b/src/components/gameboy.tsx @@ -1,14 +1,19 @@ // @ts-ignore No types available import { WasmBoy } from '@soapbox.pub/wasmboy'; +import clsx from 'clsx'; import React, { useCallback, useEffect, useRef } from 'react'; -interface IGameboy extends React.CanvasHTMLAttributes { +interface IGameboy extends Pick, 'onFocus' | 'onBlur'> { + /** Classname of the outer `
`. */ + className?: string; /** URL to the ROM. */ src: string; + /** Aspect ratio of the canvas. */ + aspect?: 'normal' | 'stretched'; } /** Component to display a playable Gameboy emulator. */ -const Gameboy: React.FC = ({ src, onFocus, onBlur, ...rest }) => { +const Gameboy: React.FC = ({ className, src, aspect = 'normal', onFocus, onBlur, ...rest }) => { const canvas = useRef(null); async function init() { @@ -41,13 +46,19 @@ const Gameboy: React.FC = ({ src, onFocus, onBlur, ...rest }) => { }, []); return ( - +
+ +
); }; diff --git a/src/components/media-gallery.tsx b/src/components/media-gallery.tsx index 198fee48a..db7bfd1d6 100644 --- a/src/components/media-gallery.tsx +++ b/src/components/media-gallery.tsx @@ -156,7 +156,7 @@ const Item: React.FC = ({ style={{ position, float, left, top, right, bottom, height, width: `${width}%` }} > }> - +
);