Add custom visualization element

diff --git a/index.html b/index.html
index 634d3402cb0f08c334d7da585d7f711b1c358c49..738b283ebab2074f37326c5aeae920788c2dc02e 100644 (file)
--- a/index.html
+++ b/index.html
@@ -16,11 +16,7 @@
 
   <main>
     <input value="🏴‍☠️"></input>
-
-    <div id="chars"></div>
-    <div id="points"></div>
-    <div id="points-binary"></div>
-    <div id="bytes"></div>
+    <div id="visualizations"></div>
   </main>
 
   <div></div>
@@ -34,6 +30,46 @@
     </a>
   </footer>
 
+  <template>
+    <style>
+      :host {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 4px;
+        background: hsl(222deg 80% 30% / 90%);
+        color: hsl(222deg 80% 95% / 90%);
+        border: 2px solid hsl(222deg 50% 50% / 90%);
+        border-radius: 4px;
+        padding: 4px;
+        animation: 800ms fadeIn both;
+      }
+
+      ::slotted(*) {
+        animation-name: slideIn, fadeIn;
+        animation-duration: 800ms, 1600ms;
+        animation-fill-mode: both;
+      }
+
+      ::slotted([slot="point"]) {
+        animation-delay: 100ms;
+      }
+      
+      ::slotted([slot="point-binary"]) {
+        animation-delay: 200ms;
+      }
+
+      ::slotted([slot="bytes"]) {
+        animation-delay: 300ms;
+      }
+    </style>
+
+    <slot name="char"></slot>
+    <slot name="point"></slot>
+    <slot name="point-binary"></slot>
+    <slot name="bytes"></slot>
+  </template>
+
   <script type="module" src="/script.js"></script>
 </body>
 

diff --git a/script.js b/script.js
index 732b3c19596843b6666116bf9960e280d9d32dd7..1fe7499a9f2e78efd8779125e93b28f07e35ec6f 100644 (file)
--- a/script.js
+++ b/script.js
@@ -10,33 +10,47 @@ const encoder = new TextEncoder();
 // https://github.com/microsoft/vscode/blob/main/src/vs/base/common/strings.ts#L1192
 const invisibleCharacters = [9, 10, 11, 12, 13, 32, 127, 160, 173, 847, 1564, 4447, 4448, 6068, 6069, 6155, 6156, 6157, 6158, 7355, 7356, 8192, 8193, 8194, 8195, 8196, 8197, 8198, 8199, 8200, 8201, 8202, 8203, 8204, 8205, 8206, 8207, 8234, 8235, 8236, 8237, 8238, 8239, 8287, 8288, 8289, 8290, 8291, 8292, 8293, 8294, 8295, 8296, 8297, 8298, 8299, 8300, 8301, 8302, 8303, 10240, 12288, 12644, 65024, 65025, 65026, 65027, 65028, 65029, 65030, 65031, 65032, 65033, 65034, 65035, 65036, 65037, 65038, 65039, 65279, 65440, 65520, 65521, 65522, 65523, 65524, 65525, 65526, 65527, 65528, 65532, 78844, 119155, 119156, 119157, 119158, 119159, 119160, 119161, 119162, 917504, 917505, 917506, 917507, 917508, 917509, 917510, 917511, 917512, 917513, 917514, 917515, 917516, 917517, 917518, 917519, 917520, 917521, 917522, 917523, 917524, 917525, 917526, 917527, 917528, 917529, 917530, 917531, 917532, 917533, 917534, 917535, 917536, 917537, 917538, 917539, 917540, 917541, 917542, 917543, 917544, 917545, 917546, 917547, 917548, 917549, 917550, 917551, 917552, 917553, 917554, 917555, 917556, 917557, 917558, 917559, 917560, 917561, 917562, 917563, 917564, 917565, 917566, 917567, 917568, 917569, 917570, 917571, 917572, 917573, 917574, 917575, 917576, 917577, 917578, 917579, 917580, 917581, 917582, 917583, 917584, 917585, 917586, 917587, 917588, 917589, 917590, 917591, 917592, 917593, 917594, 917595, 917596, 917597, 917598, 917599, 917600, 917601, 917602, 917603, 917604, 917605, 917606, 917607, 917608, 917609, 917610, 917611, 917612, 917613, 917614, 917615, 917616, 917617, 917618, 917619, 917620, 917621, 917622, 917623, 917624, 917625, 917626, 917627, 917628, 917629, 917630, 917631, 917760, 917761, 917762, 917763, 917764, 917765, 917766, 917767, 917768, 917769, 917770, 917771, 917772, 917773, 917774, 917775, 917776, 917777, 917778, 917779, 917780, 917781, 917782, 917783, 917784, 917785, 917786, 917787, 917788, 917789, 917790, 917791, 917792, 917793, 917794, 917795, 917796, 917797, 917798, 917799, 917800, 917801, 917802, 917803, 917804, 917805, 917806, 917807, 917808, 917809, 917810, 917811, 917812, 917813, 917814, 917815, 917816, 917817, 917818, 917819, 917820, 917821, 917822, 917823, 917824, 917825, 917826, 917827, 917828, 917829, 917830, 917831, 917832, 917833, 917834, 917835, 917836, 917837, 917838, 917839, 917840, 917841, 917842, 917843, 917844, 917845, 917846, 917847, 917848, 917849, 917850, 917851, 917852, 917853, 917854, 917855, 917856, 917857, 917858, 917859, 917860, 917861, 917862, 917863, 917864, 917865, 917866, 917867, 917868, 917869, 917870, 917871, 917872, 917873, 917874, 917875, 917876, 917877, 917878, 917879, 917880, 917881, 917882, 917883, 917884, 917885, 917886, 917887, 917888, 917889, 917890, 917891, 917892, 917893, 917894, 917895, 917896, 917897, 917898, 917899, 917900, 917901, 917902, 917903, 917904, 917905, 917906, 917907, 917908, 917909, 917910, 917911, 917912, 917913, 917914, 917915, 917916, 917917, 917918, 917919, 917920, 917921, 917922, 917923, 917924, 917925, 917926, 917927, 917928, 917929, 917930, 917931, 917932, 917933, 917934, 917935, 917936, 917937, 917938, 917939, 917940, 917941, 917942, 917943, 917944, 917945, 917946, 917947, 917948, 917949, 917950, 917951, 917952, 917953, 917954, 917955, 917956, 917957, 917958, 917959, 917960, 917961, 917962, 917963, 917964, 917965, 917966, 917967, 917968, 917969, 917970, 917971, 917972, 917973, 917974, 917975, 917976, 917977, 917978, 917979, 917980, 917981, 917982, 917983, 917984, 917985, 917986, 917987, 917988, 917989, 917990, 917991, 917992, 917993, 917994, 917995, 917996, 917997, 917998, 917999];
 
