Lots of new features

See release for more info
This commit is contained in:
Tyler
2025-04-29 16:38:33 -10:00
committed by GitHub
parent 265dff3329
commit 6ad2b65aba
20 changed files with 2034 additions and 442 deletions
+86
View File
@@ -0,0 +1,86 @@
// encryption.js
/**
* Derives an AES-GCM key from a password using PBKDF2.
* @param {string} password - User-supplied password.
* @param {Uint8Array} salt - Randomly generated salt.
* @returns {Promise<CryptoKey>}
*/
export async function deriveKey(password, salt) {
const encoder = new TextEncoder();
const keyMaterial = await crypto.subtle.importKey(
'raw',
encoder.encode(password),
{ name: 'PBKDF2' },
false,
['deriveKey']
);
return crypto.subtle.deriveKey(
{
name: 'PBKDF2',
salt,
iterations: 200_000,
hash: 'SHA-256'
},
keyMaterial,
{ name: 'AES-GCM', length: 256 },
false,
['encrypt', 'decrypt']
);
}
/**
* Encrypts a message using AES-GCM with a derived key.
* @param {string} message - Plaintext message to encrypt.
* @param {string} password - User password for key derivation.
* @returns {Promise<string>} - Base64-encoded encrypted string.
*/
export async function encryptAdvanced(message, password) {
const encoder = new TextEncoder();
const salt = crypto.getRandomValues(new Uint8Array(16));
const iv = crypto.getRandomValues(new Uint8Array(12));
const key = await deriveKey(password, salt);
const encoded = encoder.encode(message);
const ciphertext = await crypto.subtle.encrypt({ name: 'AES-GCM', iv }, key, encoded);
const output = new Uint8Array(salt.length + iv.length + ciphertext.byteLength);
output.set(salt);
output.set(iv, salt.length);
output.set(new Uint8Array(ciphertext), salt.length + iv.length);
return btoa(String.fromCharCode(...output));
}
/**
* Decrypts an AES-GCM encrypted string.
* @param {string} encryptedData - Base64-encoded ciphertext.
* @param {string} password - Password used to derive the decryption key.
* @returns {Promise<string>} - Decrypted plaintext.
*/
export async function decryptAdvanced(encryptedData, password) {
const encrypted = new Uint8Array(
atob(encryptedData).split('').map(c => c.charCodeAt(0))
);
const salt = encrypted.slice(0, 16);
const iv = encrypted.slice(16, 28);
const ciphertext = encrypted.slice(28);
const key = await deriveKey(password, salt);
const decrypted = await crypto.subtle.decrypt(
{ name: 'AES-GCM', iv },
key,
ciphertext
);
return new TextDecoder().decode(decrypted);
}
/**
* Optional init logging for module diagnostics.
*/
export function setupEncryption() {
console.log('[Encryption] Module loaded');
}
+92
View File
@@ -0,0 +1,92 @@
// fileops.js
import { encryptAdvanced, decryptAdvanced } from './encryption.js';
/**
* Encrypts the selected file and triggers download of the encrypted version.
* @param {HTMLInputElement} fileInput - The input element of type 'file'.
* @param {string} password - Password for encryption.
*/
export function encryptFile(fileInput, password) {
if (!fileInput.files.length) {
alert("Please select a file!");
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (e) => {
const rawBytes = new Uint8Array(e.target.result);
const base64 = btoa(String.fromCharCode(...rawBytes));
const encrypted = await encryptAdvanced(base64, password);
downloadFile(encrypted, file.name + ".enc");
};
reader.readAsArrayBuffer(file);
}
/**
* Decrypts the selected encrypted file and triggers download of the original.
* @param {HTMLInputElement} fileInput - The input element of type 'file'.
* @param {string} password - Password for decryption.
*/
export function decryptFile(fileInput, password) {
if (!fileInput.files.length) {
alert("Please select a file!");
return;
}
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = async (e) => {
try {
const encryptedText = e.target.result;
const base64Decrypted = await decryptAdvanced(encryptedText, password);
const byteArray = new Uint8Array(
[...atob(base64Decrypted)].map(c => c.charCodeAt(0))
);
downloadFileBinary(byteArray, file.name.replace(/\.enc$/, ''));
} catch (err) {
console.error("[Decryption Error]", err);
alert("Decryption failed: wrong password or corrupted file.");
}
};
reader.readAsText(file);
}
/**
* Downloads a text-based file (encrypted string).
* @param {string} content - The file content to download.
* @param {string} filename - Desired name for the downloaded file.
*/
function downloadFile(content, filename) {
const blob = new Blob([content], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
/**
* Downloads a binary file (Uint8Array).
* @param {Uint8Array} byteArray - The binary content.
* @param {string} filename - Desired name for the downloaded file.
*/
function downloadFileBinary(byteArray, filename) {
const blob = new Blob([byteArray], { type: "application/octet-stream" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = filename;
a.click();
URL.revokeObjectURL(url);
}
+12
View File
@@ -0,0 +1,12 @@
// main.js
import { setupUI } from './ui.js';
import { setupGame } from './pacman.js';
/**
* Initialize UI and game once the DOM is fully loaded.
*/
window.addEventListener("DOMContentLoaded", () => {
setupUI();
setupGame();
});
+262
View File
@@ -0,0 +1,262 @@
// pacman.js
export function setupGame() {
console.log('[PacMan] Game module loaded.');
window.startPacman = startPacman;
window.exitGame = exitGame;
}
// ====== Game Constants & State ======
let canvas, ctx, pacman, enemy, walls, dots, score;
let pacmanSpeed = 40,
enemySpeed = 20,
cellSize = 40,
dotSize = 5,
cols, rows, randSeed, gameInterval;
// ====== Game Initialization ======
export function startPacman() {
canvas = document.getElementById("pacmanCanvas");
ctx = canvas.getContext("2d");
cols = Math.floor(canvas.width / cellSize);
rows = Math.floor(canvas.height / cellSize);
walls = [];
dots = [];
score = 0;
clearInterval(gameInterval);
const seedSource = document.getElementById("password")?.value || "pacman";
randSeed = [...seedSource].reduce((s, c) => s + c.charCodeAt(0), 0);
generateWalls();
generateDots();
pacman = spawn();
do { enemy = spawn(); } while (enemy.x === pacman.x && enemy.y === pacman.y);
pacman.dx = pacman.dy = 0;
document.addEventListener("keydown", movePacman);
gameInterval = setInterval(gameLoop, 150);
}
export function stopPacman() {
clearInterval(gameInterval);
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
}
export function resetGame() {
stopPacman();
startPacman();
}
export function exitGame() {
stopPacman();
document.getElementById("input-text").value = "";
document.getElementById("pacman-section").style.display = "none";
document.getElementById("encoding-section").style.display = "block";
}
// ====== Game Setup Helpers ======
function spawn() {
const options = [];
for (let c = 1; c < cols - 1; c++) {
for (let r = 1; r < rows - 1; r++) {
if (!walls.some(w => w.c === c && w.r === r)) {
const neighbors = [
{ c: c + 1, r }, { c: c - 1, r },
{ c, r: r + 1 }, { c, r: r - 1 }
];
if (neighbors.some(n => !walls.some(w => w.c === n.c && w.r === n.r))) {
options.push({ c, r });
}
}
}
}
const s = options[Math.floor(rand() * options.length)];
return {
x: s.c * cellSize + cellSize / 2,
y: s.r * cellSize + cellSize / 2,
size: cellSize / 2 - 5,
dx: 0,
dy: 0
};
}
function rand() {
const x = Math.sin(randSeed++) * 10000;
return x - Math.floor(x);
}
function generateWalls() {
for (let c = 0; c < cols; c++) {
for (let r = 0; r < rows; r++) {
if (c === 0 || r === 0 || c === cols - 1 || r === rows - 1 || rand() < 0.2) {
walls.push({ c, r });
}
}
}
}
function generateDots() {
dots = [];
for (let c = 1; c < cols - 1; c++) {
for (let r = 1; r < rows - 1; r++) {
if (walls.some(w => w.c === c && w.r === r)) continue;
const isEnclosed =
walls.some(w => w.c === c + 1 && w.r === r) &&
walls.some(w => w.c === c - 1 && w.r === r) &&
walls.some(w => w.c === c && w.r === r + 1) &&
walls.some(w => w.c === c && w.r === r - 1);
if (!isEnclosed) dots.push({ c, r });
}
}
}
// ====== Game Loop & Drawing ======
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawWalls();
moveChar(pacman);
moveEnemy();
drawChar(pacman, "yellow");
drawChar(enemy, "red");
eatDots();
drawScore();
checkGameOver();
}
function drawWalls() {
ctx.fillStyle = "blue";
walls.forEach(w => {
ctx.fillRect(w.c * cellSize, w.r * cellSize, cellSize, cellSize);
});
}
function drawChar(ch, color) {
ctx.beginPath();
ctx.arc(ch.x, ch.y, ch.size, 0, Math.PI * 2);
ctx.fillStyle = color;
ctx.fill();
}
function drawScore() {
ctx.fillStyle = "white";
ctx.font = "20px Poppins";
ctx.fillText("Score: " + score, 10, 25);
}
function checkGameOver() {
if (
Math.abs(pacman.x - enemy.x) < pacman.size &&
Math.abs(pacman.y - enemy.y) < pacman.size
) {
ctx.fillStyle = "#00ff99";
ctx.font = "40px Poppins";
ctx.textAlign = "center";
ctx.fillText("Game Over!", canvas.width / 2, canvas.height / 2);
clearInterval(gameInterval);
}
}
// ====== Movement Logic ======
function movePacman(e) {
const k = e.key;
if (!["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(k)) return;
e.preventDefault();
if (k === "ArrowUp") { pacman.dx = 0; pacman.dy = -pacmanSpeed; }
if (k === "ArrowDown") { pacman.dx = 0; pacman.dy = pacmanSpeed; }
if (k === "ArrowLeft") { pacman.dx = -pacmanSpeed; pacman.dy = 0; }
if (k === "ArrowRight") { pacman.dx = pacmanSpeed; pacman.dy = 0; }
}
function moveChar(ch) {
const nx = ch.x + ch.dx;
const ny = ch.y + ch.dy;
if (!willCollide(nx, ny, ch.size)) {
ch.x = nx;
ch.y = ny;
}
}
function moveEnemy() {
const options = [];
const moves = [[enemySpeed, 0], [-enemySpeed, 0], [0, enemySpeed], [0, -enemySpeed]];
moves.forEach(([dx, dy]) => {
const nx = enemy.x + dx;
const ny = enemy.y + dy;
if (!willCollide(nx, ny, enemy.size)) options.push({ dx, dy });
});
if (!options.length) return;
let best = options[0];
let bestDist = dist(enemy.x + best.dx, enemy.y + best.dy, pacman.x, pacman.y);
for (const opt of options) {
const d = dist(enemy.x + opt.dx, enemy.y + opt.dy, pacman.x, pacman.y);
if (d < bestDist) {
best = opt;
bestDist = d;
}
}
enemy.x += best.dx;
enemy.y += best.dy;
}
function dist(x1, y1, x2, y2) {
return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}
function willCollide(x, y, size) {
const left = x - size, right = x + size;
const top = y - size, bottom = y + size;
return walls.some(w => {
const wx1 = w.c * cellSize, wy1 = w.r * cellSize;
const wx2 = wx1 + cellSize, wy2 = wy1 + cellSize;
return right > wx1 && left < wx2 && bottom > wy1 && top < wy2;
});
}
function eatDots() {
const chompSound = document.getElementById("chomp-sound");
dots = dots.filter(d => {
const dx = d.c * cellSize + cellSize / 2;
const dy = d.r * cellSize + cellSize / 2;
if (Math.abs(pacman.x - dx) < pacman.size && Math.abs(pacman.y - dy) < pacman.size) {
score++;
if (chompSound) {
chompSound.currentTime = 0;
chompSound.volume = 0.4;
chompSound.play();
}
return false;
}
return true;
});
ctx.fillStyle = "white";
dots.forEach(d => {
ctx.beginPath();
ctx.arc(d.c * cellSize + cellSize / 2, d.r * cellSize + cellSize / 2, dotSize, 0, Math.PI * 2);
ctx.fill();
});
}
window.resetGame = resetGame;
window.exitGame = exitGame;
+215
View File
@@ -0,0 +1,215 @@
// ui.js
import { encryptFile, decryptFile } from './fileops.js';
/**
* Initialize all UI functionality after DOM is loaded
*/
export function setupUI() {
toggleEncryptionOptions();
toggleInputMode();
const encryptionTypeEl = document.getElementById("encryption-type");
const inputTextEl = document.getElementById("input-text");
const formEl = document.getElementById("crypto-form");
const removeFileBtn = document.getElementById("remove-file-btn");
const clearAllBtn = document.getElementById("clear-all-btn");
const generateBtn = document.getElementById("generate-btn");
const copyPasswordBtn = document.getElementById("copy-btn");
const copyOutputBtn = document.getElementById("copy-output-btn");
const toggleSwitch = document.getElementById("operation-toggle");
const copyShareBtn = document.getElementById("copy-share-btn");
const shareLink = document.getElementById("share-link");
if (
encryptionTypeEl && inputTextEl && formEl && removeFileBtn &&
clearAllBtn && generateBtn && copyPasswordBtn && toggleSwitch
) {
encryptionTypeEl.addEventListener("change", toggleEncryptionOptions);
inputTextEl.addEventListener("input", () => {
toggleInputMode();
checkForPacman();
});
formEl.addEventListener("submit", handleSubmit);
removeFileBtn.addEventListener("click", removeFile);
clearAllBtn.addEventListener("click", clearAll);
generateBtn.addEventListener("click", generateRandomPassword);
copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
toggleSwitch.addEventListener("change", updateToggleLabels);
const copySharedLinkBtn = document.getElementById("copy-shared-link");
const sharedLinkEl = document.getElementById("shared-link");
if (copySharedLinkBtn && sharedLinkEl) {
copySharedLinkBtn.addEventListener("click", () => {
navigator.clipboard.writeText(sharedLinkEl.textContent.trim()).then(() => {
const feedback = document.getElementById("shared-link-feedback");
if (feedback) {
feedback.classList.remove("hidden");
feedback.classList.add("show");
setTimeout(() => {
feedback.classList.remove("show");
feedback.classList.add("hidden");
}, 3000);
}
});
});
sharedLinkEl.scrollIntoView({ behavior: "smooth" });
}
}
}
function toggleEncryptionOptions() {
const type = document.getElementById("encryption-type").value.trim().toLowerCase();
const passwordInputWrapper = document.getElementById("password-input");
const isAdvanced = type.includes("advanced");
if (passwordInputWrapper) {
if (isAdvanced) {
passwordInputWrapper.classList.remove("hidden");
} else {
passwordInputWrapper.classList.add("hidden");
}
}
updateToggleLabels();
toggleInputMode();
}
function updateToggleLabels() {
const type = document.getElementById("encryption-type")?.value;
const leftLabel = document.getElementById("toggle-left-label");
const rightLabel = document.getElementById("toggle-right-label");
if (!type || !leftLabel || !rightLabel) return;
const isAdvanced = type.toLowerCase().includes("advanced");
leftLabel.textContent = isAdvanced ? "Encrypt" : "Encode";
rightLabel.textContent = isAdvanced ? "Decrypt" : "Decode";
}
function toggleInputMode() {
const fileInput = document.getElementById("file-input");
const textValue = document.getElementById("input-text")?.value.trim();
const isAdvanced = document.getElementById("encryption-type")?.value === "advanced";
const textSection = document.getElementById("text-section");
const fileSection = document.getElementById("file-section");
const removeBtn = document.getElementById("remove-file-btn");
if (!fileInput || !textSection || !fileSection || !removeBtn) return;
const fileSelected = fileInput.files.length > 0;
textSection.style.display = fileSelected ? "none" : "flex";
fileSection.style.display = (isAdvanced && !textValue) ? "flex" : "none";
removeBtn.style.display = fileSelected ? "inline-block" : "none";
}
async function handleSubmit(event) {
event.preventDefault();
const encryptionType = document.getElementById("encryption-type")?.value;
const password = document.getElementById("password")?.value;
const fileInput = document.getElementById("file-input");
const isDecrypt = document.getElementById("operation-toggle").checked;
const operation = isDecrypt ? "decrypt" : "encrypt";
if (!encryptionType || !fileInput) return;
if (encryptionType === "advanced" && !password) {
return alert("Password is required for advanced encryption.");
}
if (fileInput.files.length > 0) {
return (operation === "encrypt")
? encryptFile(fileInput, password)
: decryptFile(fileInput, password);
}
const payload = {
"encryption-type": encryptionType,
operation: operation,
message: document.getElementById("input-text")?.value,
password: password
};
try {
const response = await fetch("/", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(payload)
});
const data = await response.json();
document.getElementById("output-text").value = data.result;
} catch (err) {
alert("Error processing request: " + err.message);
}
}
function removeFile() {
const fileInput = document.getElementById("file-input");
if (fileInput) fileInput.value = "";
const removeBtn = document.getElementById("remove-file-btn");
if (removeBtn) removeBtn.style.display = 'none';
toggleInputMode();
}
function generateRandomPassword() {
const charset = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+[]{}|;:,.<>?/~";
const length = 30;
const password = Array.from({ length }, () =>
charset.charAt(Math.floor(Math.random() * charset.length))
).join("");
const passwordField = document.getElementById("generated-password");
if (passwordField) passwordField.value = password;
}
function copyToClipboard(elementId, feedbackId) {
const el = document.getElementById(elementId);
const feedback = document.getElementById(feedbackId);
if (!el || !feedback) return;
navigator.clipboard.writeText(el.textContent || el.value || "").then(() => {
feedback.classList.add("show");
setTimeout(() => {
feedback.classList.remove("show");
}, 3000);
});
}
function clearAll() {
const fields = ["input-text", "output-text", "file-input", "password"];
fields.forEach(id => {
const el = document.getElementById(id);
if (el) el.value = "";
});
removeFile();
toggleInputMode();
document.getElementById("pacman-section")?.style.setProperty("display", "none");
document.getElementById("encoding-section")?.style.setProperty("display", "block");
}
function checkForPacman() {
const val = document.getElementById("input-text").value.trim().toLowerCase();
const pacSection = document.getElementById("pacman-section");
const encSection = document.getElementById("encoding-section");
if (val.includes("pacman") && pacSection.style.display !== "block") {
pacSection.style.display = "block";
encSection.style.display = "none";
window.startPacman();
} else if (pacSection.style.display === "block" && !val.includes("pacman")) {
window.exitGame();
}
}
function startPacman() { }
function exitGame() { }