Convert a single UTF8 char to binary

README.md

@@ -98,5 +98,5 @@ $ curl -L http://kanjithing-backend.chocolatejade42.repl.co/kanji/車
 - [ ] Fix overlap interaction with especially long word descriptions (同 kanji)
 - [ ] Use a RapidAPI key in the application to fetch data (Replit downtime)
 - [ ] Unspaghettify everything
-- [ ] Instead of shifting each character over one, convert it to binary instead
+- [x] Instead of shifting each character over one, convert it to binary instead
     - Ticks off the "syllabus components" requirement

js/binary.js

@@ -0,0 +1,88 @@
+function convertCharToBinary(char) {
+    var code = char.codePointAt(); // Lookup the UTF8 code
+    var bits = convertDecToBinary(code);
+
+    // Normally, we would take out any left padded
+    // zeros, but they don't occur in the way I have
+    // written the convertNumToBinary algorithm
+    var numOfBytes = calcNumOfBytes(bits.length);
+
+    // If it's just one byte, we're going to handle it
+    // as a special case here because it's much easier
+    if (numOfBytes == 1) {
+        return bits.padStart(8, "0");
+    }
+
+    // Generate our 2D array, which contains x number of bytes.
+    // Each byte is an array with length 8
+    var conv = [];
+
+    // Prepad first byte with a one for every byte used for
+    // the character, and then a zero
+    conv.push([
+        ...Array(numOfBytes).fill(1),               // A one for every byte
+        0,                                          // And then a zero
+        ...Array(8 - (numOfBytes + 1)).fill(null)   // The rest are null
+    ]);
+
+    // For each remaining byte, prepad each byte with 10
+    for (let i = 0; i < numOfBytes - 1; i++) {
+        conv.push([1, 0, ...Array(6).fill(null)]);
+    }
+
+    // It's easier to now flatten this back into a 1D array
+    // to paste in the bits
+    conv = conv.flat();
+
+    // Find index of last null, paste in a bit, and then
+    // remove that bit from the to-be-pasted bits
+    while (bits.length > 0) {
+        var index = conv.lastIndexOf(null);
+        conv[index] = parseInt(bits.at(-1));
+
+        bits = bits.slice(0, -1);
+    }
+
+    // Replace any remaining spaces with zeros and return
+    while (conv.indexOf(null) !== -1) {
+        conv[conv.indexOf(null)] = 0;
+    }
+
+    return conv.join("");
+}
+
+function convertDecToBinary(num) {
+    var concat = [];
+
+    while (num > 0) {
+        concat.push(num % 2);
+        num = Math.floor(num / 2);
+    }
+
+    return concat.reverse().join("");
+}
+
+function convertBinaryToDec(bin) {
+    var output = 0;
+
+    bin.split("").forEach((item, index) => {
+        let power = bin.length - index - 1;
+        output += parseInt(item) * 2 ** power;
+    });
+
+    return output;
+}
+
+function calcNumOfBytes(numOfBits) {
+    var opts = [7, 11, 16, 21];
+    var indx = opts.find(x => numOfBits <= x);
+    var byte = opts.indexOf(indx) + 1;
+
+    // | Ben's formula | bits <= 7  | 1 byte  |
+    // |---------------|------------|---------|
+    // |   2 x 5 + 1   | bits <= 11 | 2 bytes |
+    // |   3 x 5 + 1   | bits <= 16 | 3 bytes |
+    // |   4 x 5 + 1   | bits <= 21 | 4 bytes |
+
+    return byte;
+}

js/utilities.js

@@ -1,5 +1,3 @@
-export const KANJI_REGEX = /^[\u4E00-\u9FAF]+$/;
-
 function getLastFrameOfVideo(url) {
     // Take in a video URL and get the last frame from that video.
     // Used to compare video to canvas drawing via Rembrandt.

settings.html

@@ -52,6 +52,6 @@ <h2>Other configuration</h2>
         </table>
     </div>
 
-    <script src="js/settings.js"></script>
+    <script src="js/settings.js" type="module"></script>
 </body>
 </html>