diff --git a/README.md b/README.md index a2d429e..854a62f 100644 --- a/README.md +++ b/README.md @@ -58,9 +58,16 @@ YES! I actually do! creating the first 95 elements took me over six hours to mak - For creating the [neopossum emojis](https://yiff.life/@EeveeEuphoria/112039918021786980) - For letting me use them in this project! +[olivvybee](https://honeycomb.engineer/@olivvybee) +- For creating the [neobread emojis](https://github.com/olivvybee/neobread) and [blobbee emojis](https://github.com/olivvybee/blobbee/releases/latest) +- For letting me use them in this project! + [vftdan](https://mastodon.ml/@vftdan) - For completly rewriting the JavaScript - Adding drowpdown menus for the part selection +[Johann150](https://genau.qwertqwefsday.eu/@Johann150) +- For the permalink functionality + You - For any feedback, bug report or pull request to improve this project! diff --git a/index.html b/index.html index dac9aec..193411e 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,6 @@ Neomojimixer (BETA) -

Neomojimixer (BETA)

@@ -46,21 +45,21 @@

- +

Neomojis are from the following sources:

Sourcecode on Codeberg: Neomojimixer -

This work is licensed under CC BY-NC-SA 4.0

- +

This work is licensed under CC BY-NC-SA 4.0

+ - + - - diff --git a/neomojimixer.js b/neomojimixer.js index d517e62..1e945ed 100644 --- a/neomojimixer.js +++ b/neomojimixer.js @@ -8,6 +8,7 @@ const NeomojiMixer = (function(NeomojiMixer) { "red", "white", "yellow", + "lightbrown", ]; let selected_color = "blue"; let color_change_callbacks = []; @@ -225,6 +226,14 @@ const NeomojiMixer = (function(NeomojiMixer) { //Randomize initial view randomize(); + // If there was a hash, restore as a direct permalink. + if (document.location.hash != "") { + loadFromHash(document.location.hash); + } + window.addEventListener("hashchange", () => { + loadFromHash(document.location.hash); + }); + //Show little statistic var sum = 0; var variety = 1; @@ -244,6 +253,26 @@ const NeomojiMixer = (function(NeomojiMixer) { } + function loadFromHash(hash) { + let parts = hash + .slice(1) // the first character is always the '#' sign + .split('+'); + + // define a constant order for the parts to appear in the hash + const parts_order = ["body", "eyes", "mouth", "arms"]; + + if (parts.length == parts_order.length) { + // convert the part names to part indices + parts = parts.map((name, i) => + Array.from(part_handlers[parts_order[i]].name_element.options).findIndex(x => x.value === name) + ); + if (parts.every(x => x != -1)) { + // all part names were found + parts.forEach((part_index, i) => part_handlers[parts_order[i]].setIndex(part_index)); + } + } + } + function randomize() { //Randomize which parts are shown for (const i in part_handlers) { part_handlers[i].randomize(); @@ -260,8 +289,10 @@ const NeomojiMixer = (function(NeomojiMixer) { ctx.clearRect(0, 0, canvas.width, canvas.height); + //Set name for the emoji to use as the image name and to show as shortcode let name = part_handlers.body.getSelectedEntry()[0] + "_" + part_handlers.eyes.getSelectedEntry()[0] + "_" + part_handlers.mouth.getSelectedEntry()[0] + "_" + part_handlers.arms.getSelectedEntry()[0]; - neomoji_name.value = name; //Set name for the emoji to use as the image name and to show as shortcode + neomoji_name.innerText = name; + neomoji_name.href = new URL("#" + part_handlers.body.getSelectedEntry()[0] + "+" + part_handlers.eyes.getSelectedEntry()[0] + "+" + part_handlers.mouth.getSelectedEntry()[0] + "+" + part_handlers.arms.getSelectedEntry()[0], document.location.href) let export_layers = [ part_handlers.body.createExportImage(), diff --git a/parts.json b/parts.json index c19dcb0..661be64 100644 --- a/parts.json +++ b/parts.json @@ -13,7 +13,7 @@ {"name": "devil", "url": "/parts/eyes_devil.png"}, {"name": "drowsy", "url": "/parts/eyes_drowsy.png"}, {"name": "evil", "url": "/parts/eyes_evil.png"}, - {"name": ">_<", "url": "/parts/eyes_><.png"}, + {"name": ">_<", "url": "/parts/eyes_squint.png"}, {"name": "cry", "url": "/parts/eyes_cry.png"}, {"name": "owo", "url": "/parts/eyes_owo.png"}, {"name": "sad", "url": "/parts/eyes_sad.png"}, @@ -66,6 +66,16 @@ {"name": "neopossum_rainbow","url": "/parts/neopossum_rainbow.png", "color": "lightgrey"}, {"name": "neorat","url": "/parts/neorat.png", "color": "white"}, {"name": "neorat_frozen","url": "/parts/neorat_frozen.png", "color": "blue"}, + {"name": "neobread","url": "/parts/neobread.png", "color": "lightbrown"}, + {"name": "neobread_ace","url": "/parts/neobread_ace.png", "color": "lightbrown"}, + {"name": "neobread_agender","url": "/parts/neobread_agender.png", "color": "lightbrown"}, + {"name": "neobread_aro","url": "/parts/neobread_aro.png", "color": "lightbrown"}, + {"name": "neobread_bi","url": "/parts/neobread_bi.png", "color": "lightbrown"}, + {"name": "neobread_lesbian","url": "/parts/neobread_lesbian.png", "color": "lightbrown"}, + {"name": "neobread_nb","url": "/parts/neobread_nb.png", "color": "lightbrown"}, + {"name": "neobread_pan","url": "/parts/neobread_pan.png", "color": "lightbrown"}, + {"name": "neobread_rainbow","url": "/parts/neobread_rainbow.png", "color": "lightbrown"}, + {"name": "neobread_trans","url": "/parts/neobread_trans.png", "color": "lightbrown"}, {"name": "neofox","url": "/parts/neofox.png", "color": "orange"} ], "mouth": [ @@ -282,6 +292,37 @@ {"name": "book","url": "/parts/arms_book_yellow.png", "color": "yellow"}, {"name": "hold_burger","url": "/parts/arms_hold_burger_yellow.png", "color": "yellow"}, {"name": "hungry","url": "/parts/arms_hungry_yellow.png", "color": "yellow"}, + {"name": "hide","url": "/parts/arms_hide_lightbrown.png", "color": "lightbrown"}, + {"name": "aww","url": "/parts/arms_aww_lightbrown.png", "color": "lightbrown"}, + {"name": "pleading","url": "/parts/arms_pleading_lightbrown.png", "color": "lightbrown"}, + {"name": "reach","url": "/parts/arms_reach_lightbrown.png", "color": "lightbrown"}, + {"name": "3c","url": "/parts/arms_3c_lightbrown.png", "color": "lightbrown"}, + {"name": "facepalm","url": "/parts/arms_facepalm_lightbrown.png", "color": "lightbrown"}, + {"name": "mug","url": "/parts/arms_mug_lightbrown.png", "color": "lightbrown"}, + {"name": "knife","url": "/parts/arms_knife_lightbrown.png", "color": "lightbrown"}, + {"name": "phone","url": "/parts/arms_phone_lightbrown.png", "color": "lightbrown"}, + {"name": "fingerguns","url": "/parts/arms_fingerguns_lightbrown.png", "color": "lightbrown"}, + {"name": "science","url": "/parts/arms_science_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_no","url": "/parts/arms_sign_no_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_aaa","url": "/parts/arms_sign_aaa_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_nya","url": "/parts/arms_sign_nya_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_thx","url": "/parts/arms_sign_thx_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_yes","url": "/parts/arms_sign_yes_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_yip","url": "/parts/arms_sign_yip_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_boobs","url": "/parts/arms_sign_boobs_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_butts","url": "/parts/arms_sign_butts_lightbrown.png", "color": "lightbrown"}, + {"name": "sign_heart","url": "/parts/arms_heart_lightbrown.png", "color": "lightbrown"}, + {"name": "solder","url": "/parts/arms_solder_lightbrown.png", "color": "lightbrown"}, + {"name": "redlos","url": "/parts/arms_redlos_lightbrown.png", "color": "lightbrown"}, + {"name": "think","url": "/parts/arms_think_lightbrown.png", "color": "lightbrown"}, + {"name": "sweat","url": "/parts/arms_sweat_lightbrown.png", "color": "lightbrown"}, + {"name": "verified","url": "/parts/arms_verified_lightbrown.png", "color": "lightbrown"}, + {"name": "shocked","url": "/parts/arms_shocked_lightbrown.png", "color": "lightbrown"}, + {"name": "thumbsdown","url": "/parts/arms_thumbsdown_lightbrown.png", "color": "lightbrown"}, + {"name": "thumbsup","url": "/parts/arms_thumbsup_lightbrown.png", "color": "lightbrown"}, + {"name": "book","url": "/parts/arms_book_lightbrown.png", "color": "lightbrown"}, + {"name": "hold_burger","url": "/parts/arms_hold_burger_lightbrown.png", "color": "lightbrown"}, + {"name": "hungry","url": "/parts/arms_hungry_lightbrown.png", "color": "lightbrown"}, {"name": "boop","url": "/parts/arms_boop.png", "color": ""}, {"name": "sip","url": "/parts/arms_sip.png", "color": ""}, {"name": "blank", "url": "/parts/blank.png", "color": ""} diff --git a/parts/arms_3c_lightbrown.png b/parts/arms_3c_lightbrown.png new file mode 100644 index 0000000..494e50e Binary files /dev/null and b/parts/arms_3c_lightbrown.png differ diff --git a/parts/arms_aww_lightbrown.png b/parts/arms_aww_lightbrown.png new file mode 100644 index 0000000..88a503a Binary files /dev/null and b/parts/arms_aww_lightbrown.png differ diff --git a/parts/arms_book_lightbrown.png b/parts/arms_book_lightbrown.png new file mode 100644 index 0000000..b15bbe0 Binary files /dev/null and b/parts/arms_book_lightbrown.png differ diff --git a/parts/arms_facepalm_lightbrown.png b/parts/arms_facepalm_lightbrown.png new file mode 100644 index 0000000..d07c923 Binary files /dev/null and b/parts/arms_facepalm_lightbrown.png differ diff --git a/parts/arms_fingerguns_lightbrown.png b/parts/arms_fingerguns_lightbrown.png new file mode 100644 index 0000000..c8a7b24 Binary files /dev/null and b/parts/arms_fingerguns_lightbrown.png differ diff --git a/parts/arms_heart_lightbrown.png b/parts/arms_heart_lightbrown.png new file mode 100644 index 0000000..ab8b6ae Binary files /dev/null and b/parts/arms_heart_lightbrown.png differ diff --git a/parts/arms_hide_lightbrown.png b/parts/arms_hide_lightbrown.png new file mode 100644 index 0000000..f397dae Binary files /dev/null and b/parts/arms_hide_lightbrown.png differ diff --git a/parts/arms_hold_burger_lightbrown.png b/parts/arms_hold_burger_lightbrown.png new file mode 100644 index 0000000..b4d10aa Binary files /dev/null and b/parts/arms_hold_burger_lightbrown.png differ diff --git a/parts/arms_hungry_lightbrown.png b/parts/arms_hungry_lightbrown.png new file mode 100644 index 0000000..82a90c8 Binary files /dev/null and b/parts/arms_hungry_lightbrown.png differ diff --git a/parts/arms_knife_lightbrown.png b/parts/arms_knife_lightbrown.png new file mode 100644 index 0000000..5c82c42 Binary files /dev/null and b/parts/arms_knife_lightbrown.png differ diff --git a/parts/arms_mug_lightbrown.png b/parts/arms_mug_lightbrown.png new file mode 100644 index 0000000..cbd2638 Binary files /dev/null and b/parts/arms_mug_lightbrown.png differ diff --git a/parts/arms_phone_lightbrown.png b/parts/arms_phone_lightbrown.png new file mode 100644 index 0000000..de86b01 Binary files /dev/null and b/parts/arms_phone_lightbrown.png differ diff --git a/parts/arms_pleading_lightbrown.png b/parts/arms_pleading_lightbrown.png new file mode 100644 index 0000000..42ed1c8 Binary files /dev/null and b/parts/arms_pleading_lightbrown.png differ diff --git a/parts/arms_reach_lightbrown.png b/parts/arms_reach_lightbrown.png new file mode 100644 index 0000000..bbd2f29 Binary files /dev/null and b/parts/arms_reach_lightbrown.png differ diff --git a/parts/arms_redlos_lightbrown.png b/parts/arms_redlos_lightbrown.png new file mode 100644 index 0000000..3cb36ce Binary files /dev/null and b/parts/arms_redlos_lightbrown.png differ diff --git a/parts/arms_science_lightbrown.png b/parts/arms_science_lightbrown.png new file mode 100644 index 0000000..3bde775 Binary files /dev/null and b/parts/arms_science_lightbrown.png differ diff --git a/parts/arms_shocked_lightbrown.png b/parts/arms_shocked_lightbrown.png new file mode 100644 index 0000000..af3718b Binary files /dev/null and b/parts/arms_shocked_lightbrown.png differ diff --git a/parts/arms_sign_aaa_lightbrown.png b/parts/arms_sign_aaa_lightbrown.png new file mode 100644 index 0000000..723485c Binary files /dev/null and b/parts/arms_sign_aaa_lightbrown.png differ diff --git a/parts/arms_sign_boobs_lightbrown.png b/parts/arms_sign_boobs_lightbrown.png new file mode 100644 index 0000000..6614102 Binary files /dev/null and b/parts/arms_sign_boobs_lightbrown.png differ diff --git a/parts/arms_sign_butts_lightbrown.png b/parts/arms_sign_butts_lightbrown.png new file mode 100644 index 0000000..01dae0d Binary files /dev/null and b/parts/arms_sign_butts_lightbrown.png differ diff --git a/parts/arms_sign_no_lightbrown.png b/parts/arms_sign_no_lightbrown.png new file mode 100644 index 0000000..dd97cfb Binary files /dev/null and b/parts/arms_sign_no_lightbrown.png differ diff --git a/parts/arms_sign_nya_lightbrown.png b/parts/arms_sign_nya_lightbrown.png new file mode 100644 index 0000000..3bc7c9f Binary files /dev/null and b/parts/arms_sign_nya_lightbrown.png differ diff --git a/parts/arms_sign_thx_lightbrown.png b/parts/arms_sign_thx_lightbrown.png new file mode 100644 index 0000000..63f34aa Binary files /dev/null and b/parts/arms_sign_thx_lightbrown.png differ diff --git a/parts/arms_sign_yes_lightbrown.png b/parts/arms_sign_yes_lightbrown.png new file mode 100644 index 0000000..d01f738 Binary files /dev/null and b/parts/arms_sign_yes_lightbrown.png differ diff --git a/parts/arms_sign_yip_lightbrown.png b/parts/arms_sign_yip_lightbrown.png new file mode 100644 index 0000000..5c81ff4 Binary files /dev/null and b/parts/arms_sign_yip_lightbrown.png differ diff --git a/parts/arms_solder_lightbrown.png b/parts/arms_solder_lightbrown.png new file mode 100644 index 0000000..49a6264 Binary files /dev/null and b/parts/arms_solder_lightbrown.png differ diff --git a/parts/arms_sweat_lightbrown.png b/parts/arms_sweat_lightbrown.png new file mode 100644 index 0000000..732c875 Binary files /dev/null and b/parts/arms_sweat_lightbrown.png differ diff --git a/parts/arms_think_lightbrown.png b/parts/arms_think_lightbrown.png new file mode 100644 index 0000000..18e9526 Binary files /dev/null and b/parts/arms_think_lightbrown.png differ diff --git a/parts/arms_thumbsdown_lightbrown.png b/parts/arms_thumbsdown_lightbrown.png new file mode 100644 index 0000000..90b9afd Binary files /dev/null and b/parts/arms_thumbsdown_lightbrown.png differ diff --git a/parts/arms_thumbsup_lightbrown.png b/parts/arms_thumbsup_lightbrown.png new file mode 100644 index 0000000..6494f3a Binary files /dev/null and b/parts/arms_thumbsup_lightbrown.png differ diff --git a/parts/arms_verified_lightbrown.png b/parts/arms_verified_lightbrown.png new file mode 100644 index 0000000..47e447e Binary files /dev/null and b/parts/arms_verified_lightbrown.png differ diff --git a/parts/eyes_><.png b/parts/eyes_squint.png similarity index 100% rename from parts/eyes_><.png rename to parts/eyes_squint.png diff --git a/parts/neobread.png b/parts/neobread.png new file mode 100644 index 0000000..b7cfdc9 Binary files /dev/null and b/parts/neobread.png differ diff --git a/parts/neobread_ace.png b/parts/neobread_ace.png new file mode 100644 index 0000000..28be573 Binary files /dev/null and b/parts/neobread_ace.png differ diff --git a/parts/neobread_agender.png b/parts/neobread_agender.png new file mode 100644 index 0000000..6da9cf2 Binary files /dev/null and b/parts/neobread_agender.png differ diff --git a/parts/neobread_aro.png b/parts/neobread_aro.png new file mode 100644 index 0000000..348f0ea Binary files /dev/null and b/parts/neobread_aro.png differ diff --git a/parts/neobread_bi.png b/parts/neobread_bi.png new file mode 100644 index 0000000..642487e Binary files /dev/null and b/parts/neobread_bi.png differ diff --git a/parts/neobread_lesbian.png b/parts/neobread_lesbian.png new file mode 100644 index 0000000..85e75db Binary files /dev/null and b/parts/neobread_lesbian.png differ diff --git a/parts/neobread_nb.png b/parts/neobread_nb.png new file mode 100644 index 0000000..27b3c63 Binary files /dev/null and b/parts/neobread_nb.png differ diff --git a/parts/neobread_pan.png b/parts/neobread_pan.png new file mode 100644 index 0000000..491d53f Binary files /dev/null and b/parts/neobread_pan.png differ diff --git a/parts/neobread_rainbow.png b/parts/neobread_rainbow.png new file mode 100644 index 0000000..90505a9 Binary files /dev/null and b/parts/neobread_rainbow.png differ diff --git a/parts/neobread_trans.png b/parts/neobread_trans.png new file mode 100644 index 0000000..dcd92ea Binary files /dev/null and b/parts/neobread_trans.png differ