Code Monkey home page Code Monkey logo

jsnes-web's Introduction

JSNES Web UI

A React-based web UI for JSNES.

Running in development

$ yarn install
$ yarn start

Building for production

$ yarn build

The built app will be in build/.

Running tests

$ yarn test

Formatting code

All code must conform to Prettier formatting. The test suite won't pass unless it does.

To automatically format all your code, run:

$ yarn run format

Embedding JSNES in your own app

Unfortunately this isn't trivial at the moment. The best way is copy and paste code from this repository into a React app, then use the <Emulator>. Here is a usage example..

A project for potential contributors (hello!): jsnes-web should be reusable and on NPM! It just needs compiling and bundling.

Adding roms

Open src/config.js and add a new key to config.ROMS. For example:

const config = {
  ROMS: {
    // ...
    myrom: {
      name: "My Rom",
      description: <span>This is my own homebrew NES rom</span>,
      url: "http://localhost:3000/roms/myrom/myrom.nes"
    }
  }
}

Then, add the ROM file as public/roms/myrom/myrom.nes. The ROM should now be available to play at http://localhost:3000/run/myrom

jsnes-web's People

Contributors

allie avatar bfirsh avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar domsleee avatar ezrayoung avatar glinkis avatar malignantz avatar tario avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jsnes-web's Issues

Support saving game state

Dump snapshot of whole emulator to JSON and restore. See bfirsh/jsnes#16 for existing issue and bfirsh/jsnes#42 for existing implementation. Not to be confused with #17 which is built-in save game support.

Simplest implementation of this is to just restore previously saved game, but it could potentially keep several save games too.

Keypresses

ezpz

This is the code I used function sendKey (code) {
var down = new Event('keydown');
down.keyCode = code;
document.dispatchEvent(down);
var press = new Event('keypress');
press.keyCode = code;
document.dispatchEvent(press);
setTimeout(function () {
var up = new Event('keyup');
up.keyCode = code;
document.dispatchEvent(up);
}, 1);
}

Refactor customizable key mapping

From review in #136:

  • Did you consider lifting the state up? I think this might make the implmentation a bit neater. keyboardController.keys could be passed to ControlsModal. You could then have a setKey method on KeyboardController that was passed all the way down to each row. That way the state management and business logic is all in KeyboardController.
  • Is there a reason why it is persisted on unload rather than on every key change? I would have thought setting local storage is pretty cheap. That way you wouldn't have to check if state were modified and the keys would still persist if unload wasn't called for whatever reason.

Where to put the roms ?

Hi thanks for this amazing emulator.

I managed ( after a hard pain ) to get JSNES work on my server.

But Where to put the rom files ? I tried every place in the /build , folder without success.

I don't know where the serve folder is ( I mean /run).

Add TypeScript to Project

I'd really like to take up issue 171 of making this an npm package. However I'd like to TypeScript-ify it first so that the components' props' types and methods' types can be easily found and documented.

Problems Publishing to Github Pages

Hi! This project is amazing! Great work!

I'm trying to use jsnes-web on a github pages site. I'm doing so with the gh-pages package. I've used gh-pages to successfully deploy a react site in the past.

Prior to deployment I've added a line to the package.json (as per gh-pages instructions)

  "homepage": ".",

I've used the following to build and deploy (from the root of jsnes-web)

npm run build
npx gh-pages -d dist

This appears to work. And if I run

npx serve build

I see a working version of the site (locally). When i browse to the corresponding site though, I get a blank page.

Here's the repo and branch that I'm building from: https://github.com/ds17f/jsnes-web/tree/customize
and here's the GH pages site: https://ds17f.github.io/jsnes-web/

Does anybody have any thoughts on why this doesn't work? I would expect to at least see the main title screen which lets me pick a rom. But instead I get nothing. I've also checked the js console and there's no output worth mentioning.

Support save games

Support built-in save games. High scores, save games, etc.

Not to be confused with #18 which is about snapshotting the entire emulator.

2 player controls don't work on keyboards without numpads

Thanks Linkandar Airimder for the report, via email:

I discovered that the controls for 2-player mode are unplayable to someone on a laptop without a number pad. If you would be so kind, would you be willing to change the controls to something similar to the 1st players? Nearly any control scheme would be preferable to the current.

A jsnes frontend with net play support

Hey, I know that this is not really a issue, but I just wanted to thank you for the awesome project and let you know that thanks for the emulator's clean design, I was able to implement two-players Net Play over network on my jsnes frontend!

The project is open source, it's deployed at https://rodri042.github.io/nestation and
here is a topic on nesdev explaining the details.

The jsnes-web's FrameTimer was working bad on my 120hz screen (it was running the games really fast) so I had to implement it by myself here -> https://github.com/rodri042/nestation/blob/master/src/emulator/FrameTimer.js

Maybe you can use the timer or other parts as well on jsnes-web.
Cheers!

Add homebrew ROMs

It'd be really neat if we had a homebrew section, with credits and links to authors and so on.

Better timing

Current approach is use requestAnimationFrame, unless requestAnimationFrame isn't 60fps in which case use setTimeout to time frames. Separately, extra frames are run if the audio buffer runs low.

We can do better than this, I think. If requestAnimationFrame isn't 60fps and the browser supports audio, we can drive the emulation from the audio instead of using setTimeout. If audio isn't supported, we fall back on setTimeout.

Emulator speed

@bfirsh Hi. Could you help me with one question. I tried to run my custom game by example from source directory https://github.com/bfirsh/jsnes and compare it with the same game in web https://jsnes.org/. I tested it on same computer.
And in case of example I see that game is faster than in web. I think the difference is about 15-20%.
Could you help me with it? How can I set the speed of emulated game?

Add tests for gamepad support

There should be some basic automated tests for the gamepad support added in #164. I don't have a gamepad, and I imagine most contributors won't, so it'll be very easy to cause regressions. It is also impossible for me or other contributors to refactor/touch that code because we can't test it.

Once there are some tests, there are some refactorings I have noted in #164 that are probably worth doing.

Could you add mobile controls support?

While I can sideload an emulator to my phone, that requires a bit more work than just loading JSNES.

On my device (iPhone 7 Plus, iOS 14.5.1, Mobile Safari) JSNES seems to run fine, but I can’t actually play the games because of the lack of a keyboard to control it with.

It’d be nice to have on screen controls available for mobile devices, as well as a file picker that doesn’t use drag and drop, so that I can load my own ROMs

Is there a way to access the game data?

I would like to apply a machine learning algorithm to control the game based on its input but for that, I will need to have access to the pixel frames and the data of the game to see if the level is complete and that way give a reward to the algorithm. Is there a way to access that data?

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.