Actually working swipe controls for pacman game
This commit is contained in:
Tyler
+104
-104
@@ -1,104 +1,104 @@
|
||||
/**
|
||||
* Encryption module.
|
||||
* Handles cryptographic operations using Web Crypto API.
|
||||
* Implements AES-GCM encryption with PBKDF2 key derivation.
|
||||
*/
|
||||
|
||||
// ===== Constants =====
|
||||
const SALT_LENGTH = 16;
|
||||
const IV_LENGTH = 12;
|
||||
const PBKDF2_ITERATIONS = 200_000;
|
||||
const KEY_LENGTH = 256;
|
||||
|
||||
// ===== Key Derivation =====
|
||||
/**
|
||||
* 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>} - Derived cryptographic key.
|
||||
*/
|
||||
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: PBKDF2_ITERATIONS,
|
||||
hash: 'SHA-256'
|
||||
},
|
||||
keyMaterial,
|
||||
{ name: 'AES-GCM', length: KEY_LENGTH },
|
||||
false,
|
||||
['encrypt', 'decrypt']
|
||||
);
|
||||
}
|
||||
|
||||
// ===== Encryption =====
|
||||
/**
|
||||
* 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(SALT_LENGTH));
|
||||
const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
|
||||
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));
|
||||
}
|
||||
|
||||
// ===== Decryption =====
|
||||
/**
|
||||
* 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, SALT_LENGTH);
|
||||
const iv = encrypted.slice(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
|
||||
const ciphertext = encrypted.slice(SALT_LENGTH + IV_LENGTH);
|
||||
const key = await deriveKey(password, salt);
|
||||
|
||||
const decrypted = await crypto.subtle.decrypt(
|
||||
{ name: 'AES-GCM', iv },
|
||||
key,
|
||||
ciphertext
|
||||
);
|
||||
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
// ===== Module Initialization =====
|
||||
/**
|
||||
* Initializes the encryption module and logs its status.
|
||||
*/
|
||||
export function setupEncryption() {
|
||||
console.log('[Encryption] Module loaded');
|
||||
}
|
||||
/**
|
||||
* Encryption module.
|
||||
* Handles cryptographic operations using Web Crypto API.
|
||||
* Implements AES-GCM encryption with PBKDF2 key derivation.
|
||||
*/
|
||||
|
||||
// ===== Constants =====
|
||||
const SALT_LENGTH = 16;
|
||||
const IV_LENGTH = 12;
|
||||
const PBKDF2_ITERATIONS = 200_000;
|
||||
const KEY_LENGTH = 256;
|
||||
|
||||
// ===== Key Derivation =====
|
||||
/**
|
||||
* 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>} - Derived cryptographic key.
|
||||
*/
|
||||
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: PBKDF2_ITERATIONS,
|
||||
hash: 'SHA-256'
|
||||
},
|
||||
keyMaterial,
|
||||
{ name: 'AES-GCM', length: KEY_LENGTH },
|
||||
false,
|
||||
['encrypt', 'decrypt']
|
||||
);
|
||||
}
|
||||
|
||||
// ===== Encryption =====
|
||||
/**
|
||||
* 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(SALT_LENGTH));
|
||||
const iv = crypto.getRandomValues(new Uint8Array(IV_LENGTH));
|
||||
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));
|
||||
}
|
||||
|
||||
// ===== Decryption =====
|
||||
/**
|
||||
* 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, SALT_LENGTH);
|
||||
const iv = encrypted.slice(SALT_LENGTH, SALT_LENGTH + IV_LENGTH);
|
||||
const ciphertext = encrypted.slice(SALT_LENGTH + IV_LENGTH);
|
||||
const key = await deriveKey(password, salt);
|
||||
|
||||
const decrypted = await crypto.subtle.decrypt(
|
||||
{ name: 'AES-GCM', iv },
|
||||
key,
|
||||
ciphertext
|
||||
);
|
||||
|
||||
return new TextDecoder().decode(decrypted);
|
||||
}
|
||||
|
||||
// ===== Module Initialization =====
|
||||
/**
|
||||
* Initializes the encryption module and logs its status.
|
||||
*/
|
||||
export function setupEncryption() {
|
||||
console.log('[Encryption] Module loaded');
|
||||
}
|
||||
|
||||
+119
-119
@@ -1,119 +1,119 @@
|
||||
/**
|
||||
* File operations module.
|
||||
* Handles file encryption and decryption operations.
|
||||
*/
|
||||
|
||||
// ===== Constants =====
|
||||
const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
|
||||
|
||||
// ===== Public Interface =====
|
||||
export async function encryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const encryptedChunks = await processFile(file, password, true);
|
||||
downloadEncryptedFile(encryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error encrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
export async function decryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const decryptedChunks = await processFile(file, password, false);
|
||||
downloadDecryptedFile(decryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error decrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== File Processing =====
|
||||
async function processFile(file, password, isEncrypt) {
|
||||
const chunks = [];
|
||||
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
|
||||
let processedChunks = 0;
|
||||
|
||||
for (let start = 0; start < file.size; start += CHUNK_SIZE) {
|
||||
const chunk = file.slice(start, start + CHUNK_SIZE);
|
||||
const arrayBuffer = await chunk.arrayBuffer();
|
||||
const uint8Array = new Uint8Array(arrayBuffer);
|
||||
|
||||
const processedChunk = await processChunk(uint8Array, password, isEncrypt);
|
||||
chunks.push(processedChunk);
|
||||
|
||||
processedChunks++;
|
||||
updateProgress(processedChunks, totalChunks);
|
||||
}
|
||||
|
||||
return chunks;
|
||||
}
|
||||
|
||||
async function processChunk(data, password, isEncrypt) {
|
||||
const payload = {
|
||||
"encryption-type": "advanced",
|
||||
operation: isEncrypt ? "encrypt" : "decrypt",
|
||||
message: Array.from(data).join(','),
|
||||
password: password
|
||||
};
|
||||
|
||||
const response = await fetch("/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
return new Uint8Array(result.result.split(',').map(Number));
|
||||
}
|
||||
|
||||
// ===== File Download =====
|
||||
function downloadEncryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName + '.encrypted';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadDecryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName.replace('.encrypted', '');
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// ===== Progress Tracking =====
|
||||
function updateProgress(processed, total) {
|
||||
const progressBar = document.getElementById("file-progress");
|
||||
const progressText = document.getElementById("file-progress-text");
|
||||
|
||||
if (progressBar && progressText) {
|
||||
const percent = Math.round((processed / total) * 100);
|
||||
progressBar.style.width = percent + "%";
|
||||
progressText.textContent = `Processing: ${percent}%`;
|
||||
|
||||
if (processed === total) {
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = "0%";
|
||||
progressText.textContent = "";
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
/**
|
||||
* File operations module.
|
||||
* Handles file encryption and decryption operations.
|
||||
*/
|
||||
|
||||
// ===== Constants =====
|
||||
const CHUNK_SIZE = 1024 * 1024; // 1MB chunks
|
||||
|
||||
// ===== Public Interface =====
|
||||
export async function encryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const encryptedChunks = await processFile(file, password, true);
|
||||
downloadEncryptedFile(encryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error encrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
export async function decryptFile(fileInput, password) {
|
||||
const file = fileInput.files[0];
|
||||
if (!file) return;
|
||||
|
||||
try {
|
||||
const decryptedChunks = await processFile(file, password, false);
|
||||
downloadDecryptedFile(decryptedChunks, file.name);
|
||||
} catch (error) {
|
||||
alert("Error decrypting file: " + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== File Processing =====
|
||||
async function processFile(file, password, isEncrypt) {
|
||||
const chunks = [];
|
||||
const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
|
||||
let processedChunks = 0;
|
||||
|
||||
for (let start = 0; start < file.size; start += CHUNK_SIZE) {
|
||||
const chunk = file.slice(start, start + CHUNK_SIZE);
|
||||
const arrayBuffer = await chunk.arrayBuffer();
|
||||
const uint8Array = new Uint8Array(arrayBuffer);
|
||||
|
||||
const processedChunk = await processChunk(uint8Array, password, isEncrypt);
|
||||
chunks.push(processedChunk);
|
||||
|
||||
processedChunks++;
|
||||
updateProgress(processedChunks, totalChunks);
|
||||
}
|
||||
|
||||
return chunks;
|
||||
}
|
||||
|
||||
async function processChunk(data, password, isEncrypt) {
|
||||
const payload = {
|
||||
"encryption-type": "advanced",
|
||||
operation: isEncrypt ? "encrypt" : "decrypt",
|
||||
message: Array.from(data).join(','),
|
||||
password: password
|
||||
};
|
||||
|
||||
const response = await fetch("/", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
return new Uint8Array(result.result.split(',').map(Number));
|
||||
}
|
||||
|
||||
// ===== File Download =====
|
||||
function downloadEncryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName + '.encrypted';
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
function downloadDecryptedFile(chunks, originalName) {
|
||||
const blob = new Blob(chunks, { type: 'application/octet-stream' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = originalName.replace('.encrypted', '');
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
// ===== Progress Tracking =====
|
||||
function updateProgress(processed, total) {
|
||||
const progressBar = document.getElementById("file-progress");
|
||||
const progressText = document.getElementById("file-progress-text");
|
||||
|
||||
if (progressBar && progressText) {
|
||||
const percent = Math.round((processed / total) * 100);
|
||||
progressBar.style.width = percent + "%";
|
||||
progressText.textContent = `Processing: ${percent}%`;
|
||||
|
||||
if (processed === total) {
|
||||
setTimeout(() => {
|
||||
progressBar.style.width = "0%";
|
||||
progressText.textContent = "";
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,6 +21,13 @@ export function setupGame() {
|
||||
}
|
||||
|
||||
export function startPacman() {
|
||||
// Scroll to the Pacman section
|
||||
const pacmanSection = document.getElementById("pacman-section");
|
||||
if (pacmanSection) {
|
||||
pacmanSection.scrollIntoView({ behavior: 'smooth' });
|
||||
}
|
||||
|
||||
// Initialize game state
|
||||
initializeGame();
|
||||
setupGameLoop();
|
||||
}
|
||||
@@ -28,6 +35,11 @@ export function startPacman() {
|
||||
export function stopPacman() {
|
||||
clearInterval(gameInterval);
|
||||
if (ctx) ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
|
||||
// Restore scrolling
|
||||
document.body.style.overflow = '';
|
||||
document.removeEventListener('wheel', preventScroll);
|
||||
document.removeEventListener('touchmove', preventScroll);
|
||||
}
|
||||
|
||||
export function resetGame() {
|
||||
@@ -68,6 +80,55 @@ function initializeGame() {
|
||||
|
||||
pacman.dx = pacman.dy = 0;
|
||||
document.addEventListener("keydown", movePacman);
|
||||
|
||||
// Prevent scrolling
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.addEventListener('wheel', preventScroll, { passive: false });
|
||||
document.addEventListener('touchmove', preventScroll, { passive: false });
|
||||
|
||||
// Add touch controls
|
||||
let touchStartX = 0;
|
||||
let touchStartY = 0;
|
||||
|
||||
canvas.addEventListener('touchstart', (e) => {
|
||||
e.preventDefault();
|
||||
touchStartX = e.touches[0].clientX;
|
||||
touchStartY = e.touches[0].clientY;
|
||||
}, { passive: false });
|
||||
|
||||
canvas.addEventListener('touchmove', (e) => {
|
||||
e.preventDefault();
|
||||
}, { passive: false });
|
||||
|
||||
canvas.addEventListener('touchend', (e) => {
|
||||
e.preventDefault();
|
||||
const touchEndX = e.changedTouches[0].clientX;
|
||||
const touchEndY = e.changedTouches[0].clientY;
|
||||
|
||||
const dx = touchEndX - touchStartX;
|
||||
const dy = touchEndY - touchStartY;
|
||||
|
||||
// Determine swipe direction based on the larger movement
|
||||
if (Math.abs(dx) > Math.abs(dy)) {
|
||||
// Horizontal swipe
|
||||
if (dx > 0) {
|
||||
pacman.dx = PACMAN_SPEED;
|
||||
pacman.dy = 0;
|
||||
} else {
|
||||
pacman.dx = -PACMAN_SPEED;
|
||||
pacman.dy = 0;
|
||||
}
|
||||
} else {
|
||||
// Vertical swipe
|
||||
if (dy > 0) {
|
||||
pacman.dx = 0;
|
||||
pacman.dy = PACMAN_SPEED;
|
||||
} else {
|
||||
pacman.dx = 0;
|
||||
pacman.dy = -PACMAN_SPEED;
|
||||
}
|
||||
}
|
||||
}, { passive: false });
|
||||
}
|
||||
|
||||
function setupGameLoop() {
|
||||
@@ -283,6 +344,20 @@ function eatDots() {
|
||||
return true;
|
||||
});
|
||||
|
||||
// Check if all dots are eaten
|
||||
if (dots.length === 0) {
|
||||
// Trigger password generator for new random map
|
||||
const generateBtn = document.getElementById("generate-btn");
|
||||
if (generateBtn) {
|
||||
generateBtn.click();
|
||||
}
|
||||
|
||||
// Auto-restart the game after a short delay
|
||||
setTimeout(() => {
|
||||
resetGame();
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
ctx.fillStyle = "white";
|
||||
dots.forEach(d => {
|
||||
ctx.beginPath();
|
||||
@@ -294,3 +369,8 @@ function eatDots() {
|
||||
// ===== Global Functions =====
|
||||
window.resetGame = resetGame;
|
||||
window.exitGame = exitGame;
|
||||
|
||||
// Add scroll prevention function
|
||||
function preventScroll(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
+301
-272
@@ -1,272 +1,301 @@
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
// Set initial state of remove button to hidden
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
// ===== Event Listeners =====
|
||||
function initializeEventListeners() {
|
||||
const elements = {
|
||||
encryptionType: document.getElementById("encryption-type"),
|
||||
inputText: document.getElementById("input-text"),
|
||||
form: document.getElementById("crypto-form"),
|
||||
removeFileBtn: document.getElementById("remove-file-btn"),
|
||||
clearAllBtn: document.getElementById("clear-all-btn"),
|
||||
generateBtn: document.getElementById("generate-btn"),
|
||||
copyPasswordBtn: document.getElementById("copy-btn"),
|
||||
copyOutputBtn: document.getElementById("copy-output-btn"),
|
||||
toggleSwitch: document.getElementById("operation-toggle"),
|
||||
copyShareBtn: document.getElementById("copy-share-btn"),
|
||||
shareLink: document.getElementById("share-link")
|
||||
};
|
||||
|
||||
if (validateElements(elements)) {
|
||||
setupElementListeners(elements);
|
||||
}
|
||||
}
|
||||
|
||||
function validateElements(elements) {
|
||||
return elements.encryptionType && elements.inputText && elements.form &&
|
||||
elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn &&
|
||||
elements.copyPasswordBtn && elements.toggleSwitch;
|
||||
}
|
||||
|
||||
function setupElementListeners(elements) {
|
||||
elements.encryptionType.addEventListener("change", toggleEncryptionOptions);
|
||||
elements.inputText.addEventListener("input", handleInputChange);
|
||||
elements.form.addEventListener("submit", handleSubmit);
|
||||
elements.removeFileBtn.addEventListener("click", removeFile);
|
||||
elements.clearAllBtn.addEventListener("click", clearAll);
|
||||
elements.generateBtn.addEventListener("click", generateRandomPassword);
|
||||
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
elements.toggleSwitch.addEventListener("change", updateToggleLabels);
|
||||
|
||||
// Add file input change listener
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", () => {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupShareLinkListeners(elements);
|
||||
}
|
||||
|
||||
function setupShareLinkListeners(elements) {
|
||||
if (elements.copyShareBtn && elements.shareLink) {
|
||||
elements.copyShareBtn.addEventListener("click", () => {
|
||||
const linkText = elements.shareLink.textContent.trim();
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ===== UI State Management =====
|
||||
function toggleEncryptionOptions() {
|
||||
const type = document.getElementById("encryption-type").value.trim().toLowerCase();
|
||||
const passwordInputWrapper = document.getElementById("password-input");
|
||||
const fileSection = document.querySelector("#encoding-section #file-section");
|
||||
const isAdvanced = type.includes("advanced");
|
||||
|
||||
if (passwordInputWrapper) {
|
||||
if (isAdvanced) {
|
||||
passwordInputWrapper.classList.remove("hidden");
|
||||
} else {
|
||||
passwordInputWrapper.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
if (fileSection) {
|
||||
if (isAdvanced) {
|
||||
fileSection.classList.remove("hidden");
|
||||
} else {
|
||||
fileSection.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";
|
||||
}
|
||||
|
||||
// ===== Form Handling =====
|
||||
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);
|
||||
}
|
||||
|
||||
await handleTextOperation(encryptionType, operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(encryptionType, operation, 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);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Utility Functions =====
|
||||
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;
|
||||
// Check if we should start Pacman
|
||||
checkForPacman();
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId, feedbackId) {
|
||||
const el = document.getElementById(elementId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
|
||||
if (!el || !el.value) return;
|
||||
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300); // Wait for fade-out animation to complete
|
||||
}, 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 handleInputChange() {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
}
|
||||
|
||||
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() { }
|
||||
|
||||
|
||||
/**
|
||||
* UI management module.
|
||||
* Handles user interface interactions and form handling.
|
||||
*/
|
||||
|
||||
import { encryptFile, decryptFile } from './fileops.js';
|
||||
|
||||
// ===== UI Initialization =====
|
||||
export function setupUI() {
|
||||
// Set initial state of remove button to hidden
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = "none";
|
||||
}
|
||||
|
||||
initializeEventListeners();
|
||||
}
|
||||
|
||||
// ===== Event Listeners =====
|
||||
function initializeEventListeners() {
|
||||
const elements = {
|
||||
encryptionType: document.getElementById("encryption-type"),
|
||||
inputText: document.getElementById("input-text"),
|
||||
form: document.getElementById("crypto-form"),
|
||||
removeFileBtn: document.getElementById("remove-file-btn"),
|
||||
clearAllBtn: document.getElementById("clear-all-btn"),
|
||||
generateBtn: document.getElementById("generate-btn"),
|
||||
copyPasswordBtn: document.getElementById("copy-btn"),
|
||||
copyOutputBtn: document.getElementById("copy-output-btn"),
|
||||
toggleSwitch: document.getElementById("operation-toggle"),
|
||||
copyShareBtn: document.getElementById("copy-share-btn"),
|
||||
shareLink: document.getElementById("share-link")
|
||||
};
|
||||
|
||||
if (validateElements(elements)) {
|
||||
setupElementListeners(elements);
|
||||
}
|
||||
}
|
||||
|
||||
function validateElements(elements) {
|
||||
return elements.encryptionType && elements.inputText && elements.form &&
|
||||
elements.removeFileBtn && elements.clearAllBtn && elements.generateBtn &&
|
||||
elements.copyPasswordBtn && elements.toggleSwitch;
|
||||
}
|
||||
|
||||
function setupElementListeners(elements) {
|
||||
elements.encryptionType.addEventListener("change", toggleEncryptionOptions);
|
||||
elements.inputText.addEventListener("input", handleInputChange);
|
||||
elements.form.addEventListener("submit", handleSubmit);
|
||||
elements.removeFileBtn.addEventListener("click", removeFile);
|
||||
elements.clearAllBtn.addEventListener("click", clearAll);
|
||||
elements.generateBtn.addEventListener("click", generateRandomPassword);
|
||||
elements.copyPasswordBtn.addEventListener("click", () => copyToClipboard("generated-password", "password-copy-feedback"));
|
||||
elements.copyOutputBtn?.addEventListener("click", () => copyToClipboard("output-text", "output-copy-feedback"));
|
||||
elements.toggleSwitch.addEventListener("change", updateToggleLabels);
|
||||
|
||||
// Add file input change listener
|
||||
const fileInput = document.getElementById("file-input");
|
||||
if (fileInput) {
|
||||
fileInput.addEventListener("change", () => {
|
||||
const removeBtn = document.getElementById("remove-file-btn");
|
||||
if (removeBtn) {
|
||||
removeBtn.style.display = fileInput.files.length > 0 ? "inline-block" : "none";
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setupShareLinkListeners(elements);
|
||||
}
|
||||
|
||||
function setupShareLinkListeners(elements) {
|
||||
if (elements.copyShareBtn && elements.shareLink) {
|
||||
elements.copyShareBtn.addEventListener("click", () => {
|
||||
const linkText = elements.shareLink.textContent.trim();
|
||||
navigator.clipboard.writeText(linkText).then(() => {
|
||||
const feedback = document.getElementById("shared-link-feedback");
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// ===== UI State Management =====
|
||||
function toggleEncryptionOptions() {
|
||||
const type = document.getElementById("encryption-type").value.trim().toLowerCase();
|
||||
const passwordInputWrapper = document.getElementById("password-input");
|
||||
const fileSection = document.querySelector("#encoding-section #file-section");
|
||||
const isAdvanced = type.includes("advanced");
|
||||
|
||||
if (passwordInputWrapper) {
|
||||
if (isAdvanced) {
|
||||
passwordInputWrapper.classList.remove("hidden");
|
||||
} else {
|
||||
passwordInputWrapper.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
if (fileSection) {
|
||||
if (isAdvanced) {
|
||||
fileSection.classList.remove("hidden");
|
||||
} else {
|
||||
fileSection.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";
|
||||
}
|
||||
|
||||
// ===== Form Handling =====
|
||||
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);
|
||||
}
|
||||
|
||||
await handleTextOperation(encryptionType, operation, password);
|
||||
}
|
||||
|
||||
async function handleTextOperation(encryptionType, operation, 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);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== Utility Functions =====
|
||||
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;
|
||||
// Check if we should start Pacman
|
||||
checkForPacman();
|
||||
}
|
||||
}
|
||||
|
||||
function copyToClipboard(elementId, feedbackId) {
|
||||
const el = document.getElementById(elementId);
|
||||
const feedback = document.getElementById(feedbackId);
|
||||
|
||||
if (!el || !el.value) return;
|
||||
|
||||
// Create a temporary textarea element
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = el.value;
|
||||
textarea.style.position = 'fixed';
|
||||
textarea.style.opacity = '0';
|
||||
document.body.appendChild(textarea);
|
||||
|
||||
// Select and copy the text
|
||||
textarea.select();
|
||||
textarea.setSelectionRange(0, 99999); // For mobile devices
|
||||
|
||||
try {
|
||||
// Try using the modern clipboard API first
|
||||
navigator.clipboard.writeText(el.value).then(() => {
|
||||
showFeedback(feedback);
|
||||
}).catch(() => {
|
||||
// Fallback to execCommand for older browsers
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
});
|
||||
} catch (err) {
|
||||
// Final fallback
|
||||
document.execCommand('copy');
|
||||
showFeedback(feedback);
|
||||
}
|
||||
|
||||
// Clean up
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
|
||||
function showFeedback(feedback) {
|
||||
if (feedback) {
|
||||
feedback.style.display = "block";
|
||||
feedback.classList.add("show");
|
||||
setTimeout(() => {
|
||||
feedback.classList.remove("show");
|
||||
setTimeout(() => {
|
||||
feedback.style.display = "none";
|
||||
}, 300);
|
||||
}, 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 handleInputChange() {
|
||||
toggleInputMode();
|
||||
checkForPacman();
|
||||
}
|
||||
|
||||
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() { }
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user