Okay, let's set up the structure and initial code for this application simulator. MC Converter Sim

Loading Application...

Select Mode

Microsoft E-mail:

Password:

Confirm Password:

Game Nickname:

Add Skin (Search by Original Nickname):

Profile editing features (photo, name) are under construction.

Idioma:

Tema:

More settings (e.g., theme) are under construction.

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@300;400;700&display=swap'); :root { --primary-color: #00aaff; --secondary-color: #00eaff; --accent-color: #ff00ff; --background-color: #0a0a1a; --surface-color: #1a1a2a; --text-color: #e0e0ff; --text-muted-color: #a0a0cc; --success-color: #00ffaa; --error-color: #ff4466; --border-color: #333355; --font-main: 'Roboto', sans-serif; --font-display: 'Orbitron', sans-serif; --shadow-sm: 0 2px 5px rgba(0, 200, 255, 0.1); --shadow-md: 0 5px 15px rgba(0, 200, 255, 0.2); --shadow-lg: 0 10px 30px rgba(0, 200, 255, 0.3); --border-radius: 8px; } [data-theme="light"] { --primary-color: #007bff; --secondary-color: #17a2b8; --accent-color: #e83e8c; --background-color: #f4f7fc; --surface-color: #ffffff; --text-color: #212529; --text-muted-color: #6c757d; --success-color: #28a745; --error-color: #dc3545; --border-color: #dee2e6; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.1); --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1); } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font-main); background-color: var(--background-color); color: var(--text-color); overflow: hidden; font-size: 16px; } #app-container { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; /* Prevents scrollbars during transitions */ } .page { display: none; /* Hidden by default */ flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 40px; position: absolute; /* Needed for transitions */ top: 0; left: 0; background-color: var(--background-color); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; opacity: 0; transform: scale(0.95); } .page.active { display: flex; opacity: 1; transform: scale(1); z-index: 1; /* Ensure active page is on top */ } /* Loading Screen */ #loading-screen .loading-content { text-align: center; } .spinner { border: 6px solid var(--surface-color); border-top: 6px solid var(--secondary-color); border-radius: 50%; width: 60px; height: 60px; animation: spin 1.5s linear infinite; margin: 0 auto 20px auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .progress-bar-container { width: 80%; max-width: 400px; height: 15px; background-color: var(--surface-color); border-radius: 10px; margin: 20px auto; overflow: hidden; border: 1px solid var(--border-color); } .progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); border-radius: 10px; transition: width 0.5s ease-out; } /* Buttons */ .btn { padding: 12px 25px; border: none; border-radius: var(--border-radius); font-size: 1rem; font-weight: bold; cursor: pointer; transition: all 0.3s ease; margin: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--text-color); box-shadow: var(--shadow-sm); } .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); box-shadow: none; } .btn-primary { background-color: var(--primary-color); color: #fff; } .btn-primary:hover { background-color: color-mix(in srgb, var(--primary-color) 90%, black); } .btn-secondary { background-color: var(--surface-color); color: var(--secondary-color); border: 1px solid var(--secondary-color); } .btn-secondary:hover { background-color: var(--secondary-color); color: var(--background-color); } .btn-action { background: linear-gradient(45deg, var(--primary-color), var(--accent-color)); color: #fff; padding: 15px 35px; font-size: 1.1rem; } .btn-action:hover { background: linear-gradient(45deg, color-mix(in srgb, var(--primary-color) 90%, black), color-mix(in srgb, var(--accent-color) 90%, black)); } .btn-success { background-color: var(--success-color); color: var(--background-color); } .btn-danger { background-color: var(--error-color); color: #fff; } .btn-sm { padding: 5px 10px; font-size: 0.8rem; } .icon-btn { background: none; border: none; color: var(--text-muted-color); font-size: 1.5rem; cursor: pointer; padding: 5px; transition: color 0.3s ease; } .icon-btn:hover { color: var(--secondary-color); } /* Login & Mode Select Screens */ .login-options, .mode-options { display: flex; flex-direction: column; align-items: center; gap: 15px; margin-top: 30px; } @media (min-width: 600px) { .login-options, .mode-options { flex-direction: row; } } /* Titles */ h1 { font-family: var(--font-display); color: var(--secondary-color); margin-bottom: 30px; text-align: center; font-size: 2.5rem; text-shadow: 0 0 10px var(--secondary-color); } /* Normal Mode Screen */ #normal-mode-screen { justify-content: flex-start; /* Align content to top */ } .app-header { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; background-color: color-mix(in srgb, var(--surface-color) 80%, transparent); backdrop-filter: blur(5px); border-bottom: 1px solid var(--border-color); position: sticky; /* Keep header visible if content scrolls */ top: 0; z-index: 10; } .app-header h1 { font-size: 1.5rem; margin-bottom: 0; text-shadow: none; } .account-menu { position: relative; } .dropdown-menu { display: none; position: absolute; right: 0; top: 100%; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); box-shadow: var(--shadow-md); min-width: 200px; z-index: 11; overflow: hidden; /* Ensures border-radius applies to children */ } .account-menu.open .dropdown-menu { display: block; } .dropdown-menu button { display: flex; /* Use flexbox */ align-items: center; /* Vertically align icon and text */ gap: 10px; /* Space between icon and text */ width: 100%; padding: 12px 15px; background: none; border: none; color: var(--text-color); text-align: left; cursor: pointer; font-size: 0.95rem; } .dropdown-menu button:hover { background-color: var(--primary-color); color: #fff; } .dropdown-menu button i { width: 1.2em; /* Give icon fixed width */ text-align: center; color: var(--secondary-color); /* Icon color */ } .dropdown-menu button:hover i { color: #fff; /* Icon color on hover */ } .app-content { flex-grow: 1; width: 100%; padding: 30px; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Center content vertically */ overflow-y: auto; /* Allow scrolling if content overflows */ } /* Converter Form Screen */ #converter-form-screen { justify-content: flex-start; } .form-content { justify-content: flex-start; /* Align form items to top */ max-width: 600px; /* Limit form width */ margin: 0 auto; /* Center form container */ } .form-group { margin-bottom: 20px; width: 100%; } .form-group label { display: block; margin-bottom: 8px; color: var(--text-muted-color); font-weight: bold; } .form-group input[type="email"], .form-group input[type="password"], .form-group input[type="text"], .form-group select { width: 100%; padding: 12px; background-color: var(--surface-color); border: 1px solid var(--border-color); border-radius: var(--border-radius); color: var(--text-color); font-size: 1rem; transition: border-color 0.3s ease, box-shadow 0.3s ease; } .form-group input:focus, .form-group select:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 30%, transparent); } .skin-group .skin-search-container { display: flex; gap: 10px; } .skin-group input[type="text"] { flex-grow: 1; } .skin-preview-container { margin-top: 15px; display: flex; align-items: center; gap: 15px; min-height: 64px; /* Reserve space for skin */ background-color: var(--surface-color); padding: 10px; border-radius: var(--border-radius); border: 1px solid var(--border-color); } #skin-preview { width: 64px; height: 64px; border-radius: 4px; object-fit: contain; background-color: var(--background-color); /* Background for transparency */ border: 1px solid var(--border-color); } #skin-search-status { flex-grow: 1; color: var(--text-muted-color); font-style: italic; } /* Settings & Profile Screens */ #settings-screen .app-content, #profile-screen .app-content { align-items: flex-start; /* Align content to left */ justify-content: flex-start; max-width: 700px; margin: 0 auto; } /* Notification Area */ #notification-area { position: fixed; top: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .notification { padding: 15px 20px; border-radius: var(--border-radius); color: #fff; font-weight: bold; display: flex; align-items: center; gap: 10px; box-shadow: var(--shadow-md); opacity: 0; transform: translateX(100%); transition: opacity 0.5s ease, transform 0.5s ease; } .notification.show { opacity: 1; transform: translateX(0); } .notification.success { background-color: var(--success-color); color: var(--background-color); } .notification.error { background-color: var(--error-color); } /* Edit Mode */ .edit-mode .draggable { cursor: move; border: 2px dashed var(--accent-color); position: relative; /* Or absolute, depending on container */ user-select: none; /* Prevent text selection during drag */ z-index: 5; /* Ensure draggable items are above static ones */ } .edit-mode .draggable.dragging { opacity: 0.6; border-style: solid; z-index: 100; /* Bring to front while dragging */ } .edit-controls { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: color-mix(in srgb, var(--surface-color) 90%, transparent); padding: 10px 15px; border-radius: var(--border-radius); box-shadow: var(--shadow-lg); z-index: 999; display: flex; gap: 15px; } // Application State Management export const state = { currentPage: 'loading', // loading, login, mode-select, normal, converter-form, profile, settings isLoggedIn: false, userType: null, // 'google', 'guest' isEditMode: false, language: 'pt', // Default language theme: 'dark', // Default theme ('dark', 'light') selectedSkin: null, // URL of the selected skin // Store original positions for cancellation in edit mode originalPositions: new Map(), // Store current positions (loaded from storage or default) elementPositions: new Map() }; export function setState(newState) { Object.assign(state, newState); // Potentially trigger UI updates or save state here if needed immediately console.log("State updated:", state); } // LocalStorage Interaction const POSITIONS_KEY = 'mcConverterSim_elementPositions'; const SETTINGS_KEY = 'mcConverterSim_settings'; export function saveElementPositions(positionsMap) { try { const positionsArray = Array.from(positionsMap.entries()); localStorage.setItem(POSITIONS_KEY, JSON.stringify(positionsArray)); } catch (error) { console.error("Error saving positions to localStorage:", error); } } export function loadElementPositions() { try { const storedPositions = localStorage.getItem(POSITIONS_KEY); if (storedPositions) { const positionsArray = JSON.parse(storedPositions); return new Map(positionsArray); } } catch (error) { console.error("Error loading positions from localStorage:", error); } return new Map(); // Return empty map if nothing stored or error } export function saveSettings(settings) { try { localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings)); } catch (error) { console.error("Error saving settings to localStorage:", error); } } export function loadSettings() { try { const storedSettings = localStorage.getItem(SETTINGS_KEY); if (storedSettings) { return JSON.parse(storedSettings); } } catch (error) { console.error("Error loading settings from localStorage:", error); } return null; // Return null if nothing stored or error } // Internationalization const translations = { en: { loading: "Loading Application...", loginTitle: "Welcome", loginGoogle: "Login with Google", loginGuest: "Enter as Guest", modeSelectTitle: "Select Mode", modeNormal: "Normal Mode", modeEdit: "Edit Mode", save: "Save", cancel: "Cancel", converterTitle: "Convert Unofficial Minecraft to Official", convertButton: "Convert", profile: "Change Profile", settings: "Settings", logout: "Logout", conversionFormTitle: "Conversion Details", emailLabel: "Microsoft E-mail:", passwordLabel: "Password:", confirmPasswordLabel: "Confirm Password:", nicknameLabel: "Game Nickname:", skinLabel: "Add Skin (Search by Original Nickname):", ok: "OK", convertConfirmButton: "Convert Now", profileTitle: "Change Profile", profileWIP: "Profile editing features (photo, name) are under construction.", settingsTitle: "Settings", languageLabel: "Language:", themeLabel: "Theme:", themeDark: "Dark", themeLight: "Light", settingsWIP: "More settings (e.g., theme) are under construction.", // Notifications errorFillAllFields: "Please fill all required fields.", errorPasswordMismatch: "Passwords do not match.", errorSkinSearch: "Could not find skin for username:", errorSkinFetch: "Error fetching skin.", successConversion: "Account 'conversion' simulated successfully!", successLayoutSaved: "Layout saved successfully!", infoLayoutCancelled: "Layout changes cancelled.", infoGuestLogin: "Logged in as Guest.", infoGoogleLogin: "Logged in with Google (Simulated).", infoLoggedOut: "Successfully logged out.", infoLanguageChanged: "Language updated.", infoThemeChanged: "Theme updated.", statusSearchingSkin: "Searching...", statusSkinFound: "Skin found!", statusNoSkinSelected: "No skin selected.", }, pt: { loading: "Carregando Aplicação...", loginTitle: "Bem-vindo", loginGoogle: "Login com Google", loginGuest: "Entrar como Convidado", modeSelectTitle: "Selecionar Modo", modeNormal: "Modo Normal", modeEdit: "Modo Edição", save: "Salvar", cancel: "Cancelar", converterTitle: "Converter Minecraft Pirata para Original", convertButton: "Converter", profile: "Alterar Perfil", settings: "Configurações", logout: "Sair", conversionFormTitle: "Detalhes da Conversão", emailLabel: "E-mail da Microsoft:", passwordLabel: "Senha:", confirmPasswordLabel: "Confirmar Senha:", nicknameLabel: "Nick do Jogo:", skinLabel: "Adicionar Skin (Pesquisar por Nick Original):", ok: "OK", convertConfirmButton: "Converter Agora", profileTitle: "Alterar Perfil", profileWIP: "Recursos de edição de perfil (foto, nome) estão em construção.", settingsTitle: "Configurações", languageLabel: "Idioma:", themeLabel: "Tema:", themeDark: "Escuro", themeLight: "Claro", settingsWIP: "Mais configurações (ex: tema) estão em construção.", // Notifications errorFillAllFields: "Por favor, preencha todos os campos obrigatórios.", errorPasswordMismatch: "As senhas não coincidem.", errorSkinSearch: "Não foi possível encontrar a skin para o nick:", errorSkinFetch: "Erro ao buscar skin.", successConversion: "Simulação de 'conversão' de conta realizada com sucesso!", successLayoutSaved: "Layout salvo com sucesso!", infoLayoutCancelled: "Alterações no layout canceladas.", infoGuestLogin: "Login como Convidado realizado.", infoGoogleLogin: "Login com Google realizado (Simulado).", infoLoggedOut: "Logout realizado com sucesso.", infoLanguageChanged: "Idioma atualizado.", infoThemeChanged: "Tema atualizado.", statusSearchingSkin: "Procurando...", statusSkinFound: "Skin encontrada!", statusNoSkinSelected: "Nenhuma skin selecionada.", } }; let currentLanguage = 'pt'; // Default export function setLanguage(lang) { if (translations[lang]) { currentLanguage = lang; translatePage(); return true; } return false; } export function getCurrentLanguage() { return currentLanguage; } export function translate(key, replacements = {}) { let translation = translations[currentLanguage]?.[key] || translations.en[key] || key; // Replace placeholders like {username} Object.keys(replacements).forEach(placeholder => { const regex = new RegExp(`{${placeholder}}`, 'g'); translation = translation.replace(regex, replacements[placeholder]); }); return translation; } export function translatePage() { document.querySelectorAll('[data-translate]').forEach(element => { const key = element.getAttribute('data-translate'); // Preserve child nodes (like icons) if they exist, only change text content const textNode = Array.from(element.childNodes).find(node => node.nodeType === Node.TEXT_NODE && node.textContent.trim()); if (textNode) { textNode.textContent = ` ${translate(key)} `; // Add spaces for safety with icons } else if (element.tagName === 'INPUT' || element.tagName === 'TEXTAREA') { if(element.placeholder) element.placeholder = translate(key); } else if (element.value && (element.tagName === 'BUTTON' || element.tagName === 'OPTION')) { // Don't translate values, maybe text content if needed and not handled by textNode } else { element.textContent = translate(key); // Fallback for simple elements } }); // Update dynamic elements like notifications if needed // Update select dropdowns based on language const langSelect = document.getElementById('language-select'); if (langSelect) langSelect.value = currentLanguage; // Update theme dropdown translations const themeSelect = document.getElementById('theme-select'); if (themeSelect) { themeSelect.querySelector('option[value="dark"]').textContent = translate('themeDark'); themeSelect.querySelector('option[value="light"]').textContent = translate('themeLight'); } } import { translate } from './i18n.js'; import { state } from './state.js'; const notificationArea = document.getElementById('notification-area'); let notificationTimeout; export function showNotification(messageKey, type = 'info', duration = 3000, replacements = {}) { // Clear existing timeout if a new notification comes quickly if (notificationTimeout) { clearTimeout(notificationTimeout); } const notification = document.createElement('div'); notification.classList.add('notification', type); // type can be 'success', 'error', 'info' const icon = document.createElement('i'); icon.classList.add('fas'); if (type === 'success') icon.classList.add('fa-check-circle'); else if (type === 'error') icon.classList.add('fa-exclamation-triangle'); else icon.classList.add('fa-info-circle'); const text = document.createElement('span'); text.textContent = translate(messageKey, replacements); notification.appendChild(icon); notification.appendChild(text); notificationArea.prepend(notification); // Add new notification at the top // Trigger animation requestAnimationFrame(() => { notification.classList.add('show'); }); // Auto-remove notification notificationTimeout = setTimeout(() => { notification.classList.remove('show'); // Remove from DOM after transition ends notification.addEventListener('transitionend', () => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, { once: true }); }, duration); } export function updateAccountMenu() { const accountMenu = document.querySelector('.account-menu'); if (state.isLoggedIn) { accountMenu.style.display = 'block'; } else { accountMenu.style.display = 'none'; // Ensure dropdown is closed if logging out accountMenu.classList.remove('open'); } } export function toggleAccountDropdown() { const accountMenu = document.querySelector('.account-menu'); accountMenu.classList.toggle('open'); } // Close dropdown if clicking outside document.addEventListener('click', (event) => { const accountMenu = document.querySelector('.account-menu'); const settingsBtn = document.getElementById('account-settings-btn'); if (accountMenu && settingsBtn && !accountMenu.contains(event.target) && event.target !== settingsBtn) { accountMenu.classList.remove('open'); } }); export function setTheme(theme) { document.documentElement.setAttribute('data-theme', theme); const themeSelect = document.getElementById('theme-select'); if (themeSelect) themeSelect.value = theme; } import { state, setState } from './state.js'; import { translatePage } from './i18n.js'; import { updateAccountMenu } from './ui.js'; import { disableEditMode, enableEditMode } from './pages/edit-mode.js'; // Import edit mode functions const pages = document.querySelectorAll('.page'); export function navigateTo(pageId) { console.log(`Navigating to: ${pageId}`); pages.forEach(page => { if (page.id === `${pageId}-screen`) { page.classList.add('active'); } else { page.classList.remove('active'); } }); // Special handling for edit mode persistence/activation if (pageId === 'normal' && state.isEditMode) { enableEditMode(); // Re-enable if returning to normal mode while edit mode is active } else if (pageId !== 'normal' && state.isEditMode) { // If navigating away from normal mode, visually disable edit mode temporarily // but keep the state.isEditMode true if needed. // Or decide to fully disable edit mode when leaving the normal screen. // For now, let's just visually disable it on the normal screen itself. const normalScreen = document.getElementById('normal-mode-screen'); if (normalScreen) normalScreen.classList.remove('edit-mode'); const editControls = document.querySelector('.edit-controls'); if (editControls) editControls.style.display = 'none'; } setState({ currentPage: pageId }); updateAccountMenu(); // Show/hide account menu based on login status and page translatePage(); // Ensure new page is translated } import { translate } from './i18n.js'; // Uses Minotar API (https://minotar.net/) const SKIN_API_BASE = 'https://minotar.net/avatar/'; const SKIN_FETCH_TIMEOUT = 5000; // 5 seconds timeout export async function fetchMinecraftSkin(username) { if (!username) { return { success: false, error: 'Username is required.' }; } const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), SKIN_FETCH_TIMEOUT); try { const response = await fetch(`${SKIN_API_BASE}${encodeURIComponent(username)}/64`, { signal: controller.signal, cache: 'no-cache' // Avoid caching issues if user searches same name quickly }); clearTimeout(timeoutId); // Clear timeout if fetch completes if (!response.ok) { // Minotar might return 200 OK with a default skin even for invalid users, // but we check for specific errors if possible. Here, non-ok status is an error. // A more robust check might involve fetching profile data first if an API exists. console.error(`Skin API Error: ${response.status} ${response.statusText}`); // Check if it's the default Steve/Alex skin - indicating user not found // This requires knowing the default skin URL or analyzing the image data, which is complex. // For simplicity, we'll assume non-OK means not found or error. return { success: false, error: translate('errorSkinSearch', { username }) }; } // Get image data as Blob to ensure it's a valid image const blob = await response.blob(); if (!blob.type.startsWith('image/')) { console.error("Skin API did not return a valid image."); return { success: false, error: translate('errorSkinSearch', { username }) }; } // Create an object URL for the image blob const skinUrl = URL.createObjectURL(blob); return { success: true, skinUrl: skinUrl }; } catch (error) { clearTimeout(timeoutId); if (error.name === 'AbortError') { console.error("Skin API request timed out."); return { success: false, error: translate('errorSkinFetch') + " (Timeout)" }; } else { console.error("Error fetching Minecraft skin:", error); return { success: false, error: translate('errorSkinFetch') }; } } } import { navigateTo } from '../router.js'; export function initLoadingScreen() { const progressBar = document.querySelector('#loading-screen .progress-bar'); const loadingDuration = 10000; // 10 seconds const intervalTime = 50; // Update every 50ms let elapsedTime = 0; progressBar.style.width = '0%'; // Ensure it starts at 0 const intervalId = setInterval(() => { elapsedTime += intervalTime; const progress = Math.min(100, (elapsedTime / loadingDuration) * 100); progressBar.style.width = `${progress}%`; if (elapsedTime >= loadingDuration) { clearInterval(intervalId); // Add a small delay before navigating for smoother transition setTimeout(() => { navigateTo('login'); }, 300); } }, intervalTime); } import { navigateTo } from '../router.js'; import { setState } from '../state.js'; import { showNotification } from '../ui.js'; export function initLoginScreen() { const googleLoginBtn = document.getElementById('google-login-btn'); const guestLoginBtn = document.getElementById('guest-login-btn'); googleLoginBtn.addEventListener('click', () => { // Simulate Google Login console.log("Simulating Google Login..."); // In a real app, this would trigger the OAuth flow. // For simulation, we just proceed. setState({ isLoggedIn: true, userType: 'google' }); showNotification('infoGoogleLogin', 'success'); // Optionally open a google link as placeholder: window.open('https://accounts.google.com/', '_blank'); navigateTo('mode-select'); }); guestLoginBtn.addEventListener('click', () => { console.log("Logging in as Guest..."); setState({ isLoggedIn: true, userType: 'guest' }); showNotification('infoGuestLogin', 'info'); navigateTo('mode-select'); }); } import { navigateTo } from '../router.js'; import { state, setState } from '../state.js'; import { enableEditMode, disableEditMode, saveLayout, cancelLayout } from './edit-mode.js'; export function initModeSelectScreen() { const normalModeBtn = document.getElementById('normal-mode-btn'); const editModeBtn = document.getElementById('edit-mode-btn'); const saveLayoutBtn = document.getElementById('save-layout-btn'); const cancelLayoutBtn = document.getElementById('cancel-layout-btn'); const editControls = document.querySelector('.edit-controls'); normalModeBtn.addEventListener('click', () => { if (state.isEditMode) { disableEditMode(); // Ensure edit mode is off if explicitly choosing normal } navigateTo('normal'); }); editModeBtn.addEventListener('click', () => { setState({ isEditMode: true }); navigateTo('normal'); // Edit mode applies to the normal screen // enableEditMode will be called by the router when navigating to 'normal' }); saveLayoutBtn.addEventListener('click', saveLayout); cancelLayoutBtn.addEventListener('click', cancelLayout); // Show/hide controls based on state (handled by enable/disableEditMode) } import { state, setState } from '../state.js'; import { saveElementPositions, loadElementPositions } from '../storage.js'; import { showNotification } from '../ui.js'; import { navigateTo } from '../router.js'; // Import navigateTo let draggedElement = null; let offsetX, offsetY; function makeDraggable(element) { element.classList.add('draggable'); element.setAttribute('draggable', 'true'); // HTML draggable attribute element.addEventListener('dragstart', handleDragStart); element.addEventListener('dragend', handleDragEnd); } function makeUndraggable(element) { element.classList.remove('draggable'); element.removeAttribute('draggable'); element.removeEventListener('dragstart', handleDragStart); element.removeEventListener('dragend', handleDragEnd); // Reset inline styles potentially added during drag? Or rely on save/cancel. // element.style.position = ''; // element.style.left = ''; // element.style.top = ''; } function handleDragStart(e) { draggedElement = e.target; // Calculate offset from the top-left corner of the element const rect = draggedElement.getBoundingClientRect(); offsetX = e.clientX - rect.left; offsetY = e.clientY - rect.top; e.dataTransfer.effectAllowed = 'move'; // Optional: Set a ghost image (can be tricky) // e.dataTransfer.setDragImage(draggedElement, offsetX, offsetY); setTimeout(() => { draggedElement.classList.add('dragging'); // Style while dragging }, 0); // Show save/cancel buttons when dragging starts const editControls = document.querySelector('.edit-controls'); if (editControls) editControls.style.display = 'flex'; } function handleDragEnd(e) { if (!draggedElement) return; draggedElement.classList.remove('dragging'); // Calculate new position relative to the parent container (assuming parent is positioned) // This needs refinement based on the actual container structure. // For simplicity, let's use absolute positioning within the page for now. // We need a container that establishes the coordinate system. Let's use app-content. const contentArea = draggedElement.closest('.app-content') || document.body; // Fallback to body const contentRect = contentArea.getBoundingClientRect(); // Calculate position relative to the content area's top-left let newX = e.clientX - contentRect.left - offsetX; let newY = e.clientY - contentRect.top - offsetY; // Ensure element stays within bounds (optional, basic example) newX = Math.max(0, Math.min(newX, contentRect.width - draggedElement.offsetWidth)); newY = Math.max(0, Math.min(newY, contentRect.height - draggedElement.offsetHeight)); // Apply new position using inline styles draggedElement.style.position = 'absolute'; // Ensure positioning context draggedElement.style.left = `${newX}px`; draggedElement.style.top = `${newY}px`; // Store the new position temporarily in the state's current positions map const elementId = draggedElement.id || draggedElement.dataset.dragId; // Need a unique ID if (elementId) { state.elementPositions.set(elementId, { left: `${newX}px`, top: `${newY}px` }); } else { console.warn("Draggable element needs a unique id or data-drag-id attribute."); } draggedElement = null; } // We need a drop zone container to calculate positions correctly. // Let's assume the '.app-content' area is the drop zone for now. function setupDropZone() { const dropZone = document.querySelector('#normal-mode-screen .app-content'); if (!dropZone) { console.error("Drop zone (.app-content) not found in normal mode screen."); return; } // Prevent default to allow drop dropZone.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; }); // Handle the drop (though dragend might be sufficient for position update) dropZone.addEventListener('drop', (e) => { e.preventDefault(); // Position update is handled in dragend }); // Ensure the drop zone has a positioning context if children use absolute if (getComputedStyle(dropZone).position === 'static') { dropZone.style.position = 'relative'; } } export function enableEditMode() { console.log("Enabling Edit Mode"); const normalScreen = document.getElementById('normal-mode-screen'); if (!normalScreen) return; normalScreen.classList.add('edit-mode'); setState({ isEditMode: true }); // Make elements draggable and store original positions state.originalPositions.clear(); // Clear previous originals normalScreen.querySelectorAll('.draggable').forEach(el => { const elementId = el.id || el.dataset.dragId; if (!elementId) { console.warn("Element needs id or data-drag-id to be draggable:", el); // Assign a temporary ID if needed? Risky. Best to require IDs. // el.dataset.dragId = `draggable-${Math.random().toString(36).substr(2, 9)}`; // elementId = el.dataset.dragId; return; // Skip elements without ID } // Store original style if not already stored if (!state.originalPositions.has(elementId)) { state.originalPositions.set(elementId, { position: el.style.position, left: el.style.left, top: el.style.top, // Store computed style if inline is not set? More complex. }); } // Apply saved positions if they exist const savedPos = state.elementPositions.get(elementId); if (savedPos) { el.style.position = 'absolute'; // Assume absolute positioning for saved layouts el.style.left = savedPos.left; el.style.top = savedPos.top; } else { // If no saved position, ensure it's relatively positioned for initial drag if (getComputedStyle(el).position === 'static') { // el.style.position = 'relative'; // Or let CSS handle initial layout } } makeDraggable(el); }); setupDropZone(); // Setup the drop zone listeners // Show Save/Cancel buttons (initially hidden until drag starts) // const editControls = document.querySelector('.edit-controls'); // if (editControls) editControls.style.display = 'flex'; // Show immediately or wait for drag? Let's wait. } export function disableEditMode(revert = false) { console.log("Disabling Edit Mode", revert ? "(Reverting)" : ""); const normalScreen = document.getElementById('normal-mode-screen'); if (!normalScreen) return; normalScreen.classList.remove('edit-mode'); setState({ isEditMode: false }); // Make elements undraggable normalScreen.querySelectorAll('.draggable').forEach(el => { makeUndraggable(el); const elementId = el.id || el.dataset.dragId; if (revert && elementId && state.originalPositions.has(elementId)) { // Revert to original positions stored when edit mode was enabled const originalStyle = state.originalPositions.get(elementId); el.style.position = originalStyle.position || ''; // Revert or clear el.style.left = originalStyle.left || ''; el.style.top = originalStyle.top || ''; } // If not reverting, leave elements at their current (potentially saved) positions }); // Hide Save/Cancel buttons const editControls = document.querySelector('.edit-controls'); if (editControls) editControls.style.display = 'none'; // Clear original positions map after disabling/reverting // state.originalPositions.clear(); // Keep originals until explicitly cancelled? Maybe not. Clear on disable. } export function saveLayout() { console.log("Saving layout..."); // Persist the current positions from state.elementPositions saveElementPositions(state.elementPositions); showNotification('successLayoutSaved', 'success'); disableEditMode(false); // Disable edit mode but keep current positions // Optionally navigate away or stay on the page } export function cancelLayout() { console.log("Cancelling layout changes..."); // Revert positions to the stored originals disableEditMode(true); // Disable edit mode and revert positions // Clear the temporary current positions map as changes are discarded state.elementPositions = loadElementPositions(); // Reload last saved state showNotification('infoLayoutCancelled', 'info'); // Navigate back to mode select or stay? Let's stay for now. // navigateTo('mode-select'); } // Load positions when the app starts or when entering normal mode export function loadAndApplyPositions() { state.elementPositions = loadElementPositions(); state.elementPositions.forEach((pos, id) => { const el = document.getElementById(id) || document.querySelector(`[data-drag-id="${id}"]`); if (el) { el.style.position = 'absolute'; // Assume absolute for saved positions el.style.left = pos.left; el.style.top = pos.top; } }); } import { navigateTo } from '../router.js'; import { state, setState } from '../state.js'; import { showNotification, toggleAccountDropdown } from '../ui.js'; import { loadAndApplyPositions } from './edit-mode.js'; // Import position loading export function initNormalModeScreen() { const converterStartBtn = document.getElementById('converter-start-btn'); const accountSettingsBtn = document.getElementById('account-settings-btn'); const profileBtn = document.getElementById('profile-btn'); const settingsBtn = document.getElementById('settings-btn'); const logoutBtn = document.getElementById('logout-btn'); // Load and apply element positions when entering this screen loadAndApplyPositions(); converterStartBtn.addEventListener('click', () => { navigateTo('converter-form'); }); accountSettingsBtn.addEventListener('click', (e) => { e.stopPropagation(); // Prevent document click listener from closing immediately toggleAccountDropdown(); }); profileBtn.addEventListener('click', () => { navigateTo('profile'); toggleAccountDropdown(); // Close dropdown }); settingsBtn.addEventListener('click', () => { navigateTo('settings'); toggleAccountDropdown(); // Close dropdown }); logoutBtn.addEventListener('click', () => { console.log("Logging out..."); setState({ isLoggedIn: false, userType: null, isEditMode: false }); // Reset state showNotification('infoLoggedOut', 'info'); navigateTo('login'); toggleAccountDropdown(); // Close dropdown }); // Add IDs to draggable elements if they don't have them const headerTitle = document.querySelector('#normal-mode-screen .app-header h1'); if (headerTitle && !headerTitle.id) headerTitle.id = 'header-title-draggable'; if (converterStartBtn && !converterStartBtn.id) converterStartBtn.id = 'converter-start-btn-draggable'; // Already has ID } import { navigateTo } from '../router.js'; import { showNotification } from '../ui.js'; import { fetchMinecraftSkin } from '../api.js'; import { state, setState } from '../state.js'; import { translate } from '../i18n.js'; export function initConverterFormScreen() { const backBtn = document.getElementById('back-to-normal-btn'); const form = document.querySelector('#converter-form-screen form, #converter-form-screen'); // Adjust selector if form tag is added const emailInput = document.getElementById('email'); const passwordInput = document.getElementById('password'); const confirmPasswordInput = document.getElementById('confirm-password'); const nicknameInput = document.getElementById('nickname'); const skinSearchInput = document.getElementById('skin-search'); const searchSkinBtn = document.getElementById('search-skin-btn'); const skinPreview = document.getElementById('skin-preview'); const skinSearchStatus = document.getElementById('skin-search-status'); const confirmSkinBtn = document.getElementById('confirm-skin-btn'); const submitBtn = document.getElementById('submit-conversion-btn'); backBtn.addEventListener('click', () => { navigateTo('normal'); }); searchSkinBtn.addEventListener('click', async () => { const username = skinSearchInput.value.trim(); if (!username) return; skinSearchStatus.textContent = translate('statusSearchingSkin'); skinPreview.style.display = 'none'; confirmSkinBtn.style.display = 'none'; URL.revokeObjectURL(skinPreview.src); // Revoke previous object URL if any skinPreview.src = ''; setState({ selectedSkin: null }); const result = await fetchMinecraftSkin(username); if (result.success) { skinPreview.src = result.skinUrl; skinPreview.style.display = 'block'; skinSearchStatus.textContent = translate('statusSkinFound'); confirmSkinBtn.style.display = 'inline-block'; // Store URL temporarily until confirmed confirmSkinBtn.dataset.skinUrl = result.skinUrl; } else { skinSearchStatus.textContent = result.error || translate('errorSkinFetch'); showNotification('errorSkinSearch', 'error', 5000, { username }); } }); confirmSkinBtn.addEventListener('click', () => { const confirmedUrl = confirmSkinBtn.dataset.skinUrl; if (confirmedUrl) { setState({ selectedSkin: confirmedUrl }); skinSearchStatus.textContent = `${skinSearchInput.value} ${translate('ok')}!`; // Indicate selection confirmSkinBtn.style.display = 'none'; // Hide after confirming console.log("Skin selected:", state.selectedSkin); } }); submitBtn.addEventListener('click', (e) => { e.preventDefault(); // Prevent default form submission if it's inside a form tag const email = emailInput.value.trim(); const password = passwordInput.value; const confirmPassword = confirmPasswordInput.value; const nickname = nicknameInput.value.trim(); // Skin is taken from state.selectedSkin // Basic Validation if (!email || !password || !confirmPassword || !nickname) { showNotification('errorFillAllFields', 'error'); return; } if (password !== confirmPassword) { showNotification('errorPasswordMismatch', 'error'); return; } // Add skin validation if required // if (!state.selectedSkin) { // showNotification('errorSelectSkin', 'error'); // Add this translation key // return; // } // --- Simulation --- console.log("Simulating conversion with data:", { email, nickname, skin: state.selectedSkin ? 'Selected' : 'None' // DO NOT log password }); // Simulate success showNotification('successConversion', 'success', 5000); // Optionally clear form or navigate away // emailInput.value = ''; // passwordInput.value = ''; // confirmPasswordInput.value = ''; // nicknameInput.value = ''; // skinSearchInput.value = ''; // skinPreview.style.display = 'none'; // skinSearchStatus.textContent = ''; // setState({ selectedSkin: null }); setTimeout(() => navigateTo('normal'), 1500); // Navigate back after showing success }); } import { navigateTo } from '../router.js'; export function initProfileScreen() { const backBtn = document.getElementById('back-to-main-profile-btn'); backBtn.addEventListener('click', () => { navigateTo('normal'); }); // Add logic for profile editing here later console.log("Profile screen initialized (WIP)"); } import { navigateTo } from '../router.js'; import { setLanguage, translatePage, translate } from '../i18n.js'; import { state, setState } from '../state.js'; import { saveSettings } from '../storage.js'; import { showNotification, setTheme } from '../ui.js'; export function initSettingsScreen() { const backBtn = document.getElementById('back-to-main-settings-btn'); const languageSelect = document.getElementById('language-select'); const themeSelect = document.getElementById('theme-select'); backBtn.addEventListener('click', () => { navigateTo('normal'); }); // Set initial values from state languageSelect.value = state.language; themeSelect.value = state.theme; languageSelect.addEventListener('change', (e) => { const newLang = e.target.value; if (setLanguage(newLang)) { setState({ language: newLang }); saveSettings({ language: state.language, theme: state.theme }); // Save settings showNotification('infoLanguageChanged', 'success'); } }); themeSelect.addEventListener('change', (e) => { const newTheme = e.target.value; setState({ theme: newTheme }); setTheme(newTheme); // Apply theme immediately saveSettings({ language: state.language, theme: state.theme }); // Save settings showNotification('infoThemeChanged', 'success'); }); // Add logic for other settings here later console.log("Settings screen initialized (WIP)"); } import { state, setState } from './state.js'; import { navigateTo } from './router.js'; import { initLoadingScreen } from './pages/loading.js'; import { initLoginScreen } from './pages/login.js'; import { initModeSelectScreen } from './pages/mode-select.js'; import { initNormalModeScreen } from './pages/normal-mode.js'; import { initConverterFormScreen } from './pages/converter-form.js'; import { initProfileScreen } from './pages/profile.js'; import { initSettingsScreen } from './pages/settings.js'; import { setLanguage, translatePage } from './i18n.js'; import { loadSettings } from './storage.js'; import { setTheme } from './ui.js'; function initialize() { console.log("Initializing App..."); // Load saved settings (language, theme) const savedSettings = loadSettings(); if (savedSettings) { setState({ language: savedSettings.language || state.language, theme: savedSettings.theme || state.theme }); } // Apply initial language and theme setLanguage(state.language); setTheme(state.theme); // Apply loaded or default theme // Initialize different page modules initLoadingScreen(); initLoginScreen(); initModeSelectScreen(); initNormalModeScreen(); // Includes loading positions initConverterFormScreen(); initProfileScreen(); initSettingsScreen(); // Start with the loading screen navigateTo('loading'); // Initial translation translatePage(); } // Initialize the application when the DOM is ready document.addEventListener('DOMContentLoaded', initialize);