Skip to content

Instantly share code, notes, and snippets.

@sdkfz181tiger

sdkfz181tiger/custom_main.js

Last active May 6, 2023 15:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sdkfz181tiger/dd8606b57848194a07a2fc79d335bbaa to your computer and use it in GitHub Desktop.
Save sdkfz181tiger/dd8606b57848194a07a2fc79d335bbaa to your computer and use it in GitHub Desktop.
Download ZIP
Enigma暗号機(Canvas)
Raw
custom_main.js
"use strict";
//==========
// JavaScript
// Window
window.onload = (e)=>{
// Enigma
const enigma = new Enigma();
enigma.init(1, 2, 3);// Reset
showInfo(enigma.getInfo());
// UI
const btns = document.getElementsByTagName("button");
for(let btn of btns){
// Buttons
btn.addEventListener("click", (e)=>{
const str = e.target.textContent;
if(str == "Cl"){
enigma.init(1, 2, 3);// Reset
showInfo(enigma.getInfo());
clearStr();
return;
}
const enc = enigma.decode(str);
showInfo(enigma.getInfo());
showStr(str, enc);
console.log("enigma:", str, "->", enc);
});
}
}
function clearStr(){
document.getElementById("dispIn").textContent = "in:";
document.getElementById("dispOut").textContent = "out:";
}
function showStr(strIn, strOut){
document.getElementById("dispIn").textContent += strIn;
document.getElementById("dispOut").textContent += strOut;
}
function showInfo(info){
document.getElementById("info").textContent = info;
}
Raw
custom_utility.js
"use strict";
//==========
// Enigma Simurator
const CODES = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const ROT_1 = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25];
const ROT_2 = [20,21,22,23,24,25,11,12,13,14,15,16,17,18,19,0,1,2,3,4,5,6,7,8,9,10];
const ROT_3 = [22,23,24,25,6,7,8,9,10,11,12,13,14,15,16,17,0,1,2,3,4,5,18,19,20,21];
// Enigma
class Enigma{
constructor(){
console.log("Enigma");
}
init(n1, n2, n3){
// Scrambler
// n1, n2, n3: ローター回転値
this._scrambler = new Scrambler(n1, n2, n3);
}
decode(str){
let result = "";
for(let c of str){
this._scrambler.rotate();// Rotate
result += this._scrambler.decode(c);// Decode
console.log(this.getInfo());
}
return result;
}
getInfo(){
return this._scrambler.getInfo();
}
}
// Scrambler
class Scrambler{
constructor(n1, n2, n3){
console.log("Scrambler");
// Roters(3つのローターを装備)
// 第一引数: ローター回転値
// 第二引数: ローター内配線
this._roters = [
new Roter(n1, ROT_1),
new Roter(n2, ROT_2),
new Roter(n3, ROT_3)
];
}
decode(c){
const size = this._roters.length;
for(let i=0; i<size; i++){// Forward
c = this._roters[i].forward(c);
}
c = this._roters[size-1].reflect(c);// Reflect
for(let i=size-1; 0<=i; i--){// Backward
c = this._roters[i].backward(c);
}
return c;
}
rotate(){
// 右のローターを回転(1周すると次のローターも回転)
for(let i=this._roters.length-1; 0<=i; i--){
const roter = this._roters[i];
if(!roter.rotate()) return;
}
}
getInfo(){
let info = "roters: ";
for(let roter of this._roters){
info += roter.index + ",";
}
return info;
}
}
// Roter
class Roter{
constructor(index, ptn){
//console.log("Roter");
this._index = index % ptn.length;// Index
this._ptn = ptn;
this.init();
}
init(){
// init
this._forward = {}
this._backward = {}
const size = this._ptn.length;
for(let i=0; i<size; i++){
const o = (this._index + i) % size;
this._forward[i] = this._ptn[o];
this._backward[this._ptn[o]] = i;
}
}
forward(c){
const i = this.getIndex(c);
const f = this._forward[i];
//console.log("forward:", i, "->", f);
return CODES[f];
}
backward(c){
const i = this.getIndex(c);
const b = this._backward[i];
//console.log("backward:", i, "->", b);
return CODES[b];
}
reflect(c){
const i = this.getIndex(c);
const r = this._ptn.length-1 - i;
//console.log("reflect:", i, "->", r);
return CODES[r];
}
getIndex(c){
for(let i=0; i<CODES.length; i++){
if(CODES[i] == c) return i;
}
return -1;
}
rotate(){
this._index++;
if(this._ptn.length-1 < this._index){
this._index = 0;
this.init();// Init
return true;
}
this.init();// Init
return false;
}
get index(){
return this._index;
}
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="./images/favicon.ico">
<!-- Stylesheet -->
<link href="./css/custom.css" rel="stylesheet" type="text/css"/>
<!-- JavaScript -->
<script src="./custom_utility.js" defer></script>
<script src="./custom_sketch.js" defer></script>
</head>
<body>
<table>
<tr>
<td colspan="6" id="dispIn">in:</td>
</tr>
<tr>
<td colspan="6" id="dispOut">out:</td>
</tr>
<tr>
<td><button>A</button></td>
<td><button>B</button></td>
<td><button>C</button></td>
<td><button>D</button></td>
<td><button>E</button></td>
<td><button>F</button></td>
</tr>
<tr>
<td><button>G</button></td>
<td><button>H</button></td>
<td><button>I</button></td>
<td><button>J</button></td>
<td><button>K</button></td>
<td><button>L</button></td>
</tr>
<tr>
<td><button>M</button></td>
<td><button>N</button></td>
<td><button>O</button></td>
<td><button>P</button></td>
<td><button>Q</button></td>
<td><button>R</button></td>
</tr>
<tr>
<td><button>S</button></td>
<td><button>T</button></td>
<td><button>U</button></td>
<td><button>V</button></td>
<td><button>W</button></td>
<td><button>X</button></td>
</tr>
<tr>
<td><button>Y</button></td>
<td><button>Z</button></td>
<td colspan="3" id="info"></td>
<td><button>Cl</button></td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment