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

{
    "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"
}

!place A 1 white

!place B 2 lightGray

!place C 3 mediumGray

!place D 4 darkGray

!place E 5 pink

!place F 6 red

!place G 7 orange

!place H 8 brown

!place I 9 yellow

!place J 10 lightGreen

!place K 11 green

!place L 12 cyan

!place M 13 blue

!place N 14 darkBlue

!place O 15 purple

!place P 16 darkPurple

!place A 1 black

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.

TODO

Explain setting up oauth https://twitchapps.com/tmi/