remove clear in favor of go back button

ng-app/src/lib/Login.svelte

@@ -22,7 +22,7 @@
   import {
     PuzzlePiece,
     XCircle,
-    ArrowLeftCircle,
+    Backspace,
     ArrowPath,
     LockOpen,
   } from "svelte-heros-v2";
@@ -31,7 +31,6 @@
   export let for_import = false;
 
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
-  let mobile = tauri_platform == "android" || tauri_platform == "ios";
 
   const dispatch = createEventDispatcher();
 
@@ -87,8 +86,6 @@
 
   let ordered = [];
 
-  let last_one = {};
-
   let shuffle_pin;
 
   let error;
@@ -98,14 +95,9 @@
   function order() {
     step = "order";
     ordered = [];
-    last_one = {};
     // In case, this is called by the cancel button, we need to reset the selection.
     selection.forEach((emoji) => (emoji.sel = undefined));
     selection = selection;
-
-    for (let i = 0; i < pazzle_length; i++) {
-      last_one[i] = true;
-    }
   }
 
   async function start_pin() {
@@ -230,23 +222,16 @@
     dispatch("cancel");
   }
 
-  function to_previous_pazzle() {
-    pazzlePage = pazzlePage - 1;
-  }
-
   async function on_pin_key(val) {
     pin_code = [...pin_code, val];
   }
 
