fix(editor): define 'name' variable, allow changing emoji character

unnamed · Nov 22, 2021 · d3d1b32 · d3d1b32
1 parent 91acd33
commit d3d1b32
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/docs/js/index.js b/docs/js/index.js
@@ -21,6 +21,7 @@
      * @type {Map<string, Emoji>}
      */
     const emojis = new Map();
+    const emojisByChar = new Map();
 
     for (const anchor of document.getElementsByClassName("anchor")) {
         const id = anchor.dataset["for"];
@@ -32,6 +33,14 @@
         }
     }
 
+    function generateCharacter() {
+        let character = (1 << 15) - emojisByChar.size;
+        while (emojisByChar.has(character)) {
+            character--;
+        }
+        return String.fromCodePoint(character);
+    }
+
     const EditorUI = (function () {
 
         const form = $(".file-input");
@@ -70,7 +79,7 @@
 
                     const emoji = {
                         name: file.name.slice(0, -4), // remove .png extension
-                        character: "",
+                        character: generateCharacter(),
                         img: target.result,
                         ascent: 8,
                         height: 9,
@@ -83,6 +92,7 @@
                     }
 
                     emojis.set(emoji.name, emoji);
+                    emojisByChar.set(emoji.character, emoji);
                     EditorUI.add(emoji);
                 });
                 reader.readAsDataURL(file);
@@ -95,6 +105,7 @@
          * @param {Emoji} emoji
          */
         function add(emoji) {
+            const name = emoji.name;
             function input(property, parse, validate, current) {
                 const labelElement = document.createElement("label");
                 labelElement.innerText = property;
@@ -131,6 +142,7 @@
             propertiesElement.classList.add("properties");
 
             const nameElement = input("name", v => v, regex(/^[A-Za-z_]{1,14}$/g), emoji.name);
+            const characterElement = input("character", v => v, regex(/^.$/g), emoji.character);
             const ascentElement = input("ascent", parseInt, regex(/^-?\d*$/g), emoji.ascent);
             const heightElement = input("height", parseInt, regex(/^-?\d*$/g), emoji.height);
             const permissionElement = input("permission", v => v, regex(/^[a-z0-9_.]+$/g), emoji.permission);
@@ -144,7 +156,7 @@
                 emojis.delete(name);
             });
 
-            propertiesElement.append.apply(propertiesElement, [nameElement, ascentElement, heightElement, permissionElement].map(e => e.label));
+            propertiesElement.append.apply(propertiesElement, [nameElement, ascentElement, heightElement, permissionElement, characterElement].map(e => e.label));
             propertiesElement.appendChild(deleteElement);
             div.append(imgElement, propertiesElement);
 
@@ -168,8 +180,12 @@
                         while (emojis.has(emoji.name)) {
                             emoji.name = emoji.name + Math.floor(Math.random() * 1E5).toString(36);
                         }
+                        if (emojisByChar.has(emoji.character)) {
+                            emoji.character = generateCharacter();
+                        }
 
                         emojis.set(emoji.name, emoji);
+                        emojisByChar.set(emoji.character, emoji);
                         EditorUI.add(emoji);
                     }));
                 };

diff --git a/docs/js/io.js b/docs/js/io.js
@@ -9,7 +9,6 @@ const EmojiIO = (function () {
     async function write(emojis) {
 
         const data = [];
-        let char = 1 << 15;
 
         // format version
         data.push(1);
@@ -26,11 +25,13 @@ const EmojiIO = (function () {
                 data.push(c >> 8, c & 0xFF);
             }
 
+            const character = emoji.character.codePointAt(0);
+
             // height, ascent and character
             data.push(
                     emoji.height >> 8, emoji.height & 0xFF,
                     emoji.ascent >> 8, emoji.ascent & 0xFF,
-                    char >> 8, char & 0xFF
+                    character >> 8, character & 0xFF
             );
 
             // permission write
@@ -48,8 +49,6 @@ const EmojiIO = (function () {
             for (let i = 0; i < len; i++) {
                 data.push(bin.charCodeAt(i));
             }
-
-            char--;
         }
 
         return new Blob(
@@ -95,7 +94,7 @@ const EmojiIO = (function () {
             // height, ascent and character
             const height = readShort();
             const ascent = readShort();
-            const character = readShort();
+            const character = String.fromCodePoint(readShort());
 
             // read permission
             const permissionLength = view[cursor++];