display additional data

src/app/globals.css

@@ -1,6 +1,6 @@
 :root {
   --main_1: #735cd6;
-  --main_2: #d13fbe;
+  --main_2: #db52c9;
   --light_1: #a598e0;
   --text_light: #727272;
 }
@@ -127,5 +127,4 @@ th,
 td {
   padding: 0.25rem 1rem;
   text-align: left;
-  vertical-align: top;
 }

src/app/page.module.css

@@ -44,16 +44,23 @@
   margin-top: 1rem;
   padding: 0 3rem;
   color: var(--text_light);
+  font-size: 0.8rem;
 }
 
 .table_container {
   overflow-x: scroll;
+  padding-bottom: 1rem;
 }
 
-#output_table tbody td:nth-child(1) {
+#output_table {
+  margin: 0 auto;
+}
+
+#output_table tbody th:nth-child(1) {
   text-align: center;
 }
 
-#output_table thead th:nth-child(2) {
+#output_table td,
-  min-width: 10em;
+#output_table th {
+  white-space: nowrap;
 }

src/components/inspector.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import { useContext, useState } from 'react';
+import { useState } from 'react';
 import styles from '@/app/page.module.css'
 import { TextField } from './textfield';
-import { UtfdumpContext, UtfdumpContextProvider } from '@/context/utfdump';
+import { UtfdumpContextProvider } from '@/context/utfdump';
+import { OutputTable } from './output_table';
 
 type InspectorProps = {
   sourceUrl: string,
@@ -29,59 +30,8 @@ export function Inspector(props: InspectorProps) {
           </div>
         </section>
 
-        <Out currentString={currentString} />
+        <OutputTable currentString={currentString} />
       </section>
     </UtfdumpContextProvider>
   );
 }
-
-function Out(props: { currentString: string }) {
-  const ctx = useContext(UtfdumpContext);
-  
-  let rows = [];
-
-  if (ctx.utfdump) {
-    for (const codepointStr of props.currentString) {
-      const codepoint = codepointStr.codePointAt(0);
-      
-      if (codepoint !== undefined) {
-        const charData = ctx.utfdump.codepoint_char_data(codepoint);
-
-        rows.push((
-          <tr>
-            <td>{codepointStr.replace(/\s+/, ' ')}</td>
-            <td>{charData?.name()}</td>
-            <td>U+{codepoint.toString(16).padStart(4, '0')}</td>
-          </tr>
-        ));
-
-        charData?.free();
-      }
-    }
-  }
-
-  return (
-    <section className={styles.table_container}>
-      <div className={styles.overflow_scroll}>
-        <table id={styles.output_table}>
-          <thead>
-            <tr>
-              <th>Char</th>
-              <th>Name</th>
-              <th>Codepoint</th>
-              <th>UTF-8</th>
-              <th>UTF-16</th>
-              <th>Category</th>
-              <th>Combining</th>
-              <th>Bidirectional</th>
-              <th>Numeric value</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows}
-          </tbody>
-        </table>
-      </div>
-    </section>
-  );
-}

src/components/output_table.tsx

@@ -0,0 +1,100 @@
+import { useContext } from 'react';
+import styles from '@/app/page.module.css'
+import { UtfdumpContext } from '@/context/utfdump';
+import { EncodedCodepoint } from 'utfdump_wasm';
+
+export function OutputTable(props: { currentString: string }) {
+  const ctx = useContext(UtfdumpContext);
+  
+  let rows = [];
+
+  if (ctx.utfdump) {
+    for (const codepointStr of props.currentString) {
+      const codepoint = codepointStr.codePointAt(0);
+      
+      if (codepoint !== undefined) {
+        const charData = ctx.utfdump.codepoint_char_data(codepoint);
+
+        if (charData !== undefined) {
+          const encodedUtf8 = charData.encoded_utf8();
+          let encodedUtf8Str;
+          if (encodedUtf8 !== undefined) {
+            encodedUtf8Str = codepointToString(encodedUtf8);
+            encodedUtf8.free();
+          }
+          
+          const encodedUtf16 = charData.encoded_utf16_le();
+          let encodedUtf16Str;
+          if (encodedUtf16 !== undefined) {
+            encodedUtf16Str = codepointToString(encodedUtf16);
+            encodedUtf16.free();
+          }
+
+          const combiningClassNum = charData.combining_class();
+          const combiningClassName = ctx.utfdump.combining_class_name(combiningClassNum);
+          
+          let charDisplayStr = codepointStr.replace(/\s+/, ' ');
+          if (combiningClassNum !== 0) {
+            charDisplayStr = '\u25cc' + charDisplayStr;
+          }
+
+          rows.push((
+            <tr>
+              <th>{charDisplayStr}</th>
+              <td>{charData.name()}</td>
+              <td>U+{codepoint.toString(16).padStart(4, '0')}</td>
+              <td>{encodedUtf8Str}</td>
+              <td>{encodedUtf16Str}</td>
+              <td>{charData.category_full()}</td>
+              <td>{combiningClassName || combiningClassNum}</td>
+              <td>{charData.bidi_full()}</td>
+              <td>{charData.numeric_value() || 'Not numeric'}</td>
+            </tr>
+          ));
+  
+          charData.free();
+        }
+        
+        else {
+          // TODO: push "invalid character" row in this case
+        }
+      }
+    }
+  }
+
+  return (
+    <section className={styles.table_container}>
+      <div className={styles.overflow_scroll}>
+        <table id={styles.output_table}>
+          <thead>
+            <tr>
+              <th></th>
+              <th>Name</th>
+              <th>Code</th>
+              <th>UTF-8</th>
+              <th>UTF-16LE</th>
+              <th>Category</th>
+              <th>Combining</th>
+              <th>Bidirectional</th>
+              <th>Numeric value</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  );
+}
+
+function codepointToString(codepoint: EncodedCodepoint): string {
+  const bytes = [
+    codepoint.b0,
+    codepoint.b1,
+    codepoint.b2,
+    codepoint.b3
+  ].slice(0, codepoint.len);
+
+  return bytes.map((b) => b.toString(16).padStart(2, '0')).join(' ');
+}