-  async function select_order(val, pos) {
+  async function select_order(val) {
-    delete last_one[pos];
-    console.debug(last_one, val);
-
     ordered.push(val);
     val.sel = ordered.length;
     selection = selection;
     if (ordered.length == pazzle_length - 1) {
-      let last = selection[Object.keys(last_one)[0]];
+      let last = selection.find((emoji) => !emoji.sel);
       ordered.push(last);
       last.sel = ordered.length;
       selection = selection;
@@ -254,9 +239,58 @@
       await start_pin();
     }
   }
+
+  function go_back() {
+    if (step === "pazzle") {
+      // Go to previous pazzle or init page, if on first pazzle.
+      if (pazzlePage === 0) {
+        init();
+      } else {
+        pazzlePage -= 1;
+      }
+    } else if (step === "order") {
+      if (ordered.length === 0) {
+        step = "pazzle";
+      } else {
+        const last_selected = ordered.pop();
+        last_selected.sel = null;
+        ordered = ordered;
+        selection = selection;
+      }
+    } else if (step === "pin") {
+      if (pin_code.length === 0) {
+        // Unselect the last two elements.
+        const to_unselect = ordered.slice(-2);
+        to_unselect.forEach((val) => {
+          val.sel = null;
+        });
+
+        ordered = ordered.slice(0, -2);
+        selection = selection;
+        step = "order";
+      } else {
+        pin_code = pin_code.slice(0, pin_code.length - 1);
+      }
+    }
+  }
+
+  let width: number;
+  let breakPoint: number = 361;
+  let mobile = false;
+  $: if (width >= breakPoint) {
+    mobile = false;
+  } else {
+    mobile = true;
+  }
 </script>
 
-<div>
+<div
+  class="flex flex-col justify-center h-screen p-4"
+  class:min-w-[310px]={mobile}
+  class:min-w-[500px]={!mobile}
+  class:max-w-[360px]={mobile}
+  class:max-w-[600px]={!mobile}
+>
   {#if step == "load"}
     <div class=" max-w-xl lg:px-8 mx-auto px-4 mt-10">
       <h2 class="pb-5 text-xl">How to open your wallet, step by step:</h2>
@@ -322,6 +356,14 @@
         </svg>
       {:else}
         <div class="flex justify-center space-x-12 mt-4 mb-4">
+          <button
+            on:click={cancel}
+            class="mt-1 mb-2 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            ><XCircle
+              tabindex="-1"
+              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+            />Cancel</button
+          >
           <button
             on:click={letsgo}
             class="mt-1 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
@@ -332,14 +374,6 @@
             />
             Open my wallet now!
           </button>
-          <button
-            on:click={cancel}
-            class="mt-1 mb-2 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-            ><XCircle
-              tabindex="-1"
-              class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-            />Cancel</button
-          >
         </div>
       {/if}
     </div>
@@ -362,15 +396,17 @@
         </p>
       </div>
     {/if}
-  {:else if step == "pazzle"}
+    <!-- The following have navigation buttons and fixed layout -->
+  {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
     <div
-      class="flex flex-col justify-center h-screen p-4 pazzleline"
+      class="flex flex-col justify-center h-screen p-4"
       class:min-w-[310px]={mobile}
       class:min-w-[500px]={!mobile}
       class:max-w-[360px]={mobile}
       class:max-w-[600px]={!mobile}
     >
-      <div class="mt-auto">
+      <div class="mt-auto flex flex-col justify-center">
+        {#if step == "pazzle"}
           <p class="max-w-xl md:mx-auto lg:max-w-2xl">
             <span class="text-xl">
               <!-- TODO: Internationalization-->
@@ -394,36 +430,7 @@
               {/each}
             </div>
           {/each}
-      </div>
-      <div class="flex justify-between mt-auto">
-        <button
-          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          on:click={pazzlePage === 0 ? init : to_previous_pazzle}
-          ><ArrowLeftCircle
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Go Back</button
-        >
-        <button
-          on:click={cancel}
-          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          ><XCircle
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Cancel</button
-        >
-      </div>
-    </div>
         {:else if step == "order"}
-    <!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
-    <div
-      class="flex flex-col justify-center h-screen p-4"
-      class:min-w-[310px]={mobile}
-      class:min-w-[500px]={!mobile}
-      class:max-w-[360px]={mobile}
-      class:max-w-[600px]={!mobile}
-    >
-      <div class="mt-auto">
           <p class="max-w-xl md:mx-auto lg:max-w-2xl mb-2">
             <span class="text-xl">Click your emojis in the correct order</span>
           </p>
@@ -435,8 +442,8 @@
                     role="button"
                     tabindex="0"
                     class="w-full aspect-square emoji focus:outline-none focus:bg-gray-300"
-                  on:click={() => select_order(emoji, row * 3 + i)}
+                    on:click={() => select_order(emoji)}
-                  on:keypress={() => select_order(emoji, row * 3 + i)}
+                    on:keypress={() => select_order(emoji)}
                   >
                     <svelte:component
                       this={emojis[emoji_cat[emoji.cat]][emoji.index].svg
@@ -460,47 +467,12 @@
               {/each}
             </div>
           {/each}
-      </div>
-      <div class="flex justify-between mt-auto">
-        <button
-          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          on:click={() => (step = "pazzle")}
-        >
-          <ArrowLeftCircle
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />
-          Go Back</button
-        >
-        <button
-          class="mt-1 bg-yellow-100 hover:bg-yellow-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          on:click={order}
-          ><ArrowPath
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Clear</button
-        >
-        <button
-          on:click={cancel}
-          class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          ><XCircle
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Cancel</button
-        >
-      </div>
-    </div>
         {:else if step == "pin"}
-    <div
+          <p class="flex items-center md:mx-auto lg:max-w-2xl">
-      class="flex flex-col justify-center h-screen p-4"
+            <span class="text-xl">Enter your PIN code:</span>
-      class:min-w-[310px]={mobile}
+            <span class="text-xl min-w-[2em] ml-1 text-left"
-      class:min-w-[500px]={!mobile}
+              >{#each pin_code as pin_key}*{/each}</span
-      class:max-w-[360px]={mobile}
-      class:max-w-[600px]={!mobile}
             >
-      <div class="mt-auto max-w-6xl lg:px-8">
-        <p class="max-w-xl md:mx-auto lg:max-w-2xl">
-          <span class="text-xl">Enter your PIN code</span>
           </p>
           {#each [0, 1, 2] as row}
             <div class="columns-3 gap-2">
@@ -538,24 +510,10 @@
               />
             </button>
           </div>
+        {/if}
       </div>
+      <!-- Navigation Buttons for pazzle, order pin, mnemonic -->
       <div class="flex justify-between mt-auto">
-        <button
-          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          on:click={order}
-          ><ArrowLeftCircle
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Go Back</button
-        >
-        <button
-          class="mt-1 bg-yellow-100 hover:bg-yellow-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
-          on:click={start_pin}
-          ><ArrowPath
-            tabindex="-1"
-            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
-          />Clear</button
-        >
         <button
           on:click={cancel}
           class="mt-1 bg-red-100 hover:bg-red-100/90 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
@@ -564,6 +522,14 @@
             class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
           />Cancel</button
         >
+        <button
+          class="mt-1 focus:ring-4 focus:ring-primary-100/50 rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+          on:click={go_back}
+          ><Backspace
+            tabindex="-1"
+            class="w-8 h-8 mr-2 -ml-1 transition duration-75  group-hover:text-gray-900 dark:group-hover:text-white"
+          />Go Back</button
+        >
       </div>
     </div>
   {:else if step == "opening"}
@@ -660,6 +626,8 @@
   {/if}
 </div>
 
+<svelte:window bind:innerWidth={width} />
+
 <style>
   .pazzleline {
     margin-right: auto;