Revert: Update index.html

index.html

@@ -14,51 +14,62 @@
 <input id="decodeButton" type="button" name="button" value="decode from text"/>
 <select id="encoder">
     <optgroup label="Standard">
-        <option>ZWUS-3</option>
-        <option>ZWUS-6</option>
-        <option>ZWUS-8</option>
+        <option value="ZWUS-3">ZWUS-3</option>
+        <option value="ZWUS-6">ZWUS-6</option>
+        <option value="ZWUS-8">ZWUS-8</option>
     </optgroup>
-    <!--    <optgroup label="Depreciated"></optgroup>-->
 </select>
 <select id="cipher">
     <optgroup label="Encryption">
-        <option>PLAIN</option>
-        <option>SPECK32_64ECB</option>
+        <option value="PLAIN">PLAIN</option>
+        <option value="SPECK32_64ECB">SPECK32_64ECB</option>
     </optgroup>
 </select>
 <p id="notice">
     notice: some platforms restrict Ø width characters.
 </p>
 <script type="module">
-    import zwus from 'https://cdn.jsdelivr.net/npm/zwus';
+    import zwus from 'https://cdn.jsdelivr.net/npm/zwus@2.2.0/index.js';
 
     const textarea = document.getElementById('textarea');
     const encoderDropdown = document.getElementById('encoder');
     const cipherDropdown = document.getElementById('cipher');
+
     const DESCRY = {
-        NO: { PLAIN: (ptStr, base) => zwus.encodeString(ptStr, base) },
-        YES: { PLAIN: (ptStr, base) => zwus.decodeToString(ptStr, base) }
+        NO: { 
+            PLAIN: (ptStr, base) => zwus.encodeString(ptStr, parseInt(base)) 
+        },
+        YES: { 
+            PLAIN: (ptStr, base) => zwus.decodeToString(ptStr, parseInt(base)) 
+        }
     };
 
-    ['encodeButton', 'decodeButton'].forEach(id =>
-        document.getElementById(id).addEventListener('click', event => {
-            if (!textarea.value) {
-                textarea.value = 'The text box is empty.';
-                return;
-            }
-            const op = event.target.id === 'encodeButton' ? 'NO' : 'YES';
-            textarea.value = DESCRY[op][cipherDropdown.value](
-                textarea.value,
-                encoderDropdown.value.split('-')[1]
-            );
+    function ACT(event) {
+        if (!textarea.value) {
+            textarea.value = 'The text box is empty.';
+            return;
+        }
+
+        const op = event.target.id === 'encodeButton' ? 'NO' : 'YES';
+        const base = encoderDropdown.value.split('-')[1];
+        const cipher = cipherDropdown.value;
+
+        // Ensure the cipher method exists in our mapping
+        if (DESCRY[op][cipher]) {
+            textarea.value = DESCRY[op][cipher](textarea.value, base);
 
             if (op === 'NO') {
                 textarea.select();
                 document.execCommand('copy');
-                textarea.value = `Copied to clipboard. [${textarea.value}]`;
+                textarea.value = 'Copied to your clipboard.\n A copy has been placed between these brackets [' + textarea.value + ']';
             }
-        })
-    );
+        } else {
+            textarea.value = "Method " + cipher + " not implemented yet, Master.";
+        }
+    }
+
+    document.getElementById('encodeButton').addEventListener('click', ACT);
+    document.getElementById('decodeButton').addEventListener('click', ACT);
 </script>
 </body>
 <style>
@@ -88,8 +99,6 @@
         display: block;
     }
 
-    /* ---------------------------------------------------- */
-
     body {
         font-family: 'Open Sans', sans-serif;
         background-color: #002b4d;
@@ -165,12 +174,5 @@
         color: rgb(229, 244, 255, 0.6);
         border-top: 1px solid rgb(0, 126, 199, .5);
     }
-
-    #versions {
-        color: rgb(0, 126, 199);
-        text-decoration: none;
-    }
-
 </style>
-
 </html>