open-index/open-npm huggingface dataset:
npm package: @gamemaker/camera-shake
Description: Applies a screen shake effect to the camera
Author: GameMaker
Latest version: 1.0.1

# camera-shake

GameMaker prefab for `camera_shake()`. Applies a screen shake effect to the camera over a given duration, with separate magnitudes for red, green, and blue color channels.
[Try it on GX.games](https://gx.games/games/cwdkgq/camera-shake/tracks/905f155f-f45f-457e-b58f-df9b11958e5b/)

```js
/**
 * Applies a screen shake effect to the camera over a given duration, 
 * with separate magnitudes for red, green, and blue color channels.
 * Example:
 * camera_shake(0.75, 0.1, 0.15, 0.25);
 *
 * @param {number} time Duration of the shake effect in seconds.
 * @param {number} mag_r Shake magnitude for the red color channel.
 * @param {number} mag_g Shake magnitude for the green color channel.
 * @param {number} mag_b Shake magnitude for the blue color channel.
 */
npm package: @gamemodstudios/gm-webkit
Description: A toolkit by Gamemodstudios for web-based applications.
Author: Gamemodstudios
Latest version: 0.1.1

# gm-webkit

A toolkit by Gamemodstudios for web-based applications. This package provides reusable web components for progress indicators, including loading bars, spinners, animated text, and more.

## Features

- Custom HTML elements for progress indicators
- Easy to use and style
- No dependencies

## Installation

```html
<script src="https://cdn.jsdelivr.net/npm/@gamemodstudios/gm-webkit@latest/spiners/progress-indicators.js"></script>
```

## Usage

### In HTML (Browser)

Add the following script tag to your HTML `<head>` to load the components from the CDN:

```html
<script src="https://cdn.jsdelivr.net/npm/@gamemodstudios/gm-webkit@latest/spiners/progress-indicators.js"></script>
```

Then use the custom elements:

```html
<loading-bar></loading-bar>
<loading-spinner></loading-spinner>
<loading-text></loading-text>
<loading-jumping-container count="5"></loading-jumping-container>
```

You can customize color, size, and text:

```html
<loading-bar color="#e91e63" height="8px"></loading-bar>
<loading-spinner color="#009688" size="64px"></loading-spinner>
<loading-text color="#ff9800" text="Please Wait"></loading-text>
<loading-jumping-container color="#673ab7" size="12px" count="7"></loading-jumping-container>
```

### Example

See `spiners/index.html` for a live example.

## License

MIT

## Author

Gamemodstudios

## Links

- [GitHub Repository](https://github.com/Gamemodstudios/gm-webkit)
- [Report Issues](https://github.com/Gamemodstudios/gm-webkit/issues)
npm package: @gamention/pulse-core
Description: Core client SDK for Pulse — WebSocket connection, state management, and API for real-time collaboration
Author: Krishna Thorat
Latest version: 0.3.7

# @gamention/pulse-core

Core client SDK for **Pulse** — WebSocket connection management, state management, and API for real-time collaboration.

## Installation

```bash
npm install @gamention/pulse-core
```

## Quick Start

```typescript
import { PulseClient } from '@gamention/pulse-core';

const client = new PulseClient({
  apiKey: 'pk_...',
  token: 'jwt_token_from_your_backend',
  room: 'my-page',
  endpoint: 'wss://pulse.hire.rest',
});

client.connect();

// Listen for real-time events
client.state.on('threads', (threads) => {
  console.log('Threads updated:', threads);
});

client.state.on('presence', (users) => {
  console.log('Online users:', users);
});

// Create a comment thread
client.createThread('Great work on this section!', {
  position: { x: 0.5, y: 0.3 },
  mentions: [],
});

// Reply to a thread
client.reply('thread-id', 'Thanks!');

// React to a comment
client.addReaction('comment-id', 'comment', '\u{1F44D}');

// Upload a file
const result = await client.uploadFile(file);
```

## API

### PulseClient

| Method | Description |
|--------|-------------|
| `connect()` | Connect to the WebSocket server |
| `disconnect()` | Disconnect and clean up |
| `createThread(body, options?)` | Create a new comment thread |
| `reply(threadId, body, mentions?)` | Reply to a thread |
| `editComment(commentId, body, mentions?)` | Edit a comment |
| `deleteComment(commentId)` | Delete a comment |
| `resolveThread(threadId, resolved?)` | Resolve/reopen a thread |
| `addReaction(targetId, targetType, emoji)` | Add a reaction |
| `removeReaction(reactionId)` | Remove a reaction |
| `moveCursor(position)` | Send cursor position |
| `uploadFile(file)` | Upload an image/audio/video file |
| `markRead(notificationId)` | Mark notification as read |
| `markAllRead()` | Mark all notifications as read |

### StateManager (`client.state`)

| Property | Description |
|----------|-------------|
| `user` | Current authenticated user |
| `threads` | All threads in the room |
| `presence` | Online users |
| `notifications` | User's notifications |
| `unreadCount` | Unread notification count |

Subscribe to changes with `client.state.on(event, callback)`.

## When to Use This

Use `@gamention/pulse-core` when you want to **build your own UI** on top of Pulse. For drop-in web components, use [`@gamention/pulse-elements`](https://www.npmjs.com/package/@gamention/pulse-elements) instead.

## Documentation

Full docs at **[pulse.hire.rest/docs](https://pulse.hire.rest/docs)**

- [Client SDK Reference](https://pulse.hire.rest/docs/sdk/client)
- [State & Events](https://pulse.hire.rest/docs/sdk/state)
- [Building Custom UI](https://pulse.hire.rest/docs/sdk/custom-ui)

## License

MIT
npm package: @gamention/pulse-shared
Description: Shared types, constants, and WebSocket protocol for Pulse — a real-time collaboration SDK
Author: Krishna Thorat
Latest version: 0.3.7

# @gamention/pulse-shared

Shared TypeScript types, constants, and WebSocket protocol definitions for **Pulse** — a real-time collaboration SDK.

## Installation

```bash
npm install @gamention/pulse-shared
```

> You typically don't need to install this directly. It's included as a dependency of `@gamention/pulse-core` and `@gamention/pulse-elements`.

## What's Inside

- **Types** — `Thread`, `Comment`, `PinPosition`, `Attachment`, `PresenceUser`, `Notification`, `Reaction`, etc.
- **Protocol** — Full WebSocket message definitions (`ClientMessage` / `ServerMessage` unions)
- **Constants** — Cursor throttle, presence heartbeat, reconnect delays, user colors

## Usage

```typescript
import type { Thread, Comment, PinPosition, Attachment } from '@gamention/pulse-shared';
```

## Documentation

Full docs at **[pulse.hire.rest/docs](https://pulse.hire.rest/docs)**

## License

MIT
npm package: @gameon/on-ui-components
Description: ON UI library of web components
Author: ON
Latest version: 3.41.0

# On UI components

For a list of all components and their documentation, visit our [Storybook](https://on-ui-components.netlify.app/).

## Getting Started

```
npm i @gameon/on-ui-components
```

### Web Components

Here is an example of how to import the button component.

```js
import { OnButton } from '@gameon/on-ui-components/base/button';
```

### React Components

Here is an example of how to import the button component in a react app.

```js
import { OnButton } from '@gameon/on-ui-components/react/button';
```
npm package: @gamepark/avataaars
Description: React component for avataaars 
Latest version: 3.0.0

# React component for Avataaars

The core React component for [Avataaars Generator](https://getavataaars.com/) developed by [Fang-Pen Lin](https://twitter.com/fangpenlin), based on the Sketch library [Avataaars](https://avataaars.com/) designed by [Pablo Stanley](https://twitter.com/pablostanley). 

<p align="center"><img src='avataaars-example.png?raw=true' style='width: 300px; height: 300px;' /></p>

## Features

 - SVG based
 - Light weight 
 - Scalable
 - Easy to use
 - Easy to integrate with custom editor
 - Comes with [official editor](https://getavataaars.com/)

## Usage

First, you need to install the avataaars component package, here you run

```
yarn add avataaars
```

or

```
npm install avataaars --save
```

if you are using npm. Then, in your React app, import the Avataaar component and put it where you like it to be, for example

```jsximport Avatar from 'avataaars'

export default function MyComponent () {
    return 
      <div>
        Your avatar:
        <Avatar
          style={{width: '100px', height: '100px'}}
          avatarStyle='Circle'
          topType='LongHairMiaWallace'
          accessoriesType='Prescription02'
          hairColor='BrownDark'
          facialHairType='Blank'
          clotheType='Hoodie'
          clotheColor='PastelBlue'
          eyeType='Happy'
          eyebrowType='Default'
          mouthType='Smile'
          skinColor='Light'
        />
      </div>
}
```

To showcase individual pieces of the avatar you can use the Piece component, for example:

```jsximport {Piece} from 'avataaars';

export default function MyComponent () {
    return 
      <div>
        <Piece pieceType="mouth" pieceSize="100" mouthType="Eating"/>
        <Piece pieceType="eyes" pieceSize="100" eyeType="Dizzy"/>
        <Piece pieceType="eyebrows" pieceSize="100" eyebrowType="RaisedExcited"/>
        <Piece pieceType="accessories" pieceSize="100" accessoriesType="Round"/>
        <Piece pieceType="top" pieceSize="100" topType="LongHairFro" hairColor="Red"/>
        <Piece pieceType="facialHair" pieceSize="100" facialHairType="BeardMajestic"/>
        <Piece pieceType="clothe" pieceSize="100" clotheType="Hoodie" clotheColor="Red"/>
        <Piece pieceType="graphics" pieceSize="100" graphicType="Skull" />
        <Piece pieceType="skin" pieceSize="100" skinColor="Brown" />
      </div>
}
```

To explore avatar options and generate the React code, please use [Avataaars Generator](https://getavataaars.com/)

## Collect options

To build your own avatar editor, you may want to use lower level `Avatar` component along with `OptionContext`. For more details usage, please reference to source code of [avataaars-generator](https://github.com/fangpenlin/avataaars-geneator), see how it uses `OptionContext` to collection available options.
npm package: @gameplayjdk/gulpfile
Description: A collection of common gulp tasks.
Author: GameplayJDK
Latest version: 1.0.0

# gulpfile

A collection of common gulp tasks.

## What is this

It is exactly that. A reusable library of gulp tasks, that can be used in any project by installing it as a dependency.

The idea is to only have to write the tasks once and distribute them over multiple projects. By doing so, it only
requires a minimum amount of boilerplate code to set the tasks up as needed. The aim is to speed up development by
shortening the time usually needed to set up a build-pipeline for frontend dependencies.

> **Disclaimer!**
> 
> Some configuration cannot be changed and is opinionated. The provided tasks may not fit every use-case.

## How to install

The installation process is pretty straight forward:

```bash
npm install --save-dev @gameplayjdk/gulpfile
```

## What is included

| Asset Unit        | Feature                       |
| ----------------- | ----------------------------- |
| Style             | Scss compilation              |
|                   | Source minification           |
|                   | Sourcemap generation          |
| Script            | Source concatenation          |
|                   | Source minification           |
|                   | Sourcemap generation          |
| Data              | Just copying                  |
| Image             | File minification             |
| Image responsive  | Responsive format generation  |

For more information, have a look at the `package.json` file.

## How to use

You can find an example gulpfile using this package inside the `example/` folder of this repository.

> _Some day a blog post about this may be linked here..._

## Further reading

This is a list of articles that I found very useful to get started with the basic gulp tasks included in this library.

* Follow https://gulpjs.com/docs/en/getting-started/quick-start for first steps with gulp.
* See https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md for the clean workflow setup.
* See https://goede.site/setting-up-gulp-4-for-automatic-sass-compilation-and-css-injection for the style workflow
  setup.
* See https://www.toptal.com/javascript/optimize-js-and-css-with-gulp and https://stackoverflow.com/a/24597914 for the
  script workflow setup.
* See https://medium.freecodecamp.org/how-to-minify-images-with-gulp-gulp-imagemin-and-boost-your-sites-performance-6c226046e08e
  for the image workflow setup.
* See https://github.com/mahnunchik/gulp-responsive/blob/HEAD/examples/multiple-resolutions.md and
  https://stackoverflow.com/a/37459616 and https://getbootstrap.com/docs/4.0/layout/grid/#grid-options for the
  responsive image workflow setup.
* See https://github.com/gulpjs/gulp/blob/master/docs/recipes/pass-arguments-from-cli.md for cli argv setup.

## License

It's MIT, as usual.
npm package: @gamepulse-studio/web-sdk
Description: GamePulse SDK for Web/Node.js - Cross-platform analytics for game developers
Author: GamePulse Team
Latest version: 2.0.26

# GamePulse Web SDK

Version: **2.0.26**

Cross-platform analytics SDK for web-based games and applications.

## Installation

### Using npm (Recommended)

```bash
npm install @gamepulse-studio/web-sdk
```

### Using CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@gamepulse-studio/web-sdk@2.0.26/dist/gamepulse.min.js"></script>
```

### Using GitHub Releases

Download the latest `gamepulse-web-sdk.js` from the [Releases](https://github.com/gamepulse/gamepulse-sdk/releases) page.

## Usage

### Initialize the SDK

```javascript
import GamePulse from '@gamepulse-studio/web-sdk';

// Initialize GamePulse
GamePulse.init({
    apiKey: 'your-api-key',
    environment: 'sandbox', // or 'production'
    userId: 'unique-user-id' // optional
});
```

### Track Events

```javascript
// Custom events
GamePulse.customEvent('level_completed', {
    eventValue: 100,
    level: '1',
    time: '120'
});

// Progression events
GamePulse.progressionEvent({
    progression: 'start',
    progressionName: 'world_1'
});

// Ad events
GamePulse.adEvent({
    adType: 'rewarded_video',
    adPlacement: 'main_menu',
    adProvider: 'admob'
});
```

### TypeScript Support

The SDK includes full TypeScript definitions:

```typescript
import GamePulse, { 
    GamePulseConfig, 
    CustomEventData, 
    ProgressionEventData 
} from '@gamepulse-studio/web-sdk';

const config: GamePulseConfig = {
    apiKey: 'your-api-key',
    environment: 'sandbox'
};

GamePulse.init(config);
```

## Requirements

- Node.js 16.0 or higher (for development)
- Modern browsers (ES2015+)
- TypeScript 4.0+ (for TypeScript projects)

## Building from Source

```bash
# Clone the repository
git clone https://github.com/gamepulse/gamepulse-sdk.git
cd gamepulse-sdk/web

# Install dependencies
npm install

# Build the SDK
npm run build

# Run tests
npm test

# Run example
npm run example
```

## License

MIT License - see LICENSE file in the root directory.
npm package: @gamepulse.studio/web-sdk
Description: GamePulse SDK for Web/Node.js - Cross-platform analytics for game developers
Author: GamePulse Team
Latest version: 2.0.21

# GamePulse Web SDK

Version: **2.0.21**

Cross-platform analytics SDK for web-based games and applications.

## Installation

### Using npm (Recommended)

```bash
npm install @gamepulse.studio/web-sdk
```

### Using CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@gamepulse.studio/web-sdk@2.0.21/dist/gamepulse.min.js"></script>
```

### Using GitHub Releases

Download the latest `gamepulse-web-sdk.js` from the [Releases](https://github.com/gamepulse/gamepulse-sdk/releases) page.

## Usage

### Initialize the SDK

```javascript
import GamePulse from '@gamepulse.studio/web-sdk';

// Initialize GamePulse
GamePulse.init({
    apiKey: 'your-api-key',
    environment: 'sandbox', // or 'production'
    userId: 'unique-user-id' // optional
});
```

### Track Events

```javascript
// Custom events
GamePulse.customEvent('level_completed', {
    eventValue: 100,
    level: '1',
    time: '120'
});

// Progression events
GamePulse.progressionEvent({
    progression: 'start',
    progressionName: 'world_1'
});

// Ad events
GamePulse.adEvent({
    adType: 'rewarded_video',
    adPlacement: 'main_menu',
    adProvider: 'admob'
});
```

### TypeScript Support

The SDK includes full TypeScript definitions:

```typescript
import GamePulse, { 
    GamePulseConfig, 
    CustomEventData, 
    ProgressionEventData 
} from '@gamepulse.studio/web-sdk';

const config: GamePulseConfig = {
    apiKey: 'your-api-key',
    environment: 'sandbox'
};

GamePulse.init(config);
```

## Requirements

- Node.js 16.0 or higher (for development)
- Modern browsers (ES2015+)
- TypeScript 4.0+ (for TypeScript projects)

## Building from Source

```bash
# Clone the repository
git clone https://github.com/gamepulse/gamepulse-sdk.git
cd gamepulse-sdk/web

# Install dependencies
npm install

# Build the SDK
npm run build

# Run tests
npm test

# Run example
npm run example
```

## License

MIT License - see LICENSE file in the root directory.
npm package: @gameroom-js/client
Description: ## Overview
Author: Jackson Bierfeldt
Latest version: 0.1.5

# @gameroom-js/client

## Overview

A simple library for browser-based applications that allows you to rapidly develop stateful, socketed multiplayer games and web applications. For use in conjunction with the server library [@gameroom-js/server](https://github.com/jbierfeldt/gameroom-js/tree/master/packages/server).


## Quickstart

#### **`index.ts`**
```typescript
import {SocketConnection} from "@gameroom-js/client"

// create a new connection that will be used to communicate with the server via websockets
const connection = new SocketConnection({gameRoomID: "Lobby"});

// register listeners for roomState and gameState updates
connection.on("updateRoomState", (data) => {
  updateUIWithRoomState(data);
}
connection.on("updateGameState", (data) => {
  updateUIWithGameState(data);
}

// send Protocol, Action, and Transfer events
const clientStateButtonHandler = () => {
  connection.sendProtocol('REQUEST_CLIENT_STATE');
}
const nextTurnButtonHandler = () => {
  connection.sendAction('nextTurnPressed');
}
const formSubmitHandler = () => {
  connection.sendTransfer('updateClientName', {name: 'newName'});
}
```

## SocketConnection

The main class of the gameroom-js client library is called `SocketConnection`. It is instantiated with the `SocketConnectionOptions` object, the interface for which is defined as follows: 

```typescript
export interface SocketConnectionOptions {
  url: string; // default: window.location.host
  gameRoomID: string; // default: 'Lobby'
  initiateCallback: () => (boolean | Promise<boolean>); // default: () => true
}
```

### SocketConnectionOptions

The `url` string points to the web address where the server socket is listening. gameroom-js uses [Socket.IO](https://socket.io/docs/v4/client-api/#iourl) for websocket communication, if you would like to read more.

The `gameRoomID` string is the name of the game room that the client will try to connect to.

The `initiateCallback` function is an optional piece of logic used to verify from the client's end that the server can consider it fully connected. This callback will be called after the server sends the `INITIATE_JOIN` `Protocol` event. `initiateCallback` should return either `true` or `false`, indicating whether the server should continue connecting the client to the desired game room or reject it.

### SocketConnection methods

- `connect(options: SocketConnectionOptions)` Disconnects previous socket and instantiates a new one with `options`. Re-registers all listeners stored via the `on` method.
- `on()` Registers the `listener` function as an event listener for `event`. Also stores the `listener` function for re-registration during a reconnection event.
- `disconnect()` Disconnects socket by calling the `disconnect` method on the socket.
- `reconnect()` Reconnects socket by calling the `connect` method on the socket.
- `sendProtocol(protocolType)` Sends a `Protocol` event.
- `sendAction(actionType)` Sends an `Action` event.
- `sendTransfer(transferType, payload)` Sends a `Transfer` event.