moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Render a Game Boy player for GB/GBC attachments

This commit is contained in:
Alex Gleason 2023-11-22 22:20:19 -06:00
parent c08ac1eeff
commit 2e1282bc2d
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
4 changed files with 92 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -174,6 +174,7 @@
"vite-plugin-html": "^3.2.0",
"vite-plugin-require": "^1.1.10",
"vite-plugin-static-copy": "^0.17.0",
"wasmboy": "^0.7.1",
"wicg-inert": "^3.1.1",
"zod": "^3.21.4"
},

47
src/components/gameboy.tsx Normal file
View File

@ -0,0 +1,47 @@
import React, { useEffect, useRef } from 'react';
// @ts-ignore No types available
import { WasmBoy } from 'wasmboy';
interface IGameboy extends React.CanvasHTMLAttributes<HTMLCanvasElement> {
/** URL to the ROM. */
src: string;
}
/** Component to display a playable Gameboy emulator. */
const Gameboy: React.FC<IGameboy> = ({ src, ...rest }) => {
const canvas = useRef<HTMLCanvasElement>(null);
async function init() {
await WasmBoy.config(WasmBoyOptions, canvas.current!);
await WasmBoy.loadROM(src);
await WasmBoy.play();
}
useEffect(() => {
init();
}, []);
return (
<canvas ref={canvas} {...rest} />
);
};
const WasmBoyOptions = {
headless: false,
useGbcWhenOptional: true,
isAudioEnabled: false,
frameSkip: 1,
audioBatchProcessing: true,
timersBatchProcessing: false,
audioAccumulateSamples: true,
graphicsBatchProcessing: false,
graphicsDisableScanlineRendering: false,
tileRendering: true,
tileCaching: true,
gameboyFPSCap: 60,
updateGraphicsCallback: false,
updateAudioCallback: false,
saveStateCallback: false,
};
export { Gameboy };

24
src/components/media-gallery.tsx
View File

@ -12,6 +12,8 @@ import { truncateFilename } from 'soapbox/utils/media';
import { isIOS } from '../is-mobile';
import { isPanoramic, isPortrait, isNonConformingRatio, minimumAspectRatio, maximumAspectRatio } from '../utils/media-aspect-ratio';
import { Gameboy } from './gameboy';
import type { Property } from 'csstype';
import type { List as ImmutableList } from 'immutable';
@ -141,8 +143,22 @@ const Item: React.FC<IItem> = ({
}
let thumbnail: React.ReactNode = '';
const ext = attachment.url.split('.').pop()?.toLowerCase();
if (attachment.type === 'unknown') {
if (attachment.type === 'unknown' && ['gb', 'gbc'].includes(ext!)) {
return (
<div
className={clsx('media-gallery__item', {
standalone,
'rounded-md': total > 1,
})}
key={attachment.id}
style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
>
<Gameboy className='media-gallery__item-thumbnail object-contain' src={attachment.url} />
</div>
);
} else if (attachment.type === 'unknown') {
const filename = truncateFilename(attachment.url, MAX_FILENAME_LENGTH);
const attachmentIcon = (
<Icon
@ -215,7 +231,6 @@ const Item: React.FC<IItem> = ({
</div>
);
} else if (attachment.type === 'audio') {
const ext = attachment.url.split('.').pop()?.toUpperCase();
thumbnail = (
<a
className={clsx('media-gallery__item-thumbnail')}
@ -225,11 +240,10 @@ const Item: React.FC<IItem> = ({
title={attachment.description}
>
<span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
<span className='media-gallery__file-extension__label'>{ext}</span>
<span className='media-gallery__file-extension__label uppercase'>{ext}</span>
</a>
);
} else if (attachment.type === 'video') {
const ext = attachment.url.split('.').pop()?.toUpperCase();
thumbnail = (
<a
className={clsx('media-gallery__item-thumbnail')}
@ -246,7 +260,7 @@ const Item: React.FC<IItem> = ({
>
<source src={attachment.url} />
</video>
<span className='media-gallery__file-extension__label'>{ext}</span>
<span className='media-gallery__file-extension__label uppercase'>{ext}</span>
</a>
);
}

26
yarn.lock
View File

@ -3108,6 +3108,10 @@ at-least-node@^1.0.0:
resolved "https://registry.yarnpkg.com/at-least-node/-/at-least-node-1.0.0.tgz#602cd4b46e844ad4effc92a8011a3c46e0238dc2"
integrity sha512-+q/t7Ekv1EDY2l6Gda6LLiX14rU9TV20Wa3ofeQmwPFZbOMo9DXrLbOjFaaclkXKWidIaopwAObQDqwWtGUjqg==
"audiobuffer-to-wav@git+https://github.com/torch2424/audiobuffer-to-wav.git#es-module-rollup":
version "1.0.0"
resolved "git+https://github.com/torch2424/audiobuffer-to-wav.git#8878a20c5cc7e457b113dabfb1781ad4178f9c62"
autoprefixer@^10.4.15:
version "10.4.15"
resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.15.tgz#a1230f4aeb3636b89120b34a1f513e2f6834d530"
@ -5197,6 +5201,11 @@ iconv-lite@0.6.3:
dependencies:
safer-buffer ">= 2.1.2 < 3.0.0"
idb@^2.1.3:
version "2.1.3"
resolved "https://registry.yarnpkg.com/idb/-/idb-2.1.3.tgz#7b295fa1a46ab7851e42dd85543a271435f87fee"
integrity sha512-1He6QAuavrD38HCiJasi4lEEK87Y22ldFuM+ZHkp433n4Fd5jXjWKutClYFp8w4mgx3zgrjnWxL8dpjMzcQ+WQ==
idb@^7.0.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/idb/-/idb-7.1.1.tgz#d910ded866d32c7ced9befc5bfdf36f572ced72b"
@ -7138,7 +7147,7 @@ quick-lru@^5.1.1:
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
raf@^3.1.0:
raf@^3.1.0, raf@^3.4.0:
version "3.4.1"
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@ -7709,6 +7718,11 @@ responselike@^2.0.0:
dependencies:
lowercase-keys "^2.0.0"
responsive-gamepad@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/responsive-gamepad/-/responsive-gamepad-1.1.0.tgz#0173d05199e3c41c09f3b1b9fa8eb811dad8e585"
integrity sha512-njsJuKvany9eYjywXm8iorTeXeAAPqwMNaRWOo8jlh0iQboXgGPf6Z6bLGntELrfU+vR94jTPJYRW0Zzb2gaRA==
restore-cursor@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-3.1.0.tgz#39f67c54b3a7a58cea5236d95cf0034239631f7e"
@ -9040,6 +9054,16 @@ warning@^4.0.0, warning@^4.0.1, warning@^4.0.2:
dependencies:
loose-envify "^1.0.0"
wasmboy@^0.7.1:
version "0.7.1"
resolved "https://registry.yarnpkg.com/wasmboy/-/wasmboy-0.7.1.tgz#5bbf0f0f386f8e9ea322a611689b889f9c3495d2"
integrity sha512-qgA3bIFAqioYs8kYXtsanIvedgZlZQf382zs3gNlZHIItsAnRzV70/Vp6cJxbK4FyaiG58ah8/g7OW3orrs9Lg==
dependencies:
audiobuffer-to-wav "git+https://github.com/torch2424/audiobuffer-to-wav.git#es-module-rollup"
idb "^2.1.3"
raf "^3.4.0"
responsive-gamepad "1.1.0"
watchpack@^2.4.0:
version "2.4.0"
resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"