feat(docs): add first version of docs

Author: vivax3794

Diff for: docs/.gitignore

@@ -0,0 +1 @@
+book

Diff for: docs/book.toml

@@ -0,0 +1,6 @@
+[book]
+authors = ["vivax"]
+language = "en"
+multilingual = false
+src = "src"
+title = "Twitch-Minimap"

Diff for: docs/src/SUMMARY.md

@@ -0,0 +1,10 @@
+# Summary
+
+[Introduction](intro.md)
+
+- [Core Api](api.md)
+    - [Game Side](api_game.md)
+    - [Extension Side](api_extension.md)
+- [Minimap Extension](minimap.md)
+    - [Api](minimap_api.md)
+    - [Bevy](minimap_bevy.md)

Diff for: docs/src/api.md

@@ -0,0 +1,11 @@
+# Core Api
+
+The current host of the server is `websocket.matissetec.dev`.
+
+## Targeting minimap extension
+
+If you are targeting the minimap extension check if your engine already has a plugin (under the "Minimap Extension" category), if not the [Game Side](api_game.md) section here and [Api](minimap_api.md) section under the extensions category will be what you need to implement your own game.
+
+## Custom Extension
+
+If you are implementing a custom extension then both of the sub-categories here will be helpful for you.

Diff for: docs/src/api_extension.md

@@ -0,0 +1,24 @@
+# Extension Side
+
+The extension/client should establish a websocket connection to `/lobby/connect?user=123`, where `123` is the user id of the twitch channel the extension is running on.
+
+You will now get any messages sent by the game, and the game will get any messages you send over the connection.
+
+## Example
+
+```js
+window.Twitch.ext.onAuthorized((auth) => {
+    const wsUrl = `wss://${HOST}/lobby/connect?user=${auth.channelId}`;
+    socket = new WebSocket(wsUrl);
+
+    socket.addEventListener("open", function (event) {
+      console.log("Connected to the WebSocket server");
+    });
+
+    socket.addEventListener("message", function (event) {
+      let data = JSON.parse(event.data);
+      console.log(data);
+    });
+})
+```
+

Diff for: docs/src/api_game.md

@@ -0,0 +1,7 @@
+# Game Side
+
+First do a post request to `/lobby/new?user=123`, where `123` is the channel id of the lobby that should be created. The body of the request will be a simple plaintext key you should store for the next step.
+
+Establish a websocket connection to `/lobby/connect/streamer?user=123&key=your_key`, where `your_key` is the key you got in the last step. You will now recieve any messages sent by an extension, and the extension will get any messages you send.
+
+For the expected format for the minimap extension see [Minimap Api](minimap_api.md)

Diff for: docs/src/intro.md

@@ -0,0 +1,4 @@
+# Twitch Minimap
+
+This project is at its core a websocket proxy server, and a twitch minimap extension.
+The server works independently from the extension and can be used to facilitate other types of extensions as well.

Diff for: docs/src/minimap.md

@@ -0,0 +1,3 @@
+# Minimap Extension
+
+If you are writing a game targeting the extension then check out the page for your engine, or [Api](minimap_api.md) if you need to implement it yourself.

Diff for: docs/src/minimap_api.md

@@ -0,0 +1,29 @@
+# Api
+
+## Game to Extension
+
+### Css
+
+format: `{"data": {"css": "..."}}`.
+
+where the `css` key holds a css string that will be injected into the page.
+Every time this event is recieved from the extension the previous css will be replaced.
+
+### Units
+
+messagge format: `{"data": [...]}`.
+
+unit format: `{"id": "1234", "kind": "Sphere", "x": 0.34, "y": 0.35}`
+* `id`: This is a unique id for the entity, this is also added as a css class to the entity in the format of `_id` (i.e in the example above it would be `_1234`)
+* `kind`: This is a css class that will be added to the entity and is a nice way to reuse css across multiple entities,
+* `x` & `y`: these are the positions of the entities, in the range 0-1. 0,0 being in the top left.
+
+## Extension to Game
+
+### Click
+format: `{"x": 0.34, "y": 0.12, "userId": "12312", "bubbleColor": "#00ff00", "bubbleSize": 0.23, "itemType": "Random"}`
+* `x` & `y`: position of the click in range 0-1, 0,0 in top left.
+* `userId`: twitch id of the user who clicked
+* `bubbleColor`: The user selected color
+* `bubbleSize`: The user selected size
+* `itemType`: User selected item, one of `Random`, `Sphere`, `Cube`

Diff for: docs/src/minimap_bevy.md

@@ -0,0 +1,3 @@
+# Bevy
+
+See: <https://docs.rs/bevy_twitch_minimap/>