import { writable, derived } from 'svelte/store'; import { tweened } from 'svelte/motion'; import { cubicOut } from 'svelte/easing'; // --- Application State --- export const AppState = { LOADING: 'loading', LOGIN: 'login', MODE_SELECTION: 'mode_selection', NORMAL_MAIN: 'normal_main', NORMAL_CONVERT_FORM: 'normal_convert_form', NORMAL_PROFILE: 'normal_profile', NORMAL_SETTINGS: 'normal_settings', EDIT_MAIN: 'edit_main', // Example: Edit mode might target specific screens }; export const currentAppState = writable(AppState.LOADING); export const isEditMode = writable(false); export const isLoadingComplete = writable(false); // --- Loading Progress --- export const loadingProgress = tweened(0, { duration: 10000, // 10 seconds easing: cubicOut, }); // --- User State --- export const user = writable({ isLoggedIn: false, loginType: null, // 'google' or 'guest' name: 'Convidado', profilePic: null, // URL or placeholder }); // --- Edit Mode State --- // Store positions for draggable elements { id: { x, y } } // Initialize from localStorage or defaults const initialPositions = JSON.parse(localStorage.getItem('elementPositions') || '{}'); export const elementPositions = writable(initialPositions); export const initialDraggablePositions = writable({}); // Store initial positions when dragging starts export const isDragging = writable(false); // Track if any element is currently being dragged // Persist positions to localStorage whenever they change elementPositions.subscribe(value => { localStorage.setItem('elementPositions', JSON.stringify(value)); }); // --- Settings --- const defaultSettings = { language: 'pt-BR', // Default language theme: 'futuristic-dark', // Default theme }; const initialSettings = JSON.parse(localStorage.getItem('appSettings') || JSON.stringify(defaultSettings)); export const settings = writable(initialSettings); // Persist settings to localStorage settings.subscribe(value => { localStorage.setItem('appSettings', JSON.stringify(value)); // Apply theme class to body document.body.className = value.theme || ''; }); // Apply initial theme document.body.className = initialSettings.theme || ''; // --- Notifications --- // { id, type: 'success' | 'error', message, duration } export const notifications = writable([]); export function addNotification(message, type = 'success', duration = 4000) { const id = Date.now(); notifications.update(items => [...items, { id, type, message, duration }]); setTimeout(() => { removeNotification(id); }, duration); } export function removeNotification(id) { notifications.update(items => items.filter(item => item.id !== id)); } // --- Conversion Form State --- export const conversionForm = writable({ email: '', password: '', confirmPassword: '', nickname: '', skinUrl: null, skinSearchNick: '', isSearchingSkin: false, }); // --- Derived Stores --- export const isAuthenticated = derived(user, $user => $user.isLoggedIn); // --- Language/Text Management (Simple Example) --- const translations = { 'pt-BR': { loginWithGoogle: 'Login com Google', loginAsGuest: 'Entrar como Convidado', normalMode: 'Modo Normal', editMode: 'Modo Edição', save: 'Salvar', cancel: 'Cancelar', converterTitle: 'Converter Minecraft Pirata para Original', converterDisclaimer: '(Lembrando que esta é uma conversão simulada e não real)', convertButton: 'Converter', changeProfile: 'Alterar Perfil', settings: 'Configurações', logout: 'Sair', microsoftEmail: 'E-mail da Microsoft', password: 'Senha', confirmPassword: 'Confirmar Senha', gameNickname: 'Nick do Jogo', addSkin: 'Adicionar Skin', search: 'Pesquisar', confirmSkin: 'OK', conversionSuccess: 'Conversão realizada com sucesso!', conversionErrorRequired: 'Todos os campos são obrigatórios.', conversionErrorPasswordMatch: 'As senhas não coincidem.', skinSearchError: 'Não foi possível encontrar a skin.', skinSearchSuccess: 'Skin encontrada!', changesSaved: 'Alterações salvas.', changesCancelled: 'Alterações canceladas.', loading: 'Carregando...', // Add more translations as needed }, 'en-US': { loginWithGoogle: 'Login with Google', loginAsGuest: 'Enter as Guest', normalMode: 'Normal Mode', editMode: 'Edit Mode', save: 'Save', cancel: 'Cancel', converterTitle: 'Convert Minecraft Pirate to Original', converterDisclaimer: '(Remember this is a simulated conversion and not real)', convertButton: 'Convert', changeProfile: 'Change Profile', settings: 'Settings', logout: 'Logout', microsoftEmail: 'Microsoft Email', password: 'Password', confirmPassword: 'Confirm Password', gameNickname: 'Game Nickname', addSkin: 'Add Skin', search: 'Search', confirmSkin: 'OK', conversionSuccess: 'Conversion successful!', conversionErrorRequired: 'All fields are required.', conversionErrorPasswordMatch: 'Passwords do not match.', skinSearchError: 'Could not find skin.', skinSearchSuccess: 'Skin found!', changesSaved: 'Changes saved.', changesCancelled: 'Changes cancelled.', loading: 'Loading...', // Add more translations as needed } }; export const T = derived(settings, $settings => { return (key) => translations[$settings.language]?.[key] || key; }); // Placeholder for utility functions if needed later // e.g., complex validation, API calls (simulated or real) // Simple debounce function export function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }; // Simulate fetching a Minecraft skin (replace with actual API if desired) // Example using minotar.net export async function fetchMinecraftSkin(username) { if (!username) return null; // Basic check for valid username characters (alphanumeric and underscore) if (!/^[a-zA-Z0-9_]{3,16}$/.test(username)) { console.warn('Invalid Minecraft username format'); return null; } try { // Use a service like minotar.net or crafatar.com const url = `https://minotar.net/skin/${username}`; // Check if the image exists and is accessible const response = await fetch(url, { method: 'HEAD' }); // Use HEAD to check existence without downloading if (response.ok && response.headers.get('content-type')?.startsWith('image/')) { // Now fetch the actual image URL to display const imgResponse = await fetch(`https://minotar.net/avatar/${username}/100.png`); if (imgResponse.ok) { return `https://minotar.net/skin/${username}`; // Return URL of the full skin } } console.warn(`Skin not found or error fetching for user: ${username}`); return null; // Return null if not found or error } catch (error) { console.error('Error fetching Minecraft skin:', error); return null; } }

