Added confetti when F clickable is broken

Also fixed the "fix clickable" button not being rendered

src/data/layers/aca/confetti.json

@@ -0,0 +1,102 @@
+{
+    "number": {
+        "value": 0
+    },
+    "color": {
+        "value": ["#00FFFC", "#FC00FF", "#fffc00"]
+    },
+    "shape": {
+        "type": ["circle", "triangle"],
+        "options": {}
+    },
+    "opacity": {
+        "value": 1,
+        "animation": {
+            "enable": true,
+            "minimumValue": 0,
+            "speed": 2,
+            "startValue": "max",
+            "destroy": "min"
+        }
+    },
+    "size": {
+        "value": 4,
+        "random": {
+            "enable": true,
+            "minimumValue": 2
+        }
+    },
+    "links": {
+        "enable": false
+    },
+    "life": {
+        "duration": {
+            "sync": true,
+            "value": 5
+        },
+        "count": 1
+    },
+    "move": {
+        "enable": true,
+        "gravity": {
+            "enable": true,
+            "acceleration": 10
+        },
+        "speed": {
+            "min": 10,
+            "max": 20
+        },
+        "decay": 0.1,
+        "direction": "none",
+        "straight": false,
+        "outModes": {
+            "default": "destroy",
+            "top": "none"
+        }
+    },
+    "rotate": {
+        "value": {
+            "min": 0,
+            "max": 360
+        },
+        "direction": "random",
+        "move": true,
+        "animation": {
+            "enable": true,
+            "speed": 60
+        }
+    },
+    "tilt": {
+        "direction": "random",
+        "enable": true,
+        "move": true,
+        "value": {
+            "min": 0,
+            "max": 360
+        },
+        "animation": {
+            "enable": true,
+            "speed": 60
+        }
+    },
+    "roll": {
+        "darken": {
+            "enable": true,
+            "value": 25
+        },
+        "enable": true,
+        "speed": {
+            "min": 15,
+            "max": 25
+        }
+    },
+    "wobble": {
+        "distance": 30,
+        "enable": true,
+        "move": true,
+        "speed": {
+            "min": -15,
+            "max": 15
+        }
+    }
+}

src/data/layers/aca/f.tsx

@@ -1,17 +1,21 @@
+import Spacer from "components/layout/Spacer.vue";
 import { createLayerTreeNode, createResetButton } from "data/common";
 import { main } from "data/projEntry";
 import { createClickable } from "features/clickables/clickable";
 import { createPolynomialScaling, createIndependentConversion } from "features/conversion";
 import { jsx } from "features/feature";
 import { createInfobox } from "features/infoboxes/infobox";
+import { createParticles } from "features/particles/particles";
 import { createReset } from "features/reset";
 import MainDisplay from "features/resources/MainDisplay.vue";
 import { createResource, displayResource } from "features/resources/resource";
 import { createLayer } from "game/layers";
 import { persistent } from "game/persistence";
 import Decimal, { DecimalSource, formatWhole } from "util/bignum";
-import { render } from "util/vue";
+import { IParticlesOptions } from "tsparticles-engine";
+import { render, renderRow } from "util/vue";
 import c from "./c";
+import confetti from "./confetti.json";
 
 const layer = createLayer(() => {
     const id = "f";
@@ -39,7 +43,7 @@ const layer = createLayer(() => {
         canClick() {
             return clickableState.value !== "Borkened...";
         },
-        onClick() {
+        onClick(e) {
             switch (clickableState.value) {
                 case "Start":
                     clickableState.value = "A new state!";
@@ -51,7 +55,33 @@ const layer = createLayer(() => {
                     clickableState.value = "Maybe that's a bit too far...";
                     break;
                 case "Maybe that's a bit too far...":
-                    //makeParticles(coolParticle, 4)
+                    const pos = e == undefined ? undefined : "touches" in e ? e.touches[0] : e;
+                    particles.addEmitter({
+                        // TODO this case is annoying but required because move.direction is a string rather than keyof MoveDirection
+                        particles: confetti as unknown as IParticlesOptions,
+                        autoPlay: true,
+                        fill: false,
+                        shape: "square",
+                        startCount: 0,
+                        life: {
+                            count: 1,
+                            duration: 0.1,
+                            wait: false
+                        },
+                        rate: {
+                            delay: 0,
+                            quantity: 100
+                        },
+                        position: {
+                            x: (100 * (pos?.clientX ?? 0)) / window.innerWidth,
+                            y: (100 * (pos?.clientY ?? 0)) / window.innerHeight
+                        },
+                        size: {
+                            width: 0,
+                            height: 0,
+                            mode: "precise"
+                        }
+                    });
                     clickableState.value = "Borkened...";
                     break;
                 default:
@@ -86,7 +116,8 @@ const layer = createLayer(() => {
         },
         display() {
             return clickableState.value == "Borkened..." ? "Fix the clickable!" : "Does nothing";
-        }
+        },
+        small: true
     }));
 
     const reset = createReset(() => ({
@@ -143,6 +174,8 @@ const layer = createLayer(() => {
         })
     }));
 
+    const particles = createParticles(() => ({}));
+
     const tab = jsx(() => (
         <>
             {render(coolInfo)}
@@ -154,7 +187,10 @@ const layer = createLayer(() => {
                 <img src="https://images.beano.com/store/24ab3094eb95e5373bca1ccd6f330d4406db8d1f517fc4170b32e146f80d?auto=compress%2Cformat&dpr=1&w=390" />
                 <div>Bork Bork!</div>
             </div>
-            {render(clickable)}
+            <Spacer />
+            {renderRow(resetClickable)}
+            {renderRow(clickable)}
+            {render(particles)}
         </>
     ));
 
@@ -167,7 +203,6 @@ const layer = createLayer(() => {
         coolInfo,
         clickable,
         clickableState,
-        resetClickable,
         reset,
         conversion,
         treeNode,