🕹 GBA emulator on your React project - easy and powerful to use!

Last update: Dec 23, 2022

Overview

react-gbajs

GBA emulator on your React project - easy and powerful to use!

Just three steps to set it up ✨

1 - Apply GbaProvider

import { GbaProvider } from 'react-gbajs'

const App = () => (
  <GbaProvider>
    ...
  </GbaProvider>
)

2 - Get play function from GbaContext and call it with the game ROM

import { useContext } from 'react'
import { GbaContext } from 'react-gbajs'

const Component = () => {
  const {
    play,
  } = useContext(GbaContext)

  const onSomeHandle = () => {
    const gameRom = getGameRom()
    play(gameRom)
  }

  return (
    <SomeComponent startGame={onSomeHandle}>
  )
}

3 - And render the emulator using the default export

import ReactGbaJs from 'react-gbajs'

const Emulator = () => (
  <ReactGbaJs volume={0} />
)

Check a full example in /sample.

How it works

This package is a React wrapper for GBA.js.

GBA.js is vendored, with new features over the original version:

save and restore state
freeze address with a given value

Who is using

klo-gba.js, level editor for Klonoa: Empire of Dreams

Add your project here

Features

`GbaContext`

GbaContext exports the following properties:

`play({ newRomBuffer, restoreState }): boolean`

Use this function to start or restart the emulator.

Pass at newRomBuffer the game's ROM to load it:

play({ newRomBuffer: myGameRom })

You can also fill the property restoreState to restore to a previous state saved using saveState. If both are present, the emulator will be reset loading the ROM, and then restored to the given state:

play({ newRomBuffer: myGameRom, restoreState: someState })

If you pass only restoreState, the previous ROM will be re-loaded and will start on the given state. If there is no ROM previously loaded, it won't work.

play({ restoreState: someState })

`saveState()`

Return the serializable state of the emulator.

`addFreezeAddress({ address: number, size: 8 | 16 | 32, value: number })`

Freeze an address with the given value.

`removeFreezeAddress(address: number)`

Remove the freeze value on the given address.

`frozenAddresses()`

Return the list of the addresses frozen in the following format:

{
  [address in number]: { size: 8 | 16 | 32, value: number }
}

has the following props:

`volume={number}`

Should be a number between 0 (muted) or 1 (max volume).

`onFpsReported={((fps: number) => void) | undefined}`

This callback is called every time that an FPS is reported.

`scale={number | undefined}`

Set the emulator scale. Default value is 1, which has width 240px and height 160px.

Contribution

1 - Clone this repository

> git clone [email protected]:macabeus/react-gbajs.git
> cd react-gbajs

2 - Build and watch the project

> npm run start

3 - In another terminal window, go to the /sample project, then build and watch it

> cd sample
> npm run start

Finished! Now you can develop the package and test it in real-time 🎉

Comments

Issues cloning & reproducing Sample

After cloning even after npm installing -g react-gbajs I run into both issues: Cannot find module 'react-gbajs' or its corresponding type declarations. and Parameter 'level' implicitly has an 'any' type. TS7006: Parameter 'message' implicitly has an 'any' type.

Is this package no-longer updated or am I doing something horribly wrong. Thank you - Getting used to React

opened by Alx-AI 4

NextJS module not found

Do you have any idea why nextjs is giving me module not found with this library?

here's the error (there's nothing else really)

// _app.tsx
import { GbaProvider } from "react-gbajs"

const AppWrapper = ({ Component, pageProps }: Props) => {
  console.log(GbaProvider)
  return (
    <I18nextProvider i18n={i18n}>
      <GlobalContextProvider>
        <App {...{ Component, pageProps }}></App>
      </GlobalContextProvider>
    </I18nextProvider>
  )
}

error - ./pages/_app.tsx:17:0
Module not found: Can't resolve 'react-gbajs'
  15 | import { env } from "../infrastructure/utils/environment"
  16 | import { themes } from "../infrastructure/theme"
