Files
hytale-f2p-mirror/GUI/js/script.js
sanasol a40465cac9 feat: Matcha! social integration — friends, chat, DMs, avatars, presence
Add full Matcha social panel (butter.lat API) as a right-side slide-out:

Backend (matchaService.js):
- HTTP client for auth, friends, messages, unread, avatar, heartbeat APIs
- WebSocket with auto-reconnect (exponential backoff, no hard cap)
- Token management via config, presence heartbeat every 30s
- WS error message type handling, game running presence

Renderer (matcha.js):
- State machine UI: intro → login/register → app (friends/chat/DMs/profile)
- Two-phase registration with master key display and verification
- Friends list with presence dots, collapsible requests, 12s polling
- Global chat + DM with optimistic rendering, cursor pagination
- Scroll position preserved on load-more, separate loading flags
- Clickable URLs in messages (linkify with proper escaping)
- User profile popup with avatar upload/delete
- Unread badges (messages + friend requests) on nav icon
- Escape key closes panel/overlay, try/catch on auth flows

IPC bridge (preload.js + main.js):
- 21 IPC invoke methods + 8 WS event listeners
- Avatar upload via file picker dialog in main process
- Game launch sets in_game heartbeat state

CSS (style.css):
- ~1500 lines: panel, auth screens, friends, chat, profile, toast
- Responsive panel width, improved contrast, no overflow clipping
- Loading states, disabled states, pulse animations

Credits: Powered by Butter Launcher & Matcha! (butterlauncher.tech)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-02 00:49:37 +01:00

111 lines
3.2 KiB
JavaScript

import './ui.js';
import './install.js';
import './launcher.js';
import { initModsManager } from './mods.js';
import './players.js';
import './settings.js';
import './logs.js';
import { initMatcha } from './matcha.js';
let i18nInitialized = false;
(async () => {
const savedLang = await window.electronAPI?.loadLanguage();
await i18n.init(savedLang);
i18nInitialized = true;
if (document.readyState === 'complete' || document.readyState === 'interactive') {
updateLanguageSelector();
initModsManager();
initMatcha();
} else {
document.addEventListener('DOMContentLoaded', () => {
updateLanguageSelector();
initModsManager();
initMatcha();
});
}
})();
async function checkDiscordPopup() {
try {
const config = await window.electronAPI?.loadConfig();
if (!config || config.discordPopup === undefined || config.discordPopup === false) {
const modal = document.getElementById('discordPopupModal');
if (modal) {
const buttons = modal.querySelectorAll('.discord-popup-btn');
buttons.forEach(btn => btn.disabled = true);
setTimeout(() => {
modal.style.display = 'flex';
modal.classList.add('active');
setTimeout(() => {
buttons.forEach(btn => btn.disabled = false);
}, 2000);
}, 1000);
}
}
} catch (error) {
console.error('Failed to check Discord popup:', error);
}
}
window.closeDiscordPopup = function() {
const modal = document.getElementById('discordPopupModal');
if (modal) {
modal.classList.remove('active');
setTimeout(() => {
modal.style.display = 'none';
}, 300);
}
};
window.joinDiscord = async function() {
// await window.electronAPI?.openExternal('https://discord.gg/Fhbb9Yk5WW');
await window.electronAPI?.openExternal('https://chat.sanhost.net/invite/Tfz4jCK4');
try {
await window.electronAPI?.saveConfig({ discordPopup: true });
} catch (error) {
console.error('Failed to save Discord popup state:', error);
}
closeDiscordPopup();
};
function updateLanguageSelector() {
const langSelect = document.getElementById('languageSelect');
if (langSelect) {
// Clear existing options
langSelect.innerHTML = '';
const languages = i18n.getAvailableLanguages();
const currentLang = i18n.getCurrentLanguage();
languages.forEach(lang => {
const option = document.createElement('option');
option.value = lang.code;
option.textContent = lang.name;
if (lang.code === currentLang) {
option.selected = true;
}
langSelect.appendChild(option);
});
// Handle language change (add listener only once)
if (!langSelect.hasAttribute('data-listener-added')) {
langSelect.addEventListener('change', async (e) => {
await i18n.setLanguage(e.target.value);
});
langSelect.setAttribute('data-listener-added', 'true');
}
}
}
document.addEventListener('DOMContentLoaded', () => {
if (i18nInitialized) {
updateLanguageSelector();
}
checkDiscordPopup();
});