+customElements.define('al-point-visualization', class extends HTMLElement {
+  constructor() {
+    super();
+    const template = document.querySelector('template').content;
+    const shadowRoot = this.attachShadow({ mode: 'open' });
+    shadowRoot.appendChild(template.cloneNode(true));
+  }
+});
+
 function calculateOutput(input) {
-  const output = {
-    chars: [], // Visual representation of the code point
-    points: [], // Unicode code point, in hex
-    pointsBinary: [], // Unicode code point, in binary
-    bytes: [] // UTF-8 encoding of the code point, in binary
-  };
+  const output = [];
 
   for (const char of input) {
     const point = char.codePointAt(0);
     const pointHex = point.toString(16);
     const pointBinary = point.toString(2);
 
-    output.chars.push(invisibleCharacters.includes(point) ? '◌' : char); // Replace whitespace with ◌
-    output.points.push(`U+${pointHex.toUpperCase()}`);
-    output.pointsBinary.push(pointBinary.padStart(8 * Math.ceil(pointBinary.length / 8), '0'));
-    output.bytes.push(...[...encoder.encode(char)].map(c => c.toString(2).padStart(8, '0')));
+    output.push({
+      char: invisibleCharacters.includes(point) ? '◌' : char, // Visual representation of the code point, replacing whitespace with ◌
+      point: `U+${pointHex.toUpperCase()}`, // Unicode code point, in hex
+      pointBinary: pointBinary.padStart(8 * Math.ceil(pointBinary.length / 8), '0'), // Unicode code point, in binary
+      bytes: [...encoder.encode(char)].map(c => c.toString(2).padStart(8, '0')).join(' ') // UTF-8 encoding of the code point, in binary
+    });
   }
 
   return output;
 }
 
 function render(output) {
-  chars.textContent = output.chars.join(' | ');
-  points.textContent = output.points.join(' | ');
-  pointsBinary.textContent = output.pointsBinary.join(' | ');
-  bytes.textContent = output.bytes.join(' | ');
+  const vizContainer = document.getElementById('visualizations');
+  vizContainer.innerHTML = '';
+
+  for (const item of output) {
+    const viz = document.createElement('al-point-visualization');
+    viz.insertAdjacentHTML('beforeend', `<span slot="char">${item.char}</slot>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="point">${item.point}</slot>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="point-binary">${item.pointBinary}</slot>`);
+    viz.insertAdjacentHTML('beforeend', `<span slot="bytes">${item.bytes}</slot>`);
+
+    vizContainer.insertAdjacentElement('beforeend', viz);
+  }
 }
 
 function handleChange(value) {

diff --git a/style.css b/style.css
index 5f73b4e9114ab6ee447053d272f6468a6c679c7c..344f4b199a5e588419f5949b663108ca47ba13df 100644 (file)
--- a/style.css
+++ b/style.css
@@ -26,6 +26,7 @@ input {
   inline-size: 4rem;
   block-size: 4rem;
   margin-inline: auto;
+  margin-block-end: 8px;
   padding: 4px 8px 10px 7px;
   border-radius: 4px;
   border: none;
@@ -33,6 +34,15 @@ input {
   transition: filter 800ms;
 }
 
+div#visualizations {
+  inline-size: fit-content;
+  margin-inline: auto;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 input:hover,
 input:focus-within {
   filter: drop-shadow(0 0 8px hsl(222deg 50% 50%));
@@ -65,4 +75,24 @@ a>svg {
 :is(a:hover, a:focus-within)>svg {
   transform: translateY(-2px);
   transition: transform 200ms;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
 }
\ No newline at end of file