base for noita submitter

polylan_submitter/src/Home.vue

@@ -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>

polylan_submitter/src/OpusMagnum.vue

@@ -108,17 +108,24 @@ const findPuzzleByName = (ocrPuzzleName: string) => {
 const reloadPage = () => {
   window.location.reload();
 };
+
+const goHome = () => {
+  window.location.href = "/";
+};
 </script>
 
 <template>
   <div class="min-h-screen bg-base-200">
     <!-- Header -->
     <div class="navbar bg-base-100 shadow-lg">
-      <div class="container mx-auto">
-        <div class="flex-1">
-          <h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
-        </div>
-        <div class="flex items-start justify-between">
+      <div class="container mx-auto w-full flex items-center gap-4">
+        <button @click="goHome" class="btn btn-primary btn-sm">
+          <i class="mdi mdi-arrow-left"></i>
+          Back
+        </button>
+        <h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
+        <div class="flex-1"></div>
+        <div class="flex items-center gap-4">
           <div
             v-if="userInfo?.is_authenticated"
             class="flex items-center gap-2"
@@ -133,12 +140,8 @@ const reloadPage = () => {
             </div>
           </div>
           <div v-else class="text-sm text-base-content/70">Not logged in</div>
-          <div class="flex flex-col items-end gap-2">
-            <a href="/api/docs" class="btn btn-xs">API docs</a>
-          </div>
-          <div class="flex flex-col items-end gap-2">
-            <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
-          </div>
+          <a href="/api/docs" class="btn btn-xs">API docs</a>
+          <a href="/admin" class="btn btn-xs btn-warning">Admin panel</a>
         </div>
       </div>
     </div>

polylan_submitter/src/opus-magnum.ts

@@ -1,11 +1,11 @@
 import { createApp } from 'vue'
-import App from '@/App.vue'
+import OpusMagnum from '@/OpusMagnum.vue'
 import { pinia } from '@/stores'
 import '@/style.css'
 
 // const app = createApp(App)
 const selector = "#app"
 const mountData = document.querySelector<HTMLElement>(selector)
-const app = createApp(App, { ...mountData?.dataset })
+const app = createApp(OpusMagnum, { ...mountData?.dataset })
 app.use(pinia)
 app.mount(selector)