Vue2 component with Phaser 3

Phaser.vue

<template>
  <section data-phaser="true">
    <canvas ref="phasercanvas"></canvas>
  </section>
</template>

<script>
import Phaser from "phaser";
import confetti from "canvas-confetti";
const supporters = ["pippo", "paperino", "pluto"];

const config = {
  width: 800,
  height: 600,
  transparent: true,
  type: Phaser.WEBGL,
};

/**
 * @type {Phaser.Scene}
 */
let scn;
let animate, animateContainer, animateText;

export default {
  data() {
    return {
      game: null,
    };
  },
  created() {},
  mounted() {
    const canvas = this.$refs["phasercanvas"];
    config.canvas = canvas;
    config.scene = {
      create: this.create,
      preload: this.preload,
    };
    this.game = new Phaser.Game(config);
  },
  destroyed() {
    this.reset();
  },
  methods: {
    onGameLoad() {
      scn.events.on("create", () => {
        const slide = window.reveal.getCurrentSlide();
        this.shouldAnimate(slide);
        window.reveal.on("slidechanged", (event) => {
          this.shouldAnimate(event.currentSlide);
        });
      });
    },
    reset() {
      scn.add.displayList.removeAll();
      this.create();
    },
    shouldAnimate(currentSlide) {
      if (currentSlide.attributes["data-phaser"]) {
        this.startAnim();
      } else {
        this.reset();
      }
    },
    preload() {
      scn = this.game.scene.getScene("default");
    },
    startAnim() {
      setTimeout(() => {
        console.log("startAnim");
        animate();
        animateContainer();
        animateText(1500);
        setTimeout(() => {
          this.animateConfetti();
        }, 1900);
      }, 500);
    },
    animateConfetti() {
      confetti({
        particleCount: 100,
        spread: 150,
        origin: { y: 0.7 },
        gravity: 0.75,
      });
      const randomConfetti = () => {
        function randomInRange(min, max) {
          return Math.random() * (max - min) + min;
        }
        confetti({
          angle: randomInRange(80, 100),
          spread: randomInRange(90, 120),
          particleCount: randomInRange(50, 100),
          gravity: 0.8,
          origin: { y: 0.7 - 0.2 * Math.random() },
        });
      };
      setTimeout(() => {
        randomConfetti();
      }, 1000);
      setTimeout(() => {
        randomConfetti();
      }, 1800);
    },
    create() {
      const circleColor = 0xfefefe;
      const bgColor = 0xf56954;
      const rectColor = 0x052b49;
      const size = 512;

      /**
       * @type {Phaser.GameObjects.Graphics}
       */
      const bgRect = scn.add.graphics();
      bgRect.beginPath();
      bgRect.fillStyle(bgColor);
      bgRect.fillRect(-size / 2, -size / 2, size, size);
      bgRect.setPosition(size / 2, size / 2);
      bgRect.closePath();

      const circle = scn.add.graphics();
      circle.fillStyle(circleColor);
      circle.fillCircle(0, 0, (size * 0.43) / 2);
      circle.setPosition(size * 0.58, size * 0.44);
      circle.closePath();

      /**
       * @type {Phaser.GameObjects.Graphics}
       */
      const rect = scn.add.graphics();
      rect.fillStyle(rectColor);
      rect.fillRect(0, 0, 0.1 * size, 0.58 * size);
      rect.setPosition(0.21 * size, 0.21 * size);
      rect.closePath();

      const bgCircle = scn.add.graphics();
      bgCircle.fillStyle(circleColor);
      bgCircle.setAlpha(0);
      bgCircle.setPosition(config.width / 2, config.height / 2);
      bgCircle.fillCircle(0, 0, 50);
      bgCircle.closePath();

      animate = () => {
        // bgRect animation
        bgRect.setScale(0);
        bgRect.setAlpha(0);
        scn.add.tween({
          targets: bgRect,
          scaleX: 1,
          scaleY: 1,
          alpha: 1,
          duration: 200,
          ease: "Elastic",
          delay: 0,
          easeParams: [1.1, 0.8],
        });

        // Circle animation
        circle.setScale(0);
        scn.add.tween({
          targets: circle,
          scaleX: 1,
          scaleY: 1,
          duration: 400,
          ease: "Elastic",
          delay: 400,
          easeParams: [1.1, 0.9],
        });

        rect.setScale(0, 0);
        // rect animation
        scn.add.tween({
          targets: rect,
          scaleX: 1,
          scaleY: 1,
          duration: 600,
          ease: "Elastic",
          easeParams: [1.1, 0.9],
          delay: 200,
        });

        bgCircle.setScale(0, 0);
        bgCircle.setAlpha(0.1);
        scn.add.tween({
          targets: bgCircle,
          scaleX: 8,
          scaleY: 8,
          alpha: 0,
          ease: Phaser.Math.Easing.Quadratic.Out,
          duration: 550,
          delay: 150,
        });
      };
      const logoContainer = new Phaser.GameObjects.Container(scn, 0, 0, [
        bgRect,
        rect,
        circle,
      ]);
      const children = logoContainer.getAll();
      children.forEach((c) => {
        c.x -= size / 2;
        c.y -= size / 2;
      });
      logoContainer.setAlpha(0);
      logoContainer.setPosition(config.width / 2, config.height / 2);
      logoContainer.addToDisplayList();

      animateContainer = () => {
        scn.add.tween({
          targets: logoContainer,
          scaleX: 0.5,
          alpha: 1,
          scaleY: 0.5,
          duration: 600,
          ease: Phaser.Math.Easing.Quintic.Out,
          delay: 0,
        });

        scn.add.tween({
          targets: logoContainer,
          duration: 700,
          y: "-=100",
          ease: Phaser.Math.Easing.Quintic.Out,
          delay: 1000,
        });
      };
      const supportersContainer = new Phaser.GameObjects.Container(scn);
      // WebFont.load({
      //   google: {
      //     families: ["Freckle Face", "Finger Paint", "Nosifer"],
      //   },
      //   active: function () {
      //     console.log("webfontactivated");
      //   },
      // });
      supporters.forEach((s, idx) => {
        const supporterText = new Phaser.GameObjects.Text(scn, 0, idx * 20, s, {
          align: "center",
          color: "white",
        });
        supporterText.setFontFamily("Open Sans");
        supporterText.setFontSize(30);
        supporterText.setAlpha(0);
        supporterText.setScale(0);
        supporterText.setPosition(
          config.width / 2 - supporterText.width / 2,
          (idx * (supporterText.height + 65)) / 2
        );
        supportersContainer.add(supporterText);
      });
      supportersContainer.setPosition(0, config.height / 2 + 75);
      supportersContainer.addToDisplayList();

      animateText = (delay = 0) => {
        setTimeout(() => {
          supportersContainer.getAll().forEach((s, idx) => {
            scn.add.tween({
              targets: s,
              duration: 170,
              scaleX: 1,
              scaleY: 1,
              ease: Phaser.Math.Easing.Elastic.Out,
              delay: idx * 100,
            });
            scn.add.tween({
              targets: s,
              duration: 500,
              alpha: 1,
              repeat: 3,
              delay: idx * 120,
            });
          });
        }, delay);
      };

      this.onGameLoad();
      // logoContainer.setPosition(200, 200);
    },
  },
};
</script>