some cleanup

website/fridge.html

@@ -35,7 +35,8 @@ <h1>fridge poetry</h1>
         <i>a game powered by <a href="/">playhtml</a></i>
         <p>
           drag words around to make poems! leave them for others to find later
-          and come back to see how people have changed the fridge.
+          and come back to see how people have changed the fridge. (Hint: you
+          might need to zoom out to see them all)
         </p>
         <p>
           Please be nice. We're all just people on the other side of the screen.

website/index.tsx

@@ -149,6 +149,11 @@ playhtml.init({
 const slide = confetti.shapeFromText({ text: "🛝" });
 
 document.querySelector("body").addEventListener("click", (e) => {
+  // 1/4 clicks should trigger confetti
+  if (Math.random() > 0.33) {
+    return;
+  }
+
   playhtml.dispatchPlayEvent({
     type: "confetti",
     eventPayload: {

website/playground.html

@@ -36,7 +36,7 @@
       >
         <h1>CONFETTI ZONE</h1>
       </div>
-      <script src="https://cdn.jsdelivr.net/npm/[email protected].2/dist/confetti.browser.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/[email protected].3/dist/confetti.browser.min.js"></script>
       <script>
         confettiZone.addEventListener("click", onClickConfettiZone);
         function onClickConfettiZone(e) {

website/playground.ts

@@ -2,4 +2,20 @@ import "./home.scss";
 import "./playground.scss";
 import { playhtml } from "../packages/playhtml/src/main";
 
-playhtml.init({});
+playhtml.init({
+  events: {
+    confetti: {
+      type: "confetti",
+      onEvent: (data) => {
+        window.confetti({
+          ...(data || {}),
+          shapes:
+            // NOTE: this serialization is needed because `slide` doesn't serialize to JSON properly.
+            "shapes" in data
+              ? data.shapes.map((shape) => (shape === "slide" ? slide : shape))
+              : undefined,
+        });
+      },
+    },
+  },
+});