const { useState, useEffect, useRef } = React; const { Modal, loadUsers, saveUsers, deleteUserSave, resetAllProgress, ADMIN_NAME, formatNum } = window; const BOSS_NAMES = [ 'Dani', 'Memo', 'José María', 'Andrea', 'Payo', 'Cris', 'Pascal', 'Tomi', 'John', 'Palo', 'Carlos', 'Gabo', 'Juanmi', 'María José' ]; const VALID_CHARS = [ 'ale', 'carlos', 'andrea', 'cami', 'chalo', 'cote', 'cotefi', 'cris', 'dani', 'daniela', 'fabi', 'fenia', 'gabo', 'gianni', 'james', 'john', 'jose_maria', 'juan', 'juanmi', 'juli', 'leo', 'lucho', 'manu', 'mari', 'martin', 'mati', 'may', 'nico_flecha', 'nico_ojeda', 'palo', 'pancho', 'pascal', 'patito', 'payo', 'rafa', 'sofi', 'tatan', 'tomi', 'vania', 'yisus' ]; function getAvatarUrl(who, customImage, msgId) { if (customImage) return customImage; if (!who) return null; let norm = who.toLowerCase().trim() .replace(/[áäàâ]/g, 'a') .replace(/[éëèê]/g, 'e') .replace(/[íïìî]/g, 'i') .replace(/[óöòô]/g, 'o') .replace(/[úüùû]/g, 'u') .replace(/ñ/g, 'nia') .replace(/[^a-z0-9]/g, '_') .replace(/__+/g, '_') .replace(/^_+|_+$/g, ''); if (norm === 'feña') norm = 'fenia'; if (norm === 'nico') { const val = typeof msgId === 'string' ? msgId.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) : 0; return val % 2 === 0 ? 'assets/chars/nico_flecha.png' : 'assets/chars/nico_ojeda.png'; } if (VALID_CHARS.includes(norm)) { if (norm === 'ale') return 'assets/chars/Ale.png'; if (norm === 'carlos') return 'assets/chars/Carlos.png'; return `assets/chars/${norm}.png`; } return null; } // ── Admin Terminology Component ─────────────────────────────────────────────── const TermRow = ({ label, keyName, term, updateField, image, onImageChange }) => { const [showEn, setShowEn] = useState(false); return (
{label}
{onImageChange && (
)}
{showEn ? ( <>
updateField(keyName, 'en', e.target.value)} style={{ width: '100%' }} />
updateField(keyName, 'enPlural', e.target.value)} style={{ width: '100%' }} />
) : ( <>
updateField(keyName, 'es', e.target.value)} style={{ width: '100%' }} />
updateField(keyName, 'esPlural', e.target.value)} style={{ width: '100%' }} />
)}
); }; // ── Admin Logo & Favicon ──────────────────────────────────────────────────────── window.AdminLogo = function({ lang }) { const card = { background: 'rgba(255,255,255,0.88)', borderRadius: 16, padding: '20px', border: '1px solid rgba(100,160,230,0.25)', boxShadow: '0 2px 16px rgba(80,140,220,0.08)', backdropFilter: 'blur(8px)', marginBottom: 16 }; const [logoVertical, setLogoVertical] = useState(() => { return window.GAME_CONTENT?.terminology?.images?.logoVertical || ''; }); const [logoHorizontal, setLogoHorizontal] = useState(() => { return window.GAME_CONTENT?.terminology?.images?.logoHorizontal || ''; }); const [favicon, setFavicon] = useState(() => { return window.GAME_CONTENT?.terminology?.images?.favicon || ''; }); const updateImage = (key, url, setter) => { setter(url); if (window.GAME_CONTENT) { if (!window.GAME_CONTENT.terminology) window.GAME_CONTENT.terminology = {}; if (!window.GAME_CONTENT.terminology.images) window.GAME_CONTENT.terminology.images = {}; window.GAME_CONTENT.terminology.images[key] = url; } }; const updateFavicon = (url) => { updateImage('favicon', url, setFavicon); // Inject directly to preview instantly if (url) { let link = document.querySelector("link[rel~='icon']"); if (!link) { link = document.createElement('link'); link.rel = 'icon'; document.head.appendChild(link); } link.href = url; } }; const restoreFavicon = () => { updateFavicon(''); // Restore default let link = document.querySelector("link[rel~='icon']"); if (link) link.href = 'assets/favicon.png'; }; return (

{lang === 'es' ? 'Branding del Juego (Logos y Favicon)' : 'Game Branding (Logos & Favicon)'}

{/* LOGO VERTICAL */}
{lang === 'es' ? 'Logo Vertical (Pantalla Inicial)' : 'Vertical Logo (Start Screen)'}

{lang === 'es' ? 'Se muestra en la pantalla de carga e inicio. Se recomienda un logo grande con fondo transparente.' : 'Shown on the loading and start screens. Recommended: large logo with transparent background.'}

updateImage('logoVertical', url, setLogoVertical)} maxSizeKb={2048} /> {logoVertical && (
)}
{/* LOGO HORIZONTAL */}
{lang === 'es' ? 'Logo Horizontal (Juego)' : 'Horizontal Logo (Game)'}

{lang === 'es' ? 'Se muestra en la barra superior mientras juegas. Debe ser ancho y no muy alto.' : 'Shown on the top bar while playing. Should be wide and not very tall.'}

