<html>

<head>
  <title>UA Smash Stage Strikes</title>

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">

  <link href="https://unpkg.com/primevue/resources/primevue.min.css" rel="stylesheet">
  <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet">

  <style>
    .v-enter-active, .v-leave-active {
      transition: opacity 0.5s ease;
    }

    .v-enter-from, .v-leave-to {
      opacity: 0;
    }

    .slide-fade-enter-active {
      transition: all 0.3s ease-out;
    }

    .slide-fade-leave-active {
      transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
    }

    .slide-fade-enter-from,
    .slide-fade-leave-to {
      transform: translateX(20px);
      opacity: 0;
    }

    body {
      background-color: rgba(0, 0, 0, 0);
      margin: 0px auto;
      overflow: hidden;
    }
  </style>

  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

  <script src="https://unpkg.com/vue@3"></script>

  <script src="/socket.io/socket.io.js"></script>

</head>

<body>
  <div id="app">

    <div class="container-fluid">

      <div class="row justify-content-center">
        <div class="col-8">

          <transition>
            <div v-if="showstrike" id="uastagelist" class="row justify-content-center">

              <template v-for="item in strikeList" v-bind:key="item">
                <div class="col p-2" style="min-width: 250px; max-width: 250px;">
                  <stage-card-large :item="item" :url="getImageURL(item.stageName)"></stage-card-large>
                </div>
              </template>

            </div>
          </transition>

        </div>
      </div>

    </div>

  </div>
</body>

<script  type="module">
  const { createApp} = Vue
  import StageCardLarge from '/javascripts/StageCardLarge.js'

  const socket = io(window.location.origin, {
    reconnectionDelayMax: 10000,
    autoConnect: false,
  })

  socket.on("striker-push", ({ content, from }) => {
    const data = []

    for (let i = 0; i < content.length; i++) {
      const strike = {}
      strike.stageName = content[i]["stageName"]
      strike.order = content[i]["order"]
      strike.choice = content[i]["choice"]
      strike.playerName = content[i]["playerName"]
      data.push(strike);
    }

    clearTimeout(stageStrikesApp.timeOutID)

    stageStrikesApp.showstrike = true
    stageStrikesApp.strikeList = data

    stageStrikesApp.timeOutID = setTimeout(() => (stageStrikesApp.showstrike = false), 10000)

  });

  socket.on("connect_error", (err) => {

  })

  socket.on("connect", () => {

  })

  socket.on("disconnect", () => {
    socket.connect()
  })

  const stageStrikesApp = createApp({
    data() {
      return {
        socket: socket,
        showstrike: false,
        strikeList: [],
        stageImageURLs: {},
        timeOutID: -1,
      }
    },
    mounted() {
      this.getStageImageURLs();

      const urlParams = new URLSearchParams(window.location.search);
      const room = urlParams.get('key')

      if(room != null) {
        this.socket.connect()
        this.socket.emit("subscribe",room)
      }
    },
    methods: {
      getImageURL(stageName) {
        if (this.stageImageURLs != null) {
          return this.stageImageURLs[stageName];
        } else {
          return "";
        }
      },
      async getStageImageURLs() {
        try {
          const url = window.location.origin + '/data/stages'
          const response = await fetch(url, {
            method: "get",
            headers: {
              "Content-Type": "application/json; charset=UTF-8",
            },
          });

          if(response.ok) {
            const results = await response.json()
            const data = {};

            for (let i = 0; i < results.length; i++) {
              data[results[i].stage_name] = "/images/stages/" +results[i].image_url;
            }

            this.stageImageURLs = data;
          }
        } catch (e) {
          console.log(e)
        }
      },
    },
    computed: {

    },
    components: {
      StageCardLarge
    },
  }).mount('#app')

</script>

</html>
