open-index/open-npm huggingface dataset:
npm package: @gcpreston/slippi-viewer
Description: View Slippi replays and streams in the browser
Author: Graham Preston
Latest version: 0.1.16

# slippi-viewer

A Web Component for viewing Slippi replays and streams in the browser. Extracted from [Slippi Lab](https://github.com/frankborden/slippilab).

## Features
- [x] View replays
- [x] View streams
- [x] Pause/play/rewind/fast forward/skip
- [ ] Highlights
- [x] Use as custom element
- [ ] Use as SolidJS component

## Usage

```html
<slippi-viewer zips-base-url="/" />
```

The `zips-base-url` attribute refers to where to find the character data for the visualizer. If you have your own site, it is recommended to host the zips yourself. Using `zips-base-url="/"` says "look for a folder called zips at the root of this site, and load each character's data from there". An example of this setup can be found at [examples/replay](examples/replay/index.html).

It is also possible to fetch zips from a remote URL. At the time of writing, this works for both [SpectatorMode](https://github.com/gcpreston/spectator_mode/) (via `zips-base-url="https://spectatormode.tv`), and Slippi Lab.

## Replay mode

```js
const viewer = document.querySelector("slippi-viewer");
const replayFileData; // get from file upload input, for example
viewer.setReplay(replayFileData);
```

## Spectate mode

```js
const viewer = document.querySelector("slippi-viewer");
viewer.spectate("wss://spectatormode.tv/viewer_socket/websocket?stream_id=<stream ID>");
```

The spectate example points to the websocket URL where a stream can be found on SpectatorMode, to give a concrete example.
npm package: @gcpreston/swb
Description: A simple CLI for slippi-web-bridge.
Author: Graham Preston
Latest version: 0.1.14

swb
=================

Forward live Slippi data to a web interface.


[![oclif](https://img.shields.io/badge/cli-oclif-brightgreen.svg)](https://oclif.io)
[![Version](https://img.shields.io/npm/v/swb.svg)](https://npmjs.org/package/@gcpreston/swb)
[![Downloads/week](https://img.shields.io/npm/dw/swb.svg)](https://npmjs.org/package/@gcpreston/swb)


<!-- toc -->
* [Usage](#usage)
* [Commands](#commands)
<!-- tocstop -->
# Usage
<!-- usage -->
```sh-session
$ npm install -g @gcpreston/swb
$ swb COMMAND
running command...
$ swb (--version)
@gcpreston/swb/0.1.14 darwin-arm64 node-v23.10.0
$ swb --help [COMMAND]
USAGE
  $ swb COMMAND
...
```
<!-- usagestop -->
# Commands
<!-- commands -->
* [`swb start`](#swb-start)

## `swb start`

Start the web bridge. Connects to a relay which by default is located at wss://spectator-mode.fly.dev/bridge_socket/websocket.

```
USAGE
  $ swb start [--sink <value>]

FLAGS
  --sink=<value>

DESCRIPTION
  Start the web bridge. Connects to a relay which by default is located at
  wss://spectator-mode.fly.dev/bridge_socket/websocket.

EXAMPLES
  $ swb start

  $ swb start --sink ws://localhost:4000/bridge_socket/websocket
```

_See code: [src/commands/start.ts](https://github.com/gcpreston/swb/blob/v0.1.14/src/commands/start.ts)_
<!-- commandsstop -->
* [`swb start`](#swb-start)
* [`swb help [COMMAND]`](#swb-help-command)

## `swb start`

Start it

```
USAGE
  $ swb start

DESCRIPTION
  Start it

EXAMPLES
  TODO :)
```

_See code: [src/commands/start.ts](https://github.com/gcpreston/slippi-web-bridge/blob/v0.1.0/src/commands/start.ts)_

## `swb help [COMMAND]`

Display help for swb.

```
USAGE
  $ swb help [COMMAND...] [-n]

ARGUMENTS
  COMMAND...  Command to show help for.

FLAGS
  -n, --nested-commands  Include all nested commands in the output.

DESCRIPTION
  Display help for swb.
```

_See code: [@oclif/plugin-help](https://github.com/oclif/plugin-help/blob/v6.2.27/src/commands/help.ts)_