feat: add confetti

app/components/Common/Confetti.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+const props = defineProps<{
+  screen: "top" | "bottom";
+}>();
+
+const confetti = useConfetti();
+const { onRender } = useScreen();
+
+onRender((ctx) => {
+  let offset: number;
+  if (props.screen === "top") {
+    confetti.update();
+    offset = 0;
+  } else {
+    offset = LOGICAL_HEIGHT;
+  }
+
+  for (const p of confetti.particles) {
+    const localY = p.y - offset;
+    if (localY < -10 || localY > LOGICAL_HEIGHT + 10) continue;
+
+    ctx.save();
+    ctx.translate(p.x, localY);
+    ctx.rotate(p.rotation);
+
+    ctx.fillStyle = p.color;
+    ctx.fillRect(-p.width / 2, -p.height / 2, p.width, p.height);
+
+    ctx.restore();
+  }
+}, 10000);
+
+defineOptions({ render: () => null });
+</script>