PixelPlacerBot/README.md

# Pixel Placer Bot

Pixel Placer Bot, is a designed to read Twitch chat and modify the colors of cells on a 16 x 16 grid.

## Introduction

The Pixel Placer Bot is a fun project that allows Twitch chat users to interact with a virtual grid by sending commands. Each command corresponds to a specific cell on the grid, and when a command is received, the bot changes the color of the corresponding cell.

## Features

- Twitch chat integration: The bot connects to a Twitch channel's chat and listens for commands from viewers.
- Grid manipulation: The bot modifies the colors of cells on a 16 x 16 grid based on the received commands.
- Command parsing: The bot parses the commands received from Twitch chat and maps them to specific cells on the grid.
- Color customization: The bot supports a variety of colors, allowing viewers to create unique pixel art on the grid.
- Easily integrated into OBS' Browser Source

## Getting Started

To use the Pixel Placer Bot, follow these steps:

1. Clone the repository to your local machine.
2. Install the required dependencies using `npm install`.
3. Configure the Twitch channel and bot credentials in the `.env` file.
4. Run the bot using `npm run dev`.
5. Open the web browser and navigate to http://localhost:5173/ (You can open this with OBS using the Browser Source)
6. Join the Twitch channel and start sending commands to modify the grid.

## Command Syntax

To interact with the Pixel Placer Bot, use the following command syntax:

```
!place <x-coordinate> <y-coordinate> <color>
```

- `<x-coordinate>`: The x-coordinate of the cell on the grid (A-P).
- `<y-coordinate>`: The y-coordinate of the cell on the grid (1-16).
- `<color>`: The color to assign to the cell (e.g., red, blue, green).

### Default Colors

```json
{
    "white": "#FFFFFF",
    "lightGray": "#E4E4E4",
    "mediumGray": "#888888",
    "darkGray": "#222222",
    "pink": "#FFA7D1",
    "red": "#E50000",
    "orange": "#E59500",
    "brown": "#A06A42",
    "yellow": "#E5D900",
    "lightGreen": "#94E044",
    "green": "#02BE01",
    "cyan": "#00D3DD",
    "blue": "#0083C7",
    "darkBlue": "#0000EA",
    "purple": "#CF6EE4",
    "darkPurple": "#820080",
    "black": "#000000"
}
```

<!-- white -->
!place A 1 <span style="color:#FFFFFF">white</span>

<!-- lightGray -->
!place B 2 <span style="color:#E4E4E4">lightGray</span>

<!-- mediumGray -->
!place C 3 <span style="color:#888888">mediumGray</span>

<!-- darkGray -->
!place D 4 <span style="color:#222222">darkGray</span>

<!-- pink -->
!place E 5 <span style="color:#FFA7D1">pink</span>

<!-- red -->
!place F 6 <span style="color:#E50000">red</span>

<!-- orange -->
!place G 7 <span style="color:#E59500">orange</span>

<!-- brown -->
!place H 8 <span style="color:#A06A42">brown</span>

<!-- yellow -->
!place I 9 <span style="color:#E5D900">yellow</span>

<!-- lightGreen -->
!place J 10 <span style="color:#94E044">lightGreen</span>

<!-- green -->
!place K 11 <span style="color:#02BE01">green</span>

<!-- cyan -->
!place L 12 <span style="color:#00D3DD">cyan</span>

<!-- blue -->
!place M 13 <span style="color:#0083C7">blue</span>

<!-- darkBlue -->
!place N 14 <span style="color:#0000EA">darkBlue</span>

<!-- purple -->
!place O 15 <span style="color:#CF6EE4">purple</span>

<!-- darkPurple -->
!place P 16 <span style="color:#820080">darkPurple</span>

<!-- black -->
!place A 1 <span style="color:#000000">black</span>

## Contributing

Contributions to the Pixel Placer Bot are welcome! If you have any ideas, bug reports, or feature requests, please open an issue or submit a pull request on the GitHub repository.

## License

This project is licensed under the [MIT License](LICENSE).