๐Ÿ•น GBA emulator on your React project - easy and powerful to use!

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

    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

    NextJS module not found

    Hi

    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

    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

    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

    Uncaught ReferenceError: FlashSavedata is not defined

    Hi

    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

    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)

  • 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)

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

Michael Czuba 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.

Rajesh Royal 47 Sep 21, 2022
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

Kyle Mathews 3.7k Sep 28, 2022
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

Zenvers 0 Sep 10, 2021
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

null 1 Nov 26, 2021
Use js to download and unzip the npm package. only supports use in the browser.

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

Arthur 8 Sep 29, 2022
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

Ken Tandrian 1 Sep 24, 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

Pedro Nauck 54 Sep 7, 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

Joshua D'Souza 106 Sep 23, 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

elham salehi 1 Oct 30, 2021
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

CallMeJaX 1 Feb 27, 2022
Very quick and easy integration of the Potree Viewer in React

Very quick and easy integration of the Potree Viewer in React

null 6 Sep 13, 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

null 5 May 29, 2022
A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface

Trello Board ?? A Trelloboard to help manage and visualize your project workload & progress with a simple & pretty interface (basically a trello clone

Nishant Mogha 4 Sep 12, 2022
This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

This Project is a fork of Ethereum Boilerplate and demonstrates how you can build your own NFT Rarity Ranker.

null 86 Oct 5, 2022
A library that makes using pdfjs in react projects easy.

A library that makes using pdfjs in react projects easy.

Lukas Mรถller 3 Feb 5, 2022
An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

murderteeth 7 Sep 15, 2022
Just a small collection of hooks that make it easy to integrate React Query into a REST API

react-query-restful is just a small collection of hooks that make it easy to integrate React Query into a REST API.

Quasar Systems 4 Sep 16, 2022