From 35f5ec739ebc0cc88d8ab313de961ead2e9226c1 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Mon, 10 Apr 2023 08:14:19 -0500
Subject: [PATCH] Fix particle effect recipe hot reloading section

---
 docs/guide/recipes/particles.md | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/guide/recipes/particles.md b/docs/guide/recipes/particles.md
index 8c6b779d..91779e09 100644
--- a/docs/guide/recipes/particles.md
+++ b/docs/guide/recipes/particles.md
@@ -2,6 +2,8 @@
 
 This is a more comprehensive example based on the Kronos example used in the [nodes](../advanced-concepts/nodes) docs. You will design a particle effect, make it appear on another feature, and ensure it adapts to the game state.
 
+## Design the Effect
+
 First, design the particle effect. Profectus uses [pixi-particles](https://github.com/pixijs/particle-emitter), and you can use the online particle effect editor [here](http://pixijs.github.io/pixi-particles-editor/). However, the editor returns an older format of the particle effect emitter config, so you'll need to convert it like this:
 
 ```ts
@@ -11,6 +13,8 @@ import { upgradeConfig } from "@pixi/particle-emitter"
 const particleEffect = upgradeConfig(myParticleEffect);
 ```
 
+## Create the Particles
+
 Next, create the particles feature and render it. You'll also want to track the bounding rect of the particle effects. Consider the following step:
 
 ```ts
@@ -24,7 +28,11 @@ const particles = createParticles(() => ({
 }));
 ```
 
-This code adds a bounding rect for the particles and updates it when the container is created or resizes. Now, create the emitter. Pull in the Kronos example, which displays a particle effect when `actualGain > 0`.
+This code adds a bounding rect for the particles and updates it when the container is created or resizes.
+
+## Adding the Effect
+
+Now, create the emitter. Pull in the Kronos example, which displays a particle effect when `actualGain > 0`.
 
 ```ts
 const particlesEmitter = ref(particles.addEmitter(element.particlesConfig));
@@ -56,7 +64,25 @@ watch(
 
 This code watches for whether the node exists and the `boundingRect` exists, which are required to display the effect. You can additionally watch any other values that would have an impact on the particle effect, like whether or not it should be emitting.
 
-If you're using hot reloading, you might need to reload the particle effect. Here's an example from Kronos:
+## Support Hot Reloading
+
+If you're using hot reloading, you might need to reload the particle effect. Here's an example from Kronos of adding the callback to the particles constructor:
+
+```ts
+const particles = createParticles(() => ({
+    fullscreen: false,
+    zIndex: -1,
+    boundingRect: ref<null | DOMRect>(null),
+    onContainerResized(boundingRect) {
+        this.boundingRect.value = boundingRect;
+    },
+    onHotReload() {
+        Object.values(elements).forEach(element => element.refreshParticleEffect());
+    }
+}));
+```
+
+The `refreshParticleEffect` function destroys the emitter, creates a new one, and updates it:
 
 ```ts
 const refreshParticleEffect = () => {