add missing code, add comment

pull/26/head
Laurin Weger 3 months ago
parent 2d0b8d5614
commit ee58c8327e
No known key found for this signature in database
GPG Key ID: 9B372BB0B792770F
  1. 26
      ng-app/src/lib/Login.svelte
  2. 191
      ng-app/src/wallet_emojis.ts

@ -39,7 +39,7 @@
onMount(async () => { onMount(async () => {
loaded = false; loaded = false;
await load_svg(); load_svg();
//console.log(wallet); //console.log(wallet);
await init(); await init();
}); });
@ -63,6 +63,8 @@
selection = []; selection = [];
error = undefined; error = undefined;
// This is only for awaiting that SVGs are loaded.
await load_svg();
loaded = true; loaded = true;
} }
@ -313,17 +315,11 @@
class="flex flex-col justify-center h-screen p-4" class="flex flex-col justify-center h-screen p-4"
class:min-w-[310px]={mobile} class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile} class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile} class:max-w-[370px]={mobile}
class:max-w-[600px]={!mobile} class:max-w-[600px]={!mobile}
> >
{#if step == "load"} {#if step == "load"}
<div <div class="flex flex-col justify-center p-4">
class="flex flex-col justify-center p-4"
class:min-w-[310px]={mobile}
class:min-w-[500px]={!mobile}
class:max-w-[360px]={mobile}
class:max-w-[600px]={!mobile}
>
<h2 class="pb-5 text-xl self-start">How to open your wallet:</h2> <h2 class="pb-5 text-xl self-start">How to open your wallet:</h2>
<h3 class="pb-2 text-lg self-start">By your Pazzle</h3> <h3 class="pb-2 text-lg self-start">By your Pazzle</h3>
<ul class="mb-8 ml-3 space-y-4 text-left list-decimal"> <ul class="mb-8 ml-3 space-y-4 text-left list-decimal">
@ -450,13 +446,7 @@
</div> </div>
<!-- The following steps have navigation buttons and fixed layout --> <!-- The following steps have navigation buttons and fixed layout -->
{:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"} {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
<div <div class="flex flex-col justify-center h-screen p-4">
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 flex flex-col justify-center"> <div class="mt-auto flex flex-col justify-center">
<!-- Unlock Screens --> <!-- Unlock Screens -->
@ -555,7 +545,9 @@
>{#each pin_code as pin_key}*{/each}</span >{#each pin_code as pin_key}*{/each}</span
> >
</p> </p>
<!-- Chrome requires the columns-3 __flex__ to be set, or else it wraps the lines incorrectly.
However, this leads to the width decreasing and the buttons come together in mobile view.
So we need a way to fix the width across all screens. -->
{#each [0, 1, 2] as row} {#each [0, 1, 2] as row}
<div class="columns-3 flex"> <div class="columns-3 flex">
{#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num} {#each shuffle_pin.slice(0 + row * 3, 3 + row * 3) as num}

@ -1243,8 +1243,14 @@ let face = [
}, },
]; ];
let svgs_loaded = Promise.resolve(false);
/** Loads SVGs if they are not yet. TODO: This could probably be sped up by not awaiting sequentially. */
export async function load_svg() { export async function load_svg() {
if (await svgs_loaded) {
return;
}
svgs_loaded = new Promise(async (resolve) => {
face[0].svg = await import("./assets/pazzle/emoji_u1f600.svg?component"); face[0].svg = await import("./assets/pazzle/emoji_u1f600.svg?component");
face[1].svg = await import("./assets/pazzle/emoji_u1f602.svg?component"); face[1].svg = await import("./assets/pazzle/emoji_u1f602.svg?component");
face[2].svg = await import("./assets/pazzle/emoji_u1f607.svg?component"); face[2].svg = await import("./assets/pazzle/emoji_u1f607.svg?component");
@ -1371,48 +1377,28 @@ export async function load_svg() {
/************** EMOTION *********************/ /************** EMOTION *********************/
emotion[0].svg = await import( emotion[0].svg = await import("./assets/pazzle/emoji_u1f48c.svg?component");
"./assets/pazzle/emoji_u1f48c.svg?component"
);
emotion[1].svg = await import("./assets/pazzle/emoji_u2764.svg?component"); emotion[1].svg = await import("./assets/pazzle/emoji_u2764.svg?component");
emotion[2].svg = await import( emotion[2].svg = await import("./assets/pazzle/emoji_u1f495.svg?component");
"./assets/pazzle/emoji_u1f495.svg?component"
);
emotion[3].svg = await import( emotion[3].svg = await import("./assets/pazzle/emoji_u1f48b.svg?component");
"./assets/pazzle/emoji_u1f48b.svg?component" emotion[4].svg = await import("./assets/pazzle/emoji_u1f4af.svg?component");
); emotion[5].svg = await import("./assets/pazzle/emoji_u1f4a5.svg?component");
emotion[4].svg = await import(
"./assets/pazzle/emoji_u1f4af.svg?component"
);
emotion[5].svg = await import(
"./assets/pazzle/emoji_u1f4a5.svg?component"
);
emotion[6].svg = await import( emotion[6].svg = await import("./assets/pazzle/emoji_u1f4a6.svg?component");
"./assets/pazzle/emoji_u1f4a6.svg?component" emotion[7].svg = await import("./assets/pazzle/emoji_u1f91d.svg?component");
); emotion[8].svg = await import("./assets/pazzle/emoji_u1f590.svg?component");
emotion[7].svg = await import(
"./assets/pazzle/emoji_u1f91d.svg?component"
);
emotion[8].svg = await import(
"./assets/pazzle/emoji_u1f590.svg?component"
);
emotion[9].svg = await import("./assets/pazzle/emoji_u270c.svg?component"); emotion[9].svg = await import("./assets/pazzle/emoji_u270c.svg?component");
emotion[10].svg = await import( emotion[10].svg = await import(
"./assets/pazzle/emoji_u1f44d.svg?component" "./assets/pazzle/emoji_u1f44d.svg?component"
); );
emotion[11].svg = await import( emotion[11].svg = await import("./assets/pazzle/emoji_u270a.svg?component");
"./assets/pazzle/emoji_u270a.svg?component"
);
emotion[12].svg = await import( emotion[12].svg = await import(
"./assets/pazzle/emoji_u1f450.svg?component" "./assets/pazzle/emoji_u1f450.svg?component"
); );
emotion[13].svg = await import( emotion[13].svg = await import("./assets/pazzle/emoji_u270d.svg?component");
"./assets/pazzle/emoji_u270d.svg?component"
);
emotion[14].svg = await import( emotion[14].svg = await import(
"./assets/pazzle/emoji_u1f64f.svg?component" "./assets/pazzle/emoji_u1f64f.svg?component"
); );
@ -1463,47 +1449,91 @@ export async function load_svg() {
/************** BIGGER ANIMAL *********************/ /************** BIGGER ANIMAL *********************/
bigger_animal[0].svg = await import("./assets/pazzle/emoji_u1f981.svg?component"); bigger_animal[0].svg = await import(
bigger_animal[1].svg = await import("./assets/pazzle/emoji_u1f406.svg?component"); "./assets/pazzle/emoji_u1f981.svg?component"
bigger_animal[2].svg = await import("./assets/pazzle/emoji_u1f434.svg?component"); );
bigger_animal[1].svg = await import(
"./assets/pazzle/emoji_u1f406.svg?component"
);
bigger_animal[2].svg = await import(
"./assets/pazzle/emoji_u1f434.svg?component"
);
bigger_animal[3].svg = await import("./assets/pazzle/emoji_u1f993.svg?component"); bigger_animal[3].svg = await import(
bigger_animal[4].svg = await import("./assets/pazzle/emoji_u1f416.svg?component"); "./assets/pazzle/emoji_u1f993.svg?component"
bigger_animal[5].svg = await import("./assets/pazzle/emoji_u1f410.svg?component"); );
bigger_animal[4].svg = await import(
"./assets/pazzle/emoji_u1f416.svg?component"
);
bigger_animal[5].svg = await import(
"./assets/pazzle/emoji_u1f410.svg?component"
);
bigger_animal[6].svg = await import("./assets/pazzle/emoji_u1f411.svg?component"); bigger_animal[6].svg = await import(
bigger_animal[7].svg = await import("./assets/pazzle/emoji_u1f42a.svg?component"); "./assets/pazzle/emoji_u1f411.svg?component"
bigger_animal[8].svg = await import("./assets/pazzle/emoji_u1f992.svg?component"); );
bigger_animal[7].svg = await import(
"./assets/pazzle/emoji_u1f42a.svg?component"
);
bigger_animal[8].svg = await import(
"./assets/pazzle/emoji_u1f992.svg?component"
);
bigger_animal[9].svg = await import("./assets/pazzle/emoji_u1f418.svg?component"); bigger_animal[9].svg = await import(
"./assets/pazzle/emoji_u1f418.svg?component"
);
bigger_animal[10].svg = await import( bigger_animal[10].svg = await import(
"./assets/pazzle/emoji_u1f98f.svg?component" "./assets/pazzle/emoji_u1f98f.svg?component"
); );
bigger_animal[11].svg = await import("./assets/pazzle/emoji_u1f9a9.svg?component"); bigger_animal[11].svg = await import(
"./assets/pazzle/emoji_u1f9a9.svg?component"
);
bigger_animal[12].svg = await import("./assets/pazzle/emoji_u1f433.svg?component"); bigger_animal[12].svg = await import(
bigger_animal[13].svg = await import("./assets/pazzle/emoji_u1f42c.svg?component"); "./assets/pazzle/emoji_u1f433.svg?component"
);
bigger_animal[13].svg = await import(
"./assets/pazzle/emoji_u1f42c.svg?component"
);
bigger_animal[14].svg = await import( bigger_animal[14].svg = await import(
"./assets/pazzle/emoji_u1f43b_200d_2744.svg?component" "./assets/pazzle/emoji_u1f43b_200d_2744.svg?component"
); );
/************** SMALLER ANIMAL *********************/ /************** SMALLER ANIMAL *********************/
smaller_animal[0].svg = await import("./assets/pazzle/emoji_u1f413.svg?component"); smaller_animal[0].svg = await import(
smaller_animal[1].svg = await import("./assets/pazzle/emoji_u1f423.svg?component"); "./assets/pazzle/emoji_u1f413.svg?component"
smaller_animal[2].svg = await import("./assets/pazzle/emoji_u1f985.svg?component"); );
smaller_animal[1].svg = await import(
"./assets/pazzle/emoji_u1f423.svg?component"
);
smaller_animal[2].svg = await import(
"./assets/pazzle/emoji_u1f985.svg?component"
);
smaller_animal[3].svg = await import("./assets/pazzle/emoji_u1f986.svg?component"); smaller_animal[3].svg = await import(
smaller_animal[4].svg = await import("./assets/pazzle/emoji_u1f989.svg?component"); "./assets/pazzle/emoji_u1f986.svg?component"
);
smaller_animal[4].svg = await import(
"./assets/pazzle/emoji_u1f989.svg?component"
);
smaller_animal[5].svg = await import( smaller_animal[5].svg = await import(
"./assets/pazzle/emoji_u1f407.svg?component" "./assets/pazzle/emoji_u1f407.svg?component"
); );
smaller_animal[6].svg = await import("./assets/pazzle/emoji_u1f427.svg?component"); smaller_animal[6].svg = await import(
smaller_animal[7].svg = await import("./assets/pazzle/emoji_u1f98e.svg?component"); "./assets/pazzle/emoji_u1f427.svg?component"
smaller_animal[8].svg = await import("./assets/pazzle/emoji_u1f422.svg?component"); );
smaller_animal[7].svg = await import(
"./assets/pazzle/emoji_u1f98e.svg?component"
);
smaller_animal[8].svg = await import(
"./assets/pazzle/emoji_u1f422.svg?component"
);
smaller_animal[9].svg = await import("./assets/pazzle/emoji_u1f40d.svg?component"); smaller_animal[9].svg = await import(
"./assets/pazzle/emoji_u1f40d.svg?component"
);
smaller_animal[10].svg = await import( smaller_animal[10].svg = await import(
"./assets/pazzle/emoji_u1f994.svg?component" "./assets/pazzle/emoji_u1f994.svg?component"
); );
@ -1511,9 +1541,15 @@ export async function load_svg() {
"./assets/pazzle/emoji_u1f987.svg?component" "./assets/pazzle/emoji_u1f987.svg?component"
); );
smaller_animal[12].svg = await import("./assets/pazzle/emoji_u1f41f.svg?component"); smaller_animal[12].svg = await import(
smaller_animal[13].svg = await import("./assets/pazzle/emoji_u1f41a.svg?component"); "./assets/pazzle/emoji_u1f41f.svg?component"
smaller_animal[14].svg = await import("./assets/pazzle/emoji_u1f419.svg?component"); );
smaller_animal[13].svg = await import(
"./assets/pazzle/emoji_u1f41a.svg?component"
);
smaller_animal[14].svg = await import(
"./assets/pazzle/emoji_u1f419.svg?component"
);
/************** PLANTS *********************/ /************** PLANTS *********************/
@ -1552,22 +1588,12 @@ export async function load_svg() {
fruits[8].svg = await import("./assets/pazzle/emoji_u1fad0.svg?component"); fruits[8].svg = await import("./assets/pazzle/emoji_u1fad0.svg?component");
fruits[9].svg = await import("./assets/pazzle/emoji_u1f95d.svg?component"); fruits[9].svg = await import("./assets/pazzle/emoji_u1f95d.svg?component");
fruits[10].svg = await import( fruits[10].svg = await import("./assets/pazzle/emoji_u1f951.svg?component");
"./assets/pazzle/emoji_u1f951.svg?component" fruits[11].svg = await import("./assets/pazzle/emoji_u1f346.svg?component");
);
fruits[11].svg = await import(
"./assets/pazzle/emoji_u1f346.svg?component"
);
fruits[12].svg = await import( fruits[12].svg = await import("./assets/pazzle/emoji_u1f955.svg?component");
"./assets/pazzle/emoji_u1f955.svg?component" fruits[13].svg = await import("./assets/pazzle/emoji_u1f33d.svg?component");
); fruits[14].svg = await import("./assets/pazzle/emoji_u1f336.svg?component");
fruits[13].svg = await import(
"./assets/pazzle/emoji_u1f33d.svg?component"
);
fruits[14].svg = await import(
"./assets/pazzle/emoji_u1f336.svg?component"
);
/************** FOOD *********************/ /************** FOOD *********************/
@ -1606,18 +1632,12 @@ export async function load_svg() {
travel[8].svg = await import("./assets/pazzle/emoji_u1f682.svg?component"); travel[8].svg = await import("./assets/pazzle/emoji_u1f682.svg?component");
travel[9].svg = await import("./assets/pazzle/emoji_u1f695.svg?component"); travel[9].svg = await import("./assets/pazzle/emoji_u1f695.svg?component");
travel[10].svg = await import( travel[10].svg = await import("./assets/pazzle/emoji_u1f3cd.svg?component");
"./assets/pazzle/emoji_u1f3cd.svg?component"
);
travel[11].svg = await import("./assets/pazzle/emoji_u26f5.svg?component"); travel[11].svg = await import("./assets/pazzle/emoji_u26f5.svg?component");
travel[12].svg = await import("./assets/pazzle/emoji_u2708.svg?component"); travel[12].svg = await import("./assets/pazzle/emoji_u2708.svg?component");
travel[13].svg = await import( travel[13].svg = await import("./assets/pazzle/emoji_u1f681.svg?component");
"./assets/pazzle/emoji_u1f681.svg?component" travel[14].svg = await import("./assets/pazzle/emoji_u1f680.svg?component");
);
travel[14].svg = await import(
"./assets/pazzle/emoji_u1f680.svg?component"
);
/************** SKY *********************/ /************** SKY *********************/
@ -1685,6 +1705,8 @@ export async function load_svg() {
house[13].svg = await import("./assets/pazzle/emoji_u1f9fd.svg?component"); house[13].svg = await import("./assets/pazzle/emoji_u1f9fd.svg?component");
house[14].svg = await import("./assets/pazzle/emoji_u1f6d2.svg?component"); house[14].svg = await import("./assets/pazzle/emoji_u1f6d2.svg?component");
resolve(true);
});
} }
export const emojis = { export const emojis = {
@ -1725,7 +1747,7 @@ export const emoji_cat = [
"emotion", "emotion",
]; ];
export function display_pazzle(pazzle) { export function display_pazzle(pazzle: number[]) {
let res = []; let res = [];
for (const emoji of pazzle) { for (const emoji of pazzle) {
let cat = (emoji & 240) >> 4; let cat = (emoji & 240) >> 4;
@ -1734,3 +1756,12 @@ export function display_pazzle(pazzle) {
} }
return res; return res;
} }
export function emojis_from_pazzle_ids(pazzle: number[]) {
return pazzle.map((emoji_id) => {
const cat_id = (emoji_id & 240) >> 4;
const cat_name = emoji_cat[cat_id];
let idx = emoji_id & 15;
return { cat: cat_name, ...emojis[cat_name][idx] };
});
}

Loading…
Cancel
Save