moroboxai-player-react

Embeddable player for running MoroboxAI games in React.

Installation

Using npm:

npm install moroboxai-player-react --save

Or:

git clone https://github.com/moroboxai/moroboxai-player-react.git
cd moroboxai-player-react
npm i
npm run build

Usage

Setup a simple React app with:

npx create-react-app my-app --template typescript

Add moroboxai-player-react as a dependency:

cd my-app
npm install moroboxai-player-react --save

Replace src/App.tsx with:

import "./App.css";
import Player from "moroboxai-player-react";

function App() {
    return (
        <div className="App">
            <header className="App-header">
                <Player
                    url="https://raw.githubusercontent.com/moroboxai/moroboxai-games/master/games/pong/"
                    splashart="https://raw.githubusercontent.com/moroboxai/moroboxai-games/master/games/pong/assets/splashart.png"
                    width={256}
                    height={256}
                />
            </header>
        </div>
    );
}

export default App;

Build and start a local server to see the result:

npm run build
npm run start

Props

| Name | Type | Default | Description | | :-------- | :------ | :------ | :--------------------------------------------------------------------------------------------------- | | url | string | | URL of the game | | splashart | string | | URL of the placeholder image displayed before the game is loaded | | width | number | | Width of the div element | | height | number | | Height of the div element | | resizable | boolean | true | If the game can resize the player | | className | string | | Class name for the div container | | autoPlay | boolean | false | Auto play the game after the player is initialized | | speed | number | 1 | Speed of the game | | onReady | func | noop | Signature: function() => void Function called when the game is loaded and ready | | onMount | func | noop | Signature: function(player: IPlayer) => void Function called when the component is mounted |

License

This content is released under the MIT License.