Add affine

src/ui/assets/css/style.css

@@ -376,6 +376,14 @@ th:last-child, td:last-child { border-right: none; }
   overflow-x: hidden;
 }
 
+.cipher-shell {
+  display: none;
+}
+
+#caesar {
+  display: block;
+}
+
 ::-webkit-scrollbar {
   margin-right: 10px;
   width: 7px;

src/ui/assets/js/frequency_affine.js

@@ -0,0 +1,121 @@
+const frequency_ = require("./assets/js/tools/frequency.js");
+let totalShift_ = 0;
+
+function arrayRotate(arr, count) {
+    count -= arr.length * Math.floor(count / arr.length);
+    arr.push.apply(arr, arr.splice(0, count));
+    return arr;
+}
+
+$(document).ready(() => {
+    let f = frequency_(document.querySelector("#affine-body").value);
+
+    let ctx = document.getElementById('frequencies_small_affine').getContext('2d');
+    let chart_small = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ("ABCDEFGHIJKLMNOPQRSTUVWXYZ").split(""),
+            datasets: [
+                {
+                    label: 'Actual',
+                    data: f.map(x => x.actualFrequency.count),
+                    borderWidth: 1,
+                    backgroundColor: "rgba(255, 54, 54, 0.5)",
+                    borderColor: "rgba(255, 54, 54, 0.9)"
+                },
+                {
+                    label: 'Expected',
+                    data: f.map(x => x.expectedFrequency.count.toFixed(2)),
+                    borderWidth: 1,
+                    backgroundColor: "rgba(105, 177, 255, 0.5)",
+                    borderColor: "rgba(105, 177, 255, 0.9)"
+                },
+            ]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            },
+            legend: {
+                position: "top"
+            },
+        }
+    });
+
+    ctx = document.getElementById('frequencies_affine').getContext('2d');
+    let chart = new Chart(ctx, {
+        type: 'bar',
+        data: {
+            labels: ("ABCDEFGHIJKLMNOPQRSTUVWXYZ").split(""),
+            datasets: [
+                {
+                    label: 'Actual',
+                    data: f.map(x => x.actualFrequency.count),
+                    borderWidth: 1,
+                    backgroundColor: "rgba(214, 214, 214, 0.5)",
+                    borderColor: "rgba(214, 214, 214, 0.9)"
+                },
+                {
+                    label: 'Shifted',
+                    data: f.map(x => x.actualFrequency.count),
+                    borderWidth: 1,
+                    backgroundColor: "rgba(255, 54, 54, 0.5)",
+                    borderColor: "rgba(255, 54, 54, 0.9)"
+                },
+                {
+                    label: 'Expected',
+                    data: f.map(x => x.expectedFrequency.count.toFixed(2)),
+                    borderWidth: 1,
+                    backgroundColor: "rgba(105, 177, 255, 0.5)",
+                    borderColor: "rgba(105, 177, 255, 0.9)"
+                },
+            ]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        beginAtZero: true
+                    }
+                }]
+            },
+            legend: {
+                position: "right"
+            }
+        }
+    });
+
+    function update() {
+        let f = frequency_($("#affine-body").val());
+        chart_small.data.datasets[0].data = f.map(x => x.actualFrequency.count)
+        chart_small.data.datasets[1].data = f.map(x => x.expectedFrequency.count.toFixed(2))
+        chart_small.update();
+
+        chart.data.datasets[0].data = f.map(x => x.actualFrequency.count)
+        chart.data.datasets[1].data = f.map(x => x.actualFrequency.count)
+        chart.data.datasets[2].data = f.map(x => x.expectedFrequency.count.toFixed(2))
+        chart.update();
+    }
+
+    $("#affine-body").on('change keyup paste', update)
+    $("button").on('click', update)
+
+    $("#left").click(() => {
+        let f = frequency_($("#affine-body").val());
+        totalShift_ ++;
+        chart.data.datasets[1].data = arrayRotate(f.map(x => x.actualFrequency.count), totalShift_);
+        chart.update();
+        $("#count").text(String(totalShift_ % 26))
+    });
+    $("#right").click(() => {
+        let f = frequency_($("#affine-body").val());
+        totalShift_ --;
+        chart.data.datasets[1].data = arrayRotate(f.map(x => x.actualFrequency.count), totalShift_);
+        chart.update();
+        $("#count").text(String(totalShift_ % 26))
+    });
+})

src/ui/assets/js/frequency.js → src/ui/assets/js/frequency_caesar.js

