depperm · June 24, 2024 17:46
diff --git a/PaCK.html b/PaCK.html
 <html>
 	<style>
 	table {
 	  line-height: 120%;
 	  font-family: Consolas, monaco, monospace;
 	  /*72pt:1in*/
 	  font-size: 9pt;
 	}
 	.good {
 	  background: greenyellow;
 	}
 	.error {
 	  background: red;
 	}

 	.globaltd {
 	  width: 18pt;
 	  text-align: center;
 	  line-height: 9pt;
 	}
 	.normal tr td.globaltd {
 	  border-bottom: 1px solid #8c8;
 	}
 	.color{
          background:#8c8;
        }
 	.normal td:first-child {
 	  border-left: 1px solid #8c8;
 	}
 	.normal tr:first-child td {
 	  border-top: 1px solid #8c8;
 	}
 	.normal td:last-child {
 	  border-right: 1px solid #8c8;
 	}

 	.char2 {
 	  background: #ddffdd;
 	}
 	</style>
 	<body>
 	Seed <input type="text" id="seed" value="test" onkeyup="generateTable()"> Curr Entropy: <span id="entropy"></span> (Will turn green with 80+ entropy)
 	<br>
 	<p>
 	  <b>Recommended Size:</b>
 	<ul>
 	  <li>Keychain (1 1/8"x2 7/8"): 4x9</li>
 	  <li>Credit Card (2 1/4"x3 1/2"): 8x14</li>
 	  <li>Business Card (2"x3 1/2"): TODO</li>
 	  <li>Index Card (3"x5"): TODO</li>
 	</ul>
 	</p>
 	Width <input type="number" id="width" minimum="2" class="dimensions" value="7" onchange="generateTable()">
 	<br>
 	Height <input type="number" id="height" minimum="2" class="dimensions" value="4" onchange="generateTable()">
 	<br>
 	<br>
 	<div id="grid-container">
 	</div>
 	<span>https://codepen.io/depperm/pen/PogvaYN</span>
 	</body>
 	<script>
 	// Copyright (c) 2017-2020, W. "Mac" McMeans
 	// All rights reserved.
 	// https://github.com/macmcmeans/aleaPRNG
 	function Mash() {
 	  var n = 0xefc8249d;

 	  var mash = function (data) {
 		data = data.toString();
 		for (var i = 0; i < data.length; i++) {
 		  n += data.charCodeAt(i);
 		  var h = 0.02519603282416938 * n;
 		  n = h >>> 0;
 		  h -= n;
 		  h *= n;
 		  n = h >>> 0;
 		  h -= n;
 		  n += h * 0x100000000; // 2^32
 		}
 		return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
 	  };

 	  mash.version = "Mash 0.9";
 	  return mash;
 	}

 	function Alea(...args) {
 	  let s0 = 0;
 	  let s1 = 0;
 	  let s2 = 0;
 	  let c = 1;

 	  if (args.length == 0) {
 		args = [+new Date()];
 	  }
 	  var mash = Mash();
 	  s0 = mash(" ");
 	  s1 = mash(" ");
 	  s2 = mash(" ");

 	  for (var i = 0; i < args.length; i++) {
 		s0 -= mash(args[i]);
 		if (s0 < 0) {
 		  s0 += 1;
 		}
 		s1 -= mash(args[i]);
 		if (s1 < 0) {
 		  s1 += 1;
 		}
 		s2 -= mash(args[i]);
 		if (s2 < 0) {
 		  s2 += 1;
 		}
 	  }
 	  mash = null;

 	  var random = function () {
 		var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
 		s0 = s1;
 		s1 = s2;
 		return (s2 = t - (c = t | 0));
 	  };
 	  random.int = function (max) {
 		return Math.floor(random() * max);
 	  };
 	  random.uint32 = function () {
 		return random() * 0x100000000; // 2^32
 	  };
 	  random.fract53 = function () {
 		return random() + ((random() * 0x200000) | 0) * 1.1102230246251565e-16; // 2^-53
 	  };
 	  random.args = args;
 	  return random;
 	}

 	function switchRow(table, pos1, pos2) {
 	  let temp = table[pos1];
 	  table[pos1] = [...table[pos2]];
 	  table[pos2] = [...temp];
 	}

 	function switchCol(table, pos1, pos2) {
 	  table = table.map((row) => {
 		let temp = row[pos1];
 		row[pos1] = row[pos2];
 		row[pos2] = temp;
 	  });
 	}

 	function shuffle(array, random) {
 	  let currentIndex = array.length;

 	  // While there remain elements to shuffle...
 	  while (currentIndex != 0) {
 		// Pick a remaining element...
 		let randomIndex = Math.floor(random() * currentIndex);
 		currentIndex--;

 		// And swap it with the current element.
 		[array[currentIndex], array[randomIndex]] = [
 		  array[randomIndex],
 		  array[currentIndex]
 		];
 	  }
 	}

 	const alphabet = "abcdefghijklmnopqrstuvwxyz";
 	const numbers = "0123456789";
 	const symbols = "-.~*[]$;|>{}'?:+#^%\"&/<>,=!()";

 	//https://nordvpn.com/blog/what-is-password-entropy/
 	function calcEntroy(seed) {
 	  let range = 0;
 	  if (seed.match(/[a-z]/g)) range += 26;
 	  if (seed.match(/[A-Z]/g)) range += 26;
 	  if (seed.match(/[\d]/g)) range += 10;
 	  if (seed.match(/[^a-zA-Z\d]/g)) range += symbols.length;

 	  return Math.log2(Math.pow(range, seed.length));
 	}

 	function outputGrid(table) {
 	  table.forEach((row) => {
 		console.log(row.join(""));
 	  });
 	}

 	function generateTable() {
 	  let grid = [];

 	  let salt = "WHATEVERYOUWANT";
 	  let seed = document.getElementById("seed")?.value || "seed";
 	  let width = +document.getElementById("width")?.value;
 	  let height = +document.getElementById("height")?.value;
 	  if (width * height < 26) {
 		console.log(document.getElementsByClassName("dimensions"));
 		document.getElementsByClassName("dimensions")[0].classList.add("error");
 		document.getElementsByClassName("dimensions")[1].classList.add("error");
 	  } else {
 		document.getElementsByClassName("dimensions")[0].classList.remove("error");
 		document.getElementsByClassName("dimensions")[1].classList.remove("error");
 	  }
 	  let entropy = calcEntroy(seed);
 	  document.getElementById('entropy').textContent =entropy.toFixed(2)
 	  if (entropy > 80) {
 		document.getElementById("seed").classList.add("good");
 	  } else {
 		document.getElementById("seed").classList.remove("good");
 	  }

 	  let prng = new Alea(`${salt}${seed}`);

 	  let initialLower = alphabet;
 	  let initialUpper = alphabet.toUpperCase();
 	  let initialNumbers = numbers;
 	  let initialSymbols = symbols;

 	  const order = [0, 1, 2, 3];
 	  let roundOrder = [...order];
 	  let r, temp, cell;

 	  for (let i = 0; i < width * height; i++) {
 		shuffle(roundOrder, prng);

 		cell = [];
 		for (let j = 0; j < roundOrder.length; j++) {
 		  if (roundOrder[j] === 0) {
 			//lower
 			if (initialLower.length) {
 			  r = Math.floor(prng() * initialLower.length);
 			  temp = initialLower[r];
 			  initialLower = initialLower.slice(0, r) + initialLower.slice(r + 1);
 			  cell.push(temp);
 			} else {
 			  r = Math.floor(prng() * alphabet.length);
 			  cell.push(alphabet[r]);
 			}
 		  } else if (roundOrder[j] === 1) {
 			//upper
 			if (initialUpper.length) {
 			  r = Math.floor(prng() * initialUpper.length);
 			  temp = initialUpper[r];
 			  initialUpper = initialUpper.slice(0, r) + initialUpper.slice(r + 1);
 			  cell.push(temp);
 			} else {
 			  r = Math.floor(prng() * alphabet.length);
 			  cell.push(alphabet[r].toUpperCase());
 			}
 		  } else if (roundOrder[j] === 2) {
 			//number
 			if (initialNumbers.length) {
 			  r = Math.floor(prng() * initialNumbers.length);
 			  temp = initialNumbers[r];
 			  initialNumbers =
 				initialNumbers.slice(0, r) + initialNumbers.slice(r + 1);
 			  cell.push(temp);
 			} else {
 			  r = Math.floor(prng() * numbers.length);
 			  cell.push(numbers[r].toUpperCase());
 			}
 		  } else if (roundOrder[j] === 3) {
 			//symbol
 			if (initialSymbols.length) {
 			  r = Math.floor(prng() * initialSymbols.length);
 			  temp = initialSymbols[r];
 			  initialSymbols =
 				initialSymbols.slice(0, r) + initialSymbols.slice(r + 1);
 			  cell.push(temp);
 			} else {
 			  r = Math.floor(prng() * symbols.length);
 			  cell.push(symbols[r].toUpperCase());
 			}
 		  }
 		}
 		grid.push(cell);
 	  }
 	  // shuffle to ensure the first 26 non-repeating letters are scrambled through dimensions
 	  shuffle(grid, prng);

 	  //put into table
 	  var table = document.createElement("table");
 	  table.cellPadding = 0;
 	  table.cellSpacing = 0;
 	  table.border = 0;
 	  table.classList.add("normal");

 	  for (var i = 0; i < height; i++) {
 		var tr = document.createElement("tr");

 		for (var j = 0; j < width; j++) {
 		  var td = document.createElement("td");
 		  var text = document.createTextNode(
 			`${grid[i * width + j][0]}${grid[i * width + j][1]}\n${
 			  grid[i * width + j][2]
 			}${grid[i * width + j][3]}`
 		  );
 		  td.appendChild(text);
 		  if (i%2 == 0 && j%2 == 1) {
                    td.classList.add("color");
                  } else if (i%2 == 1 && j%2 == 0) {
                    td.classList.add("color");
                  }
 		  td.classList.add("globaltd");
 		  td.classList.add("char3");
 		  tr.appendChild(td);
 		}
 		table.appendChild(tr);
 	  }
 	  while (document.getElementById("grid-container").firstChild) {
 		document
 		  .getElementById("grid-container")
 		  .removeChild(document.getElementById("grid-container").firstChild);
 	  }
 	  document.getElementById("grid-container").appendChild(table);
 	}

 	generateTable();
 	</script>
 </html>
	<html>
	<style>
	table {
	line-height: 120%;
	font-family: Consolas, monaco, monospace;
	/72pt:1in/
	font-size: 9pt;
	}
	.good {
	background: greenyellow;
	}
	.error {
	background: red;
	}

	.globaltd {
	width: 18pt;
	text-align: center;
	line-height: 9pt;
	}
	.normal tr td.globaltd {
	border-bottom: 1px solid #8c8;
	}
	.color{
	background:#8c8;
	}
	.normal td:first-child {
	border-left: 1px solid #8c8;
	}
	.normal tr:first-child td {
	border-top: 1px solid #8c8;
	}
	.normal td:last-child {
	border-right: 1px solid #8c8;
	}

	.char2 {
	background: #ddffdd;
	}
	</style>
	<body>
	Seed <input type="text" id="seed" value="test" onkeyup="generateTable()"> Curr Entropy: <span id="entropy"></span> (Will turn green with 80+ entropy)
	<br>
	<p>
	<b>Recommended Size:</b>
	<ul>
	<li>Keychain (1 1/8"x2 7/8"): 4x9</li>
	<li>Credit Card (2 1/4"x3 1/2"): 8x14</li>
	<li>Business Card (2"x3 1/2"): TODO</li>
	<li>Index Card (3"x5"): TODO</li>
	</ul>
	</p>
	Width <input type="number" id="width" minimum="2" class="dimensions" value="7" onchange="generateTable()">
	<br>
	Height <input type="number" id="height" minimum="2" class="dimensions" value="4" onchange="generateTable()">
	<br>
	<br>
	<div id="grid-container">
	</div>
	<span>https://codepen.io/depperm/pen/PogvaYN</span>
	</body>
	<script>
	// Copyright (c) 2017-2020, W. "Mac" McMeans
	// All rights reserved.
	// https://github.com/macmcmeans/aleaPRNG
	function Mash() {
	var n = 0xefc8249d;

	var mash = function (data) {
	data = data.toString();
	for (var i = 0; i < data.length; i++) {
	n += data.charCodeAt(i);
	var h = 0.02519603282416938 * n;
	n = h >>> 0;
	h -= n;
	h *= n;
	n = h >>> 0;
	h -= n;
	n += h * 0x100000000; // 2^32
	}
	return (n >>> 0) * 2.3283064365386963e-10; // 2^-32
	};

	mash.version = "Mash 0.9";
	return mash;
	}

	function Alea(...args) {
	let s0 = 0;
	let s1 = 0;
	let s2 = 0;
	let c = 1;

	if (args.length == 0) {
	args = [+new Date()];
	}
	var mash = Mash();
	s0 = mash(" ");
	s1 = mash(" ");
	s2 = mash(" ");

	for (var i = 0; i < args.length; i++) {
	s0 -= mash(args[i]);
	if (s0 < 0) {
	s0 += 1;
	}
	s1 -= mash(args[i]);
	if (s1 < 0) {
	s1 += 1;
	}
	s2 -= mash(args[i]);
	if (s2 < 0) {
	s2 += 1;
	}
	}
	mash = null;

	var random = function () {
	var t = 2091639 * s0 + c * 2.3283064365386963e-10; // 2^-32
	s0 = s1;
	s1 = s2;
	return (s2 = t - (c = t \| 0));
	};
	random.int = function (max) {
	return Math.floor(random() * max);
	};
	random.uint32 = function () {
	return random() * 0x100000000; // 2^32
	};
	random.fract53 = function () {
	return random() + ((random() * 0x200000) \| 0) * 1.1102230246251565e-16; // 2^-53
	};
	random.args = args;
	return random;
	}

	function switchRow(table, pos1, pos2) {
	let temp = table[pos1];
	table[pos1] = [...table[pos2]];
	table[pos2] = [...temp];
	}

	function switchCol(table, pos1, pos2) {
	table = table.map((row) => {
	let temp = row[pos1];
	row[pos1] = row[pos2];
	row[pos2] = temp;
	});
	}

	function shuffle(array, random) {
	let currentIndex = array.length;

	// While there remain elements to shuffle...
	while (currentIndex != 0) {
	// Pick a remaining element...
	let randomIndex = Math.floor(random() * currentIndex);
	currentIndex--;

	// And swap it with the current element.
	[array[currentIndex], array[randomIndex]] = [
	array[randomIndex],
	array[currentIndex]
	];
	}
	}

	const alphabet = "abcdefghijklmnopqrstuvwxyz";
	const numbers = "0123456789";
	const symbols = "-.~*[]$;\|>{}'?:+#^%\"&/<>,=!()";

	//https://nordvpn.com/blog/what-is-password-entropy/
	function calcEntroy(seed) {
	let range = 0;
	if (seed.match(/[a-z]/g)) range += 26;
	if (seed.match(/[A-Z]/g)) range += 26;
	if (seed.match(/[\d]/g)) range += 10;
	if (seed.match(/[^a-zA-Z\d]/g)) range += symbols.length;

	return Math.log2(Math.pow(range, seed.length));
	}

	function outputGrid(table) {
	table.forEach((row) => {
	console.log(row.join(""));
	});
	}

	function generateTable() {
	let grid = [];

	let salt = "WHATEVERYOUWANT";
	let seed = document.getElementById("seed")?.value \|\| "seed";
	let width = +document.getElementById("width")?.value;
	let height = +document.getElementById("height")?.value;
	if (width * height < 26) {
	console.log(document.getElementsByClassName("dimensions"));
	document.getElementsByClassName("dimensions")[0].classList.add("error");
	document.getElementsByClassName("dimensions")[1].classList.add("error");
	} else {
	document.getElementsByClassName("dimensions")[0].classList.remove("error");
	document.getElementsByClassName("dimensions")[1].classList.remove("error");
	}
	let entropy = calcEntroy(seed);
	document.getElementById('entropy').textContent =entropy.toFixed(2)
	if (entropy > 80) {
	document.getElementById("seed").classList.add("good");
	} else {
	document.getElementById("seed").classList.remove("good");
	}

	let prng = new Alea(`${salt}${seed}`);

	let initialLower = alphabet;
	let initialUpper = alphabet.toUpperCase();
	let initialNumbers = numbers;
	let initialSymbols = symbols;

	const order = [0, 1, 2, 3];
	let roundOrder = [...order];
	let r, temp, cell;

	for (let i = 0; i < width * height; i++) {
	shuffle(roundOrder, prng);

	cell = [];
	for (let j = 0; j < roundOrder.length; j++) {
	if (roundOrder[j] === 0) {
	//lower
	if (initialLower.length) {
	r = Math.floor(prng() * initialLower.length);
	temp = initialLower[r];
	initialLower = initialLower.slice(0, r) + initialLower.slice(r + 1);
	cell.push(temp);
	} else {
	r = Math.floor(prng() * alphabet.length);
	cell.push(alphabet[r]);
	}
	} else if (roundOrder[j] === 1) {
	//upper
	if (initialUpper.length) {
	r = Math.floor(prng() * initialUpper.length);
	temp = initialUpper[r];
	initialUpper = initialUpper.slice(0, r) + initialUpper.slice(r + 1);
	cell.push(temp);
	} else {
	r = Math.floor(prng() * alphabet.length);
	cell.push(alphabet[r].toUpperCase());
	}
	} else if (roundOrder[j] === 2) {
	//number
	if (initialNumbers.length) {
	r = Math.floor(prng() * initialNumbers.length);
	temp = initialNumbers[r];
	initialNumbers =
	initialNumbers.slice(0, r) + initialNumbers.slice(r + 1);
	cell.push(temp);
	} else {
	r = Math.floor(prng() * numbers.length);
	cell.push(numbers[r].toUpperCase());
	}
	} else if (roundOrder[j] === 3) {
	//symbol
	if (initialSymbols.length) {
	r = Math.floor(prng() * initialSymbols.length);
	temp = initialSymbols[r];
	initialSymbols =
	initialSymbols.slice(0, r) + initialSymbols.slice(r + 1);
	cell.push(temp);
	} else {
	r = Math.floor(prng() * symbols.length);
	cell.push(symbols[r].toUpperCase());
	}
	}
	}
	grid.push(cell);
	}
	// shuffle to ensure the first 26 non-repeating letters are scrambled through dimensions
	shuffle(grid, prng);

	//put into table
	var table = document.createElement("table");
	table.cellPadding = 0;
	table.cellSpacing = 0;
	table.border = 0;
	table.classList.add("normal");

	for (var i = 0; i < height; i++) {
	var tr = document.createElement("tr");

	for (var j = 0; j < width; j++) {
	var td = document.createElement("td");
	var text = document.createTextNode(
	`${grid[i * width + j][0]}${grid[i * width + j][1]}\n${
	grid[i * width + j][2]
	}${grid[i * width + j][3]}`
	);
	td.appendChild(text);
	if (i%2 == 0 && j%2 == 1) {
	td.classList.add("color");
	} else if (i%2 == 1 && j%2 == 0) {
	td.classList.add("color");
	}
	td.classList.add("globaltd");
	td.classList.add("char3");
	tr.appendChild(td);
	}
	table.appendChild(tr);
	}
	while (document.getElementById("grid-container").firstChild) {
	document
	.getElementById("grid-container")
	.removeChild(document.getElementById("grid-container").firstChild);
	}
	document.getElementById("grid-container").appendChild(table);
	}

	generateTable();
	</script>
	</html>