<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>
