first

sop-front/src/views/HomeView.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { api, type CollectionSummary } from '@/api/client'
+import AdminPanel from '@/components/AdminPanel.vue'
+
+const router = useRouter()
+const collections = ref<CollectionSummary[]>([])
+const adminEnabled = ref(false)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+async function load() {
+  loading.value = true
+  error.value = null
+  try {
+    const [status, list] = await Promise.all([api.adminStatus(), api.listCollections()])
+    adminEnabled.value = status.admin_enabled
+    collections.value = list
+  } catch (e) {
+    error.value = (e as Error).message
+  } finally {
+    loading.value = false
+  }
+}
+
+function play(id: number) {
+  router.push({ name: 'game', params: { id } })
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <main class="mx-auto max-w-5xl px-6 py-12">
+    <header class="mb-12 text-center">
+      <h1 class="display text-6xl text-[var(--color-fur)] md:text-8xl">
+        Smash <span class="text-[var(--color-clothes)]">or</span> Pass
+        <span class="text-[var(--color-iris)]">?</span>
+      </h1>
+      <p class="mt-3 text-[var(--color-text-muted)]">
+        Choisissez une collection et lancez la partie.
+      </p>
+    </header>
+
+    <p v-if="error" class="mb-4 text-center text-[var(--color-iris)]">{{ error }}</p>
+
+    <section v-if="loading" class="text-center text-[var(--color-text-muted)]">Chargement…</section>
+
+    <section v-else>
+      <div v-if="collections.length === 0" class="text-center text-[var(--color-text-muted)]">
+        Aucune collection disponible pour le moment.
+      </div>
+
+      <ul v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <li
+          v-for="c in collections"
+          :key="c.id"
+          class="group cursor-pointer rounded-[var(--radius-card)] border border-[var(--color-border)] bg-[var(--color-surface)] p-6 transition hover:border-[var(--color-clothes)] hover:bg-[var(--color-surface-2)]"
+          @click="play(c.id)"
+        >
+          <h2 class="mb-2 text-2xl text-[var(--color-fur)]">{{ c.name }}</h2>
+          <p class="text-sm text-[var(--color-text-muted)]">
+            {{ c.character_count }} personnage{{ c.character_count > 1 ? 's' : '' }}
+          </p>
+          <p
+            class="mt-4 inline-block rounded-md bg-[var(--color-clothes)] px-3 py-1 text-sm font-semibold text-white opacity-0 transition group-hover:opacity-100"
+          >
+            Jouer →
+          </p>
+        </li>
+      </ul>
+    </section>
+
+    <div v-if="adminEnabled" class="mt-16">
+      <AdminPanel :collections="collections" @refresh="load" />
+    </div>
+  </main>
+</template>