From 53501eeef1980179bd749b90f198ae34ca79c51e Mon Sep 17 00:00:00 2001
From: "Felix W. Dekker" <felix@fwdekker.com>
Date: Mon, 8 Jul 2019 18:25:09 +0200
Subject: [PATCH] Clean up code and implement Base64 and ASCII

---
 index.html | 124 +++++++++++++++++++++++++++++++++++------------------
 1 file changed, 82 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 155416f..ca056b9 100644
--- a/index.html
+++ b/index.html
@@ -61,52 +61,92 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/big-integer/1.6.44/BigInteger.min.js"
             integrity="sha256-es+ex6Oj344uak+VnCPyaHY2nzQkqhr7ByWVQgdjATA=" crossorigin="anonymous"></script>
     <script>
-        const alphabet = "0123456789abcdef";
-
-        const updateAllInputs = newValue => {
-            for (const numberInput of $a(".numberInput"))
-                numberInput.value = newValue.toString(numberInput.getAttribute("data-base"), alphabet);
-        };
-
-        const createInput = (base, name) => {
-            const label = document.createElement("label");
-            label.setAttribute("for", `${name}Input`);
-            label.innerHTML = name;
-
-            const textarea = document.createElement("textarea");
-            textarea.id = `${name}Input`;
-            textarea.className = "numberInput";
-            textarea.setAttribute("data-base", base);
-            textarea.oninput = () => {
-                if (textarea.value === undefined || textarea.value === null)
-                    return;
-
-                const inputAlphabet = alphabet.substring(0, base);
-                textarea.value = textarea.value.toLowerCase().replace(new RegExp("[^" + inputAlphabet + "]"), "");
-                updateAllInputs(bigInt(textarea.value, base));
-            };
-
-            return [label, textarea];
-        };
-
-        const addInput = (label, textarea) => {
-            const inputs = $("#inputs");
-            inputs.appendChild(label);
-            inputs.appendChild(textarea);
-        };
-
-        const generateInputs = () => {
-            const textareas = [["2", "Binary"], ["8", "Octal"], ["10", "Decimal"], ["16", "Hexadecimal"]];
-
-            for (const textarea of textareas) {
-                const elements = createInput(textarea[0], textarea[1]);
-                addInput(elements[0], elements[1]);
+        class NumeralSystem {
+            constructor(base, alphabet) {
+                this.base = base;
+                this.alphabet = alphabet;
             }
 
-            $("#" + textareas[0][1] + "Input").focus();
+
+            decimalToBase(decimalNumber) {
+                return decimalNumber.toString(this.base, this.alphabet);
+            }
+
+            baseToDecimal(baseString) {
+                return bigInt(baseString, this.base, this.alphabet);
+            }
+
+            filterBaseString(baseString) {
+                return baseString.toLowerCase().replace(new RegExp("[^" + this.alphabet + "]"), "");
+            }
+        }
+
+        class AsciiNumeralSystem extends NumeralSystem {
+            constructor() {
+                let alphabet = "";
+                for (let i = 0; i < 256; i++)
+                    alphabet += String.fromCharCode(i);
+
+                super(256, alphabet);
+            }
+        }
+
+        class NumeralSystemInput {
+            constructor(name, numeralSystem) {
+                this.name = name;
+                this.numeralSystem = numeralSystem;
+
+                this.label = document.createElement("label");
+                this.label.setAttribute("for", `${this.name}Input`);
+                this.label.innerHTML = this.name;
+
+                this.textarea = document.createElement("textarea");
+                this.textarea.id = `${this.name}Input`;
+                this.textarea.className = "numberInput";
+                this.textarea.oninput = () => {
+                    if (this.textarea.value === undefined || this.textarea.value === null)
+                        return;
+
+                    this.textarea.value = this.numeralSystem.filterBaseString(this.textarea.value);
+                    updateAllInputs(this.numeralSystem.baseToDecimal(this.textarea.value));
+                };
+            }
+
+
+            addToParent(parent) {
+                parent.appendChild(this.label);
+                parent.appendChild(this.textarea);
+            }
+
+            update(decimalNumber) {
+                this.textarea.value = this.numeralSystem.decimalToBase(decimalNumber);
+            }
+        }
+
+
+        const inputs = [
+            new NumeralSystemInput("Binary", new NumeralSystem(2, "01")),
+            new NumeralSystemInput("Octal", new NumeralSystem(8, "01234567")),
+            new NumeralSystemInput("Decimal", new NumeralSystem(10, "0123456789")),
+            new NumeralSystemInput("Hexadecimal", new NumeralSystem(16, "0123456789abcdef")),
+            new NumeralSystemInput("Base64", new NumeralSystem(64, "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/")),
+            new NumeralSystemInput("ASCII", new AsciiNumeralSystem()),
+        ];
+
+        const updateAllInputs = newValue => {
+            for (const input of inputs)
+                input.update(newValue);
         };
 
-        doAfterLoad(() => generateInputs());
+
+        doAfterLoad(() => {
+            const inputParent = $("#inputs");
+
+            for (const input of inputs)
+                input.addToParent(inputParent);
+
+            inputs[0].textarea.focus();
+        });
     </script>
 </body>
 </html>