RepComm/cypher.html

## cypher.html
<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      height: 100svh;
      padding: 0;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
    }

    .monospace {
      font-family: 'Courier New', Courier, monospace;
    }

    .col {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    textarea {
      width: 100%;
      flex: 1;
    }

    .row {
      display: flex;
      flex: 1;
      flex-direction: row;
    }
  </style>
</head>

<body>
  <div class="col">
    <div class="col">
      <label for="ta_msg">Encrypt</label>
      <textarea id="ta_msg" class="monospace"></textarea>

      <label for="ta_dec">Decrypt</label>
      <textarea id="ta_dec" class="monospace"></textarea>

      <label for="ta_pwd">Password</label>
      <textarea id="ta_pwd" class="monospace">password</textarea>
    </div>
    <div class="row">

      <div class="col">
        <label for="ta_tab_key">Vigenere Alphabet Key</label>
        <textarea id="ta_tab_key" class="monospace">kryptos</textarea>

        <label for="ta_tab">Cipher Table</label>
        <textarea id="ta_tab" class="monospace" style="min-height:30em;" readonly></textarea>
      </div>

      <div class="col">

        <label for="ta_out">Encrypt Output</label>
        <textarea id="ta_out_enc" class="monospace"></textarea>

        <label for="ta_out_dec">Decrypt Output</label>
        <textarea id="ta_out_dec" class="monospace"></textarea>
      </div>
    </div>
    <script>
      /**@type {HTMLTextAreaElement}*/
      const ta_msg = document.getElementById("ta_msg")

      /**@type {HTMLTextAreaElement}*/
      const ta_dec = document.getElementById("ta_dec")

      /**@type {HTMLTextAreaElement}*/
      const ta_pwd = document.getElementById("ta_pwd")

      /**@type {HTMLTextAreaElement}*/
      const ta_out_enc = document.getElementById("ta_out_enc")

      /**@type {HTMLTextAreaElement}*/
      const ta_out_dec = document.getElementById("ta_out_dec")

      /**@type {HTMLTextAreaElement}*/
      const ta_tab = document.getElementById("ta_tab")

      /**@type {HTMLTextAreaElement}*/
      const ta_tab_key = document.getElementById("ta_tab_key")

      let originalAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
      let alphabet = originalAlphabet

      /**@type {Array<string>}*/
      let table = new Array(alphabet.length)

      function recalc_tab() {
        alphabet = originalAlphabet
        let alphabetArr = alphabet.split("")

        const key = ta_tab_key.value.toUpperCase()

        if (key !== "") {
          for (const ch of key) {
            const idx = alphabetArr.indexOf(ch)
            if (idx > -1) {
              alphabetArr.splice(idx, 1)
            }
          }

          const keyArr = key.split("")
          for (let i = 0; i < keyArr.length; i++) {
            const ch = keyArr[i]
            if (keyArr.indexOf(ch, i + 1) > -1) {
              keyArr.splice(i, 1)
            }
          }

          alphabet = keyArr.join("").concat(alphabetArr.join(""))

        }
        // let output = alphabet

        table[0] = alphabet

        const row = new Array(alphabet.length)
        for (let i = 1; i < alphabet.length; i++) {
          for (let j = 0; j < alphabet.length; j++) {
            row[j] = alphabet[(j + i) % alphabet.length]
          }

          table[i] = row.join("")
          // output += "\n" + row.join("")
        }

        ta_tab.textContent = table.join("\n")
      }

      ta_tab_key.onchange = () => {
        recalc_tab()
      }

      recalc_tab()

      function encrypt_output() {
        const plain = ta_msg.value.toUpperCase()
        const password = ta_pwd.value.toUpperCase()

        let output = ""

        for (let i = 0; i < plain.length; i++) {
          const row_ch = plain[i]
          if (alphabet.indexOf(row_ch) === -1) {
            output += "?"
            continue
            //continue //skip invalid char
          }
          const col_ch = password[i % password.length]

          const row = alphabet.indexOf(row_ch)
          const col = alphabet.indexOf(col_ch)

          const sel = table[row][col]
          // console.log(row_ch, col_ch, sel)
          output += sel
        }
        ta_out_enc.textContent = output
      }

      function decrypt_output() {
        const cipher = ta_dec.value.toUpperCase()
        const password = ta_pwd.value.toUpperCase()

        let output = ""

        for (let i = 0; i < cipher.length; i++) {

          const row_ch = password[i % password.length]
          const row = alphabet.indexOf(row_ch)

          const sel_ch = cipher[i]

          const row_content = table[row]
          const col = row_content.indexOf(sel_ch)
          if (col === -1) {
            continue //skip invalid char
          }

          const original = alphabet[col]
          // console.log(row_ch, col_ch, sel)
          output += original
        }
        ta_out_dec.textContent = output
      }

      ta_msg.onchange = () => {
        encrypt_output()
      }
      ta_pwd.onchange = () => {
        encrypt_output()
        decrypt_output()
      }

      ta_dec.onchange = ()=>{
        decrypt_output()
      }


    </script>
  </div>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<style>
	body {
	margin: 0;
	height: 100svh;
	padding: 0;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	}

	.monospace {
	font-family: 'Courier New', Courier, monospace;
	}

	.col {
	display: flex;
	flex-direction: column;
	flex: 1;
	}

	textarea {
	width: 100%;
	flex: 1;
	}

	.row {
	display: flex;
	flex: 1;
	flex-direction: row;
	}
	</style>
	</head>

	<body>
	<div class="col">
	<div class="col">
	<label for="ta_msg">Encrypt</label>
	<textarea id="ta_msg" class="monospace"></textarea>

	<label for="ta_dec">Decrypt</label>
	<textarea id="ta_dec" class="monospace"></textarea>

	<label for="ta_pwd">Password</label>
	<textarea id="ta_pwd" class="monospace">password</textarea>
	</div>
	<div class="row">

	<div class="col">
	<label for="ta_tab_key">Vigenere Alphabet Key</label>
	<textarea id="ta_tab_key" class="monospace">kryptos</textarea>

	<label for="ta_tab">Cipher Table</label>
	<textarea id="ta_tab" class="monospace" style="min-height:30em;" readonly></textarea>
	</div>

	<div class="col">

	<label for="ta_out">Encrypt Output</label>
	<textarea id="ta_out_enc" class="monospace"></textarea>

	<label for="ta_out_dec">Decrypt Output</label>
	<textarea id="ta_out_dec" class="monospace"></textarea>
	</div>
	</div>
	<script>
	/*@type {HTMLTextAreaElement}/
	const ta_msg = document.getElementById("ta_msg")

	/*@type {HTMLTextAreaElement}/
	const ta_dec = document.getElementById("ta_dec")

	/*@type {HTMLTextAreaElement}/
	const ta_pwd = document.getElementById("ta_pwd")

	/*@type {HTMLTextAreaElement}/
	const ta_out_enc = document.getElementById("ta_out_enc")

	/*@type {HTMLTextAreaElement}/
	const ta_out_dec = document.getElementById("ta_out_dec")

	/*@type {HTMLTextAreaElement}/
	const ta_tab = document.getElementById("ta_tab")

	/*@type {HTMLTextAreaElement}/
	const ta_tab_key = document.getElementById("ta_tab_key")

	let originalAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"
	let alphabet = originalAlphabet

	/*@type {Array<string>}/
	let table = new Array(alphabet.length)

	function recalc_tab() {
	alphabet = originalAlphabet
	let alphabetArr = alphabet.split("")

	const key = ta_tab_key.value.toUpperCase()

	if (key !== "") {
	for (const ch of key) {
	const idx = alphabetArr.indexOf(ch)
	if (idx > -1) {
	alphabetArr.splice(idx, 1)
	}
	}

	const keyArr = key.split("")
	for (let i = 0; i < keyArr.length; i++) {
	const ch = keyArr[i]
	if (keyArr.indexOf(ch, i + 1) > -1) {
	keyArr.splice(i, 1)
	}
	}

	alphabet = keyArr.join("").concat(alphabetArr.join(""))

	}
	// let output = alphabet

	table[0] = alphabet

	const row = new Array(alphabet.length)
	for (let i = 1; i < alphabet.length; i++) {
	for (let j = 0; j < alphabet.length; j++) {
	row[j] = alphabet[(j + i) % alphabet.length]
	}

	table[i] = row.join("")
	// output += "\n" + row.join("")
	}

	ta_tab.textContent = table.join("\n")
	}

	ta_tab_key.onchange = () => {
	recalc_tab()
	}

	recalc_tab()

	function encrypt_output() {
	const plain = ta_msg.value.toUpperCase()
	const password = ta_pwd.value.toUpperCase()

	let output = ""

	for (let i = 0; i < plain.length; i++) {
	const row_ch = plain[i]
	if (alphabet.indexOf(row_ch) === -1) {
	output += "?"
	continue
	//continue //skip invalid char
	}
	const col_ch = password[i % password.length]

	const row = alphabet.indexOf(row_ch)
	const col = alphabet.indexOf(col_ch)

	const sel = table[row][col]
	// console.log(row_ch, col_ch, sel)
	output += sel
	}
	ta_out_enc.textContent = output
	}

	function decrypt_output() {
	const cipher = ta_dec.value.toUpperCase()
	const password = ta_pwd.value.toUpperCase()

	let output = ""

	for (let i = 0; i < cipher.length; i++) {

	const row_ch = password[i % password.length]
	const row = alphabet.indexOf(row_ch)

	const sel_ch = cipher[i]

	const row_content = table[row]
	const col = row_content.indexOf(sel_ch)
	if (col === -1) {
	continue //skip invalid char
	}

	const original = alphabet[col]
	// console.log(row_ch, col_ch, sel)
	output += original
	}
	ta_out_dec.textContent = output
	}

	ta_msg.onchange = () => {
	encrypt_output()
	}
	ta_pwd.onchange = () => {
	encrypt_output()
	decrypt_output()
	}

	ta_dec.onchange = ()=>{
	decrypt_output()
	}



	</script>
	</div>
	</body>

	</html>