WIP2: New UI

static/index.js

@@ -211,8 +211,6 @@ const rotateCard = () => {
       const rotateX = (containerMouseEvent.clientY - rect.y - rect.height / 2) * RANGE;
       const rotateY = -(containerMouseEvent.clientX - rect.x - rect.width / 2) * RANGE;
 
-      console.log(performance.now() - previousTime);
-
       card.style.setProperty('--card-rx', rotateX + 'deg');
       card.style.setProperty('--card-ry', rotateY + 'deg');
     }
@@ -229,14 +227,15 @@ const initialiseCardRotation = (scene) => {
   return mousemoveHandler;
 };
 
-const setScene = (scene, mode, state) => {
-  const booster = scene.querySelector('.booster');
-  const cardSlot = scene.querySelector('.cardSlot');
+const setOutput = (mode, state) => {
+  const output = document.querySelector('.output');
 
-  scene.dataset.mode = mode;
-  scene.dataset.state = state;
+  output.dataset.mode = mode;
+  output.dataset.state = state;
 };
 
+/* Initialise */
+
 let generating = false;
 
 const booster = document.querySelector('.booster');
@@ -254,37 +253,38 @@ const generate = async () => {
     const cardSlot = scene.querySelector('.card-slot');
     const durationDisplay = document.querySelector('.duration');
 
-    cardSlot.innerHTML = '';
-    // const oldCard = cardSlot.querySelector('.pokecard');
     scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
+    cardSlot.innerHTML = '';
 
     generating = true;
 
-    setScene(scene, 'booster', 'generating');
+    setOutput('booster', 'generating');
 
     const details = await generateDetails();
-    // const task = await createTask(details.energy_type);
+    const task = await createTask(details.energy_type);
 
-    // const timer = durationTimer(durationDisplay);
-    // const timerCleanup = timer().cleanup;
+    durationDisplay.classList.add('displayed');
+    const timer = durationTimer(durationDisplay);
+    const timerCleanup = timer().cleanup;
 
-    // const longPromises = [queueTask(task.task_id), longPollTask(task)];
-    // const completedTask = await Promise.any(longPromises);
-    await new Promise((resolve) => setTimeout(resolve, 3_000));
+    const longPromises = [queueTask(task.task_id), longPollTask(task)];
+    const completedTask = await Promise.any(longPromises);
+    await new Promise((resolve) => setTimeout(resolve, 1_000));
 
-    setScene(scene, 'booster', 'completed');
+    setOutput('booster', 'completed');
 
     await new Promise((resolve) => setTimeout(resolve, 1_000));
 
     generating = false;
-    // timerCleanup(completedTask);
+    timerCleanup(completedTask);
 
-    // scene.innerHTML = cardHTML(details);
     cardSlot.innerHTML = cardHTML(details);
-    // const picture = document.querySelector('img.picture');
-    // picture.src = completedTask.value;
+    const picture = document.querySelector('img.picture');
+    picture.src = completedTask.value;
+
     mousemoveHandlerForPreviousCard = initialiseCardRotation(scene);
-    setScene(scene, 'card', 'completed');
+
+    setOutput('card', 'completed');
   } catch (err) {
     generating = false;
     console.error(err);

static/style.css

@@ -73,10 +73,6 @@ section {
   height: min-content;
 }
 
-.output {
-  height: min-content;
-}
-
 .poke-trio {
   display: flex;
   flex-direction: row;
@@ -203,6 +199,14 @@ input:focus {
 
 /* Output Section */
 
+.output {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  height: max-content;
+  perspective: 100rem;
+}
+
 .output .actions {
   display: flex;
   flex-direction: row;
@@ -210,7 +214,20 @@ input:focus {
   align-items: center;
   gap: 1rem;
   width: 100%;
-  margin: 1rem auto 2.5rem;
+  margin: 1rem auto 1.5rem;
+  transform-style: preserve-3d;
+  transform-origin: bottom;
+  transform: translateY(-25%);
+  transition: transform 0.5s, opacity 0.5s;
+  visibility: hidden;
+  opacity: 0;
+}
+
+[data-mode='card'][data-state='completed'] .actions {
+  visibility: visible;
+  transform: translateY(0);
+  opacity: 1;
+  /* pointer-events: none; */
 }
 
 @media (max-width: 500px) {
@@ -242,12 +259,20 @@ input:focus {
 
 .duration {
   color: var(--theme-subtext);
-  margin-left: auto;
+  margin: 0 auto;
   text-align: right;
   width: max-content;
   background-color: var(--theme-highlight);
   padding: 0.5rem 1rem;
   border-radius: 1rem;
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s ease-in;
+}
+
+.duration.displayed {
+  visibility: visible;
+  opacity: 1;
 }
 
 button {
@@ -278,7 +303,8 @@ button:active {
 .scene {
   --scale: 0.9;
   perspective: 100rem;
-  margin: 0.5rem;
+  /* margin: 0.5rem; */
+  margin: 2rem;
   height: 40rem;
   /* height: 100%; */
 
@@ -959,9 +985,9 @@ img.hf-logo {
   animation: 5s bounce infinite ease-out;
 }
 
-[data-state='generating'].scene {
+[data-state='generating'] .scene {
   animation: 15s spin-x infinite linear;
-  height: auto;
+  /* height: auto; */
   transform-origin: center;
 }
 [data-state='generating'] .booster {

templates/index.html

@@ -4,6 +4,11 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>This Pokémon Does Not Exist</title>
+    <style>
+      .actions, .duration {
+        opacity: 0;
+      }
+    </style>
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}" />
     <link rel="stylesheet" id="stylesheet-tag" />
     <script type="module" id="script-tag"></script>
@@ -34,7 +39,7 @@
           >
         </p>
       </section>
-      <section class="output">
+      <section class="output" data-mode="booster" data-state="ready">
         <div class="actions">
           <button class="share">Share</button>
           <button class="save">Save</button>
@@ -42,7 +47,7 @@
           <button class="generate-new">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="scene" data-mode="booster" data-state="ready">
+        <div class="scene">
           <div class="booster">
             <div class="foil triangle top left"></div>
             <div class="foil triangle top right"></div>