nextgraph-rs/ng-app/src/routes/Grid.svelte

<!--
// Copyright (c) 2022-2023 Niko Bonnieure, Par le Peuple, NextGraph.org developers
// All rights reserved.
// Licensed under the Apache License, Version 2.0
// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
// at your option. All files in the project carrying such
// notice may not be copied, modified, or distributed except
// according to those terms.
-->

<script lang="ts">
  import { onMount } from "svelte";
  import ng from "../api";

  let face = [
    {
      hexcode: "1f600",
      shortcode: "grinning_face",
      code: "happy",
      svg: "",
    },
    {
      hexcode: "1f602",
      shortcode: "face_with_tears_of_joy",
      code: "happy_tears",
    },
    {
      hexcode: "1f607",
      shortcode: "smiling_face_with_halo",
      code: "halo",
    },

    {
      hexcode: "1f970",
      shortcode: "smiling_face_with_hearts",
      code: "three_hearts",
    },
    {
      hexcode: "1f60d",
      shortcode: "smiling_face_with_heart_eyes",
      code: "two_hearts",
    },
    {
      hexcode: "1f618",
      shortcode: "face_blowing_a_kiss",
      code: "one_heart",
    },

    {
      hexcode: "1f61d",
      shortcode: "squinting_face_with_tongue",
      code: "tongue",
    },
    {
      hexcode: "1f917",
      shortcode: "hugging_face",
      code: "two_hands",
    },
    {
      hexcode: "1f92d",
      shortcode: "face_with_hand_over_mouth",
      code: "one_hand",
    },

    {
      hexcode: "1f910",
      shortcode: "zipper_mouth_face",
      code: "silenced",
    },
    {
      hexcode: "1f973",
      shortcode: "partying_face",
      code: "celebrating",
    },
    {
      hexcode: "1f60e",
      shortcode: "smiling_face_with_sunglasses",
      code: "sunglasses",
    },

    {
      hexcode: "1f644",
      shortcode: "face_with_rolling_eyes",
      code: "eyes_up",
    },
    {
      hexcode: "1f9d0",
      shortcode: "face_with_monocle",
      code: "monocole",
    },
    {
      hexcode: "1f634",
      shortcode: "sleeping_face",
      code: "sleeping",
    },
  ];

  let face_unwell = [
    {
      hexcode: "1f637",
      shortcode: "face_with_medical_mask",
      svg: "",
      code: "mask",
    },
    {
      hexcode: "1f912",
      shortcode: "face_with_thermometer",
      code: "thermometer",
    },
    {
      hexcode: "1f915",
      shortcode: "face_with_head_bandage",
      code: "bandage",
    },

    {
      hexcode: "1f92e",
      shortcode: "face_vomiting",
      code: "vomit",
    },
    {
      hexcode: "1f927",
      shortcode: "sneezing_face",
      code: "tissue",
    },
    {
      hexcode: "1f915",
      shortcode: "hot_face",
      code: "hot",
    },

    {
      hexcode: "1f976",
      shortcode: "cold_face",
      code: "cold",
    },
    {
      hexcode: "1f635",
      shortcode: "knocked_out_face",
      code: "crossed_eyes",
    },
    {
      hexcode: "1f92f",
      shortcode: "exploding_head",
      code: "explosion",
    },

    {
      hexcode: "2639",
      shortcode: "frowning_face",
      code: "sad",
    },
    {
      hexcode: "1f925",
      shortcode: "lying_face",
      code: "long_nose",
    },
    {
      hexcode: "1f62d",
      shortcode: "loudly_crying_face",
      code: "many_tears",
    },

    {
      hexcode: "1f631",
      shortcode: "face_screaming_in_fear",
      code: "fear",
    },
    {
      hexcode: "1f971",
      shortcode: "yawning_face",
      code: "tired",
    },
    {
      hexcode: "1f624",
      shortcode: "face_with_steam_from_nose",
      code: "annoyed",
    },
  ];

  let face_costume = [
    {
      hexcode: "1f921",
      shortcode: "clown_face",
      code: "clown",
      svg: "",
    },
    {
      hexcode: "1f47b",
      shortcode: "ghost",
      code: "ghost",
    },
    {
      hexcode: "1f436",
      shortcode: "dog_face",
      code: "dog",
    },

    {
      hexcode: "1f638",
      shortcode: "grinning_cat_with_smiling_eyes",
      code: "happy_cat",
    },
    {
      hexcode: "1f640",
      shortcode: "weary_cat",
      code: "scared_cat",
    },
    {
      hexcode: "1f63f",
      shortcode: "crying_cat",
      code: "sad_cat",
    },

    {
      hexcode: "1f648",
      shortcode: "see_no_evil_monkey",
      code: "monkey_no_see",
    },
    {
      hexcode: "1f649",
      shortcode: "hear_no_evil_monkey",
      code: "monkey_no_hear",
    },
    {
      hexcode: "1f64a",
      shortcode: "speak_no_evil_monkey",
      code: "monkey_no_talk",
    },

    {
      hexcode: "1f477",
      shortcode: "construction_worker",
      code: "builder",
    },
    {
      hexcode: "1f478",
      shortcode: "princess",
      code: "princess",
    },
    {
      hexcode: "1f9d1_200d_1f692",
      shortcode: "firefighter",
      code: "firefighter",
    },

    {
      hexcode: "1f9d9",
      shortcode: "mage",
      code: "mage",
    },
    {
      hexcode: "1f9dc",
      shortcode: "merperson",
      code: "mermaid",
    },
    {
      hexcode: "1f9da",
      shortcode: "fairy",
      code: "fairy",
    },
  ];

  let emotion = [
    {
      hexcode: "1f48c",
      shortcode: "love_letter",
      code: "letter_heart",
      svg: "",
    },
    {
      hexcode: "2764",
      shortcode: "red_heart",
      code: "one_heart",
    },
    {
      hexcode: "1f495",
      shortcode: "two_hearts",
      code: "two_hearts",
    },

    {
      hexcode: "1f48b",
      shortcode: "kiss_mark",
      code: "kiss",
    },
    {
      hexcode: "1f4af",
      shortcode: "hundred_points",
      code: "hundred",
    },
    {
      hexcode: "1f4a5",
      shortcode: "collision",
      code: "explosion",
    },

    {
      hexcode: "1f4a6",
      shortcode: "sweat_droplets",
      code: "drops",
    },
    {
      hexcode: "1f91d",
      shortcode: "handshake",
      code: "handshake",
    },
    {
      hexcode: "1f590",
      shortcode: "hand_with_fingers_splayed",
      code: "hand_five_fingers",
    },

    {
      hexcode: "270c",
      shortcode: "victory_hand",
      code: "hand_two_fingers",
    },
    {
      hexcode: "1f44d",
      shortcode: "thumbs_up",
      code: "thumbs_up",
    },
    {
      hexcode: "270a",
      shortcode: "raised_fist",
      code: "fist",
    },

    {
      hexcode: "1f450",
      shortcode: "open_hands",
      code: "two_hands",
    },
    {
      hexcode: "270d",
      shortcode: "writing_hand",
      code: "writing",
    },
    {
      hexcode: "1f64f",
      shortcode: "folded_hands",
      code: "praying",
    },
  ];

  let body = [
    {
      hexcode: "1f4aa",
      shortcode: "flexed_biceps",
      code: "arm",
      svg: "",
    },
    {
      hexcode: "1f9b5",
      shortcode: "leg",
      code: "leg",
    },
    {
      hexcode: "1f9b6",
      shortcode: "foot",
      code: "foot",
    },

    {
      hexcode: "1f442",
      shortcode: "ear",
      code: "ear",
    },
    {
      hexcode: "1f443",
      shortcode: "nose",
      code: "nose",
    },
    {
      hexcode: "1f9e0",
      shortcode: "brain",
      code: "brain",
    },

    {
      hexcode: "1f9b7",
      shortcode: "tooth",
      code: "tooth",
    },
    {
      hexcode: "1f9b4",
      shortcode: "bone",
      code: "bone",
    },
    {
      hexcode: "1f441",
      shortcode: "eye",
      code: "eye",
    },

    {
      hexcode: "1f445",
      shortcode: "tongue",
      code: "tongue",
    },
    {
      hexcode: "1f444",
      shortcode: "mouth",
      code: "mouth",
    },
    {
      hexcode: "1f455",
      shortcode: "t_shirt",
      code: "shirt",
    },

    {
      hexcode: "1f456",
      shortcode: "jeans",
      code: "pants",
    },
    {
      hexcode: "1f457",
      shortcode: "dress",
      code: "dress",
    },
    {
      hexcode: "1f45f",
      shortcode: "running_shoe",
      code: "shoe",
    },
  ];

  let sport = [
    {
      hexcode: "1f93a",
      shortcode: "person_fencing",
      code: "fencing",
      svg: "",
    },
    {
      hexcode: "1f3c7",
      shortcode: "horse_racing",
      code: "horse_riding",
    },
    {
      hexcode: "26f7",
      shortcode: "skier",
      code: "ski",
    },

    {
      hexcode: "1f6a3",
      shortcode: "person_rowing_boat",
      code: "boat",
    },
    {
      hexcode: "1f3ca",
      shortcode: "person_swimming",
      code: "swim",
    },
    {
      hexcode: "1f3c4",
      shortcode: "person_surfing",
      code: "surf",
    },

    {
      hexcode: "1f3cb",
      shortcode: "person_lifting_weights",
      code: "gym",
    },
    {
      hexcode: "1f93c",
      shortcode: "people_wrestling",
      code: "wrestling",
    },
    {
      hexcode: "1f6b4",
      shortcode: "person_biking",
      code: "bike",
    },

    {
      hexcode: "1fa82",
      shortcode: "parachute",
      code: "parachute",
    },
    {
      hexcode: "26bd",
      shortcode: "soccer_ball",
      code: "football",
    },
    {
      hexcode: "1f3c0",
      shortcode: "basketball",
      code: "basketball",
    },

    {
      hexcode: "1f3be",
      shortcode: "tennis",
      code: "tennis",
    },
    {
      hexcode: "1f3d3",
      shortcode: "ping_pong",
      code: "ping_pong",
    },
    {
      hexcode: "1f94b",
      shortcode: "martial_arts_uniform",
      code: "martial",
    },
  ];

  let mammal = [
    {
      hexcode: "1f981",
      shortcode: "lion",
      code: "lion",
      svg: "",
    },
    {
      hexcode: "1f406",
      shortcode: "leopard",
      code: "leopard",
    },
    {
      hexcode: "1f434",
      shortcode: "horse_face",
      code: "horse",
    },

    {
      hexcode: "1f993",
      shortcode: "zebra",
      code: "zebra",
    },
    {
      hexcode: "1f416",
      shortcode: "pig",
      code: "pig",
    },
    {
      hexcode: "1f410",
      shortcode: "goat",
      code: "goat",
    },

    {
      hexcode: "1f411",
      shortcode: "ewe",
      code: "sheep",
    },
    {
      hexcode: "1f42a",
      shortcode: "camel",
      code: "camel",
    },
    {
      hexcode: "1f992",
      shortcode: "giraffe",
      code: "giraffe",
    },

    {
      hexcode: "1f418",
      shortcode: "elephant",
      code: "elephant",
    },
    {
      hexcode: "1f98f",
      shortcode: "rhinoceros",
      code: "rhinoceros",
    },
    {
      hexcode: "1f407",
      shortcode: "rabbit",
      code: "rabbit",
    },

    {
      hexcode: "1f994",
      shortcode: "hedgehog",
      code: "hedgehog",
    },
    {
      hexcode: "1f987",
      shortcode: "bat",
      code: "bat",
    },
    {
      hexcode: "1f43b_200d_2744",
      shortcode: "polar_bear",
      code: "bear",
    },
  ];

  let fauna = [
    {
      hexcode: "1f413",
      shortcode: "rooster",
      code: "chicken",
      svg: "",
    },
    {
      hexcode: "1f423",
      shortcode: "hatching_chick",
      code: "chick",
    },
    {
      hexcode: "1f985",
      shortcode: "eagle",
      code: "eagle",
    },

    {
      hexcode: "1f986",
      shortcode: "duck",
      code: "duck",
    },
    {
      hexcode: "1f989",
      shortcode: "owl",
      code: "owl",
    },
    {
      hexcode: "1f9a9",
      shortcode: "flamingo",
      code: "flamingo",
    },

    {
      hexcode: "1f427",
      shortcode: "penguin",
      code: "penguin",
    },
    {
      hexcode: "1f98e",
      shortcode: "lizard",
      code: "lizard",
    },
    {
      hexcode: "1f422",
      shortcode: "turtle",
      code: "turtle",
    },

    {
      hexcode: "1f40d",
      shortcode: "snake",
      code: "snake",
    },
    {
      hexcode: "1f433",
      shortcode: "spouting_whale",
      code: "whale",
    },
    {
      hexcode: "1f42c",
      shortcode: "dolphin",
      code: "dolphin",
    },

    {
      hexcode: "1f41f",
      shortcode: "fish",
      code: "fish",
    },
    {
      hexcode: "1f41a",
      shortcode: "spiral_shell",
      code: "shell",
    },
    {
      hexcode: "1f419",
      shortcode: "octopus",
      code: "octopus",
    },
  ];

  let flora = [
    {
      hexcode: "1f40c",
      shortcode: "snail",
      code: "snail",
      svg: "",
    },
    {
      hexcode: "1f98b",
      shortcode: "butterfly",
      code: "butterfly",
    },
    {
      hexcode: "1f41c",
      shortcode: "ant",
      code: "ant",
    },

    {
      hexcode: "1f41d",
      shortcode: "honeybee",
      code: "bee",
    },
    {
      hexcode: "1f41e",
      shortcode: "lady_beetle",
      code: "beetle",
    },
    {
      hexcode: "1f339",
      shortcode: "rose",
      code: "rose",
    },

    {
      hexcode: "1f33b",
      shortcode: "sunflower",
      code: "sunflower",
    },
    {
      hexcode: "1f332",
      shortcode: "evergreen_tree",
      code: "fir",
    },
    {
      hexcode: "1f334",
      shortcode: "palm_tree",
      code: "palm_tree",
    },

    {
      hexcode: "1f335",
      shortcode: "cactus",
      code: "cactus",
    },
    {
      hexcode: "1f340",
      shortcode: "four_leaf_clover",
      code: "clover",
    },
    {
      hexcode: "1fab4",
      shortcode: "potted_plant",
      code: "plant",
    },

    {
      hexcode: "1f490",
      shortcode: "bouquet",
      code: "bouquet",
    },
    {
      hexcode: "1f342",
      shortcode: "fallen_leaf",
      code: "three_leaves",
    },
    {
      hexcode: "1f344",
      shortcode: "mushroom",
      code: "mushroom",
    },
  ];

  let greens = [
    {
      hexcode: "1f347",
      shortcode: "grapes",
      code: "grapes",
      svg: "",
    },
    {
      hexcode: "1f349",
      shortcode: "watermelon",
      code: "watermelon",
    },
    {
      hexcode: "1f34b",
      shortcode: "lemon",
      code: "lemon",
    },

    {
      hexcode: "1f34c",
      shortcode: "banana",
      code: "banana",
    },
    {
      hexcode: "1f34d",
      shortcode: "pineapple",
      code: "pineapple",
    },
    {
      hexcode: "1f34e",
      shortcode: "red_apple",
      code: "apple",
    },

    {
      hexcode: "1f352",
      shortcode: "cherries",
      code: "cherries",
    },
    {
      hexcode: "1f353",
      shortcode: "strawberry",
      code: "strawberry",
    },
    {
      hexcode: "1fad0",
      shortcode: "blueberries",
      code: "three_blueberries",
    },

    {
      hexcode: "1f95d",
      shortcode: "kiwi_fruit",
      code: "kiwi",
    },
    {
      hexcode: "1f951",
      shortcode: "avocado",
      code: "avocado",
    },
    {
      hexcode: "1f346",
      shortcode: "eggplant",
      code: "eggplant",
    },

    {
      hexcode: "1f955",
      shortcode: "carrot",
      code: "carrot",
    },
    {
      hexcode: "1f33d",
      shortcode: "ear_of_corn",
      code: "corn",
    },
    {
      hexcode: "1f336",
      shortcode: "hot_pepper",
      code: "pepper",
    },
  ];

  let foods = [
    {
      hexcode: "1f950",
      shortcode: "croissant",
      code: "croissant",
      svg: "",
    },
    {
      hexcode: "1f956",
      shortcode: "baguette_bread",
      code: "bread",
    },
    {
      hexcode: "1f968",
      shortcode: "pretzel",
      code: "pretzel",
    },

    {
      hexcode: "1f9c0",
      shortcode: "cheese_wedge",
      code: "cheese",
    },
    {
      hexcode: "1f355",
      shortcode: "pizza",
      code: "pizza",
    },
    {
      hexcode: "1f373",
      shortcode: "cooking",
      code: "egg",
    },

    {
      hexcode: "1f366",
      shortcode: "soft_ice_cream",
      code: "ice_cream",
    },
    {
      hexcode: "1f36a",
      shortcode: "cookie",
      code: "cookie",
    },
    {
      hexcode: "1f370",
      shortcode: "shortcake",
      code: "cake",
    },

    {
      hexcode: "1f36b",
      shortcode: "chocolate_bar",
      code: "chocolate",
    },
    {
      hexcode: "1f36c",
      shortcode: "candy",
      code: "sweet",
    },
    {
      hexcode: "2615",
      shortcode: "hot_beverage",
      code: "coffee",
    },

    {
      hexcode: "1f37e",
      shortcode: "bottle_with_popping_cork",
      code: "champagne",
    },
    {
      hexcode: "1f377",
      shortcode: "wine_glass",
      code: "glass_wine",
    },
    {
      hexcode: "1f942",
      shortcode: "clinking_glasses",
      code: "two_glasses",
    },
  ];

  let travel = [
    {
      hexcode: "1f3d4",
      shortcode: "snow_capped_mountain",
      code: "mountain",
      svg: "",
    },
    {
      hexcode: "1f3d5",
      shortcode: "camping",
      code: "camping",
    },
    {
      hexcode: "1f3d6",
      shortcode: "beach_with_umbrella",
      code: "beach",
    },

    {
      hexcode: "1f9ed",
      shortcode: "compass",
      code: "compass",
    },
    {
      hexcode: "1f3db",
      shortcode: "classical_building",
      code: "museum",
    },
    {
      hexcode: "1f3e1",
      shortcode: "house_with_garden",
      code: "house",
    },

    {
      hexcode: "26f2",
      shortcode: "fountain",
      code: "fountain",
    },
    {
      hexcode: "1f3aa",
      shortcode: "circus_tent",
      code: "circus",
    },
    {
      hexcode: "1f682",
      shortcode: "locomotive",
      code: "train",
    },

    {
      hexcode: "1f695",
      shortcode: "taxi",
      code: "car",
    },
    {
      hexcode: "1f3cd",
      shortcode: "motorcycle",
      code: "motorcycle",
    },
    {
      hexcode: "26f5",
      shortcode: "sailboat",
      code: "sailboat",
    },

    {
      hexcode: "2708",
      shortcode: "airplane",
      code: "airplane",
    },
    {
      hexcode: "1f681",
      shortcode: "helicopter",
      code: "helicopter",
    },
    {
      hexcode: "1f680",
      shortcode: "rocket",
      code: "rocket",
    },
  ];

  let sky = [
    {
      hexcode: "2600",
      shortcode: "sun",
      code: "sun",
      svg: "",
    },
    {
      hexcode: "1f319",
      shortcode: "crescent_moon",
      code: "moon",
    },
    {
      hexcode: "1fa90",
      shortcode: "ringed_planet",
      code: "planet",
    },

    {
      hexcode: "2b50",
      shortcode: "star",
      code: "star",
    },
    {
      hexcode: "1f30c",
      shortcode: "milky_way",
      code: "night_sky",
    },
    {
      hexcode: "1f327",
      shortcode: "cloud_with_rain",
      code: "cloud",
    },

    {
      hexcode: "2614",
      shortcode: "umbrella_with_rain_drops",
      code: "umbrella",
    },
    {
      hexcode: "26a1",
      shortcode: "high_voltage",
      code: "lightning",
    },
    {
      hexcode: "2744",
      shortcode: "snowflake",
      code: "snow",
    },

    {
      hexcode: "26c4",
      shortcode: "snowman_without_snow",
      code: "snowman",
    },
    {
      hexcode: "1f321",
      shortcode: "thermometer",
      code: "thermometer",
    },
    {
      hexcode: "1f525",
      shortcode: "fire",
      code: "fire",
    },

    {
      hexcode: "1f388",
      shortcode: "balloon",
      code: "balloon",
    },
    {
      hexcode: "1fa81",
      shortcode: "kite",
      code: "kite",
    },
    {
      hexcode: "1f308",
      shortcode: "rainbow",
      code: "rainbow",
    },
  ];

  let play = [
    {
      hexcode: "1f3b8",
      shortcode: "guitar",
      code: "guitar",
      svg: "",
    },
    {
      hexcode: "1f3b7",
      shortcode: "saxophone",
      code: "saxophone",
    },
    {
      hexcode: "1f3b5",
      shortcode: "musical_note",
      code: "music",
    },

    {
      hexcode: "1f3a8",
      shortcode: "artist_palette",
      code: "painting",
    },
    {
      hexcode: "265f",
      shortcode: "chess_pawn",
      code: "chess",
    },
    {
      hexcode: "1f381",
      shortcode: "wrapped_gift",
      code: "gift",
    },

    {
      hexcode: "1f3b2",
      shortcode: "game_die",
      code: "die",
    },
    {
      hexcode: "1f9e9",
      shortcode: "puzzle_piece",
      code: "puzzle",
    },
    {
      hexcode: "1f9f8",
      shortcode: "teddy_bear",
      code: "teddy_bear",
    },

    {
      hexcode: "1f9e8",
      shortcode: "firecracker",
      code: "firecracker",
    },
    {
      hexcode: "1f3af",
      shortcode: "bullseye",
      code: "bullseye",
    },
    {
      hexcode: "1f6fc",
      shortcode: "roller_skate",
      code: "roller_skate",
    },

    {
      hexcode: "1f6f4",
      shortcode: "kick_scooter",
      code: "kick_scooter",
    },
    {
      hexcode: "2693",
      shortcode: "anchor",
      code: "anchor",
    },
    {
      hexcode: "1f93f",
      shortcode: "diving_mask",
      code: "scuba_diving",
    },
  ];

  let house = [
    {
      hexcode: "1f9f9",
      shortcode: "broom",
      code: "broom",
      svg: "",
    },
    {
      hexcode: "1f50d",
      shortcode: "magnifying_glass_tilted_left",
      code: "magnifying_glass",
    },
    {
      hexcode: "1f4a1",
      shortcode: "light_bulb",
      code: "bulb",
    },

    {
      hexcode: "1f4da",
      shortcode: "books",
      code: "three_books",
    },
    {
      hexcode: "1f4e6",
      shortcode: "package",
      code: "package",
    },
    {
      hexcode: "270f",
      shortcode: "pencil",
      code: "pencil",
    },

    {
      hexcode: "1f4cc",
      shortcode: "pushpin",
      code: "pin",
    },
    {
      hexcode: "1f4ce",
      shortcode: "paperclip",
      code: "paperclip",
    },
    {
      hexcode: "2702",
      shortcode: "scissors",
      code: "scissors",
    },

    {
      hexcode: "1f511",
      shortcode: "key",
      code: "key",
    },
    {
      hexcode: "1f513",
      shortcode: "unlocked",
      code: "lock",
    },
    {
      hexcode: "1fa91",
      shortcode: "chair",
      code: "chair",
    },

    {
      hexcode: "1f6c1",
      shortcode: "bathtub",
      code: "bathtub",
    },
    {
      hexcode: "1f9fd",
      shortcode: "sponge",
      code: "sponge",
    },
    {
      hexcode: "1f6d2",
      shortcode: "shopping_cart",
      code: "shopping_cart",
    },
  ];

  onMount(async () => {
    face[0].svg = await import("../assets/pazzle/emoji_u1f600.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[3].svg = await import("../assets/pazzle/emoji_u1f970.svg?component");
    face[4].svg = await import("../assets/pazzle/emoji_u1f60d.svg?component");
    face[5].svg = await import("../assets/pazzle/emoji_u1f618.svg?component");

    face[6].svg = await import("../assets/pazzle/emoji_u1f61d.svg?component");
    face[7].svg = await import("../assets/pazzle/emoji_u1f917.svg?component");
    face[8].svg = await import("../assets/pazzle/emoji_u1f92d.svg?component");

    face[9].svg = await import("../assets/pazzle/emoji_u1f910.svg?component");
    face[10].svg = await import("../assets/pazzle/emoji_u1f973.svg?component");
    face[11].svg = await import("../assets/pazzle/emoji_u1f60e.svg?component");

    face[12].svg = await import("../assets/pazzle/emoji_u1f644.svg?component");
    face[13].svg = await import("../assets/pazzle/emoji_u1f9d0.svg?component");
    face[14].svg = await import("../assets/pazzle/emoji_u1f634.svg?component");

    /***************** FACE UNWELL ******************/

    face_unwell[0].svg = await import(
      "../assets/pazzle/emoji_u1f637.svg?component"
    );
    face_unwell[1].svg = await import(
      "../assets/pazzle/emoji_u1f912.svg?component"
    );
    face_unwell[2].svg = await import(
      "../assets/pazzle/emoji_u1f915.svg?component"
    );

    face_unwell[3].svg = await import(
      "../assets/pazzle/emoji_u1f92e.svg?component"
    );
    face_unwell[4].svg = await import(
      "../assets/pazzle/emoji_u1f927.svg?component"
    );
    face_unwell[5].svg = await import(
      "../assets/pazzle/emoji_u1f975.svg?component"
    );

    face_unwell[6].svg = await import(
      "../assets/pazzle/emoji_u1f976.svg?component"
    );
    face_unwell[7].svg = await import(
      "../assets/pazzle/emoji_u1f635.svg?component"
    );
    face_unwell[8].svg = await import(
      "../assets/pazzle/emoji_u1f92f.svg?component"
    );

    face_unwell[9].svg = await import(
      "../assets/pazzle/emoji_u2639.svg?component"
    );
    face_unwell[10].svg = await import(
      "../assets/pazzle/emoji_u1f925.svg?component"
    );
    face_unwell[11].svg = await import(
      "../assets/pazzle/emoji_u1f62d.svg?component"
    );

    face_unwell[12].svg = await import(
      "../assets/pazzle/emoji_u1f631.svg?component"
    );
    face_unwell[13].svg = await import(
      "../assets/pazzle/emoji_u1f971.svg?component"
    );
    face_unwell[14].svg = await import(
      "../assets/pazzle/emoji_u1f624.svg?component"
    );

    /****************** FACE COSTUME *****************/

    face_costume[0].svg = await import(
      "../assets/pazzle/emoji_u1f921.svg?component"
    );
    face_costume[1].svg = await import(
      "../assets/pazzle/emoji_u1f47b.svg?component"
    );
    face_costume[2].svg = await import(
      "../assets/pazzle/emoji_u1f436.svg?component"
    );

    face_costume[3].svg = await import(
      "../assets/pazzle/emoji_u1f638.svg?component"
    );
    face_costume[4].svg = await import(
      "../assets/pazzle/emoji_u1f640.svg?component"
    );
    face_costume[5].svg = await import(
      "../assets/pazzle/emoji_u1f63f.svg?component"
    );

    face_costume[6].svg = await import(
      "../assets/pazzle/emoji_u1f648.svg?component"
    );
    face_costume[7].svg = await import(
      "../assets/pazzle/emoji_u1f649.svg?component"
    );
    face_costume[8].svg = await import(
      "../assets/pazzle/emoji_u1f64a.svg?component"
    );

    face_costume[9].svg = await import(
      "../assets/pazzle/emoji_u1f477.svg?component"
    );
    face_costume[10].svg = await import(
      "../assets/pazzle/emoji_u1f478.svg?component"
    );
    face_costume[11].svg = await import(
      "../assets/pazzle/emoji_u1f9d1_200d_1f692.svg?component"
    );

    face_costume[12].svg = await import(
      "../assets/pazzle/emoji_u1f9d9.svg?component"
    );
    face_costume[13].svg = await import(
      "../assets/pazzle/emoji_u1f9dc.svg?component"
    );
    face_costume[14].svg = await import(
      "../assets/pazzle/emoji_u1f9da.svg?component"
    );

    /************** EMOTION *********************/

    emotion[0].svg = await import(
      "../assets/pazzle/emoji_u1f48c.svg?component"
    );
    emotion[1].svg = await import("../assets/pazzle/emoji_u2764.svg?component");
    emotion[2].svg = await import(
      "../assets/pazzle/emoji_u1f495.svg?component"
    );

    emotion[3].svg = await import(
      "../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[6].svg = await import(
      "../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[9].svg = await import("../assets/pazzle/emoji_u270c.svg?component");
    emotion[10].svg = await import(
      "../assets/pazzle/emoji_u1f44d.svg?component"
    );
    emotion[11].svg = await import(
      "../assets/pazzle/emoji_u270a.svg?component"
    );

    emotion[12].svg = await import(
      "../assets/pazzle/emoji_u1f450.svg?component"
    );
    emotion[13].svg = await import(
      "../assets/pazzle/emoji_u270d.svg?component"
    );
    emotion[14].svg = await import(
      "../assets/pazzle/emoji_u1f64f.svg?component"
    );

    /************** BODY *********************/

    body[0].svg = await import("../assets/pazzle/emoji_u1f4aa.svg?component");
    body[1].svg = await import("../assets/pazzle/emoji_u1f9b5.svg?component");
    body[2].svg = await import("../assets/pazzle/emoji_u1f9b6.svg?component");

    body[3].svg = await import("../assets/pazzle/emoji_u1f442.svg?component");
    body[4].svg = await import("../assets/pazzle/emoji_u1f443.svg?component");
    body[5].svg = await import("../assets/pazzle/emoji_u1f9e0.svg?component");

    body[6].svg = await import("../assets/pazzle/emoji_u1f9b7.svg?component");
    body[7].svg = await import("../assets/pazzle/emoji_u1f9b4.svg?component");
    body[8].svg = await import("../assets/pazzle/emoji_u1f441.svg?component");

    body[9].svg = await import("../assets/pazzle/emoji_u1f445.svg?component");
    body[10].svg = await import("../assets/pazzle/emoji_u1f444.svg?component");
    body[11].svg = await import("../assets/pazzle/emoji_u1f455.svg?component");

    body[12].svg = await import("../assets/pazzle/emoji_u1f456.svg?component");
    body[13].svg = await import("../assets/pazzle/emoji_u1f457.svg?component");
    body[14].svg = await import("../assets/pazzle/emoji_u1f45f.svg?component");

    /************** SPORT *********************/

    sport[0].svg = await import("../assets/pazzle/emoji_u1f93a.svg?component");
    sport[1].svg = await import("../assets/pazzle/emoji_u1f3c7.svg?component");
    sport[2].svg = await import("../assets/pazzle/emoji_u26f7.svg?component");

    sport[3].svg = await import("../assets/pazzle/emoji_u1f6a3.svg?component");
    sport[4].svg = await import("../assets/pazzle/emoji_u1f3ca.svg?component");
    sport[5].svg = await import("../assets/pazzle/emoji_u1f3c4.svg?component");

    sport[6].svg = await import("../assets/pazzle/emoji_u1f3cb.svg?component");
    sport[7].svg = await import("../assets/pazzle/emoji_u1f93c.svg?component");
    sport[8].svg = await import("../assets/pazzle/emoji_u1f6b4.svg?component");

    sport[9].svg = await import("../assets/pazzle/emoji_u1fa82.svg?component");
    sport[10].svg = await import("../assets/pazzle/emoji_u26bd.svg?component");
    sport[11].svg = await import("../assets/pazzle/emoji_u1f3c0.svg?component");

    sport[12].svg = await import("../assets/pazzle/emoji_u1f3be.svg?component");
    sport[13].svg = await import("../assets/pazzle/emoji_u1f3d3.svg?component");
    sport[14].svg = await import("../assets/pazzle/emoji_u1f94b.svg?component");

    /************** MAMMAL *********************/

    mammal[0].svg = await import("../assets/pazzle/emoji_u1f981.svg?component");
    mammal[1].svg = await import("../assets/pazzle/emoji_u1f406.svg?component");
    mammal[2].svg = await import("../assets/pazzle/emoji_u1f434.svg?component");

    mammal[3].svg = await import("../assets/pazzle/emoji_u1f993.svg?component");
    mammal[4].svg = await import("../assets/pazzle/emoji_u1f416.svg?component");
    mammal[5].svg = await import("../assets/pazzle/emoji_u1f410.svg?component");

    mammal[6].svg = await import("../assets/pazzle/emoji_u1f411.svg?component");
    mammal[7].svg = await import("../assets/pazzle/emoji_u1f42a.svg?component");
    mammal[8].svg = await import("../assets/pazzle/emoji_u1f992.svg?component");

    mammal[9].svg = await import("../assets/pazzle/emoji_u1f418.svg?component");
    mammal[10].svg = await import(
      "../assets/pazzle/emoji_u1f98f.svg?component"
    );
    mammal[11].svg = await import(
      "../assets/pazzle/emoji_u1f407.svg?component"
    );

    mammal[12].svg = await import(
      "../assets/pazzle/emoji_u1f994.svg?component"
    );
    mammal[13].svg = await import(
      "../assets/pazzle/emoji_u1f987.svg?component"
    );
    mammal[14].svg = await import(
      "../assets/pazzle/emoji_u1f43b_200d_2744.svg?component"
    );

    /************** FAUNA *********************/

    fauna[0].svg = await import("../assets/pazzle/emoji_u1f413.svg?component");
    fauna[1].svg = await import("../assets/pazzle/emoji_u1f423.svg?component");
    fauna[2].svg = await import("../assets/pazzle/emoji_u1f985.svg?component");

    fauna[3].svg = await import("../assets/pazzle/emoji_u1f986.svg?component");
    fauna[4].svg = await import("../assets/pazzle/emoji_u1f989.svg?component");
    fauna[5].svg = await import("../assets/pazzle/emoji_u1f9a9.svg?component");

    fauna[6].svg = await import("../assets/pazzle/emoji_u1f427.svg?component");
    fauna[7].svg = await import("../assets/pazzle/emoji_u1f98e.svg?component");
    fauna[8].svg = await import("../assets/pazzle/emoji_u1f422.svg?component");

    fauna[9].svg = await import("../assets/pazzle/emoji_u1f40d.svg?component");
    fauna[10].svg = await import("../assets/pazzle/emoji_u1f433.svg?component");
    fauna[11].svg = await import("../assets/pazzle/emoji_u1f42c.svg?component");

    fauna[12].svg = await import("../assets/pazzle/emoji_u1f41f.svg?component");
    fauna[13].svg = await import("../assets/pazzle/emoji_u1f41a.svg?component");
    fauna[14].svg = await import("../assets/pazzle/emoji_u1f419.svg?component");

    /************** FLORA *********************/

    flora[0].svg = await import("../assets/pazzle/emoji_u1f40c.svg?component");
    flora[1].svg = await import("../assets/pazzle/emoji_u1f98b.svg?component");
    flora[2].svg = await import("../assets/pazzle/emoji_u1f41c.svg?component");

    flora[3].svg = await import("../assets/pazzle/emoji_u1f41d.svg?component");
    flora[4].svg = await import("../assets/pazzle/emoji_u1f41e.svg?component");
    flora[5].svg = await import("../assets/pazzle/emoji_u1f339.svg?component");

    flora[6].svg = await import("../assets/pazzle/emoji_u1f33b.svg?component");
    flora[7].svg = await import("../assets/pazzle/emoji_u1f332.svg?component");
    flora[8].svg = await import("../assets/pazzle/emoji_u1f334.svg?component");

    flora[9].svg = await import("../assets/pazzle/emoji_u1f335.svg?component");
    flora[10].svg = await import("../assets/pazzle/emoji_u1f340.svg?component");
    flora[11].svg = await import("../assets/pazzle/emoji_u1fab4.svg?component");

    flora[12].svg = await import("../assets/pazzle/emoji_u1f490.svg?component");
    flora[13].svg = await import("../assets/pazzle/emoji_u1f342.svg?component");
    flora[14].svg = await import("../assets/pazzle/emoji_u1f344.svg?component");

    /************** GREENS *********************/

    greens[0].svg = await import("../assets/pazzle/emoji_u1f347.svg?component");
    greens[1].svg = await import("../assets/pazzle/emoji_u1f349.svg?component");
    greens[2].svg = await import("../assets/pazzle/emoji_u1f34b.svg?component");

    greens[3].svg = await import("../assets/pazzle/emoji_u1f34c.svg?component");
    greens[4].svg = await import("../assets/pazzle/emoji_u1f34d.svg?component");
    greens[5].svg = await import("../assets/pazzle/emoji_u1f34e.svg?component");

    greens[6].svg = await import("../assets/pazzle/emoji_u1f352.svg?component");
    greens[7].svg = await import("../assets/pazzle/emoji_u1f353.svg?component");
    greens[8].svg = await import("../assets/pazzle/emoji_u1fad0.svg?component");

    greens[9].svg = await import("../assets/pazzle/emoji_u1f95d.svg?component");
    greens[10].svg = await import(
      "../assets/pazzle/emoji_u1f951.svg?component"
    );
    greens[11].svg = await import(
      "../assets/pazzle/emoji_u1f346.svg?component"
    );

    greens[12].svg = await import(
      "../assets/pazzle/emoji_u1f955.svg?component"
    );
    greens[13].svg = await import(
      "../assets/pazzle/emoji_u1f33d.svg?component"
    );
    greens[14].svg = await import(
      "../assets/pazzle/emoji_u1f336.svg?component"
    );

    /************** FOODS *********************/

    foods[0].svg = await import("../assets/pazzle/emoji_u1f950.svg?component");
    foods[1].svg = await import("../assets/pazzle/emoji_u1f956.svg?component");
    foods[2].svg = await import("../assets/pazzle/emoji_u1f968.svg?component");

    foods[3].svg = await import("../assets/pazzle/emoji_u1f9c0.svg?component");
    foods[4].svg = await import("../assets/pazzle/emoji_u1f355.svg?component");
    foods[5].svg = await import("../assets/pazzle/emoji_u1f373.svg?component");

    foods[6].svg = await import("../assets/pazzle/emoji_u1f366.svg?component");
    foods[7].svg = await import("../assets/pazzle/emoji_u1f36a.svg?component");
    foods[8].svg = await import("../assets/pazzle/emoji_u1f370.svg?component");

    foods[9].svg = await import("../assets/pazzle/emoji_u1f36b.svg?component");
    foods[10].svg = await import("../assets/pazzle/emoji_u1f36c.svg?component");
    foods[11].svg = await import("../assets/pazzle/emoji_u2615.svg?component");

    foods[12].svg = await import("../assets/pazzle/emoji_u1f37e.svg?component");
    foods[13].svg = await import("../assets/pazzle/emoji_u1f377.svg?component");
    foods[14].svg = await import("../assets/pazzle/emoji_u1f942.svg?component");

    /************** TRAVEL *********************/

    travel[0].svg = await import("../assets/pazzle/emoji_u1f3d4.svg?component");
    travel[1].svg = await import("../assets/pazzle/emoji_u1f3d5.svg?component");
    travel[2].svg = await import("../assets/pazzle/emoji_u1f3d6.svg?component");

    travel[3].svg = await import("../assets/pazzle/emoji_u1f9ed.svg?component");
    travel[4].svg = await import("../assets/pazzle/emoji_u1f3db.svg?component");
    travel[5].svg = await import("../assets/pazzle/emoji_u1f3e1.svg?component");

    travel[6].svg = await import("../assets/pazzle/emoji_u26f2.svg?component");
    travel[7].svg = await import("../assets/pazzle/emoji_u1f3aa.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[10].svg = await import(
      "../assets/pazzle/emoji_u1f3cd.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[13].svg = await import(
      "../assets/pazzle/emoji_u1f681.svg?component"
    );
    travel[14].svg = await import(
      "../assets/pazzle/emoji_u1f680.svg?component"
    );

    /************** SKY *********************/

    sky[0].svg = await import("../assets/pazzle/emoji_u2600.svg?component");
    sky[1].svg = await import("../assets/pazzle/emoji_u1f319.svg?component");
    sky[2].svg = await import("../assets/pazzle/emoji_u1fa90.svg?component");

    sky[3].svg = await import("../assets/pazzle/emoji_u2b50.svg?component");
    sky[4].svg = await import("../assets/pazzle/emoji_u1f30c.svg?component");
    sky[5].svg = await import("../assets/pazzle/emoji_u1f327.svg?component");

    sky[6].svg = await import("../assets/pazzle/emoji_u2614.svg?component");
    sky[7].svg = await import("../assets/pazzle/emoji_u26a1.svg?component");
    sky[8].svg = await import("../assets/pazzle/emoji_u2744.svg?component");

    sky[9].svg = await import("../assets/pazzle/emoji_u26c4.svg?component");
    sky[10].svg = await import("../assets/pazzle/emoji_u1f321.svg?component");
    sky[11].svg = await import("../assets/pazzle/emoji_u1f525.svg?component");

    sky[12].svg = await import("../assets/pazzle/emoji_u1f388.svg?component");
    sky[13].svg = await import("../assets/pazzle/emoji_u1fa81.svg?component");
    sky[14].svg = await import("../assets/pazzle/emoji_u1f308.svg?component");

    /************** PLAY *********************/

    play[0].svg = await import("../assets/pazzle/emoji_u1f3b8.svg?component");
    play[1].svg = await import("../assets/pazzle/emoji_u1f3b7.svg?component");
    play[2].svg = await import("../assets/pazzle/emoji_u1f3b5.svg?component");

    play[3].svg = await import("../assets/pazzle/emoji_u1f3a8.svg?component");
    play[4].svg = await import("../assets/pazzle/emoji_u265f.svg?component");
    play[5].svg = await import("../assets/pazzle/emoji_u1f381.svg?component");

    play[6].svg = await import("../assets/pazzle/emoji_u1f3b2.svg?component");
    play[7].svg = await import("../assets/pazzle/emoji_u1f9e9.svg?component");
    play[8].svg = await import("../assets/pazzle/emoji_u1f9f8.svg?component");

    play[9].svg = await import("../assets/pazzle/emoji_u1f9e8.svg?component");
    play[10].svg = await import("../assets/pazzle/emoji_u1f3af.svg?component");
    play[11].svg = await import("../assets/pazzle/emoji_u1f6fc.svg?component");

    play[12].svg = await import("../assets/pazzle/emoji_u1f6f4.svg?component");
    play[13].svg = await import("../assets/pazzle/emoji_u2693.svg?component");
    play[14].svg = await import("../assets/pazzle/emoji_u1f93f.svg?component");

    /************** HOUSE *********************/

    house[0].svg = await import("../assets/pazzle/emoji_u1f9f9.svg?component");
    house[1].svg = await import("../assets/pazzle/emoji_u1f50d.svg?component");
    house[2].svg = await import("../assets/pazzle/emoji_u1f4a1.svg?component");

    house[3].svg = await import("../assets/pazzle/emoji_u1f4da.svg?component");
    house[4].svg = await import("../assets/pazzle/emoji_u1f4e6.svg?component");
    house[5].svg = await import("../assets/pazzle/emoji_u270f.svg?component");

    house[6].svg = await import("../assets/pazzle/emoji_u1f4cc.svg?component");
    house[7].svg = await import("../assets/pazzle/emoji_u1f4ce.svg?component");
    house[8].svg = await import("../assets/pazzle/emoji_u2702.svg?component");

    house[9].svg = await import("../assets/pazzle/emoji_u1f511.svg?component");
    house[10].svg = await import("../assets/pazzle/emoji_u1f513.svg?component");
    house[11].svg = await import("../assets/pazzle/emoji_u1fa91.svg?component");

    house[12].svg = await import("../assets/pazzle/emoji_u1f6c1.svg?component");
    house[13].svg = await import("../assets/pazzle/emoji_u1f9fd.svg?component");
    house[14].svg = await import("../assets/pazzle/emoji_u1f6d2.svg?component");

    shuffle = await ng.wallet_gen_shuffle_for_pazzle_opening(pazzle_length);

    for (const [idx, cat_idx] of shuffle.category_indices.entries()) {
      let cat = emojis[emoji_cat[cat_idx]];
      let items = [];
      for (const id of shuffle.emoji_indices[idx]) {
        items.push(cat[id]);
      }
      emojis2.push(items);
    }
    emojis2 = emojis2;

    //console.log(JSON.stringify(await ng.test_create_wallet()));
    //console.log(await ng.test_create_wallet());

    let ref = {
      id: {
        Blake3Digest32: [
          228, 228, 181, 117, 36, 206, 41, 223, 130, 96, 85, 195, 104, 137, 78,
          145, 42, 176, 58, 244, 111, 97, 246, 39, 11, 76, 135, 150, 188, 111,
          66, 33,
        ],
      },
      key: {
        ChaCha20Key: [
          100, 243, 39, 242, 203, 131, 102, 50, 9, 54, 248, 113, 4, 160, 28, 45,
          73, 56, 217, 112, 95, 150, 144, 137, 9, 57, 106, 5, 39, 202, 146, 94,
        ],
      },
    };

    let img = await ng.doc_get_file_from_store_with_object_ref("ng:", ref);

    let c = {
      security_img: Array.from(img["File"].V0.content),
      security_txt: "   know     yourself  ",
      pin: [5, 2, 9, 1],
      pazzle_length: 9,
      send_bootstrap: undefined,
      send_wallet: false,
      peer_id: {
        Ed25519PubKey: [
          119, 251, 253, 29, 135, 199, 254, 50, 134, 67, 1, 208, 117, 196, 167,
          107, 2, 113, 98, 243, 49, 90, 7, 0, 157, 58, 14, 187, 14, 3, 116, 86,
        ],
      },
      nonce: 0,
    };

    try {
      let res = await ng.wallet_create_wallet(c);
      console.log(res);
      wallet = res.wallet;

      for (const emoji of res.pazzle) {
        let cat = (emoji & 240) >> 4;
        let idx = emoji & 15;
        console.log(emoji_cat[cat], emojis[emoji_cat[cat]][idx].code);
      }
    } catch (e) {
      console.error(e);
    }

    //await start_pin();
  });

  let wallet;

  let emojis = {
    face,
    face_unwell,
    face_costume,
    emotion,
    body,
    sport,
    mammal,
    fauna,
    flora,
    greens,
    foods,
    travel,
    sky,
    play,
    house,
  };

  let emojis2 = [];
  let emoji_cat = [
    "face",
    "sport",
    "mammal",
    "fauna",
    "flora",
    "greens",
    "foods",
    "travel",
    "sky",

    "body",
    "face_unwell",
    "house",

    "play",
    "face_costume",
    "emotion",
  ];

  let shuffle;

  let step = "pazzle";

  let pazzle_length = 9;

  let display = 0;

  let selection = [];

  let pin_code = [];

  let ordered = [];

  let last_one = {};

  let shuffle_pin;

  function order() {
    step = "order";
    last_one = {};
    for (let i = 0; i < pazzle_length; i++) {
      last_one[i] = true;
    }
  }

  async function start_pin() {
    console.log(ordered);
    shuffle_pin = await ng.wallet_gen_shuffle_for_pin();
    step = "pin";
    console.log(shuffle_pin);
  }

  function select(val) {
    //console.log(emojis2[display][val]);
    let cat_idx = shuffle.category_indices[display];
    let cat = emojis[emoji_cat[cat_idx]];
    let idx = shuffle.emoji_indices[display][val];
    console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code);

    selection.push({ cat: cat_idx, index: idx });
    console.log(selection);

    if (display == pazzle_length - 1) {
      order();
    } else {
      display = display + 1;
    }
  }

  async function finish() {
    step = "end";

    let pazzle = [];

    for (const emoji of ordered) {
      pazzle.push((emoji.cat << 4) + emoji.index);
    }

    console.log(pazzle);

    // open the wallet
    try {
      let secret_wallet = await ng.wallet_open_wallet_with_pazzle(
        wallet,
        pazzle,
        pin_code
      );
      console.log(secret_wallet);
    } catch (e) {
      console.error(e);
    }

    // display the result
  }

  async function pin(val) {
    console.log(val);
    pin_code.push(val);
    if (pin_code.length == 4) {
      await finish();
    }
  }

  async function select_order(val, pos) {
    delete last_one[pos];
    console.log(last_one);
    console.log(val);
    ordered.push(val);
    val.sel = ordered.length;
    selection = selection;
    if (ordered.length == pazzle_length - 1) {
      let last = selection[Object.keys(last_one)[0]];
      ordered.push(last);
      last.sel = ordered.length;
      selection = selection;
      console.log(last);
      await start_pin();
    }
  }
</script>

{#if step == "pazzle"}
  <div class="h-screen aspect-[3/5] pazzleline max-w-[500px] min-w-[200px]">
    {#each [0, 1, 2, 3, 4] as row}
      <div class="columns-3 gap-0">
        {#each emojis2[display]?.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
          <div
            role="button"
            tabindex="0"
            class="w-full aspect-square emoji"
            on:click={() => select(row * 3 + i)}
            on:keypress={() => select(row * 3 + i)}
          >
            <svelte:component this={emoji.svg?.default} />
          </div>
        {/each}
      </div>
    {/each}
  </div>
{:else if step == "order"}
  <!-- console.log(cat_idx, emoji_cat[cat_idx], idx, cat[idx].code); -->
  <div class="h-screen aspect-[3/3] pazzleline max-w-[500px] min-w-[200px]">
    {#each [0, 1, 2] as row}
      <div class="columns-3 gap-0">
        {#each selection.slice(0 + row * 3, 3 + row * 3) || [] as emoji, i}
          {#if !emoji.sel}
            <div
              role="button"
              tabindex="0"
              class="w-full aspect-square emoji"
              on:click={() => select_order(emoji, row * 3 + i)}
              on:keypress={() => select_order(emoji, row * 3 + i)}
            >
              <svelte:component
                this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
              />
            </div>
          {:else}
            <div class="w-full aspect-square opacity-25 select-none sel-emoji">
              <svelte:component
                this={emojis[emoji_cat[emoji.cat]][emoji.index].svg?.default}
              />
              <span class="sel drop-shadow-[2px_2px_2px_rgba(255,255,255,1)]"
                >{emoji.sel}</span
              >
            </div>
          {/if}
        {/each}
      </div>
    {/each}
  </div>
{:else if step == "pin"}
  <div class="aspect-[5/2] pazzleline max-w-[800px] min-w-[200px] mt-20">
    {#each [0, 1] as row}
      <div class="columns-5 gap-0">
        {#each shuffle_pin.slice(0 + row * 5, 5 + row * 5) as num, i}
          <div
            role="button"
            tabindex="0"
            class="w-full aspect-square pin align-bottom text-9xl"
            on:click={async () => await pin(num)}
            on:keypress={async () => await pin(num)}
          >
            <span>{num}</span>
          </div>
        {/each}
      </div>
    {/each}
  </div>
{:else if step == "end"}{/if}

<style>
</style>