Update comparison.html

SquareScreamYT · Dec 11, 2024 · 470b768 · 470b768
1 parent 22b8e1d
commit 470b768
Showing 1 changed file with 30 additions and 6 deletions.
diff --git a/comparison.html b/comparison.html
@@ -5,7 +5,6 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Emoji Comparison</title>
   <style>
-    /* add openmoji */
     @import url('https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap');
     @import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
 
@@ -56,14 +55,15 @@
 </head>
 <body>
 
-<h2>Emoji Comparison: Twemoji, Toss Face, Noto, Browser Default</h2>
+<h2>Emoji Comparison: Twemoji, Toss Face, Noto, OpenMoji, Browser Default</h2>
 
 <table id="emojiTable">
   <thead>
     <tr>
       <th>Twemoji</th>
       <th>Toss Face</th>
       <th>Noto Color Emoji</th>
+      <th>OpenMoji</th>
       <th>Browser Default</th>
     </tr>
   </thead>
@@ -74,12 +74,13 @@ <h2>Emoji Comparison: Twemoji, Toss Face, Noto, Browser Default</h2>
 <p>Note: Toss Face has more emojis: https://tossface.cho.sh/<br>
 Toss Face: https://github.com/toss/tossface<br>
 Noto Color Emoji: https://fonts.google.com/noto/specimen/Noto+Color+Emoji<br>
-Twemoji: https://github.com/jdecked/twemoji
-</p>
+Twemoji: https://github.com/jdecked/twemoji<br>
+OpenMoji: https://github.com/hfg-gmuend/openmoji</p>
 
 <script>
   const TWEMOJI_API_URL = "https://api.github.com/repos/jdecked/twemoji/contents/assets/svg";
   const TOSSFACE_API_URL = "https://api.github.com/repos/toss/tossface/contents/dist/svg";
+  const OPENMOJI_API_URL = "https://api.github.com/repos/hfg-gmuend/openmoji/contents/color/72x72"; // OpenMoji PNGs
 
   async function fetchGithubFiles(url) {
     const response = await fetch(url, { headers: { "Accept": "application/vnd.github.v3+json" } });
@@ -106,21 +107,33 @@ <h2>Emoji Comparison: Twemoji, Toss Face, Noto, Browser Default</h2>
       .join("");
   }
 
+  function twemojiToOpenMoji(twemojiFilename) {
+    return twemojiFilename
+      .replace(".svg", "")
+      .split("-")
+      .map(hex => hex.toUpperCase())
+      .join("-");
+  }
+
   async function populateEmojiTable() {
     try {
-      const [twemojiFiles, tossFaceFiles] = await Promise.all([
+      const [twemojiFiles, tossFaceFiles, openMojiFiles] = await Promise.all([
         fetchGithubFiles(TWEMOJI_API_URL),
-        fetchGithubFiles(TOSSFACE_API_URL)
+        fetchGithubFiles(TOSSFACE_API_URL),
+        fetchGithubFiles(OPENMOJI_API_URL)
       ]);
 
       const twemojiFilenames = twemojiFiles.map(file => file.name);
       const tossFaceFilenames = tossFaceFiles.map(file => file.name);
+      const openMojiFilenames = openMojiFiles.map(file => file.name);
 
       const tbody = document.querySelector("#emojiTable tbody");
 
       twemojiFilenames.forEach(twemojiFile => {
         const tossFaceEquivalent = twemojiToTossFace(twemojiFile);
         const isMatch = tossFaceFilenames.includes(tossFaceEquivalent);
+        const openMojiEquivalent = twemojiToOpenMoji(twemojiFile) + ".png"; // OpenMoji PNG filename
+        const isOpenMojiMatch = openMojiFilenames.includes(openMojiEquivalent);
 
         const row = document.createElement("tr");
 
@@ -148,6 +161,17 @@ <h2>Emoji Comparison: Twemoji, Toss Face, Noto, Browser Default</h2>
         notoCell.textContent = notoUnicode;
         row.appendChild(notoCell);
 
+        const openMojiCell = document.createElement("td");
+        if (isOpenMojiMatch) {
+          const openMojiImg = document.createElement("img");
+          openMojiImg.src = `https://raw.githubusercontent.com/hfg-gmuend/openmoji/master/color/72x72/${openMojiEquivalent}`;
+          openMojiImg.alt = `OpenMoji ${openMojiEquivalent}`;
+          openMojiCell.appendChild(openMojiImg);
+        } else {
+          openMojiCell.textContent = "No Match";
+        }
+        row.appendChild(openMojiCell);
+
         const defaultCell = document.createElement("td");
         defaultCell.textContent = notoUnicode;
         row.appendChild(defaultCell);