updateImage('logoHorizontal', url, setLogoHorizontal)} maxSizeKb={2048} /> {logoHorizontal && (
)}
{/* FAVICON */}
{lang === 'es' ? 'Favicon' : 'Favicon'}

{lang === 'es' ? 'Icono de pestaña. Pequeño y cuadrado.' : 'Tab icon. Small and square.'}

{favicon && (
)}
); }; window.AdminTerminology = function({ lang }) { const [term, setTerm] = useState(() => { return (window.GAME_CONTENT && window.GAME_CONTENT.terminology) ? { ...window.GAME_CONTENT.terminology } : { mainCurrency: { es: "Diente", en: "Tooth", esPlural: "Dientes", enPlural: "Teeth" }, prestigeCurrency: { es: "Sonrisa dorada", en: "Golden smile", esPlural: "Sonrisas doradas", enPlural: "Golden smiles" }, prestigeBonus: { es: "Bonus por sonrisa", en: "Smile bonus" }, goldenCurrency: { es: "Diente dorado", en: "Golden tooth", esPlural: "Dientes dorados", enPlural: "Golden teeth" }, diamondCurrency: { es: "Diente de diamante", en: "Diamond tooth", esPlural: "Dientes de diamante", enPlural: "Diamond teeth" }, crystalCurrency: { es: "Diente de cristal", en: "Crystal tooth", esPlural: "Dientes de cristal", enPlural: "Crystal teeth" }, images: { mainCurrency: "", prestigeCurrency: "", goldenCurrency: "", diamondCurrency: "", crystalCurrency: "" } }; }); const [showBonusEn, setShowBonusEn] = useState(false); const updateField = (key, field, val) => { const newTerm = { ...term, [key]: { ...term[key], [field]: val } }; setTerm(newTerm); if (window.GAME_CONTENT) window.GAME_CONTENT.terminology = newTerm; }; const updateImage = (key, val) => { const newTerm = { ...term, images: { ...(term.images || {}), [key]: val } }; setTerm(newTerm); if (window.GAME_CONTENT) window.GAME_CONTENT.terminology = newTerm; }; const card = { background: 'rgba(255,255,255,0.88)', borderRadius: 16, padding: '20px', border: '1px solid rgba(100,160,230,0.25)', boxShadow: '0 2px 16px rgba(80,140,220,0.08)', backdropFilter: 'blur(8px)', marginBottom: 16 }; return (
{lang === 'es' ? 'Configuración de Temática y Textos' : 'Theme & Texts Configuration'}

{lang === 'es' ? 'Personaliza los nombres y las imágenes de las monedas principales para darle una temática única al juego.' : 'Customize the names and images of the main currencies to give the game a unique theme.'}

updateImage('mainCurrency', url)} /> updateImage('prestigeCurrency', url)} />
{lang === 'es' ? 'Nombre del Bonus de Prestigio' : 'Prestige Bonus Name'}
{showBonusEn ? ( updateField('prestigeBonus', 'en', e.target.value)} style={{ width: '100%' }} /> ) : ( updateField('prestigeBonus', 'es', e.target.value)} style={{ width: '100%' }} /> )}
); }; // ── Admin Typography ──────────────────────────────────────────────────────────── window.AdminTypography = function({ lang }) { const card = { background: 'rgba(255,255,255,0.88)', borderRadius: 16, padding: '20px', border: '1px solid rgba(100,160,230,0.25)', boxShadow: '0 2px 16px rgba(80,140,220,0.08)', backdropFilter: 'blur(8px)', marginBottom: 16 }; const [selectedFont, setSelectedFont] = useState(() => { return window.GAME_CONTENT?.typography?.font || 'PixelifySans'; }); const [saved, setSaved] = useState(false); const [uploadError, setUploadError] = useState(''); const fileInputRef = useRef(null); const applyFont = () => { if (window.GAME_CONTENT) { if (!window.GAME_CONTENT.typography) window.GAME_CONTENT.typography = {}; window.GAME_CONTENT.typography.font = selectedFont; } document.documentElement.style.setProperty('--active-font', `"${selectedFont}"`); setSaved(true); setTimeout(() => setSaved(false), 2000); }; const processFontFile = (file) => { if (!file) return; if (file.size > 5 * 1024 * 1024) { // 5MB max for font setUploadError(`La fuente excede el límite de 5MB`); return; } const reader = new FileReader(); reader.onload = (ev) => { const base64Url = ev.target.result; let cleanName = file.name.replace(/\.[^/.]+$/, ""); cleanName = cleanName.replace(/[^a-zA-Z0-9 ]/g, ""); // strip weird chars const fontValue = cleanName.replace(/\s+/g, ''); if (!window.GAME_CONTENT) window.GAME_CONTENT = {}; if (!window.GAME_CONTENT.typography) window.GAME_CONTENT.typography = {}; if (!window.GAME_CONTENT.typography.customFonts) window.GAME_CONTENT.typography.customFonts = []; const newFont = { value: fontValue, label: cleanName, url: base64Url }; // Update GAME_CONTENT directly so it will be saved window.GAME_CONTENT.typography.customFonts.push(newFont); // Inject dynamically right now so we can preview it instantly const style = document.createElement('style'); style.innerHTML = `@font-face { font-family: "${newFont.value}"; src: url(${base64Url}); }`; document.head.appendChild(style); setSelectedFont(newFont.value); setUploadError(''); if (fileInputRef.current) fileInputRef.current.value = ""; }; reader.readAsDataURL(file); }; const baseFonts = [ { value: 'PixelifySans', label: 'Pixelify Sans' }, { value: 'Amaranth', label: 'Amaranth' }, { value: 'Londrina Solid', label: 'Londrina Solid' }, { value: 'Poetsen One', label: 'Poetsen One' } ]; const customFonts = window.GAME_CONTENT?.typography?.customFonts || []; const allFonts = [ ...baseFonts, ...customFonts.map(f => ({ value: f.value, label: f.label })), { value: '__UPLOAD__', label: lang === 'es' ? '+ Subir nueva tipografía...' : '+ Upload new font...' } ]; const handleDropdownChange = (val) => { if (val === '__UPLOAD__') { if (fileInputRef.current) fileInputRef.current.click(); } else { setSelectedFont(val); } }; return (

