feat(ux): Make several UX tweaks

static/index.html

@@ -48,7 +48,7 @@
             <button class="toggle-name" data-include tabindex="-1">Trainer Name</button>
             <button class="generate-new" tabindex="-1">New Pokémon</button>
           </div>
-          <div class="duration"><span class="elapsed">0.0</span>s (ETA: <span class="eta">40</span>s)</div>
+          <div class="duration"><span class="elapsed">0.0</span>s (ETA: <span class="eta">35</span>s)</div>
         </div>
         <div class="scene">
           <div class="booster">

static/js/index.js

@@ -44,6 +44,10 @@ const generate = async () => {
     const timer = durationTimer(durationDisplay);
     const timerCleanup = timer().cleanup;
 
+    if (window.innerWidth <= 500) {
+      durationDisplay.scrollIntoView({ behavior: 'smooth' });
+    }
+
     // Theoretically, keep client waiting only an extra half interval once task is complete
     const interval = 5_000;
     await new Promise((resolve) => setTimeout(resolve, task.eta * 1_000 - interval / 2));
@@ -87,6 +91,13 @@ nameInput.addEventListener('input', (e) => {
 
 document.querySelector('form.trainer-name').addEventListener('submit', (e) => {
   e.preventDefault();
+
+  if (document.querySelector('.output').dataset.state === 'completed') {
+    if (!window.confirm('Generate new Pokémon?')) {
+      return;
+    }
+  }
+
   generate();
 });
 

static/style.css

@@ -57,6 +57,19 @@ main {
   main {
     padding: 3rem 0;
   }
+
+  .output .scene {
+    margin: -5rem 2rem 2rem;
+  }
+
+  .scene .booster {
+    --booster-scale: 0.5;
+  }
+
+  .scene .card-slot {
+    margin-top: 1rem;
+  }
+
 }
 
 @media (max-width: 1280px) {
@@ -271,6 +284,7 @@ button.toggle-name.off {
 .scene {
   --scale: 0.9;
   height: 40rem;
+  overflow: hidden;
   box-sizing: border-box;
   margin: 2rem;
   perspective: 100rem;