base for noita submitter

This commit is contained in:
2026-05-10 00:36:15 +02:00
parent 19cc52c9f8
commit 01b0dbd1d9
9 changed files with 35 additions and 342 deletions
+12 -21
View File
@@ -34,8 +34,8 @@ const navigate = (path: string) => {
</script>
<template>
<div class="min-h-screen bg-base-200 flex items-center justify-center px-4">
<div class="w-full max-w-4xl">
<div class="min-h-screen bg-base-300 flex items-center justify-center px-4">
<div class="w-full max-w-6xl">
<!-- Header -->
<div class="text-center mb-12">
<h1 class="text-5xl font-bold mb-4">PolyLAN Submitter</h1>
@@ -46,24 +46,13 @@ const navigate = (path: string) => {
<!-- Cards Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div
v-for="game in games"
:key="game.id"
@click="navigate(game.path)"
class="card bg-base-100 shadow-xl hover:shadow-2xl transition-all cursor-pointer transform hover:-translate-y-2 overflow-hidden"
>
<figure class="relative h-40 bg-base-300 overflow-hidden">
<img
v-if="!imageErrors.has(game.appId)"
:src="getHeaderImage(game.appId)"
:alt="game.title"
@error="onImageError(game.appId)"
class="w-full h-full object-cover"
/>
<div
v-else
class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-400 flex items-center justify-center text-white"
>
<div v-for="game in games" :key="game.id" @click="navigate(game.path)"
class="card card-xl bg-base-200 shadow-xl hover:shadow-2xl transition-all cursor-pointer transform hover:-translate-y-2 hover:scale-[1.05] hover:bg-base-100 overflow-hidden">
<figure class="relative h-60 bg-base-300 overflow-hidden">
<img v-if="!imageErrors.has(game.appId)" :src="getHeaderImage(game.appId)" :alt="game.title"
@error="onImageError(game.appId)" class="w-full h-full object-cover" />
<div v-else
class="w-full h-full bg-gradient-to-br from-blue-600 to-blue-400 flex items-center justify-center text-white">
<i class="mdi mdi-gamepad-variant text-5xl"></i>
</div>
<div class="absolute inset-0 bg-black/30 group-hover:bg-black/20 transition-colors"></div>
@@ -74,7 +63,7 @@ const navigate = (path: string) => {
<div class="card-actions justify-end mt-4">
<button class="btn btn-primary">
<i class="mdi mdi-arrow-right mr-2"></i>
Get Started
Submit results
</button>
</div>
</div>
@@ -86,5 +75,7 @@ const navigate = (path: string) => {
<p>Select a game above to begin submitting</p>
</div>
</div>
</div>
</template>