{lang === 'es' ? 'Tipografía' : 'Typography'}

processFontFile(e.target.files[0])} /> {uploadError &&
{uploadError}
}
{lang === 'es' ? 'Previsualización:' : 'Preview:'}
{lang === 'es' ? 'El rápido zorro marrón salta sobre el perro perezoso.' : 'The quick brown fox jumps over the lazy dog.'}
1 2 3 4 5 6 7 8 9 0 - 1,000,000 CPS
); }; // ── Admin Panel ─────────────────────────────────────────────────────────────── window.AdminCorePanel = function({ activeTab, setActiveTab, lang, onLangChange, onEnterGame, onBack }) { const [adminUsers, setAdminUsers] = useState([ADMIN_NAME]); const [adminLoading, setAdminLoading] = useState(true); const [publicUsers, setPublicUsers] = useState(() => loadUsers()); const [globalUsers, setGlobalUsers] = useState([]); const [globalLoading, setGlobalLoading] = useState(true); const [newAdminName, setNewAdminName] = useState(''); const [nameErr, setNameErr] = useState(''); const [deleteTarget, setDeleteTarget] = useState(null); const [restoreTarget, setRestoreTarget] = useState(null); const [showResetConfirm, setShowResetConfirm] = useState(false); const [resetLoading, setResetLoading] = useState(false); const [resetDone, setResetDone] = useState(false); const [newPublicName, setNewPublicName] = useState(''); const [publicNameErr, setPublicNameErr] = useState(''); const [feedback, setFeedback] = useState([]); const [feedbackLoading, setFeedbackLoading] = useState(true); const [customMessages, setCustomMessages] = useState([]); const [messagesLoading, setMessagesLoading] = useState(true); const [isSavingMessages, setIsSavingMessages] = useState(false); const [playerSort, setPlayerSort] = useState('prestige'); // 'prestige', 'level', 'teeth' const [playerFilter, setPlayerFilter] = useState('all'); // 'all', 'banned' const [cpsThreshold, setCpsThreshold] = useState(() => { try { return parseInt(localStorage.getItem('admin_cps_threshold')) || 20; } catch(e) { return 20; } }); const [cpsLimitEnabled, setCpsLimitEnabled] = useState(() => { try { return localStorage.getItem('admin_cps_limit_enabled') !== 'false'; } catch(e) { return true; } }); const [applyAdvancedFiltersToGame, setApplyAdvancedFiltersToGame] = useState(() => { try { return localStorage.getItem('admin_apply_filters_to_game') === 'true'; } catch(e) { return false; } }); const [globalTooltip, setGlobalTooltip] = useState(null); const fmt = window.formatNum; const [newMsgName, setNewMsgName] = useState(''); const [newMsgText, setNewMsgText] = useState(''); const [newMsgMilestone, setNewMsgMilestone] = useState(1); const [newMsgIsRandom, setNewMsgIsRandom] = useState(true); const [newMsgPlaytimeVal, setNewMsgPlaytimeVal] = useState(5); const [newMsgPlaytimeUnit, setNewMsgPlaytimeUnit] = useState('minutes'); const [newMsgColor, setNewMsgColor] = useState('#1a8fff'); const [newMsgPos, setNewMsgPos] = useState('bottom'); // top, center, bottom const [newMsgSize, setNewMsgSize] = useState('medium'); // small, medium, large const [newMsgAnim, setNewMsgAnim] = useState('none'); // none, pulse, shake, float const [newMsgParticles, setNewMsgParticles] = useState('none'); // none, stars, teeth, fire, confetti const [newMsgImage, setNewMsgImage] = useState(null); const [avatarLoading, setAvatarLoading] = useState(false); const [avatarHover, setAvatarHover] = useState(false); const fileInputRef = useRef(null); const [showCreateModal, setShowCreateModal] = useState(false); const [editingMsg, setEditingMsg] = useState(null); const [createMode, setCreateMode] = useState(null); // null, 'manual', 'random' const [newMsgType, setNewMsgType] = useState('normal'); // 'normal' | 'question' const [newMsgQuestionAnswer, setNewMsgQuestionAnswer] = useState(true); // true = Verdadero const [newMsgCorrectReward, setNewMsgCorrectReward] = useState({ type: 'addTeeth', amount: 1000 }); const [newMsgWrongReward, setNewMsgWrongReward] = useState({ type: 'removeTeeth', amount: 500 }); const [newMsgLedBgColor, setNewMsgLedBgColor] = useState('#000000'); const [newMsgLedColor, setNewMsgLedColor] = useState('#ff0000'); const [newMsgLedBrightness, setNewMsgLedBrightness] = useState('medium'); const [newMsgLedSpeed, setNewMsgLedSpeed] = useState('medium'); const [newMsgLedDirection, setNewMsgLedDirection] = useState('rtl'); const [newMsgLedTextSize, setNewMsgLedTextSize] = useState('normal'); // New features for messages const [newMsgLevelReq, setNewMsgLevelReq] = useState(0); const [newMsgOptions, setNewMsgOptions] = useState(['Verdadero', 'Falso']); const [newMsgCorrectOptionIndex, setNewMsgCorrectOptionIndex] = useState(0); const [newMsgExplanationText, setNewMsgExplanationText] = useState(''); const handleRandomizeEverything = () => { // 1. Pool of all name emisores const names = [ "John", "Nico", "Dani", "Pas", "Memo", "Ale", "Carlos", "cris", "Seba", "Pancho", "José María", "Gabo", "feña", "Feña", "Alfonso", "Amparito", "Andrés", "Anto", "Bastián", "Cami", "Claudio", "Coty", "Cynthia", "Diego", "Edu", "Esteban", "Fran", "Gabriel", "Génesis", "Gino", "Ignacio", "Isidora", "Javi", "Jose", "Katita", "Maca", "Mane", "Manu", "Marcelo", "Mati", "Matías", "Nacho", "Nadia", "Natalia", "Naty", "Pablito", "Pato", "Romi", "Seba G.", "Tami", "Vale" ]; const randName = names[Math.floor(Math.random() * names.length)]; // 2. Humorous custom message templates const templates = [ "¿Quién subió esto a prod sin probar en staging? El login da error 500 pero tú dale al click.", "Le prometí al principal inversor de riesgo que incorporaríamos IA en cada diente para el lunes.", "Ese botón principal de la interfaz está corrido exactamente 2px a la izquierda. ¡Qué horror visual!", "Nuestra API pública tarda 12 segundos enteros en responder una consulta simple. Excelente trabajo.", "Borré accidentalmente la base de datos de producción entera. Ups, espero que tengas un respaldo.", "Menos clicks inútiles en este juego y mucha más sinergia y alineación corporativa de alto impacto.", "¿Por qué decidiste de la nada cambiar la tipografía oficial por una sin licencia que parece fea?", "Todo el directorio internacional nos está observando de cerca hoy. Sigue clickeando con elegancia.", "Falta un contraste brutal de accesibilidad. Por favor, usa únicamente nuestra paleta corporativa.", "Tu código tiene tantos bugs y malas prácticas que parece escrito por un mono con sobredosis de café.", "Para optimizar los costos de electricidad de la startup: apaga tu monitor mientras no estés aquí.", "Figma es mi pasión y mi refugio creativo, pero ver tu código implementado es mi mayor tortura.", "El cliente más importante de la empresa quiere esta funcionalidad lista para ayer. ¡Corre a programar!", "¿Por qué el microservicio de facturación está intentando minar criptomonedas? Explícame esto ya.", "Tu mayor y más relevante aporte al sprint de esta semana fue desgastar el mouse con este clicker.", "Los reportes de KPIs trimestrales dan absoluta pena. Haz algo realmente útil por la compañía hoy.", "¿De verdad hiciste un commit directo a master sin pasar por revisión de código? La audacia me asusta.", "Ese tono fosforescente de verde literalmente daña mis retinas. Quítalo de inmediato de mi vista.", "Si algún cliente o inversor te llega a preguntar, todo este software ya está terminado y testeado.", "Esas sombras gigantes no tienen ningún tipo de sentido estético ni coherencia ahí. Quítalas ya.", "El logotipo corporativo debe ser considerablemente más grande, brillante y con sombras modernas.", "¿De verdad estás validando hipótesis de mercado o simplemente estás procrastinando con descaro?", "Nuestra base de datos explotó y perdimos tres meses de facturación, pero el diente sigue girando.", "¡Me encanta cómo pusiste un degradado arcoíris en la pantalla de carga sin avisarle a nadie!", "El gerente de cuentas está llorando en la sala de reuniones porque la demo no cargó. Buen trabajo.", "¿Puedes alinear el diente con la grilla de flexbox antes de que me dé un ataque de pánico visual?" ]; const activeTexts = customMessages.map(m => m.text ? m.text.split('||image:')[0].trim() : ''); const availableTemplates = templates.filter(tpl => !activeTexts.includes(tpl.trim())); const finalTemplates = availableTemplates.length > 0 ? availableTemplates : templates; const randText = finalTemplates[Math.floor(Math.random() * finalTemplates.length)]; // 3. Random trigger type: playtime milestone vs random const randIsRandom = Math.random() < 0.5; // 4. Random playtime values (5 to 60) and unit const randPlaytimeVal = Math.floor(Math.random() * 55) + 5; const randPlaytimeUnit = Math.random() < 0.8 ? 'minutes' : 'hours'; // 5. Random styles (excluding 'none' to always have real visual parameters) const positions = ['top', 'center', 'bottom']; const sizes = ['small', 'medium', 'large']; const animations = ['pulse', 'shake', 'float', 'rainbow']; const particlesOptions = ['stars', 'teeth', 'fire', 'confetti']; const randPos = positions[Math.floor(Math.random() * positions.length)]; const randSize = sizes[Math.floor(Math.random() * sizes.length)]; const randAnim = animations[Math.floor(Math.random() * animations.length)]; const randPart = particlesOptions[Math.floor(Math.random() * particlesOptions.length)]; // Generate vibrant Hex color const h = Math.floor(Math.random() * 360); const s = Math.floor(Math.random() * 25) + 75; // 75-100% const l = Math.floor(Math.random() * 20) + 45; // 45-65% const sPct = s / 100; const lPct = l / 100; const c = (1 - Math.abs(2 * lPct - 1)) * sPct; const x = c * (1 - Math.abs((h / 60) % 2 - 1)); const m = lPct - c / 2; let r = 0, g = 0, b = 0; if (h >= 0 && h < 60) { r = c; g = x; b = 0; } else if (h >= 60 && h < 120) { r = x; g = c; b = 0; } else if (h >= 120 && h < 180) { r = 0; g = c; b = x; } else if (h >= 180 && h < 240) { r = 0; g = x; b = c; } else if (h >= 240 && h < 300) { r = x; g = 0; b = c; } else if (h >= 300 && h < 360) { r = c; g = 0; b = x; } const toHex = (val) => { const hex = Math.round((val + m) * 255).toString(16); return hex.length === 1 ? '0' + hex : hex; }; const randColor = `#${toHex(r)}${toHex(g)}${toHex(b)}`; // Set all new message states setNewMsgName(randName); setNewMsgText(randText); setNewMsgIsRandom(randIsRandom); setNewMsgPlaytimeVal(randPlaytimeVal); setNewMsgPlaytimeUnit(randPlaytimeUnit); setNewMsgPos(randPos); setNewMsgSize(randSize); setNewMsgAnim(randAnim); setNewMsgParticles(randPart); setNewMsgColor(randColor); setNewMsgImage(null); // Clear custom image to let seed avatar auto-match }; const [msgFilter, setMsgFilter] = useState('all'); const [msgToDelete, setMsgToDelete] = useState(null); const [showWipeConfirm, setShowWipeConfirm] = useState(false); const [wipeLoading, setWipeLoading] = useState(false); const [successNote, setSuccessNote] = useState(''); const [previewMsg, setPreviewMsg] = useState(null); const [currentPage, setCurrentPage] = useState(1); const [msgSearch, setMsgSearch] = useState(''); const [pendingImportJSON, setPendingImportJSON] = useState(null); const [selectedMsgIds, setSelectedMsgIds] = useState(new Set()); const [showAdvancedFiltersModal, setShowAdvancedFiltersModal] = useState(false); const [advancedFilters, setAdvancedFilters] = useState(() => { try { const stored = localStorage.getItem('admin_advanced_filters'); if (stored) return JSON.parse(stored); } catch(e) {} return { msgType: 'all', position: 'all', size: 'all', animation: 'all', particles: 'all', color: 'all', levelReq: '' }; }); useEffect(() => { try { localStorage.setItem('admin_advanced_filters', JSON.stringify(advancedFilters)); localStorage.setItem('admin_apply_filters_to_game', applyAdvancedFiltersToGame.toString()); } catch(e) {} const t = setTimeout(() => { window.cloudSaveSettings({ advancedFilters, applyAdvancedFiltersToGame }); }, 500); return () => clearTimeout(t); }, [advancedFilters, applyAdvancedFiltersToGame]); // ── Version Control States ────────────────────────────────────────────────── const [versionsList, setVersionsList] = useState([]); const [versionsLoading, setVersionsLoading] = useState(true); const [dbCommitSha, setDbCommitSha] = useState(''); const [gitCommitSha, setGitCommitSha] = useState(''); const [pendingCommits, setPendingCommits] = useState([]); const [loadingCommits, setLoadingCommits] = useState(false); const [newVersionString, setNewVersionString] = useState(''); const [newVersionDate, setNewVersionDate] = useState(''); const [newChangelogEs, setNewChangelogEs] = useState(''); const [newChangelogEn, setNewChangelogEn] = useState(''); const [isPublishingVersion, setIsPublishingVersion] = useState(false); const [versionSuccessNote, setVersionSuccessNote] = useState(''); const [previewLang, setPreviewLang] = useState('es'); // Semantic Conventional Commit Parser & Elaboration Dictionary const generateChangelogFromCommits = (commitsList) => { if (!commitsList || commitsList.length === 0) return { es: '', en: '' }; const esLines = []; const enLines = []; commitsList.forEach(c => { let msg = c.commit && c.commit.message ? c.commit.message.split('\n')[0] : ''; msg = msg.trim(); if (!msg) return; const prefixRegex = /^(feat|fix|chore|refactor|style|docs|perf|test|build|ci)(\([a-z0-9-_]+\))?:\s*/i; let cleanMsg = msg.replace(prefixRegex, ''); cleanMsg = cleanMsg.charAt(0).toUpperCase() + cleanMsg.slice(1); const low = msg.toLowerCase(); let esElab = ''; let enElab = ''; if (low.includes('casing') || low.includes('case-insensitive') || (low.includes('login') && low.includes('james'))) { esElab = "Inicio de sesión insensible a mayúsculas: el juego ahora resuelve automáticamente las discrepancias de mayúsculas/minúsculas en el nombre de la cuenta al iniciar sesión, evitando la creación accidental de cuentas duplicadas."; enElab = "Case-insensitive login resolution: the authentication system now automatically resolves capital/lowercase differences in usernames during login, preventing duplicate account creations."; } else if (low.includes('settings') || low.includes('configuraci')) { esElab = "Modal de configuración unificado: se agruparon todos los controles de sonido, idioma, efectos de partículas, efectos de cepillos y la opción de eliminación de cuenta en un solo modal premium accesible desde todos los menús del jugador."; enElab = "Unified settings modal: consolidated all audio, language, visual particle, spinning brush toggles, and the account deletion tool into a single premium modal accessible from all player menu context paths."; } else if (low.includes('version') || low.includes('history') || low.includes('log')) { esElab = "Optimización del historial de versiones: se rediseñó el modal de registro de versiones para extenderse a toda la altura disponible de la pantalla, brindando un scroll limpio y una lectura premium similar al reproductor de música."; enElab = "Version history optimization: redesigned the log modal body layout to scale and fill the maximum viewport height dynamically, providing a fluid scrolling experience matching the music player."; } else if (low.includes('delete') || low.includes('wrap') || low.includes('line')) { esElab = "Mejora visual de botones: se ajustó la disposición del botón de eliminación de cuenta con flexbox y propiedades 'nowrap' para asegurar que el texto del botón permanezca en una sola línea en dispositivos móviles."; enElab = "Button layout optimization: refined the delete account button layout using flexbox and white-space overrides to guarantee the button text remains strictly single-lined on narrow and mobile screens."; } else if (low.includes('music') || low.includes('reproductor') || low.includes('song') || low.includes('track')) { esElab = "Mejoras en el reproductor de música: optimizaciones generales en el rendimiento, estabilidad de las pistas, reproducción aleatoria y visualizaciones del disco giratorio."; enElab = "Music player enhancements: general performance optimizations, track loading stability, random shuffle adjustments, and rotating disc visualization fixes."; } else if (low.includes('brush') || low.includes('spinning') || low.includes('cepillo')) { esElab = "Control de cepillos giratorios: se vinculó el efecto visual de los cepillos en órbita a la nueva configuración de la cuenta, permitiendo a los jugadores ocultarlos o mostrarlos para ahorrar recursos."; enElab = "Spinning toothbrush visualization: bound the orbital toothbrush ring rendering to user settings, letting players show or hide orbiting brushes to save device resources."; } else if (low.includes('achieve') || low.includes('logro')) { esElab = "Ampliación de logros: refinamientos en los disparadores de logros por CPS y molares totales, aumentando la estabilidad de la sincronización en la nube."; enElab = "Achievements expansion: refined validation triggers for CPS and total molar achievements, improving cloud sync stability."; } else { let actionEs = 'Actualización'; let actionEn = 'Update'; if (low.startsWith('feat')) { actionEs = 'Nueva característica'; actionEn = 'New feature'; } else if (low.startsWith('fix')) { actionEs = 'Corrección de error'; actionEn = 'Bug fix'; } else if (low.startsWith('chore') || low.startsWith('refactor')) { actionEs = 'Optimización interna'; actionEn = 'Performance optimization'; } else if (low.startsWith('style') || low.startsWith('css')) { actionEs = 'Mejora visual'; actionEn = 'Visual enhancement'; } esElab = `${actionEs}: ${cleanMsg}`; enElab = `${actionEn}: ${cleanMsg}`; } esLines.push(esElab); enLines.push(enElab); }); return { es: esLines.map(l => `• ${l}`).join('\n'), en: enLines.map(l => `• ${l}`).join('\n') }; }; const suggestNextVersion = (current) => { if (!current) return 'v0.1.0-beta'; const match = current.match(/^v?(\d+)\.(\d+)\.(\d+)(-.+)?$/i); if (match) { const major = parseInt(match[1]); const minor = parseInt(match[2]); const patch = parseInt(match[3]); const suffix = match[4] || ''; return `v${major}.${minor}.${patch + 1}${suffix}`; } return current + '-new'; }; useEffect(() => { setCurrentPage(1); }, [msgFilter, activeTab, customMessages.length, msgSearch]); const MILESTONE_OPTIONS = [1, 2, 3, 4, 5, 10, 15, 20, 30, 45, 60, 90, 120, 180, 240, 300, 360]; // Load everything on mount useEffect(() => { // 1. Admin accounts window.cloudLoadAdminAccounts().then(res => { if (res.ok) { const accs = res.accounts || []; if (!accs.includes(ADMIN_NAME)) accs.unshift(ADMIN_NAME); setAdminUsers(accs); } setAdminLoading(false); }); // 2. Global leaderboard users window.cloudFetchLeaderboard().then(res => { if (res.ok) setGlobalUsers(res.scores || []); setGlobalLoading(false); }); // 3. Feedback window.cloudFetchFeedback().then(res => { if (res.ok) setFeedback(res.feedback || []); setFeedbackLoading(false); }); // 4. Custom Messages window.cloudLoadCustomMessages().then(res => { let msgs = res.ok ? res.messages : []; // Force all seeded messages that currently have a positive milestone in the old database to milestone: -1 (Random/Collaborator) // Since seed IDs are not persisted in the database (they are stored as autogenerated UUIDs), we identify the old seed list // by checking if the number of messages with non-random milestones (milestone !== -1) is very large (> 100). const oldSeedCount = msgs.filter(m => m.milestone !== -1).length; if (oldSeedCount > 100) { let migrated = msgs.map(m => ({ ...m, milestone: -1 })); window.cloudSaveCustomMessages(migrated); msgs = migrated; } else if (msgs.length < 600 && window.getBossMessagesSeed) { // Fallback for new empty databases const seed = window.getBossMessagesSeed(); window.cloudSaveCustomMessages(seed); msgs = seed; } setCustomMessages(msgs); setMessagesLoading(false); }); // 6. Version History and dynamic settings from Supabase if (window.cloudFetchVersionMetadata) { window.cloudFetchVersionMetadata().then(res => { if (res.ok) { setVersionsList(res.history || []); setDbCommitSha(res.latestSha || ''); } setVersionsLoading(false); }); } else { setVersionsLoading(false); } }, []); // Fetch latest GitHub Commit useEffect(() => { fetch('https://api.github.com/repos/advancedchile/ToothClicker/commits?sha=main&per_page=1') .then(r => { if (!r.ok) throw new Error("HTTP error " + r.status); return r.json(); }) .then(data => { if (data && data[0] && data[0].sha) { setGitCommitSha(data[0].sha); } }) .catch(err => console.warn("Failed to fetch latest GitHub commit:", err)); }, [activeTab]); // Fetch commit comparison if they don't match useEffect(() => { if (!gitCommitSha) return; if (!dbCommitSha) { // First-time setup: fetch last 3 commits from GitHub to prefill setLoadingCommits(true); fetch('https://api.github.com/repos/advancedchile/ToothClicker/commits?sha=main&per_page=3') .then(r => r.json()) .then(data => { if (data && Array.isArray(data)) { setPendingCommits(data); const generated = generateChangelogFromCommits(data); setNewChangelogEs(generated.es); setNewChangelogEn(generated.en); const currentVersion = window.APP_VERSION || 'v0.5.5-beta'; setNewVersionString(currentVersion); setNewVersionDate(new Date().toISOString().split('T')[0]); } setLoadingCommits(false); }) .catch(err => { console.warn("Failed to fetch default commits:", err); setLoadingCommits(false); }); return; } if (dbCommitSha === gitCommitSha) { setPendingCommits([]); return; } setLoadingCommits(true); fetch(`https://api.github.com/repos/advancedchile/ToothClicker/compare/${dbCommitSha}...${gitCommitSha}`) .then(r => r.json()) .then(data => { if (data && data.commits) { setPendingCommits(data.commits); const generated = generateChangelogFromCommits(data.commits); setNewChangelogEs(generated.es); setNewChangelogEn(generated.en); const currentVersion = window.APP_VERSION || 'v0.5.5-beta'; const nextVer = suggestNextVersion(currentVersion); setNewVersionString(nextVer); setNewVersionDate(new Date().toISOString().split('T')[0]); } setLoadingCommits(false); }) .catch(err => { console.warn("Failed to fetch commit comparison:", err); setLoadingCommits(false); }); }, [dbCommitSha, gitCommitSha]); const saveMessagesToCloud = (updatedList) => { setIsSavingMessages(true); window.cloudSaveCustomMessages(updatedList).then(res => { setIsSavingMessages(false); if (!res.ok) alert('Error guardando mensajes en la nube: ' + res.error); }); }; const handleImportJSON = (e) => { const file = e.target.files[0]; if (!file) return; const reader = new FileReader(); reader.onload = async (event) => { try { const json = JSON.parse(event.target.result); if (!Array.isArray(json)) { throw new Error('El archivo JSON debe contener un arreglo de mensajes.'); } const newMessages = json.map(msg => { let finalWho = msg.who || ''; let finalImage = msg.image || ''; if (finalWho && finalWho.toLowerCase() === 'cualquiera') { const names = window.EMPLOYEE_NAMES || ['Dani']; finalWho = names[Math.floor(Math.random() * names.length)]; } if (finalImage && finalImage.toLowerCase() === 'cualquiera') { finalImage = null; // Forces fallback to auto-avatar } const newMsg = { id: `m-imp-${Date.now()}-${Math.floor(Math.random()*10000)}`, who: finalWho, text: msg.text || '', image: finalImage, milestone: msg.milestone !== undefined ? msg.milestone : 1, color: msg.color || '#1a8fff', position: msg.position || 'bottom', size: msg.size || 'medium', animation: msg.animation || 'none', particles: msg.particles || 'none', levelReq: msg.levelReq, createdAt: Date.now() + Math.random() }; if (msg.msgType === 'question') { newMsg.msgType = 'question'; newMsg.options = msg.options; newMsg.correctOptionIndex = msg.correctOptionIndex; newMsg.explanationText = msg.explanationText; newMsg.correctReward = msg.correctReward; newMsg.wrongReward = msg.wrongReward; newMsg.questionAnswer = msg.questionAnswer !== undefined ? msg.questionAnswer : true; } return newMsg; }); setPendingImportJSON(newMessages); } catch (err) { alert(lang === 'es' ? 'Error al importar JSON: ' + err.message : 'Error importing JSON: ' + err.message); } e.target.value = null; }; reader.readAsText(file); }; const handleStartEditMsg = (m) => { const isRand = m.milestone === -1; let val = 5; let unit = 'minutes'; if (!isRand) { if (m.milestone >= 60 && m.milestone % 60 === 0) { val = m.milestone / 60; unit = 'hours'; } else { val = m.milestone; unit = 'minutes'; } } setEditingMsg({ ...m, isRandom: isRand, playtimeVal: val, playtimeUnit: unit, msgType: m.msgType || 'normal', questionAnswer: m.questionAnswer !== undefined ? m.questionAnswer : true, correctReward: m.correctReward || { type: 'addTeeth', amount: 1000 }, wrongReward: m.wrongReward || { type: 'removeTeeth', amount: 500 } }); }; const handleAvatarUpload = (e) => { const file = e.target.files[0]; if (!file) return; if (file.size > 100 * 1024) { alert(lang === 'es' ? 'La imagen no debe superar los 100 KB' : 'Image size must not exceed 100 KB'); return; } const allowed = ['image/png', 'image/jpeg', 'image/jpg', 'image/gif']; if (!allowed.includes(file.type)) { alert(lang === 'es' ? 'Formato no permitido. Solo png, jpg, jpeg y gif.' : 'Format not allowed. Only png, jpg, jpeg and gif.'); return; } setAvatarLoading(true); const reader = new FileReader(); reader.onload = () => { setTimeout(() => { if (editingMsg) { setEditingMsg(prev => ({ ...prev, image: reader.result })); } else { setNewMsgImage(reader.result); } setAvatarLoading(false); }, 500); }; reader.onerror = () => { setAvatarLoading(false); alert('Error reading file'); }; reader.readAsDataURL(file); }; const btn = { all: 'unset', boxSizing: 'border-box', cursor: 'pointer', fontFamily: "'PixelifySans', var(--font-sans)", borderRadius: 10, fontWeight: 600, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, transition: 'all 140ms' }; const card = { background: 'rgba(255,255,255,0.88)', borderRadius: 16, padding: '20px', border: '1px solid rgba(100,160,230,0.25)', boxShadow: '0 2px 16px rgba(80,140,220,0.08)', backdropFilter: 'blur(8px)', marginBottom: 16 }; const allNames = [...adminUsers, ...publicUsers]; const handleAddAdmin = (e) => { e && e.preventDefault(); const cleaned = (newAdminName || '').trim().slice(0, 24); if (!cleaned) return; if (allNames.some((u) => u.toLowerCase() === cleaned.toLowerCase())) { setNameErr(lang === 'es' ? 'Ya existe ese nombre' : 'Name already exists');return; } const updated = [...adminUsers, cleaned]; setAdminUsers(updated); window.cloudSaveAdminAccounts && window.cloudSaveAdminAccounts(updated); setNewAdminName(''); setNameErr(''); }; const handleDelete = ({ name, type }) => { // 1. Local cleanup deleteUserSave(name); localStorage.removeItem('last_seen_season_' + name); // 2. Cloud cleanup (Leaderboard) window.cloudDeleteScore && window.cloudDeleteScore(name); // 3. UI State cleanup if (type === 'admin') { if (name !== ADMIN_NAME) { const updated = adminUsers.filter((u) => u !== name); setAdminUsers(updated); window.cloudSaveAdminAccounts && window.cloudSaveAdminAccounts(updated); } } else if (type === 'public') { const updated = publicUsers.filter((u) => u !== name); saveUsers(updated); setPublicUsers(updated); if (localStorage.getItem(DEVICE_USER_KEY) === name) localStorage.removeItem(DEVICE_USER_KEY); } else if (type === 'global') { setGlobalUsers(prev => prev.filter(u => u.name !== name)); } setDeleteTarget(null); // If deleting the current active user or admin itself, reload to clear memory if (name === localStorage.getItem(DEVICE_USER_KEY) || name === ADMIN_NAME) { setTimeout(() => window.location.reload(), 200); } }; const handleAddPublic = (e) => { e && e.preventDefault(); const cleaned = (newPublicName || '').trim().slice(0, 24); if (!cleaned) return; const reserved = (ADMIN_NAME || 'James').toLowerCase(); if (cleaned.toLowerCase() === reserved) { setPublicNameErr(lang === 'es' ? 'Ese nombre está reservado' : 'That name is reserved'); return; } if ([...adminUsers, ...publicUsers].some(u => u.toLowerCase() === cleaned.toLowerCase())) { setPublicNameErr(lang === 'es' ? 'Ya existe ese nombre' : 'Name already exists'); return; } const updated = [...publicUsers, cleaned]; saveUsers(updated); setPublicUsers(updated); setNewPublicName(''); setPublicNameErr(''); }; const handleWipeAll = async () => { setWipeLoading(true); const res = await window.cloudClearAllPlayers(); if (res.ok) { resetAllProgress(); setGlobalUsers([]); setPublicUsers([]); setFeedback([]); setCustomMessages([]); setWipeLoading(false); setShowWipeConfirm(false); alert(lang === 'es' ? '¡Wipe total completado!' : 'Total wipe completed!'); } else { setWipeLoading(false); alert('Error: ' + res.error); } }; const handleResetAll = async () => { setResetLoading(true); resetAllProgress(); setGlobalUsers([]); setPublicUsers([]); await new Promise((r) => setTimeout(r, 900)); setResetLoading(false); setResetDone(true); setTimeout(() => setResetDone(false), 3000); setShowResetConfirm(false); }; const UserRow = ({ name, type }) =>
{(name[0] || '?').toUpperCase()}
{name}
; return (