<script>
import { TextScramble } from "../TextScramble.mjs";

export default {
  props: {
    phrases: Array,
  },
  mounted() {
    const el = this.$refs.TextScramble;
    const fx = new TextScramble(el);

    let counter = 0
    const next = () => {
      fx.setText(this.phrases[counter]).then(() => setTimeout(next, 600));
      counter = (counter + 1) % this.phrases.length;
    }

    next();
  }
};
</script>

<template>
  <div class="TextScramble my-4" ref="TextScramble"></div>
</template>

<style lang="scss">
.TextScramble {
  font-size: calc(1.5rem + 1vw);
  max-font-size: 2.5rem;
  text-align: center;
  font-family: "Roboto Mono", monospace;
  font-weight: 100;
  .dud {
    color: #166161;
  }
}
</style>
