125 lines
3.7 KiB
Markdown
Executable File
125 lines
3.7 KiB
Markdown
Executable File
# 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).
|
|
|
|
## TODO
|
|
Explain setting up oauth
|
|
https://twitchapps.com/tmi/ |