npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

plugplay

v0.0.7-alpha

Published

Plug-and-play solution for multiplayer games using WebSockets

Downloads

7

Readme

plugplay

Plug-and-play solution for multiplayer games using WebSockets.

Server

Server component is a node application responsible for managing global game state and WebSocket connections. It's basically a Redux application running on the server.

Example

The most basic, noop example:

const plugplay = require('plugplay/server')

const dataReducer = (state, action) => {
    //...modify `state.data` based on action and return it
};
const mapStateToClientProps = (state, clientInfo) => {
    // construct and return properties object recieved by each client
};
const plugins = [/** initialized server plugins **/]

plugplay({ dataReducer, mapStateToClientProps, plugins })

API

The server component exposes one function as a default export. Calling the function starts the server and returns a dispatch function that can be used to dispatch actions to the reducers.

plugplay(options: OptionsObject) => dispatch: (action: Object) => any

The OptionsObject has the following shape:

OptionsObject: {
    dataReducer: (state: Object, action: Object) => nextGameState: any,
    mapStateToClientProps: (state: Object, clientInfo: Object) => clientProps: any,
    plugins: Object[],
    port: number
}

dataReducer

Function used to change the state of the game in response to actions occuring. The function is called every time an action is dispatched, with the full game state and the action as arguments. The reducer should return value that will be saved as state.data (which is the subtree designated for custom part of the game state). Default value: state => (state.data || {})

mapStateToClientProps

Function used to construct property objects sent to each connected client. The function is called every time after the dataReducer produces new game state, with the full game state and clientInfo object as properties. By default, clientInfo object has only socketId property, but it can be extended using plugins. The clientInfo can be used to provide each client with customized properties that reflect the state of the game from the client perspective. Default value: state => state

plugins

Plugins array provides a way of extending the default pluginplay functionality using plugins. The array expects a list of initialized plugins, in an order that matters (see plugin's readme for specific requirements). See "Plugins" section for information on their API. Default value: []

port

The port on which the application should listen for WebSocket connections Default value: 3000

Client

The client component is a browser module responsible for connecting to server component.

Example

const plugplay = require('plugplay/client')
const onPropsUpdated = props => {
    // perform view updates based on changes in the client props
}
const actions = plugplay({
    onPropsUpdated,
    serverUrl: 'localhost:3000',
    plugins: [/** initialized client plugins **/]
})

actions.default('some action', 10) // triggers a reducer run on the server

API

The client component exposes one function as a default export. Calling the function connects the client to the server and starts listening for props changes. It returns the actions object with methods that can be used to send information back to the server.

plugplay(options: OptionsObject) => actions: ActionsObject

The OptionsObject has the following shape:

OptionsObject: {
    onPropsUpdated: (props: Object) => void
    serverUrl: string,
    plugins: Object[],
}

onPropsUpdated

Function that can be used to update the view the reflect the new state of the game. The function is called every time new client properties are recieved from the server, with the properties object as arguments. The return value is ignored. Default value: () => {} (noop)

serverUrl

The URL to the running server plugplay component Required

plugins

Plugins array provides a way of extending the default pluginplay functionality using plugins. The array expects a list of initialized plugins, in an order that matters (see plugin's readme for specific requirements). See "Plugins" section for information on their API. Default value: []

The ActionsObject contains action creator methods, and has the following shape by default (but can be extended by plugins):

ActionsObject: {
    default: (type: string, data: any) => void
}

default action

Can be used to send a generic client action to the server. It will trigger server-side reducer with an action of shape:

{
    type: 'USER_ACTION',
    payload: {
        socketId: string,
        ... // other props from plugins
        type: string, // type provided to action creator
        data: any // data provided to action creator
    }
}

Plugins

You can extend the functionality provided by plugplay using plugins. Plugins can do one or more of these things:

  • modify a subtree of the state, named after the plugin's name
  • dispatch actions to the state, namespaced by the plugin's name
  • decorate the payload of actions dispatched by other plugins or plugplay's core
  • decorate the clientInfo object provided to mapStateToClientProps function
  • extend action creators object on the client
  • any other side effects on both server and client (e.g. persistance of data)

Existing plugins

See documentation for each to learn how to use them:

  • players - adds a notion of players
  • rooms - adds an ability to create rooms, which players can join

Creating plugins

The following only concerns plugins developers, and is not required to know to make games with plugplay.

Server API

Server-side, plugins expose a factory function, which can be used to customize plugin's behaviour using options. The factory function returns an instance of the plugin, which should passed to plugplay using plugins array in options.

pluginFactory(options: Object) => pluginInstance: PluginInstanceObject
PluginInstanceObject: {
    name: string,
    middleware: (store: Object) => (next: () => void) => (action: Object) => void,
    reducer: (state: Object, action: Object) => nextState: Object,
    addClientOptions (state: Object, clientInfo: Object) => decoratedClientInfo: Object,
}