> 17 | import { GbaProvider } from "react-gbajs"
  18 | 
  19 | const AppWrapper = ({ Component, pageProps }: Props) => {
  20 |   console.log(GbaProvider)

I'm using NextJS 12.0.7 with typscript

Thank you for your hard work

Have a nice day

opened by Flowrome 3

Improve canvas: scale and ref
Two improvements on the canvas:

use css transform to change its scale, which is faster (suggested here https://github.com/city41/smaghetti/discussions/29#discussioncomment-776751)

use ref instead of id to find the element, to avoid name conflict
opened by macabeus 0
fps: replace requestAnimationFrame to setTimetout

requestAnimationFrame doesn't work well for emulators since it could be faster than 60 FPS on some computers. Then this PR replaces it to setTimeout such as gbajs originally was using.

https://github.com/city41/smaghetti/issues/25#issuecomment-847305380

opened by macabeus 0

Uncaught ReferenceError: FlashSavedata is not defined

Sorry to bother you again, but from the issue 14 now i'm getting this error, i don't know if it is a problem with the .gba file but i've tried multiple and i'm getting the same error:

Uncaught (in promise) ReferenceError: FlashSavedata is not defined
    at window.GameBoyAdvanceMMU.GameBoyAdvanceMMU.loadRom (react-gbajs.js?323e:10)
    at G.setRom (react-gbajs.js?323e:10)
    at G.loadRomFromFile (react-gbajs.js?323e:10)
    at H (react-gbajs.js?323e:10)
    at play (react-gbajs.js?323e:10)
    at _callee$ (emulator.js?a22c:33)
    at tryCatch (runtime.js?c56e:45)
    at Generator.invoke [as _invoke] (runtime.js?c56e:274)
    at Generator.prototype.<computed> [as next] (runtime.js?c56e:97)
    at asyncGeneratorStep (emulator.js?a22c:1)
    at _next (emulator.js?a22c:1)

I've also cloned your example and it seems that it gives me the same error

Let me know if i can provide more information

Thank you

opened by Flowrome 6

Squeak on emulator when running on Chrome

On this PR we added the GBA emulator. It works very well, but when it starts on Chrome, it plays some squeak for short time, even when the volume is set to 0. It only plays this squeak on Chrome, and if we to comment the function writeSoundControlHi, we don't have anymore the squeak, but the sound will not work very well while running the game.

opened by macabeus 0

Releases(1.0.2)

1.0.2(Dec 21, 2021)
Fix NextJS build (https://github.com/macabeus/react-gbajs/issues/14)

Source code(tar.gz)
Source code(zip)
1.0.0(Jun 18, 2021)
First stable release 🎉

Major updates:

rewritten to typescript (https://github.com/macabeus/react-gbajs/pull/7)

add props onFpsReported, onLogReceived and watchLogLevels (https://github.com/macabeus/react-gbajs/pull/4, https://github.com/macabeus/react-gbajs/pull/9)

simplify API, merging the function updateState into play (https://github.com/macabeus/react-gbajs/pull/6)

add logo (https://github.com/macabeus/react-gbajs/pull/8)

Minors:

faster scale (https://github.com/macabeus/react-gbajs/pull/5)

prop volume now is optional, default value is 0 (https://github.com/macabeus/react-gbajs/pull/10)

now use id attribute on canvas (https://github.com/macabeus/react-gbajs/pull/5)

fix FPS rate in some computers (https://github.com/macabeus/react-gbajs/pull/3)

Source code(tar.gz)
Source code(zip)
0.0.1(May 24, 2021)

First release 🎉
Source code(tar.gz)
Source code(zip)

Owner

Bruno Macabeus

GitHub https://www.npmjs.com/package/react-gbajs

Easy to use editor for crontab schedules.

Cron Expression Generator Easy to use editor for crontab schedules. Development Setup Prerequisites Node.js (recommended version: 16+) Package Manager

0 Sep 10, 2021

A superset of JavaScript which gives you static types and powerful tooling in Visual Studio Code

TypeScript Example npx create-react-native-app -t with-typescript TypeScript is a superset of JavaScript which gives you static types and powerful too

1 Aug 20, 2022

Broprint.js - The world's easiest, smallest and powerful visitor identifier for browsers

This package generates a unique ID/String for different browsers. Like chrome, Firefox or any other browsers which support `canvas` and `audio` fingerprinting. You can easily do the browser fingerprinting with this library. Its small and minimal.

69 Jan 1, 2023

A powerful toolkit for building websites with beautiful design

Typography.js A powerful toolkit for building websites with beautiful typography. Typography.js A powerful toolkit for building websites with beautifu

3.8k Dec 31, 2022

Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor ?? All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: ?? Instagram Je

1 Nov 26, 2021

A React JS project to make age and gender prediction using Agify.io and Genderize.io. Only for practice use and just for fun~

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

2 Nov 1, 2022

Use js to download and unzip the npm package. only supports use in the browser.

8 Sep 29, 2022

My first React project created during project-oriented training.

Twitter Built with React Built with React, Context, JavaScript, and CSS.in this React project the functional components has been used and The Material

3 Dec 10, 2022

This project is a frontend learning project that built with ReactJS.

CryptoArt-NFT Cryptopunk NFT is a frontend project which is built with ReactJS. The website displays the minted NFT Artworks by using OpenSea API. The

1 Feb 27, 2022

Use Pub/Sub pattern inside your React applications easily

spacefold ?? Use Pub/Sub pattern inside your React applications easily! ?? Table of content Demo Why Usage Contribute ?? Demo Like always, a counter a

56 Nov 15, 2022

Pimp my README is an open source profile builder that you can use to add some cool components to your README profile - Made with <3 by webapp.io :)

Pimp my README This repository is the open-source project for Pimp my README. How this came to be So basically, GitHub added a feature where you can a

105 Dec 27, 2022

Starter project with full stack BigQuery. Allows to overcome customisation restrictions imposed by pre-built dashboards and control data usage. Deploy your own cloud website hydrated by sample BigQuery data in 15 min without installing any development software.

Project Highlights Full stack starter solution that delivers Google BigQuery data to your browser. Includes Express backend and React client written i

36 Dec 15, 2022

A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

simple-sharer [by BUILDBROTHERS.COM] A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and

5 May 29, 2022

✨ View all of your GitHub stats and compare your stats with friends, made using nextjs and tailwind.

10 Sep 6, 2022

🕹 GBA emulator on your React project - easy and powerful to use!

Related tags

Overview

react-gbajs

How it works

Who is using

Features

GbaContext

play({ newRomBuffer, restoreState }): boolean

saveState()

addFreezeAddress({ address: number, size: 8 | 16 | 32, value: number })

removeFreezeAddress(address: number)

frozenAddresses()

volume={number}

onFpsReported={((fps: number) => void) | undefined}

scale={number | undefined}