<script setup lang="ts">
import { ref } from 'vue';

const loadQuotes = [
  // Misc
  'Demanding rollback netcode',
  'Disrespecting your plus frames',
  'Taking your lunch money',
  // Street Fighter
  'Parrying your super',
  'Fighting like gentlemen',
  'Fighting a new rival',
  'Keeping it classy',
  "Protecting Russia's skies",
  'Waking up with Dragon Punch',
  'Teching those throws',
  'Finding the heart of battle',
  'Chucking plasma',
  'Executing the Yeah Nah Yeah',
  // Guilty Gear
  'Counter-hitting Pilebunker',
  'Riding the lightning',
  'Knowing the smell of the game',
  'Dropping the instant kill combo',
  'What are you standing up for?!',
  'Stealing your soul',
  'Channelling your inner gorilla',
  'Initiating danger time',
  'Dragon Installing',
  'Practising dust loops',
  // BlazBlue
  'Turning the wheel of fate',
  'Escaping from crossing fate',
  // Tekken
  "Complaining about Paul's damage",
  'Nerfing Gigas',
  'Mashing hopkick',
  'Sidestepping your electric',
  'Punishing hellsweep with 1,1,2',
  'Emailing Harada',
  // Marvel
  'Explaining the DHC glitch',
  "When's Mahvel?",
  'Thanking god for the machine',
  'Setting up shop',
  'Getting motivated',
  'Activating X-Factor',
  // Dragon Ball
  'Adding yet another Goku',
];

const randomIndex = Math.floor(Math.random() * loadQuotes.length);
const loadQuote = ref(loadQuotes[randomIndex]);
</script>

<template>
  <QLayout view="hHh LpR fFf">
    <QPageContainer>
      <QPage class="loading-page">
        <div class="loading-content">
          <QSpinner
            color="primary"
            size="50px"
            :thickness="5"
          />
          <div class="quote text-subtitle1 q-mt-md">
            {{ loadQuote }}
          </div>
          <div class="status text-subtitle2">
            Loading...
          </div>
        </div>
      </QPage>
    </QPageContainer>
  </QLayout>
</template>

<style>
.loading-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f5;
  text-align: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.quote {
  max-width: 520px;
}

.status {
  font-style: italic;
  opacity: 0.7;
}
</style>
