default-work · August 18, 2019 14:34 · Aug 18, 2019 · Aug 18, 2019 · Aug 18, 2019 · Aug 18, 2019
diff --git a/script.js b/script.js
@@ -142,14 +142,6 @@ alphabet_random.addEventListener ('click',event => {
   alpha1.value = alphabet.join('');
 });
 
-app.addEventListener ('click',event => {
-  event.preventDefault();
-  this.IV2.value =  this.IV1.value;
-  shift2.value = shift1.value;
-  alpha2.value = alpha1.value;
-  plaintext2.value = output1.value;
-});
-
 encrypt.addEventListener ('click',event => {
   event.preventDefault();
   this.random = parseInt(this.IV1.value);
@@ -163,6 +155,15 @@ encrypt.addEventListener ('click',event => {
 }
 );
 
+app.addEventListener ('click',event => {
+  event.preventDefault();
+  this.IV2.value =  this.IV1.value;
+  shift2.value = shift1.value;
+  alpha2.value = alpha1.value;
+  plaintext2.value = output1.value;
+  output2.value = '';
+});
+
 decrypt.addEventListener ('click',event => {
   event.preventDefault();
   this.random = parseInt(this.IV2.value);

diff --git a/style.css b/style.css
@@ -18,7 +18,7 @@ h1, h2, label, input, textarea {
 }
 textarea {
   width: calc(100% - 10px);
-  height: 150px;
+  height: 120px;
 }
 #alphabet1, #alphabet2, #IV1, #IV2 {
   height: auto;

diff --git a/index.html b/index.html
@@ -12,20 +12,21 @@ <h1>Caesar Cipher +1</h1>
 Carbon monoxide: 0.08 percent
 Also, minor amounts of: water, nitrogen oxide, neon, hydrogen-deuterium-oxygen, krypton and xenon.</textarea>
         <label>Shift:</label>
-        <input type='number' id='shift1' name='shift' value='88' min='1' max='256' step='1'>
-      <input type='button' id='randomize' value='randomize'>
+        <input type='number' id='shift1' name='shift' value='88' min='1' max='9999' step='1'>
+      <input type='button' id='randomize' value='IV'>
+      <input type='button' id='alphabet_random' value='alphabet'>
       <input type='button' id='encrypt' value='encrypt'>
       <input type='button' id='apply' value='=>'>        
-      <textarea id='IV1' style="height: 100%"></textarea>
+      <textarea id='IV1'></textarea>
       <textarea id='alphabet1'></textarea>
     </td>
     <td style="width:50%">
         <label>Cipher:</label>
         <textarea id='plaintext2'></textarea>
         <label>Shift:</label>
-        <input type='number' id='shift2' name='shift' value='88' min='1' max='256' step='1'>
+        <input type='number' id='shift2' name='shift' value='88' min='1' max='9999' step='1'>
         <input type='button' id='decrypt' value='decrypt'>
-        <textarea id='IV2' style="height: 100%"></textarea>
+        <textarea id='IV2'></textarea>
         <textarea id='alphabet2'></textarea>
     </td>
   </tr>

diff --git a/script.js b/script.js
@@ -1,4 +1,7 @@
-let alphabet = [
+// Artur Mustafin, (c) 2019
+// Park & Miller, (c) 1988,1993
+
+const default_alphabet = [
   'A','B','C','D','E','F',
   'G','H','I','J','K','L',
   'M','N','O','P','Q','R',
@@ -16,7 +19,9 @@ let alphabet = [
   '{','}','`','\/' //88
 ];
 
-// LCG  Park & Miller (c) 1988,1993 (original value proposed was 16807, in 1993 changed to 48271) 
+let alphabet = default_alphabet;
+
+// LCG Park & Miller (c) 1988,1993 (original value proposed was 16807, in 1993 changed to 48271) 
 // s=>()=>(2**31-1&(s=Math.imul(48271,s)))/2**31
 
 var PRNG = function(seed){
@@ -117,20 +122,26 @@ const IV1 = document.getElementById('IV1');
 const IV2 = document.getElementById('IV2');
 const alpha1 = document.getElementById('alphabet1');
 const alpha2 = document.getElementById('alphabet2');
-
 const app = document.getElementById('apply');
+const randomize = document.getElementById('randomize');
+const alphabet_random = document.getElementById('alphabet_random');
 
 this.random = randomInteger(0,maximus);
 IV1.value = this.random;
 
-const randomize = document.getElementById('randomize');
-
 randomize.addEventListener ('click',event => {
   event.preventDefault();
   this.random = randomInteger(0,maximus);
   this.IV1.value = this.random;
 });
 
+alphabet_random.addEventListener ('click',event => {
+  event.preventDefault();
+  alphabet = default_alphabet;
+  alphabet.shuffle(this.random);
+  alpha1.value = alphabet.join('');
+});
+
 app.addEventListener ('click',event => {
   event.preventDefault();
   this.IV2.value =  this.IV1.value;
@@ -142,8 +153,7 @@ app.addEventListener ('click',event => {
 encrypt.addEventListener ('click',event => {
   event.preventDefault();
   this.random = parseInt(this.IV1.value);
-  alphabet.shuffle(this.random);
-  alpha1.value = alphabet.join('');
+  alphabet = [... alpha1.value];
   this.enc_offset = this.random;
   const shift = Number(shift1.value);
   let array = [... plaintext1.value ];

diff --git a/style.css b/style.css
@@ -19,4 +19,7 @@ h1, h2, label, input, textarea {
 textarea {
   width: calc(100% - 10px);
   height: 150px;
+}
+#alphabet1, #alphabet2, #IV1, #IV2 {
+  height: auto;
 }
diff --git a/caesar-cipher-1.markdown b/caesar-cipher-1.markdown
@@ -0,0 +1,7 @@
+Caesar Cipher + 1
+-----------------
+
+
+A [Pen](https://codepen.io/root_admin/pen/PoYzazw) by [Artur Mustafin](https://codepen.io/root_admin) on [CodePen](https://codepen.io).
+
+[License](https://codepen.io/root_admin/pen/PoYzazw/license).
diff --git a/index.html b/index.html
@@ -0,0 +1,43 @@
+<h1>Caesar Cipher +1</h1>
+<table>
+  <tr>
+    <td style="width:50%;">
+        <label>Plaintext:</label>
+        <textarea id='plaintext1'>The atmosphere of Mars is about 100 times thinner than Earth's, and it is 95 percent carbon dioxide. Here's a breakdown of its composition, according to a NASA fact sheet:
+
+Carbon dioxide: 95.32 percent
+Nitrogen: 2.7 percent
+Argon: 1.6 percent
+Oxygen: 0.13 percent
+Carbon monoxide: 0.08 percent
+Also, minor amounts of: water, nitrogen oxide, neon, hydrogen-deuterium-oxygen, krypton and xenon.</textarea>
+        <label>Shift:</label>
+        <input type='number' id='shift1' name='shift' value='88' min='1' max='256' step='1'>
+      <input type='button' id='randomize' value='randomize'>
+      <input type='button' id='encrypt' value='encrypt'>
+      <input type='button' id='apply' value='=>'>        
+      <textarea id='IV1' style="height: 100%"></textarea>
+      <textarea id='alphabet1'></textarea>
+    </td>
+    <td style="width:50%">
+        <label>Cipher:</label>
+        <textarea id='plaintext2'></textarea>
+        <label>Shift:</label>
+        <input type='number' id='shift2' name='shift' value='88' min='1' max='256' step='1'>
+        <input type='button' id='decrypt' value='decrypt'>
+        <textarea id='IV2' style="height: 100%"></textarea>
+        <textarea id='alphabet2'></textarea>
+    </td>
+  </tr>
+</table>
+<h1>Output:</h1>
+<table>
+  <tr>
+    <td>
+      <textarea id='output1'></textarea>
+    </td>
+    <td>
+      <textarea id='output2'></textarea>
+    </td>
+  </tr>
+</table>
diff --git a/script.js b/script.js
@@ -0,0 +1,207 @@
+let alphabet = [
+  'A','B','C','D','E','F',
+  'G','H','I','J','K','L',
+  'M','N','O','P','Q','R',
+  'S','T','U','V','W','X',
+  'Y','Z',' ',':',',','*',
+  '~','!','@','#','%','^',
+  '-','=','0','1','2','3',
+  '4','5','6','7','8','9',
+  'a','b','c','d','e','f',
+  'g','h','i','j','k','l',
+  'm','n','o','p','q','r',
+  's','t','u','v','w','x',
+  'y','z','"','?','.','_',
+  '+','(',')','[',']','|',
+  '{','}','`','\/' //88
+];
+
+// LCG  Park & Miller (c) 1988,1993 (original value proposed was 16807, in 1993 changed to 48271) 
+// s=>()=>(2**31-1&(s=Math.imul(48271,s)))/2**31
+
+var PRNG = function(seed){
+    this._seed = seed % 2147483647;
+    if (this._seed <= 0){ this._seed += 2147483646;}
+};
+
+PRNG.prototype.next = function(a,b){
+    this._seed = this._seed * 48271 % 2147483647; // in response to a criticism by Marsaglia in 1993
+    if(arguments.length === 0){
+        return this._seed/2147483647;
+    }else if(arguments.length === 1){
+        return (this._seed/2147483647)*a;
+    }else{
+        return (this._seed/2147483647)*(b-a)+a;
+    }
+};
+
+var seed = 1238473661;
+var rnd = new PRNG(seed);
+var random = 0;
+var maximus = 2147483647 >> 2;
+var enc_offset = 0;
+var dec_offset = 0;
+
+Array.prototype.shuffle = function(seed) {
+  return shuffle(this, seed);
+}
+Array.prototype.unshuffle = function(seed) {
+  return unshuffle(this, seed);
+}
+Array.prototype.offset = function(seed) {
+  return offset(this, seed);
+}
+Array.prototype.unoffset = function(seed) {
+  return unoffset(this, seed);
+}
+
+function shuffle(array, seed) {
+  let rng = new PRNG(seed);
+  for (let i = array.length - 1; i > 0; i--) {
+    let j = Math.floor(rng.next(i));// Math.random() * (i + 1)); // random index from 0 to i
+    [array[i], array[j]] = [array[j], array[i]]; // swap elements
+  }
+  return array;
+}
+
+function unshuffle(array, seed) {
+  let indexes = [];
+  let rng = new PRNG(seed);
+  for (let i = array.length - 1; i > 0; i--) {
+    let j = Math.floor(rng.next(i));
+    indexes.push(j);
+  }
+  for (let i = 1; i < array.length; i++) {
+    let j = indexes.pop(); //Math.floor(rng.next(i));// Math.random() * (i + 1)); // random index from 0 to i
+    [array[i], array[j]] = [array[j], array[i]]; // swap elements
+  }
+  return array;
+}
+
+function offset(array, offset) {
+  let length = array.length;
+  for (let i = length - 1; i > 0; i--) {
+    let j = (2*maximus + i + offset)%length;
+    [array[i], array[j]] = [array[j], array[i]]; // swap elements
+  }
+  return array;
+}
+
+function unoffset(array, offset) {
+  let length = array.length;
+  let indexes = [];
+  for (let i = length - 1; i > 0; i--) {
+    let j = (2*maximus + i + offset)%length;
+    indexes.push(j);
+  }
+  for (let i = 1; i < length; i++) {
+    let j = indexes.pop();
+    [array[i], array[j]] = [array[j], array[i]]; // swap elements
+  }
+  return array;
+}
+
+function randomInteger(min, max) {
+  let rand = min + rnd.next() * (max + 1 - min);
+  return Math.floor(rand);
+}
+
+const cipher_size = alphabet.length;
+const encrypt = document.getElementById('encrypt');
+const decrypt = document.getElementById('decrypt');
+const plaintext1 = document.getElementById('plaintext1');
+const plaintext2 = document.getElementById('plaintext2');
+const output1 = document.getElementById('output1');
+const output2 = document.getElementById('output2');
+const IV1 = document.getElementById('IV1');
+const IV2 = document.getElementById('IV2');
+const alpha1 = document.getElementById('alphabet1');
+const alpha2 = document.getElementById('alphabet2');
+
+const app = document.getElementById('apply');
+
+this.random = randomInteger(0,maximus);
+IV1.value = this.random;
+
+const randomize = document.getElementById('randomize');
+
+randomize.addEventListener ('click',event => {
+  event.preventDefault();
+  this.random = randomInteger(0,maximus);
+  this.IV1.value = this.random;
+});
+
+app.addEventListener ('click',event => {
+  event.preventDefault();
+  this.IV2.value =  this.IV1.value;
+  shift2.value = shift1.value;
+  alpha2.value = alpha1.value;
+  plaintext2.value = output1.value;
+});
+
+encrypt.addEventListener ('click',event => {
+  event.preventDefault();
+  this.random = parseInt(this.IV1.value);
+  alphabet.shuffle(this.random);
+  alpha1.value = alphabet.join('');
+  this.enc_offset = this.random;
+  const shift = Number(shift1.value);
+  let array = [... plaintext1.value ];
+  for(let i=0; i< shift; i++)
+    array = array.shuffle(this.random).map(char => shift_encrypt(char, shift));
+  output1.value = array.offset(this.random).join('');
+}
+);
+
+decrypt.addEventListener ('click',event => {
+  event.preventDefault();
+  this.random = parseInt(this.IV2.value);
+  alphabet = [... alpha2.value];
+  this.dec_offset = parseInt(this.IV2.value);
+  const shift = Number(shift2.value);
+  let array = [... plaintext2.value ].unoffset(this.random);
+  for(let i=0; i< shift; i++)
+    array = array.map(char => shift_decrypt(char, shift)).unshuffle(this.random);
+  output2.value = array.join('');
+}
+);
+
+function shift_encrypt(char, shift) {
+  if (shift%2 == 1) {
+    char = _encrypt(_encrypt(char,alphabet,shift),alphabet,shift);
+  } else {
+    char = _encrypt(_encrypt(char,alphabet.reverse(),0),alphabet.reverse(),0);
+  }
+  return char;
+}
+
+function shift_decrypt(char, shift) {
+  if (shift%2 == 1) {
+    char = _decrypt(_decrypt(char,alphabet,shift),alphabet,shift);
+  } else {
+    char = _decrypt(_decrypt(char,alphabet.reverse(),0),alphabet.reverse(),0);
+  }
+  return char;
+}
+
+function _encrypt(char, alphabet, shift) {
+  if (alphabet.includes(char))
+  { 
+    const position = alphabet.indexOf(char);
+    const newPosition = (2*maximus - position +  this.enc_offset - shift)%cipher_size;
+    this.enc_offset = (++this.enc_offset)%cipher_size;
+    return alphabet[newPosition] 
+  }
+  else { return char }
+}
+
+function _decrypt(char, alphabet, shift) {
+  if (alphabet.includes(char))
+  { 
+    const position = alphabet.indexOf(char);    
+    const newPosition = (2*maximus - position - this.dec_offset - shift)%cipher_size;
+    this.dec_offset = (++this.dec_offset)%cipher_size;
+    return alphabet[newPosition] 
+  }
+  else { return char }
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,22 @@
+@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
+
+* {
+  font-family: 'Roboto Mono', sans-serif;  
+  font-size: 10px;
+}
+
+body {
+  font-family: sans-serif;
+}
+h1,h2 { color: olive;}
+label{display:block;}
+table {
+  width: 100%;
+}
+h1, h2, label, input, textarea {
+  margin: 5px 5px;
+}
+textarea {
+  width: calc(100% - 10px);
+  height: 150px;
+}