Update README

.env.example

@@ -62,3 +62,7 @@ AWS_BUCKET=
 AWS_USE_PATH_STYLE_ENDPOINT=false
 
 VITE_APP_NAME="${APP_NAME}"
+
+MIX_TWITCH_BOT_USERNAME=
+MIX_TWITCH_BOT_OAUTH_TOKEN=
+MIX_TWITCH_CHANNEL=

README.md

@@ -1,66 +1,97 @@
-<p align="center"><a href="https://laravel.com" target="_blank"><img src="https://raw.githubusercontent.com/laravel/art/master/logo-lockup/5%20SVG/2%20CMYK/1%20Full%20Color/laravel-logolockup-cmyk-red.svg" width="400" alt="Laravel Logo"></a></p>
+# Pixel Placer Bot
 
-<p align="center">
-<a href="https://github.com/laravel/framework/actions"><img src="https://github.com/laravel/framework/workflows/tests/badge.svg" alt="Build Status"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/dt/laravel/framework" alt="Total Downloads"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/v/laravel/framework" alt="Latest Stable Version"></a>
-<a href="https://packagist.org/packages/laravel/framework"><img src="https://img.shields.io/packagist/l/laravel/framework" alt="License"></a>
-</p>
+This README provides an overview of the Pixel Placer Bot, a simple bot designed to read Twitch chat and modify the colors of cells on a 16 x 16 grid.
 
-## About Laravel
+## Introduction
 
-Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel takes the pain out of development by easing common tasks used in many web projects, such as:
+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.
 
-- [Simple, fast routing engine](https://laravel.com/docs/routing).
-- [Powerful dependency injection container](https://laravel.com/docs/container).
-- Multiple back-ends for [session](https://laravel.com/docs/session) and [cache](https://laravel.com/docs/cache) storage.
-- Expressive, intuitive [database ORM](https://laravel.com/docs/eloquent).
-- Database agnostic [schema migrations](https://laravel.com/docs/migrations).
-- [Robust background job processing](https://laravel.com/docs/queues).
-- [Real-time event broadcasting](https://laravel.com/docs/broadcasting).
+## Features
 
-Laravel is accessible, powerful, and provides tools required for large, robust applications.
+- 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.
 
-## Learning Laravel
+## Getting Started
 
-Laravel has the most extensive and thorough [documentation](https://laravel.com/docs) and video tutorial library of all modern web application frameworks, making it a breeze to get started with the framework.
+To use the Pixel Placer Bot, follow these steps:
 
-You may also try the [Laravel Bootcamp](https://bootcamp.laravel.com), where you will be guided through building a modern Laravel application from scratch.
+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.
 
-If you don't feel like reading, [Laracasts](https://laracasts.com) can help. Laracasts contains thousands of video tutorials on a range of topics including Laravel, modern PHP, unit testing, and JavaScript. Boost your skills by digging into our comprehensive video library.
+## Command Syntax
 
-## Laravel Sponsors
+To interact with the Pixel Placer Bot, use the following command syntax:
 
-We would like to extend our thanks to the following sponsors for funding Laravel development. If you are interested in becoming a sponsor, please visit the [Laravel Partners program](https://partners.laravel.com).
+```
+!place <x-coordinate> <y-coordinate> <color>
+```
 
-### Premium Partners
+- `<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).
 
-- **[Vehikl](https://vehikl.com/)**
-- **[Tighten Co.](https://tighten.co)**
-- **[WebReinvent](https://webreinvent.com/)**
-- **[Kirschbaum Development Group](https://kirschbaumdevelopment.com)**
-- **[64 Robots](https://64robots.com)**
-- **[Curotec](https://www.curotec.com/services/technologies/laravel/)**
-- **[Cyber-Duck](https://cyber-duck.co.uk)**
-- **[DevSquad](https://devsquad.com/hire-laravel-developers)**
-- **[Jump24](https://jump24.co.uk)**
-- **[Redberry](https://redberry.international/laravel/)**
-- **[Active Logic](https://activelogic.com)**
-- **[byte5](https://byte5.de)**
-- **[OP.GG](https://op.gg)**
+### Default Colors
+<!-- 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
 
-Thank you for considering contributing to the Laravel framework! The contribution guide can be found in the [Laravel documentation](https://laravel.com/docs/contributions).
-
-## Code of Conduct
-
-In order to ensure that the Laravel community is welcoming to all, please review and abide by the [Code of Conduct](https://laravel.com/docs/contributions#code-of-conduct).
-
-## Security Vulnerabilities
-
-If you discover a security vulnerability within Laravel, please send an e-mail to Taylor Otwell via [taylor@laravel.com](mailto:taylor@laravel.com). All security vulnerabilities will be promptly addressed.
+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
 
-The Laravel framework is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT).
+This project is licensed under the [MIT License](LICENSE).

package.json

@@ -2,7 +2,7 @@
     "private": true,
     "type": "module",
     "scripts": {
-        "dev": "vite build",
+        "dev": "vite",
         "build": "vite build"
     },
     "devDependencies": {