website/app/pages/docs/connect/index.vue

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

const { t } = useLocale()

const currentStage = ref<'bot1' | 'buttons' | 'bot2' | 'hackedOptions'>('bot1')
const displayedText = ref('')
const fullText1 = t.value.setupWizard?.prompts?.platformQuestion || ''
const fullText2 = t.value.setupWizard?.prompts?.hackedQuestion || ''

const runTypewriter = (text: string, callback: () => void) => {
  displayedText.value = ''
  let index = 0
  const interval = setInterval(() => {
    if (index < text.length) {
      displayedText.value += text[index]
      index++
    } else {
      clearInterval(interval)
      setTimeout(callback, 1200)
    }
  }, 50)
}

onMounted(() => {
  runTypewriter(fullText1, () => {
    currentStage.value = 'buttons'
  })
})

const selectPlatform = (platform: 'cemu' | 'wiiu') => {
  if (platform === 'cemu') {
    navigateTo('/docs/connect/cemu')
  } else {
    currentStage.value = 'bot2'
    runTypewriter(fullText2, () => {
      currentStage.value = 'hackedOptions'
    })
  }
}

const selectHackedMethod = (method: 'sssl' | 'aroma') => {
  navigateTo(`/docs/connect/wiiu/${method}`)
}
</script>

<template>
  <div class="fullscreen-setup-container">
    <Transition
      name="fade"
      mode="out-in"
    >
      <div
        v-if="currentStage === 'bot1' || currentStage === 'bot2'"
        class="intro-wrapper"
      >
        <div class="cli-row">
          <div class="Spacebot-box">
            <span class="eye">o</span>
            <span class="nose">■</span>
            <span class="eye">o</span>
          </div>
          <div class="speech-content">
            <div class="bot-name">
              {{ t.setupWizard?.botName }}
            </div>
            <p class="bot-text">
              {{ displayedText }}<span class="cursor">▮</span>
            </p>
          </div>
        </div>
      </div>

      <div
        v-else-if="currentStage === 'buttons'"
        class="selection-wrapper"
      >
        <div class="text-wrapper text-center">
          <h1 class="archivo-black title">
            {{ t.setupWizard?.platformStage?.titlePart1 }}<span class="text-wiiu-blue">{{ t.setupWizard?.platformStage?.titlePart2 }}</span>.
          </h1>
        </div>

        <div class="buttons-container">
          <button
            class="choice-card"
            @click="selectPlatform('cemu')"
          >
            <span class="archivo-black card-title">{{ t.setupWizard?.platformStage?.cemuTitle }}</span>
            <span class="card-desc">{{ t.setupWizard?.platformStage?.cemuDesc }}</span>
          </button>

          <button
            class="choice-card active-card"
            @click="selectPlatform('wiiu')"
          >
            <span class="archivo-black card-title text-wiiu-blue">{{ t.setupWizard?.platformStage?.wiiuTitle }}</span>
            <span class="card-desc">{{ t.setupWizard?.platformStage?.wiiuDesc }}</span>
          </button>
        </div>
      </div>

      <div
        v-else-if="currentStage === 'hackedOptions'"
        class="selection-wrapper"
      >
        <div class="text-wrapper text-center">
          <h1 class="archivo-black title">
            {{ t.setupWizard?.methodStage?.titlePart1 }}<span class="text-wiiu-blue">{{ t.setupWizard?.methodStage?.titlePart2 }}</span>.
          </h1>
        </div>

        <div class="buttons-container">
          <button
            class="choice-card"
            @click="selectHackedMethod('sssl')"
          >
            <span class="archivo-black card-title">{{ t.setupWizard?.methodStage?.ssslTitle }}</span>
            <span class="card-desc">{{ t.setupWizard?.methodStage?.ssslDesc }}</span>
          </button>

          <button
            class="choice-card active-card"
            @click="selectHackedMethod('aroma')"
          >
            <span class="archivo-black card-title text-wiiu-blue">{{ t.setupWizard?.methodStage?.aromaTitle }}</span>
            <span class="card-desc">{{ t.setupWizard?.methodStage?.aromaDesc }}</span>
          </button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');

.archivo-black {
  font-family: "Archivo Black", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.text-wiiu-blue {
  color: #00aeef;
}

.text-center {
  text-align: center;
}

.fullscreen-setup-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100vw;
  background-color: #1d1e1f;
  color: #ffffff;
  overflow-y: auto;
  padding: 1.5rem;
  box-sizing: border-box;
}

.intro-wrapper {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  width: 100%;
  max-width: 600px;
}

.cli-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.Spacebot-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 2.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  width: 80px;
  height: 56px;
  padding: 0 8px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.Spacebot-box .eye {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1;
}

.Spacebot-box .nose {
  font-size: 1rem;
  color: #00aeef;
  line-height: 1;
}

.speech-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bot-name {
  color: #4df0ff;
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.25rem;
}

.bot-text {
  font-size: 1.25rem;
  color: #e2e8f0;
  margin: 0;
  word-break: break-word;
}

.cursor {
  color: #4df0ff;
  margin-left: 4px;
  animation: blink 0.7s infinite;
}

.selection-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1000px;
}

.title {
  font-size: 2.25rem;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.subtext {
  font-size: 1rem;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 2rem;
  text-align: center;
}

.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.choice-card {
  background: rgba(38, 38, 44, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem;
  padding: 1.75rem 1.25rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease-in-out;
  width: 100%;
  box-sizing: border-box;
}

.choice-card:active {
  transform: scale(0.98);
}

.active-card {
  border-color: #00aeef;
}

.card-title {
  font-size: 1.85rem;
  color: #ffffff;
}

.card-desc {
  font-size: 0.95rem;
  opacity: 0.6;
  text-align: center;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.35s ease;
}

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

@media (min-width: 768px) {
  .cli-row {
    flex-direction: row;
    text-align: left;
    gap: 2rem;
  }

  .speech-content {
    align-items: flex-start;
  }

  .Spacebot-box {
    width: 90px;
    height: 64px;
  }

  .Spacebot-box .eye { font-size: 1.5rem; }
  .Spacebot-box .nose { font-size: 1.15rem; }
  .bot-name { font-size: 1.75rem; }
  .bot-text { font-size: 1.75rem; white-space: nowrap; }

  .title {
    font-size: 4rem;
  }

  .buttons-container {
    flex-direction: row;
    width: 85%;
    gap: 2rem;
  }

  .choice-card {
    padding: 2.5rem;
    flex: 1;
  }

  .choice-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(45, 45, 52, 0.9);
  }

  .active-card:hover {
    border-color: #33c4ff;
  }

  .card-title { font-size: 2.5rem; }
  .card-desc { font-size: 1rem; }
}
</style>