Add images to plugins README 🎨

packages/plugins/README.mdown

@@ -2,21 +2,53 @@
 
 Plugins are client-side code that players can run in the Sky Strife client to modify their gameplay experience. Full access is given to Sky Strife's internal client API.
 
+![plugin button location](./public/button.png)  
+You can open the Plugin Manager using the button in the upper-right of the Sky Strife client.
+
+![plugin manager sidebar](./public/sidebar.png)  
+Here you can add, remove, or run your plugins.
+
+![example plugin window](./public/plugin_window.png)  
+Each plugin receives it's own movable window to render into.
+
 ## Getting Started
 
 Using the plugin dev server is the easiest way to start plugin development. To start, run (in this directory):
+
 - `pnpm install`
 - `pnpm run dev`
 
 This will start the plugin dev server. It automatically looks for plugin files in the `dev` folder and makes them available to any Sky Strife client you are currently connected to.
 
+![dev server notification](./public/dev_server.png)  
+If everything is working correctly, this should appear in your Plugin Manager. Now when you edit any files in your `dev` folder, they will be available in your Plugin Manager.
+> NOTE: Hot realoding is not currently implemented, so you will need to manually refresh when changing your plugins.
+
+Plugins must implement this interface:
+```typescript
+function createPlugin(pluginLayer: PluginLayer) {
+  // Code here will be run on plugin initialization
+
+  return {
+    // Called when a plugin is run
+    mount: (container: HTMLDivElement) => {},
+    // Called when a plugin is stopped or destroyed
+    // Use this to clean up anything your plugin has setup
+    // i.e. hotkeys, in-game visuals
+    unmount: () => {}
+  }
+}
+```
+
+You can view the `PluginLayer` API [here](https://github.com/latticexyz/skystrife/blob/main/packages/client/src/layers/Plugins/createPluginLayer.ts).
+
 ## Examples
 
 There are some example plugins provided in the client by default. The purpose of these is to introduce players to what is possible with a plugin and inspire them to create their own. Currently, the examples are:
-  - `Frenzy`: Provides a hotkey that commands on of your units to attack the nearest enemy automatically. It has a small informational UI and also highlights the intended target in-game. This is a good introduction to gameplay plugins as it accesses enemy unit information, does some calculation, and issues an attack transaction on behalf of the user.
-  - `Player Details`: Display a more detailed view of a player in your match. This introduces fetching data that is not otherwise shown in the Sky Strife UI.
-  - `Simple Example`: This example is used to show all of the built in UI components provided by plugins. You can use this as a starting point for a new plugin.
 
+- `Frenzy`: Provides a hotkey that commands on of your units to attack the nearest enemy automatically. It has a small informational UI and also highlights the intended target in-game. This is a good introduction to gameplay plugins as it accesses enemy unit information, does some calculation, and issues an attack transaction on behalf of the user.
+- `Player Details`: Display a more detailed view of a player in your match. This introduces fetching data that is not otherwise shown in the Sky Strife UI.
+- `Simple Example`: This example is used to show all of the built in UI components provided by plugins. You can use this as a starting point for a new plugin.
 
 ## Plugin API
 
@@ -69,11 +101,10 @@ function createPlugin(pluginLayer: PluginLayer) {
     unmount: () => {},
   };
 }
-
 ```
 
 ## Security Considerations
 
 > Plugins have FULL access to the Sky Strife client. This means they have access to the **private key of your session wallet**. Malicious plugins could steal this key, steal any ETH in your session wallet, or take control of your units in a match.
 
-That being said, the attack surface of your session wallet key is limited. There should only ever be a small amount of ETH in your session wallet, and if you've suspected that it is compromised you can revoke and generate a new session wallet easily.
+That being said, the attack surface of your session wallet key is limited. There should only ever be a small amount of ETH in your session wallet, and if you've suspected that it is compromised you can revoke and generate a new session wallet easily.