rename some pazzle categories and implement logout

ng-app/.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+index.html
+
 node_modules
 dist
 dist-web

ng-app/README.md

@@ -129,6 +129,8 @@ to debug the Svelte app, use Chrome :
 
 ### iOS
 
+Disclaimer: iOS hasn't been tested yet, for lack of suitable dev env (latest MacOS version needed).
+
 First, make sure Xcode is properly installed. then :
 
 ```

ng-app/src/App.svelte

@@ -79,7 +79,7 @@
       wallet_channel = new BroadcastChannel("ng_wallet");
       wallet_channel.postMessage({ cmd: "is_opened" }, location.href);
       wallet_channel.onmessage = (event) => {
-        console.log(event);
+        console.log(event.data.cmd, event.data);
         if (!location.href.startsWith(event.origin)) return;
         switch (event.data.cmd) {
           case "is_opened":
@@ -133,9 +133,13 @@
             );
             active_wallet.set(undefined);
             active_session.set(undefined);
+            opened_wallets.update((w) => {
+              delete w[value.id];
+              return w;
+            });
           }
         } else {
-          //push("#/wallet/login");
+          push("#/wallet/login");
         }
       });
     }

ng-app/src/lib/Home.svelte

@@ -14,9 +14,14 @@
   import { link } from "svelte-spa-router";
   // @ts-ignore
   import Logo from "../assets/nextgraph.svg?component";
+  import { close_active_wallet } from "../store";
 
   import { onMount } from "svelte";
   export let display_login_create = false;
+
+  function logout() {
+    close_active_wallet();
+  }
 </script>
 
 {#if display_login_create}
@@ -84,6 +89,29 @@
 {:else}
   <main class="container3">
     <h1>Welcome to test</h1>
-    <div class="row" />
+    <div class="row mt-10">
+      <button
+        on:click={logout}
+        class="text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mr-2 mb-2"
+      >
+        <svg
+          class="w-8 h-8 mr-2 -ml-1"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+          aria-hidden="true"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3 0l3-3m0 0l-3-3m3 3H9"
+          />
+        </svg>
+
+        Logout
+      </button>
+    </div>
   </main>
 {/if}

ng-app/src/routes/WalletCreate.svelte

@@ -586,7 +586,7 @@
               </svg>
               <span
                 >Don't worry, it is easier to remember 9 images than a password
-                like "69$g&ms%C*%", and it has the same strength than a complex
+                like "69$g&ms%C*%", and it has the same strength as a complex
                 password. The entropy of your pazzle is <b>66bits</b>, which is
                 considered very high by all standards.</span
               >
@@ -1487,9 +1487,38 @@
             ><br />
             Please move it to a safe and durable place.<br /><br />
           {/if}
+          Here is your Pazzle:<br /><br />
           {#each display_pazzle(ready.pazzle) as emoji}
             <span>{emoji}</span><br />
           {/each}
+          <br /><br />
+          Copy it on a piece of paper.<br /> Use that until you memorized it,<br
+          />
+          then throw it away.<br /> The order of each image is important.<br />
+          Now click on "Continue to Login"<br /><br />
+          <a href="/wallet/login" use:link>
+            <button
+              tabindex="-1"
+              class="mb-20 text-primary-700 bg-primary-100 hover:bg-primary-100/90 focus:ring-4 focus:outline-none focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mr-2"
+            >
+              <svg
+                class="w-8 h-8 mr-2 -ml-1"
+                fill="currentColor"
+                stroke="currentColor"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+                aria-hidden="true"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
+                />
+              </svg>
+              Continue to Login
+            </button>
+          </a>
         </div>
       {/if}
     {:else}

ng-app/src/store.ts

@@ -29,11 +29,12 @@ export const set_active_session = function(session) {
 
 export { writable, readonly, derived };
 
-const close_active_wallet = function() {
+export const close_active_wallet = function() {
 
     active_session.set(undefined);
     active_wallet.update((w) => {
         delete w.wallet;
+        return w;
     });
     
 }

ng-app/src/wallet_emojis.ts

@@ -588,7 +588,7 @@ let face = [
     },
   ];
 
-  let fauna = [
+  let animal = [
     {
       hexcode: "1f413",
       shortcode: "rooster",
@@ -671,7 +671,7 @@ let face = [
     },
   ];
 
-  let flora = [
+  let plants = [
     {
       hexcode: "1f40c",
       shortcode: "snail",
@@ -754,7 +754,7 @@ let face = [
     },
   ];
 
-  let greens = [
+  let fruits = [
     {
       hexcode: "1f347",
       shortcode: "grapes",
@@ -837,7 +837,7 @@ let face = [
     },
   ];
 
-  let foods = [
+  let food = [
     {
       hexcode: "1f950",
       shortcode: "croissant",
@@ -1502,103 +1502,103 @@ export async function load_svg() {
       "./assets/pazzle/emoji_u1f43b_200d_2744.svg?component"
     );
 
-    /************** FAUNA *********************/
+    /************** ANIMAL *********************/
 
-    fauna[0].svg = await import("./assets/pazzle/emoji_u1f413.svg?component");
+    animal[0].svg = await import("./assets/pazzle/emoji_u1f413.svg?component");
-    fauna[1].svg = await import("./assets/pazzle/emoji_u1f423.svg?component");
+    animal[1].svg = await import("./assets/pazzle/emoji_u1f423.svg?component");
-    fauna[2].svg = await import("./assets/pazzle/emoji_u1f985.svg?component");
+    animal[2].svg = await import("./assets/pazzle/emoji_u1f985.svg?component");
 
-    fauna[3].svg = await import("./assets/pazzle/emoji_u1f986.svg?component");
+    animal[3].svg = await import("./assets/pazzle/emoji_u1f986.svg?component");
-    fauna[4].svg = await import("./assets/pazzle/emoji_u1f989.svg?component");
+    animal[4].svg = await import("./assets/pazzle/emoji_u1f989.svg?component");
-    fauna[5].svg = await import("./assets/pazzle/emoji_u1f9a9.svg?component");
+    animal[5].svg = await import("./assets/pazzle/emoji_u1f9a9.svg?component");
 
-    fauna[6].svg = await import("./assets/pazzle/emoji_u1f427.svg?component");
+    animal[6].svg = await import("./assets/pazzle/emoji_u1f427.svg?component");
-    fauna[7].svg = await import("./assets/pazzle/emoji_u1f98e.svg?component");
+    animal[7].svg = await import("./assets/pazzle/emoji_u1f98e.svg?component");
-    fauna[8].svg = await import("./assets/pazzle/emoji_u1f422.svg?component");
+    animal[8].svg = await import("./assets/pazzle/emoji_u1f422.svg?component");
 
-    fauna[9].svg = await import("./assets/pazzle/emoji_u1f40d.svg?component");
+    animal[9].svg = await import("./assets/pazzle/emoji_u1f40d.svg?component");
-    fauna[10].svg = await import("./assets/pazzle/emoji_u1f433.svg?component");
+    animal[10].svg = await import("./assets/pazzle/emoji_u1f433.svg?component");
-    fauna[11].svg = await import("./assets/pazzle/emoji_u1f42c.svg?component");
+    animal[11].svg = await import("./assets/pazzle/emoji_u1f42c.svg?component");
 
-    fauna[12].svg = await import("./assets/pazzle/emoji_u1f41f.svg?component");
+    animal[12].svg = await import("./assets/pazzle/emoji_u1f41f.svg?component");
-    fauna[13].svg = await import("./assets/pazzle/emoji_u1f41a.svg?component");
+    animal[13].svg = await import("./assets/pazzle/emoji_u1f41a.svg?component");
-    fauna[14].svg = await import("./assets/pazzle/emoji_u1f419.svg?component");
+    animal[14].svg = await import("./assets/pazzle/emoji_u1f419.svg?component");
 
-    /************** FLORA *********************/
+    /************** PLANTS *********************/
 
-    flora[0].svg = await import("./assets/pazzle/emoji_u1f40c.svg?component");
+    plants[0].svg = await import("./assets/pazzle/emoji_u1f40c.svg?component");
-    flora[1].svg = await import("./assets/pazzle/emoji_u1f98b.svg?component");
+    plants[1].svg = await import("./assets/pazzle/emoji_u1f98b.svg?component");
-    flora[2].svg = await import("./assets/pazzle/emoji_u1f41c.svg?component");
+    plants[2].svg = await import("./assets/pazzle/emoji_u1f41c.svg?component");
 
-    flora[3].svg = await import("./assets/pazzle/emoji_u1f41d.svg?component");
+    plants[3].svg = await import("./assets/pazzle/emoji_u1f41d.svg?component");
-    flora[4].svg = await import("./assets/pazzle/emoji_u1f41e.svg?component");
+    plants[4].svg = await import("./assets/pazzle/emoji_u1f41e.svg?component");
-    flora[5].svg = await import("./assets/pazzle/emoji_u1f339.svg?component");
+    plants[5].svg = await import("./assets/pazzle/emoji_u1f339.svg?component");
 
-    flora[6].svg = await import("./assets/pazzle/emoji_u1f33b.svg?component");
+    plants[6].svg = await import("./assets/pazzle/emoji_u1f33b.svg?component");
-    flora[7].svg = await import("./assets/pazzle/emoji_u1f332.svg?component");
+    plants[7].svg = await import("./assets/pazzle/emoji_u1f332.svg?component");
-    flora[8].svg = await import("./assets/pazzle/emoji_u1f334.svg?component");
+    plants[8].svg = await import("./assets/pazzle/emoji_u1f334.svg?component");
 
-    flora[9].svg = await import("./assets/pazzle/emoji_u1f335.svg?component");
+    plants[9].svg = await import("./assets/pazzle/emoji_u1f335.svg?component");
-    flora[10].svg = await import("./assets/pazzle/emoji_u1f340.svg?component");
+    plants[10].svg = await import("./assets/pazzle/emoji_u1f340.svg?component");
-    flora[11].svg = await import("./assets/pazzle/emoji_u1fab4.svg?component");
+    plants[11].svg = await import("./assets/pazzle/emoji_u1fab4.svg?component");
 
-    flora[12].svg = await import("./assets/pazzle/emoji_u1f490.svg?component");
+    plants[12].svg = await import("./assets/pazzle/emoji_u1f490.svg?component");
-    flora[13].svg = await import("./assets/pazzle/emoji_u1f342.svg?component");
+    plants[13].svg = await import("./assets/pazzle/emoji_u1f342.svg?component");
-    flora[14].svg = await import("./assets/pazzle/emoji_u1f344.svg?component");
+    plants[14].svg = await import("./assets/pazzle/emoji_u1f344.svg?component");
 
-    /************** GREENS *********************/
+    /************** FRUITS *********************/
 
-    greens[0].svg = await import("./assets/pazzle/emoji_u1f347.svg?component");
+    fruits[0].svg = await import("./assets/pazzle/emoji_u1f347.svg?component");
-    greens[1].svg = await import("./assets/pazzle/emoji_u1f349.svg?component");
+    fruits[1].svg = await import("./assets/pazzle/emoji_u1f349.svg?component");
-    greens[2].svg = await import("./assets/pazzle/emoji_u1f34b.svg?component");
+    fruits[2].svg = await import("./assets/pazzle/emoji_u1f34b.svg?component");
 
-    greens[3].svg = await import("./assets/pazzle/emoji_u1f34c.svg?component");
+    fruits[3].svg = await import("./assets/pazzle/emoji_u1f34c.svg?component");
-    greens[4].svg = await import("./assets/pazzle/emoji_u1f34d.svg?component");
+    fruits[4].svg = await import("./assets/pazzle/emoji_u1f34d.svg?component");
-    greens[5].svg = await import("./assets/pazzle/emoji_u1f34e.svg?component");
+    fruits[5].svg = await import("./assets/pazzle/emoji_u1f34e.svg?component");
 
-    greens[6].svg = await import("./assets/pazzle/emoji_u1f352.svg?component");
+    fruits[6].svg = await import("./assets/pazzle/emoji_u1f352.svg?component");
-    greens[7].svg = await import("./assets/pazzle/emoji_u1f353.svg?component");
+    fruits[7].svg = await import("./assets/pazzle/emoji_u1f353.svg?component");
-    greens[8].svg = await import("./assets/pazzle/emoji_u1fad0.svg?component");
+    fruits[8].svg = await import("./assets/pazzle/emoji_u1fad0.svg?component");
 
-    greens[9].svg = await import("./assets/pazzle/emoji_u1f95d.svg?component");
+    fruits[9].svg = await import("./assets/pazzle/emoji_u1f95d.svg?component");
-    greens[10].svg = await import(
+    fruits[10].svg = await import(
       "./assets/pazzle/emoji_u1f951.svg?component"
     );
-    greens[11].svg = await import(
+    fruits[11].svg = await import(
       "./assets/pazzle/emoji_u1f346.svg?component"
     );
 
-    greens[12].svg = await import(
+    fruits[12].svg = await import(
       "./assets/pazzle/emoji_u1f955.svg?component"
     );
-    greens[13].svg = await import(
+    fruits[13].svg = await import(
       "./assets/pazzle/emoji_u1f33d.svg?component"
     );
-    greens[14].svg = await import(
+    fruits[14].svg = await import(
       "./assets/pazzle/emoji_u1f336.svg?component"
     );
 
-    /************** FOODS *********************/
+    /************** FOOD *********************/
 
-    foods[0].svg = await import("./assets/pazzle/emoji_u1f950.svg?component");
+    food[0].svg = await import("./assets/pazzle/emoji_u1f950.svg?component");
-    foods[1].svg = await import("./assets/pazzle/emoji_u1f956.svg?component");
+    food[1].svg = await import("./assets/pazzle/emoji_u1f956.svg?component");
-    foods[2].svg = await import("./assets/pazzle/emoji_u1f968.svg?component");
+    food[2].svg = await import("./assets/pazzle/emoji_u1f968.svg?component");
 
-    foods[3].svg = await import("./assets/pazzle/emoji_u1f9c0.svg?component");
+    food[3].svg = await import("./assets/pazzle/emoji_u1f9c0.svg?component");
-    foods[4].svg = await import("./assets/pazzle/emoji_u1f355.svg?component");
+    food[4].svg = await import("./assets/pazzle/emoji_u1f355.svg?component");
-    foods[5].svg = await import("./assets/pazzle/emoji_u1f373.svg?component");
+    food[5].svg = await import("./assets/pazzle/emoji_u1f373.svg?component");
 
-    foods[6].svg = await import("./assets/pazzle/emoji_u1f366.svg?component");
+    food[6].svg = await import("./assets/pazzle/emoji_u1f366.svg?component");
-    foods[7].svg = await import("./assets/pazzle/emoji_u1f36a.svg?component");
+    food[7].svg = await import("./assets/pazzle/emoji_u1f36a.svg?component");
-    foods[8].svg = await import("./assets/pazzle/emoji_u1f370.svg?component");
+    food[8].svg = await import("./assets/pazzle/emoji_u1f370.svg?component");
 
-    foods[9].svg = await import("./assets/pazzle/emoji_u1f36b.svg?component");
+    food[9].svg = await import("./assets/pazzle/emoji_u1f36b.svg?component");
-    foods[10].svg = await import("./assets/pazzle/emoji_u1f36c.svg?component");
+    food[10].svg = await import("./assets/pazzle/emoji_u1f36c.svg?component");
-    foods[11].svg = await import("./assets/pazzle/emoji_u2615.svg?component");
+    food[11].svg = await import("./assets/pazzle/emoji_u2615.svg?component");
 
-    foods[12].svg = await import("./assets/pazzle/emoji_u1f37e.svg?component");
+    food[12].svg = await import("./assets/pazzle/emoji_u1f37e.svg?component");
-    foods[13].svg = await import("./assets/pazzle/emoji_u1f377.svg?component");
+    food[13].svg = await import("./assets/pazzle/emoji_u1f377.svg?component");
-    foods[14].svg = await import("./assets/pazzle/emoji_u1f942.svg?component");
+    food[14].svg = await import("./assets/pazzle/emoji_u1f942.svg?component");
 
     /************** TRAVEL *********************/
 
@@ -1704,10 +1704,10 @@ export const emojis = {
     body,
     sport,
     mammal,
-    fauna,
+    animal,
-    flora,
+    plants,
-    greens,
+    fruits,
-    foods,
+    food,
     travel,
     sky,
     play,
@@ -1718,10 +1718,10 @@ export const emoji_cat = [
     "face",
     "sport",
     "mammal",
-    "fauna",
+    "animal",
-    "flora",
+    "plants",
-    "greens",
+    "fruits",
-    "foods",
+    "food",
     "travel",
     "sky",
 
@@ -1739,7 +1739,7 @@ export function display_pazzle(pazzle) {
   for (const emoji of pazzle) {
     let cat = (emoji & 240) >> 4;
     let idx = emoji & 15;
-    res.push(emoji_cat[cat] +":"+ emojis[emoji_cat[cat]][idx].code);
+    res.push(emoji_cat[cat] +": "+ emojis[emoji_cat[cat]][idx].code);
   }
   return res;
 }

ng-wallet/src/emojis.rs

@@ -561,7 +561,7 @@ const mammal: [EmojiDef<'static>; 15] = [
     },
 ];
 
-const fauna: [EmojiDef<'static>; 15] = [
+const animal: [EmojiDef<'static>; 15] = [
     EmojiDef {
         hexcode: "1f413",
         shortcode: "rooster",
@@ -639,7 +639,7 @@ const fauna: [EmojiDef<'static>; 15] = [
     },
 ];
 
-const flora: [EmojiDef<'static>; 15] = [
+const plants: [EmojiDef<'static>; 15] = [
     EmojiDef {
         hexcode: "1f40c",
         shortcode: "snail",
@@ -717,7 +717,7 @@ const flora: [EmojiDef<'static>; 15] = [
     },
 ];
 
-const greens: [EmojiDef<'static>; 15] = [
+const fruits: [EmojiDef<'static>; 15] = [
     EmojiDef {
         hexcode: "1f347",
         shortcode: "grapes",
@@ -795,7 +795,7 @@ const greens: [EmojiDef<'static>; 15] = [
     },
 ];
 
-const foods: [EmojiDef<'static>; 15] = [
+const food: [EmojiDef<'static>; 15] = [
     EmojiDef {
         hexcode: "1f950",
         shortcode: "croissant",
@@ -1194,10 +1194,10 @@ lazy_static! {
         ("body", body),
         ("sport", sport),
         ("mammal", mammal),
-        ("fauna", fauna),
+        ("animal", animal),
-        ("flora", flora),
+        ("plants", plants),
-        ("greens", greens),
+        ("fruits", fruits),
-        ("foods", foods),
+        ("food", food),
         ("travel", travel),
         ("sky", sky),
         ("play", play),
@@ -1211,10 +1211,10 @@ pub const EMOJI_CAT: [&str; 15] = [
     "face",
     "sport",
     "mammal",
-    "fauna",
+    "animal",
-    "flora",
+    "plants",
-    "greens",
+    "fruits",
-    "foods",
+    "food",
     "travel",
     "sky",
     "body",