{#each activeNotifications as notification (notification.id)}

removeNotification(notification.id)} role="alert" aria-live="assertive" >

{#if notification.type === 'success'} {:else if notification.type === 'error'} {/if}

{notification.message}

{/each}

SIMULATOR

{$T('loading')} {progressValue}%

Escolha o Modo

{#if showControls}

{/if} {#if isOpen} {/if}

Simulador

{$user.name} showAccountMenu = false} />

{$T('converterTitle')}

{$T('converterDisclaimer')}

{$T('convertButton')} Conta

{$T('changeProfile')}

Esta é a tela de perfil. Funcionalidades como alterar foto e nome seriam implementadas aqui.

(Conteúdo do Perfil - Em Construção)

{$T('settings')}

Idioma:

Tema:

Mais opções de configuração seriam adicionadas aqui.

Simulador de Conversão MC

{#if !$isLoadingComplete} {:else} {/if} {#if $isEditMode} {/if}

import App from './App.svelte'; import './stores.js'; // Ensure stores are initialized, especially theme application const app = new App({ target: document.getElementById('app'), // Ensure you have

in your HTML body }); export default app; Simulador de Conversão MC

/* Basic Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; /* Background and text colors are set by theme CSS */ transition: background-color 0.3s ease, color 0.3s ease; overflow-x: hidden; /* Prevent horizontal scroll */ } a { color: var(--color-primary-accent); text-decoration: none; } a:hover { text-decoration: underline; } button { font-family: inherit; cursor: pointer; } /* Add more global styles as needed */ /* Futuristic Theme Variables */ :root { /* Base Colors (Dark Theme Default) */ --color-text: #e0e0e0; --color-text-secondary: #a0a0b0; --color-heading: #ffffff; --color-background: #1a1a2e; /* Deep blue/purple */ --color-background-light: #162447; /* Slightly lighter blue */ --color-background-dark: #0f132a; /* Even darker */ --color-background-panel: #1f284a; /* Panel background */ --color-background-hover: #2a3661; /* Hover state */ --color-border: #3a4a8c; --color-border-light: #4f62b8; /* Accent Colors */ --color-primary-accent: #00f5d4; /* Bright cyan/teal */ --color-primary-accent-light: #9cfceb; /* Lighter cyan */ --color-primary-accent-transparent: rgba(0, 245, 212, 0.2); /* Transparent accent for glows/shadows */ /* Status Colors */ --color-success: #28a745; /* Green */ --color-success-dark: #1e7e34; --color-error: #dc3545; /* Red */ --color-error-dark: #a71d2a; --color-warning: #ffc107; /* Yellow */ } /* Futuristic Light Theme */ body.futuristic-light { --color-text: #212529; --color-text-secondary: #5a6268; --color-heading: #000000; --color-background: #f8f9fa; /* Light grey */ --color-background-light: #ffffff; /* White */ --color-background-dark: #e9ecef; /* Darker grey */ --color-background-panel: #ffffff; /* White panels */ --color-background-hover: #e2e6ea; /* Light hover */ --color-border: #ced4da; --color-border-light: #adb5bd; /* Accent Colors (Adjust if needed for light theme contrast) */ --color-primary-accent: #007bff; /* Standard blue */ --color-primary-accent-light: #66aaff; --color-primary-accent-transparent: rgba(0, 123, 255, 0.15); /* Status Colors remain the same */ } /* Apply base theme */ body { background-color: var(--color-background); color: var(--color-text); } /* Add specific futuristic styles for elements if needed */ /* Example: Input field styling */ input, select, textarea { /* Add subtle futuristic touches */ /* border: 1px solid var(--color-border); */ /* background-color: var(--color-background-panel); */ /* color: var(--color-text); */ /* ... */ } /* Example: Button styling */ button.futuristic-button { /* background: linear-gradient(90deg, var(--color-primary-accent-light) 0%, var(--color-primary-accent) 100%); */ /* border: none; */ /* border-radius: 5px; */ /* padding: 10px 20px; */ /* color: var(--color-background-dark); */ /* font-weight: bold; */ /* box-shadow: 0 2px 5px var(--color-primary-accent-transparent); */ /* transition: all 0.3s ease; */ } /* button.futuristic-button:hover { */ /* filter: brightness(1.1); */ /* box-shadow: 0 4px 10px var(--color-primary-accent-transparent); */ /* transform: translateY(-1px); */ /* } */ { "name": "svelte-minecraft-converter-sim", "private": true, "version": "0.0.1", "type": "module", "scripts": { "dev": "vite dev", "build": "vite build", "preview": "vite preview" }, "devDependencies": { "@sveltejs/vite-plugin-svelte": "^3.0.0", "svelte": "^4.2.7", "vite": "^5.0.3" }, "dependencies": { "svelte-routing": "^2.11.0" } } import { defineConfig } from 'vite' import { svelte } from '@sveltejs/vite-plugin-svelte' // https://vitejs.dev/config/ export default defineConfig({ plugins: [svelte()], server: { // Optional: configure server options if needed // port: 5173, // strictPort: true, }, build: { // Optional: configure build options if needed // outDir: 'dist', } })

Bem-vindo ao Simulador

Escolha o Modo

{$T('converterTitle')}

{$T('convertButton')} Conta

{$T('changeProfile')}

{$T('settings')}