@@ -10,7 +10,7 @@ function arrayRotate(arr, count) {
 $(document).ready(() => {
     let f = frequency(document.querySelector("#caesar-body").value);
 
-    let ctx = document.getElementById('frequencies_small').getContext('2d');
+    let ctx = document.getElementById('frequencies_small_caesar').getContext('2d');
     let chart_small = new Chart(ctx, {
         type: 'bar',
         data: {
@@ -46,7 +46,7 @@ $(document).ready(() => {
         }
     });
 
-    ctx = document.getElementById('frequencies').getContext('2d');
+    ctx = document.getElementById('frequencies_caesar').getContext('2d');
     let chart = new Chart(ctx, {
         type: 'bar',
         data: {

src/ui/assets/js/functions.js

@@ -1,4 +1,5 @@
 const caesar = require("./assets/js/ciphers/caesar.js");
+const affine = require("./assets/js/ciphers/affine.js");
 const vigenere = require("./assets/js/ciphers/vigenere.js");
 
 let error = (e) => {
@@ -61,6 +62,41 @@ let caesar_solve = () => {
     time_taken(start);
 }
 
+// Affine
+
+let affine_encrypt = () => {
+    let start = Date.now();
+    let key = document.querySelector("#affine-key").innerText.split(", ");
+    key = {a: key[0], b: key[1]};
+    let body = document.querySelector("#affine-body");
+    let res = affine.encrypt(key, body.value);
+    if (!res.success) return error(res.error)
+    body.value = res.ciphertext;
+    time_taken(start);
+}
+
+let affine_decrypt = () => {
+    let start = Date.now();
+    let key = document.querySelector("#affine-key").innerText.split(", ");
+    key = {a: key[0], b: key[1]};
+    let body = document.querySelector("#affine-body");
+    let res = affine.decrypt(key, body.value);
+    if (!res.success) return error(res.error)
+    body.value = res.plaintext
+    time_taken(start);
+}
+
+let affine_solve = () => {
+    let start = Date.now();
+    let body = document.querySelector("#affine-body");
+    let res = affine.solve(body.value);
+    if (!res.success) return error(res.error)
+    document.querySelector("#affine-key").innerText = `${res.key["a"]}, ${res.key["b"]}`;
+    flash()
+    body.value = res.plaintext
+    time_taken(start);
+}
+
 // Vigenere
 
 let vigenere_encrypt = () => {

src/ui/assets/js/script.js

@@ -25,7 +25,7 @@ $(document).ready(() => {
 })
 
 function change() {
-    let ciphers = ["Caesar", "Vigenere"]
+    let ciphers = ["Caesar", "Affine", "Vigenere"]
     let index = (ciphers.indexOf($("#cipher-selector").text()) + 1) % ciphers.length
     let cipher = ciphers[index]
     $("#cipher-selector").text(cipher)

src/ui/index.html

@@ -20,7 +20,8 @@
     <script>if (window.module) module = window.module;</script>
 
     <script src="assets/js/script.js"></script>
-    <script src="assets/js/frequency.js"></script>
+    <script src="assets/js/frequency_caesar.js"></script>
+    <script src="assets/js/frequency_affine.js"></script>
     <script src="assets/js/iocs.js"></script>
     <script src="assets/js/ngrams.js"></script>
     <script src="assets/js/functions.js"></script>
@@ -66,9 +67,9 @@ <h1>
             </button>
         </h1>
         <div id="caesar" class="cipher-shell">
-            <a class="box box-a selectable" href="#frequency_graph" rel="modal:open">
+            <a class="box box-a selectable" href="#frequency_graph_caesar" rel="modal:open">
                 <h3>Frequency Distribution</h3>
-                <canvas id="frequencies_small" height="100"></canvas>
+                <canvas id="frequencies_small_caesar" height="100"></canvas>
             </a>
             <div class="box box-b">
                 <h2 class="keyholder">Key</h2>
@@ -104,6 +105,45 @@ <h3>Bigrams</h3>
             </div>
         </div>
 
+        <div id="affine" class="cipher-shell">
+            <a class="box box-a selectable" href="#frequency_graph_affine" rel="modal:open">
+                <h3>Frequency Distribution</h3>
+                <canvas id="frequencies_small_affine" height="100"></canvas>
+            </a>
+            <div class="box box-b">
+                <h2 class="keyholder">Key</h2>
+                <div class="key" id="affine-key" contenteditable="true">3, 5</div>
+            </div>
+            <a class="box box-c">
+                <textarea class="input body" id="affine-body">Enter your text</textarea>
+            </a>
+            <div class="box box-d">
+                <div class="buttons">
+                    <button class="left" onclick="affine_decrypt()">
+                        <i class="fas fa-angle-left"></i>Decode
+                    </button>
+                    <button class="right" onclick="affine_encrypt()">
+                        <i class="fas fa-angle-right"></i>Encode
+                    </button>
+                    <button class="btn-large" onclick="affine_solve()">
+                        <i class="fas fa-magic"></i>Auto Solve
+                    </button>
+                </div>
+            </div>
+            <div class="box box-e">
+                <div class="box-e-left">
+                    <h3>Shannon Entropy</h3>
+                    <p class="shannon">0</p>
+                </div>
+                <a class="box-e-right" href="#n_grams" rel="modal:open">
+                    <div class="scroll-box">
+                        <h3>Bigrams</h3>
+                        <p class="bigrams"></p>
+                    </div>
+                </a>
+            </div>
+        </div>
+
         <div id="vigenere" class="cipher-shell hidden">
             <a class="box box-a selectable" href="#ioc_graph" rel="modal:open">
                 <h3>Index of Coincidence</h3>
@@ -144,8 +184,16 @@ <h3>Bigrams</h3>
         </div>
     </main>
     <footer></footer>
-    <div id="frequency_graph" class="modal">
-        <canvas id="frequencies" width="300"></canvas><br>
+    <div id="frequency_graph_caesar" class="modal">
+        <canvas id="frequencies_caesar" width="300"></canvas><br>
+        <div class="centered">
+            <button type="button" class="btn" id="left"> ⇦ </button>
+            <button type="button" class="btn disabled" id="count"> 0 </button>
+            <button type="button" class="btn" id="right"> ⇨ </button>
+        </div>
+    </div>
+    <div id="frequency_graph_affine" class="modal">
+        <canvas id="frequencies_affine" width="300"></canvas><br>
         <div class="centered">
             <button type="button" class="btn" id="left"> ⇦ </button>
             <button type="button" class="btn disabled" id="count"> 0 </button>