From f3fb8bf99ce71a733bca6d20e11a350aa21128eb Mon Sep 17 00:00:00 2001
From: Spencer Chang <spencerc99@gmail.com>
Date: Mon, 12 Aug 2024 14:28:06 -0700
Subject: [PATCH] some cleanup

---
 website/fridge.html     |  3 ++-
 website/index.tsx       |  5 +++++
 website/playground.html |  2 +-
 website/playground.ts   | 18 +++++++++++++++++-
 4 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/website/fridge.html b/website/fridge.html
index 231274e..1682458 100644
--- a/website/fridge.html
+++ b/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.
diff --git a/website/index.tsx b/website/index.tsx
index 4b3c1c6..18e440e 100644
--- a/website/index.tsx
+++ b/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: {
diff --git a/website/playground.html b/website/playground.html
index ab9e4f8..5086b87 100644
--- a/website/playground.html
+++ b/website/playground.html
@@ -36,7 +36,7 @@
       >
         <h1>CONFETTI ZONE</h1>
       </div>
-      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
+      <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.3/dist/confetti.browser.min.js"></script>
       <script>
         confettiZone.addEventListener("click", onClickConfettiZone);
         function onClickConfettiZone(e) {
diff --git a/website/playground.ts b/website/playground.ts
index 4f6f90a..2807c21 100644
--- a/website/playground.ts
+++ b/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,
+        });
+      },
+    },
+  },
+});