add missing code, add comment

pull/26/head
Laurin Weger 6 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. 253
      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}

@ -88,9 +88,9 @@ let face = [
shortcode: "sleeping_face", shortcode: "sleeping_face",
code: "sleeping", code: "sleeping",
}, },
]; ];
let face_unwell = [ let face_unwell = [
{ {
hexcode: "1f637", hexcode: "1f637",
shortcode: "face_with_medical_mask", shortcode: "face_with_medical_mask",
@ -171,9 +171,9 @@ let face = [
shortcode: "face_with_steam_from_nose", shortcode: "face_with_steam_from_nose",
code: "annoyed", code: "annoyed",
}, },
]; ];
let face_costume = [ let face_costume = [
{ {
hexcode: "1f921", hexcode: "1f921",
shortcode: "clown_face", shortcode: "clown_face",
@ -254,9 +254,9 @@ let face = [
shortcode: "fairy", shortcode: "fairy",
code: "fairy", code: "fairy",
}, },
]; ];
let emotion = [ let emotion = [
{ {
hexcode: "1f48c", hexcode: "1f48c",
shortcode: "love_letter", shortcode: "love_letter",
@ -337,9 +337,9 @@ let face = [
shortcode: "folded_hands", shortcode: "folded_hands",
code: "praying", code: "praying",
}, },
]; ];
let body = [ let body = [
{ {
hexcode: "1f4aa", hexcode: "1f4aa",
shortcode: "flexed_biceps", shortcode: "flexed_biceps",
@ -420,9 +420,9 @@ let face = [
shortcode: "running_shoe", shortcode: "running_shoe",
code: "shoe", code: "shoe",
}, },
]; ];
let sport = [ let sport = [
{ {
hexcode: "1f93a", hexcode: "1f93a",
shortcode: "person_fencing", shortcode: "person_fencing",
@ -503,9 +503,9 @@ let face = [
shortcode: "martial_arts_uniform", shortcode: "martial_arts_uniform",
code: "martial", code: "martial",
}, },
]; ];
let bigger_animal = [ let bigger_animal = [
{ {
hexcode: "1f981", hexcode: "1f981",
shortcode: "lion", shortcode: "lion",
@ -582,9 +582,9 @@ let face = [
shortcode: "polar_bear", shortcode: "polar_bear",
code: "bear", code: "bear",
}, },
]; ];
let smaller_animal = [ let smaller_animal = [
{ {
hexcode: "1f413", hexcode: "1f413",
shortcode: "rooster", shortcode: "rooster",
@ -661,9 +661,9 @@ let face = [
shortcode: "octopus", shortcode: "octopus",
code: "octopus", code: "octopus",
}, },
]; ];
let plants = [ let plants = [
{ {
hexcode: "1f40c", hexcode: "1f40c",
shortcode: "snail", shortcode: "snail",
@ -743,9 +743,9 @@ let face = [
shortcode: "mushroom", shortcode: "mushroom",
code: "mushroom", code: "mushroom",
}, },
]; ];
let fruits = [ let fruits = [
{ {
hexcode: "1f347", hexcode: "1f347",
shortcode: "grapes", shortcode: "grapes",
@ -826,9 +826,9 @@ let face = [
shortcode: "hot_pepper", shortcode: "hot_pepper",
code: "pepper", code: "pepper",
}, },
]; ];
let food = [ let food = [
{ {
hexcode: "1f950", hexcode: "1f950",
shortcode: "croissant", shortcode: "croissant",
@ -909,9 +909,9 @@ let face = [
shortcode: "clinking_glasses", shortcode: "clinking_glasses",
code: "two_glasses", code: "two_glasses",
}, },
]; ];
let travel = [ let travel = [
{ {
hexcode: "1f3d4", hexcode: "1f3d4",
shortcode: "snow_capped_mountain", shortcode: "snow_capped_mountain",
@ -992,9 +992,9 @@ let face = [
shortcode: "rocket", shortcode: "rocket",
code: "rocket", code: "rocket",
}, },
]; ];
let sky = [ let sky = [
{ {
hexcode: "2600", hexcode: "2600",
shortcode: "sun", shortcode: "sun",
@ -1075,9 +1075,9 @@ let face = [
shortcode: "rainbow", shortcode: "rainbow",
code: "rainbow", code: "rainbow",
}, },
]; ];
let play = [ let play = [
{ {
hexcode: "1f3b8", hexcode: "1f3b8",
shortcode: "guitar", shortcode: "guitar",
@ -1158,9 +1158,9 @@ let face = [
shortcode: "diving_mask", shortcode: "diving_mask",
code: "scuba_diving", code: "scuba_diving",
}, },
]; ];
let house = [ let house = [
{ {
hexcode: "1f9f9", hexcode: "1f9f9",
shortcode: "broom", shortcode: "broom",
@ -1241,10 +1241,16 @@ let face = [
shortcode: "shopping_cart", shortcode: "shopping_cart",
code: "shopping_cart", code: "shopping_cart",
}, },
]; ];
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 = {
@ -1703,7 +1725,7 @@ export const emojis = {
sky, sky,
play, play,
house, house,
}; };
export const emoji_cat = [ export const emoji_cat = [
"face", "face",
@ -1725,12 +1747,21 @@ 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;
let idx = emoji & 15; 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; 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