Upload via Git Manager GUI

This commit is contained in:
Git Manager GUI
2026-05-22 11:16:17 +02:00
parent de04e58242
commit b851cbc20b

View File

@@ -1,31 +1,7 @@
//popup.js // popup.js
const $ = id => document.getElementById(id); const $ = id => document.getElementById(id);
const uid = () => 'srv_' + Math.random().toString(36).slice(2,9); const uid = () => 'srv_' + Math.random().toString(36).slice(2,9);
const inputName = $('inputName');
const inputUrl = $('inputUrl');
const inputWpSite = $('inputWpSite');
const inputWpServerId = $('inputWpServerId');
const btnAdd = $('btnAddServer');
const serversContainer = $('serversContainer');
const serverListPanel = document.querySelector('.server-list');
const btnRefresh = $('btnRefresh');
const btnToggleSettings = $('btnToggleSettings');
const settingsForm = $('settingsForm');
const noSelection = $('noSelection');
const detailContent = $('detailContent');
const detailName = $('detailName');
const detailUrlText = $('detailUrlText');
const detailStatus = $('detailStatus');
const detailPulse = $('detailPulse');
const detailVersion = $('detailVersion');
const detailPlayers = $('detailPlayers');
const detailPing = $('detailPing');
const detailPlayerList = $('detailPlayerList');
const btnEdit = $('btnEdit');
const btnDelete = $('btnDelete');
let servers = []; let servers = [];
let selectedId = null; let selectedId = null;
let statuses = {}; let statuses = {};
@@ -33,71 +9,76 @@ let previousStatuses = {};
let settingsVisible = false; let settingsVisible = false;
document.addEventListener('DOMContentLoaded', init); document.addEventListener('DOMContentLoaded', init);
btnAdd.addEventListener('click', handleAdd); $('btnAdd')?.addEventListener('click', handleAdd);
btnRefresh.addEventListener('click', manualRefresh); $('btnAddServer')?.addEventListener('click', handleAdd);
btnToggleSettings.addEventListener('click', toggleSettings); $('btnRefresh').addEventListener('click', manualRefresh);
btnEdit.addEventListener('click', handleEdit); $('btnToggleSettings').addEventListener('click', toggleSettings);
btnDelete.addEventListener('click', handleDelete); $('btnEdit').addEventListener('click', handleEdit);
$('btnDelete').addEventListener('click', handleDelete);
async function init() { async function init() {
await loadServersFromStorage(); await loadServersFromStorage();
await loadStatusesFromStorage(); await loadStatusesFromStorage();
await loadSettingsVisibility(); await loadSettingsVisibility();
renderServerList(); renderServerList();
if (servers.length === 1) selectedId = servers[0].id; if (servers.length === 1) selectedId = servers[0].id;
renderDetail(selectedId); renderDetail(selectedId);
adjustDetailLayout();
} }
// --- NEU: Minecraft Color Parser (Eingebaut ohne Löschung) --- // ── Minecraft color code parser ──
function parseMinecraftColors(text) { function parseMinecraftColors(text) {
if (!text) return ''; if (!text) return '';
const map = { const map = {
'&0': '#000000', '&1': '#0000AA', '&2': '#00AA00', '&3': '#00AAAA', '§0':'#000000','§1':'#0000AA','§2':'#00AA00','§3':'#00AAAA',
'&4': '#AA0000', '&5': '#AA00AA', '&6': '#FFAA00', '&7': '#AAAAAA', '§4':'#AA0000','§5':'#AA00AA','§6':'#FFAA00','§7':'#AAAAAA',
'&8': '#555555', '&9': '#5555FF', '&a': '#55FF55', '&b': '#55FFFF', '§8':'#555555','§9':'#5555FF','§a':'#55FF55','§b':'#55FFFF',
'&c': '#FF5555', '&d': '#FF55FF', '&e': '#FFFF55', '&f': '#FFFFFF' '§c':'#FF5555','§d':'#FF55FF','§e':'#FFFF55','§f':'#FFFFFF',
}; '&0':'#000000','&1':'#0000AA','&2':'#00AA00','&3':'#00AAAA',
let html = text.replace(/[<>]/g, ''); '&4':'#AA0000','&5':'#AA00AA','&6':'#FFAA00','&7':'#AAAAAA',
Object.keys(map).forEach(code => { '&8':'#555555','&9':'#5555FF','&a':'#55FF55','&b':'#55FFFF',
const color = map[code]; '&c':'#FF5555','&d':'#FF55FF','&e':'#FFFF55','&f':'#FFFFFF'
const regex = new RegExp(code, 'g'); };
html = html.replace(regex, `</span><span style="color: ${color}">`); let html = text.replace(/[<>]/g, '');
}); let result = '';
return `<span>${html}</span>`.replace(/&l/g, '<b>').replace(/&r/g, '</b>'); let i = 0;
} while (i < html.length) {
const ch = html[i];
// --- 3D Avatar URL Generator --- if ((ch === '§' || ch === '&') && i + 1 < html.length) {
function get3DAvatarUrl(playerName, uuid = null) { const code = ch + html[i+1].toLowerCase();
const isBedrock = playerName.includes('.') || (uuid && uuid.startsWith('xuid')); if (map[code]) {
if (isBedrock) { result += `<span style="color:${map[code]}">`;
if (uuid && uuid.length > 0) { i += 2;
return `https://mc-heads.net/head/${encodeURIComponent(uuid)}/64`; continue;
}
} }
return `https://mc-heads.net/head/${encodeURIComponent(playerName)}/64`; result += html[i];
} else { i++;
return `https://mc-heads.net/head/${encodeURIComponent(playerName)}/64`;
} }
return result;
} }
function get3DAvatarUrl(name, uuid = null) {
return `https://mc-heads.net/head/${encodeURIComponent(name)}/64`;
}
// ── Storage ──
async function loadSettingsVisibility() { async function loadSettingsVisibility() {
const obj = await chrome.storage.local.get(['settingsVisible']); const obj = await chrome.storage.local.get(['settingsVisible']);
settingsVisible = obj.settingsVisible !== undefined ? obj.settingsVisible : false; settingsVisible = !!obj.settingsVisible;
if (!settingsVisible) settingsForm.classList.add('hidden'); applySettingsVisibility();
else settingsForm.classList.remove('hidden');
} }
async function saveSettingsVisibility() { async function saveSettingsVisibility() {
await chrome.storage.local.set({ settingsVisible }); await chrome.storage.local.set({ settingsVisible });
} }
function applySettingsVisibility() {
$('settingsForm').classList.toggle('hidden', !settingsVisible);
$('serverListPanel').classList.toggle('hidden', !settingsVisible);
$('detailButtons').classList.toggle('hidden', !settingsVisible);
}
async function toggleSettings() { async function toggleSettings() {
settingsVisible = !settingsVisible; settingsVisible = !settingsVisible;
settingsForm.classList.toggle('hidden'); applySettingsVisibility();
await saveSettingsVisibility(); await saveSettingsVisibility();
adjustDetailLayout();
} }
async function loadServersFromStorage() { async function loadServersFromStorage() {
@@ -106,143 +87,193 @@ async function loadServersFromStorage() {
for (const s of servers) if (!s.id) s.id = uid(); for (const s of servers) if (!s.id) s.id = uid();
await chrome.storage.local.set({ servers }); await chrome.storage.local.set({ servers });
} }
async function saveServersToStorage() { async function saveServersToStorage() {
await chrome.storage.local.set({ servers }); await chrome.storage.local.set({ servers });
} }
async function loadStatusesFromStorage() { async function loadStatusesFromStorage() {
const obj = await chrome.storage.local.get(['serverStatuses']); const obj = await chrome.storage.local.get(['serverStatuses']);
statuses = obj.serverStatuses || {}; statuses = obj.serverStatuses || {};
} }
function adjustDetailLayout() { // ── Server list ──
const settingsHidden = settingsForm.classList.contains('hidden');
detailContent.classList.toggle('full-width', settingsHidden);
serverListPanel.classList.toggle('hidden', settingsHidden);
btnEdit.style.display = settingsHidden ? 'none' : 'inline-block';
btnDelete.style.display = settingsHidden ? 'none' : 'inline-block';
}
function renderServerList() { function renderServerList() {
serversContainer.innerHTML = ''; const container = $('serversContainer');
container.innerHTML = '';
if (servers.length === 0) { if (servers.length === 0) {
serversContainer.innerHTML = '<div class="placeholder">Noch keine Server hinzugefügt.</div>'; container.innerHTML = '<div class="placeholder" style="padding:8px 0;">Noch kein Server hinzugefügt.</div>';
return; return;
} }
for (const s of servers) { for (const s of servers) {
const item = document.createElement('li'); const li = document.createElement('li');
item.className = 'server-item'; li.className = 'server-item' + (s.id === selectedId ? ' selected' : '');
item.dataset.id = s.id; li.dataset.id = s.id;
const meta = document.createElement('div'); const meta = document.createElement('div');
meta.className = 'meta'; meta.className = 'meta';
const name = document.createElement('div');
name.className = 'name'; const nameEl = document.createElement('div');
name.textContent = s.name || '(Kein Name)'; nameEl.className = 'name';
let listUrl = s.url || (s.wpSite ? s.wpSite + ' (WP)' : ''); nameEl.textContent = s.name || '(Kein Name)';
listUrl = listUrl.replace(':9191', '');
const url = document.createElement('div'); let urlText = s.url || (s.wpSite || '');
url.className = 'url'; urlText = urlText.replace(':9191', '');
url.textContent = listUrl; const urlEl = document.createElement('div');
meta.append(name, url); urlEl.className = 'url';
const statusBubble = document.createElement('div'); urlEl.textContent = urlText;
statusBubble.className = 'status-bubble';
statusBubble.textContent = '—'; meta.append(nameEl, urlEl);
statusBubble.style.backgroundColor = 'transparent';
item.statusBubble = statusBubble; const bubble = document.createElement('div');
item.append(meta, statusBubble); bubble.className = 'status-bubble';
item.addEventListener('click', () => { bubble.textContent = '—';
li._bubble = bubble;
li.append(meta, bubble);
li.addEventListener('click', () => {
selectedId = s.id; selectedId = s.id;
document.querySelectorAll('.server-item').forEach(el => el.classList.remove('selected'));
li.classList.add('selected');
renderDetail(selectedId); renderDetail(selectedId);
}); });
serversContainer.appendChild(item); container.appendChild(li);
} }
updateServerListStatuses(); updateServerListStatuses();
} }
// --- Fortsetzung popup.js --- // ── Detail ──
function renderDetail(id) { function renderDetail(id) {
if (!id) { if (!id) {
noSelection.classList.remove('hidden'); $('noSelection').classList.remove('hidden');
detailContent.classList.add('hidden'); $('detailContent').classList.add('hidden');
return; return;
} }
const srv = servers.find(x => x.id === id); const srv = servers.find(x => x.id === id);
if (!srv) { if (!srv) {
noSelection.classList.remove('hidden'); $('noSelection').classList.remove('hidden');
detailContent.classList.add('hidden'); $('detailContent').classList.add('hidden');
return; return;
} }
noSelection.classList.add('hidden'); $('noSelection').classList.add('hidden');
detailContent.classList.remove('hidden'); $('detailContent').classList.remove('hidden');
detailName.textContent = srv.name || 'Unbenannter Server';
let urlToShow = srv.url || (srv.wpSite ? srv.wpSite : 'Lokal'); $('detailName').textContent = srv.name || 'Unbenannter Server';
let urlToShow = srv.url || (srv.wpSite || 'Lokal');
urlToShow = urlToShow.replace(':9191', ''); urlToShow = urlToShow.replace(':9191', '');
detailUrlText.textContent = urlToShow; $('detailUrlText').textContent = urlToShow;
updateDetailForServer(srv, true); updateDetailForServer(srv, true);
} }
function updateDetailForServer(srv, force = false) { function updateDetailForServer(srv, force = false) {
const st = statuses[srv.id]; const st = statuses[srv.id];
const prevSt = previousStatuses[srv.id]; const prevSt = previousStatuses[srv.id];
const statusChanged = force || !prevSt || (prevSt.ok !== st?.ok) || (prevSt.data?.online !== st?.data?.online); const changed = force || JSON.stringify(st) !== JSON.stringify(prevSt);
if (!changed) return;
const badge = $('statusBadge');
const pulse = $('detailPulse');
if (!st || !st.ok || !st.data) { if (!st || !st.ok || !st.data) {
if (statusChanged) { badge.className = 'online-badge offline';
detailStatus.textContent = 'Offline'; pulse.className = 'pulsing-dot offline';
detailPulse.classList.remove('online'); $('detailStatus').textContent = 'Offline';
detailVersion.textContent = '-'; $('detailVersion').textContent = '-';
detailPlayers.textContent = '-'; $('detailPlayers').textContent = '-';
detailPing.textContent = '-'; $('detailPing').textContent = '-';
updatePlayerList([]); $('motdBar').classList.add('hidden');
} updatePlayerList([]);
updateBackendServers(null);
} else { } else {
const d = st.data; const d = st.data;
if (statusChanged) { const isOnline = !!d.online;
detailStatus.textContent = d.online ? 'Online' : 'Offline';
if (d.online) detailPulse.classList.add('online'); badge.className = 'online-badge ' + (isOnline ? 'online' : 'offline');
else detailPulse.classList.remove('online'); pulse.className = 'pulsing-dot ' + (isOnline ? 'online' : 'offline');
$('detailStatus').textContent = isOnline ? 'Online' : 'Offline';
$('detailVersion').textContent = d.version || 'unknown';
const count = Array.isArray(d.players) ? d.players.length
: (typeof d.players === 'number' ? d.players : 0);
const max = d.max_players;
$('detailPlayers').textContent = max && max !== '-1' ? `${count} / ${max}` : String(count);
const ping = d.ping || d.latency;
$('detailPing').textContent = typeof ping === 'number' ? ping + ' ms' : '-';
// MOTD
const motdRaw = d.motd || (d.network && d.network.motd) || '';
if (motdRaw) {
const motdEl = $('motdBar');
motdEl.innerHTML = parseMinecraftColors(motdRaw);
motdEl.classList.remove('hidden');
} else {
$('motdBar').classList.add('hidden');
} }
const newVersion = d.version || 'unknown';
if (force || detailVersion.textContent !== newVersion) detailVersion.textContent = newVersion;
const playersCount = Array.isArray(d.players) ? d.players.length : (typeof d.players === 'number' ? d.players : 0);
const maxPlayers = d.max_players;
let newPlayersText = String(playersCount);
if (maxPlayers && maxPlayers !== '-1') newPlayersText += ` / ${maxPlayers}`;
if (force || detailPlayers.textContent !== newPlayersText) detailPlayers.textContent = newPlayersText;
let pingVal = d.ping || d.latency || '-';
if (pingVal !== '-' && typeof pingVal === 'number') pingVal = pingVal + ' ms';
if (force || (pingVal !== '-' && detailPing.textContent !== pingVal)) detailPing.textContent = pingVal;
const currentPlayers = Array.isArray(d.players) ? d.players : []; const currentPlayers = Array.isArray(d.players) ? d.players : [];
const prevPlayers = (prevSt && Array.isArray(prevSt.data?.players)) ? prevSt.data.players : []; updatePlayerList(currentPlayers);
let playersChanged = force || JSON.stringify(currentPlayers) !== JSON.stringify(prevPlayers); updateBackendServers(d.network?.backend_servers || null);
if (playersChanged) updatePlayerList(currentPlayers);
} }
previousStatuses[srv.id] = st ? JSON.parse(JSON.stringify(st)) : null; previousStatuses[srv.id] = st ? JSON.parse(JSON.stringify(st)) : null;
} }
// --- Spielerliste mit Prefix-Hover und Farbsupport --- // ── Sub-Server chips ──
function updateBackendServers(list) {
const section = $('backendSection');
const container = $('backendServersList');
if (!list || list.length === 0) {
section.classList.add('hidden');
container.innerHTML = '';
return;
}
section.classList.remove('hidden');
container.innerHTML = '';
for (const bs of list) {
const count = bs.online_players || 0;
const chip = document.createElement('div');
chip.className = 'sub-chip' + (count > 0 ? ' active' : '');
const dot = document.createElement('span');
dot.className = 'sub-chip-dot';
const nameEl = document.createElement('span');
nameEl.className = 'sub-chip-name';
nameEl.textContent = bs.name;
const countEl = document.createElement('span');
countEl.className = 'sub-chip-count';
countEl.textContent = count > 0 ? count : 'leer';
chip.append(dot, nameEl, countEl);
container.appendChild(chip);
}
}
// ── Player list ──
// Versucht den Server-Namen aus den Daten zu lesen.
// Wenn dein Plugin "server" im Spieler-Objekt mitgibt, wird es als Tag angezeigt.
function updatePlayerList(players) { function updatePlayerList(players) {
detailPlayerList.innerHTML = ''; const grid = $('detailPlayerList');
grid.innerHTML = '';
if (!players || players.length === 0) { if (!players || players.length === 0) {
detailPlayerList.innerHTML = '<li class="placeholder">Keine Spieler online.</li>'; grid.innerHTML = '<div class="placeholder">Keine Spieler online.</div>';
return; return;
} }
for (const p of players) { for (const p of players) {
const li = document.createElement('li'); const card = document.createElement('div');
li.className = 'player-item'; // CSS Klasse für den Hover-Container card.className = 'player-card';
let name = ''; let name = '', uuid = null, prefix = '', serverName = null;
let uuid = null;
let prefix = '';
if (typeof p === 'object') { if (typeof p === 'object') {
name = p.name || p.username || p.player || ''; name = p.name || p.username || p.player || '';
uuid = p.uuid || null; uuid = p.uuid || null;
prefix = p.prefix || ''; prefix = p.prefix || p.group || '';
// Mögliche Felder: server, current_server, connected_server
serverName = p.server || p.current_server || p.connected_server || null;
} else { } else {
name = String(p); name = String(p);
} }
@@ -256,46 +287,63 @@ function updatePlayerList(players) {
this.src = `https://mc-heads.net/avatar/${encodeURIComponent(name)}/64`; this.src = `https://mc-heads.net/avatar/${encodeURIComponent(name)}/64`;
}; };
// Das Hover-Element mit farbigem Prefix + Name
const info = document.createElement('div'); const info = document.createElement('div');
info.className = 'player-hover-info'; info.className = 'player-info';
info.innerHTML = `${parseMinecraftColors(prefix)} ${name}`.trim();
li.appendChild(img); if (prefix) {
li.appendChild(info); const prefixEl = document.createElement('div');
detailPlayerList.appendChild(li); prefixEl.className = 'player-prefix';
prefixEl.innerHTML = parseMinecraftColors(prefix);
info.appendChild(prefixEl);
}
const nameEl = document.createElement('div');
nameEl.className = 'player-name';
nameEl.textContent = name;
info.appendChild(nameEl);
if (serverName) {
const tag = document.createElement('span');
tag.className = 'player-server-tag';
tag.textContent = serverName;
info.appendChild(tag);
}
card.append(img, info);
grid.appendChild(card);
} }
} }
// ── Server list status bubbles ──
function updateServerListStatuses() { function updateServerListStatuses() {
const items = serversContainer.querySelectorAll('.server-item'); const items = $('serversContainer').querySelectorAll('.server-item');
items.forEach(item => { items.forEach(item => {
const s = servers.find(x => x.id === item.dataset.id); const s = servers.find(x => x.id === item.dataset.id);
if (!s) return; if (!s || !item._bubble) return;
const st = statuses[s.id]; const st = statuses[s.id];
if (!st || !st.ok || !st.data) { if (!st || !st.ok || !st.data || !st.data.online) {
item.statusBubble.textContent = 'Offline'; item._bubble.textContent = 'Offline';
item.statusBubble.style.backgroundColor = 'var(--offline)'; item._bubble.style.background = 'rgba(239,68,68,0.15)';
} else if (st.data.online) { item._bubble.style.color = '#f87171';
item.statusBubble.textContent = 'Online';
item.statusBubble.style.backgroundColor = 'var(--online)';
} else { } else {
item.statusBubble.textContent = 'Offline'; item._bubble.textContent = 'Online';
item.statusBubble.style.backgroundColor = 'var(--offline)'; item._bubble.style.background = 'rgba(34,197,94,0.15)';
item._bubble.style.color = '#4ade80';
} }
}); });
} }
// ── Actions ──
async function handleAdd() { async function handleAdd() {
const name = inputName.value.trim(); const name = $('inputName').value.trim();
const url = inputUrl.value.trim(); const url = $('inputUrl').value.trim();
const wpSite = inputWpSite.value.trim(); const wpSite = $('inputWpSite').value.trim();
const wpServerId = inputWpServerId.value.trim(); const wpServerId = $('inputWpServerId').value.trim();
if (!url && !wpSite) return; if (!url && !wpSite) return;
const s = { id: uid(), name: name || url || wpSite, url: url || null, wpSite: wpSite || null, wpServerId: wpServerId || null }; const s = { id: uid(), name: name || url || wpSite, url: url || null, wpSite: wpSite || null, wpServerId: wpServerId || null };
servers.push(s); servers.push(s);
await saveServersToStorage(); await saveServersToStorage();
inputName.value = inputUrl.value = inputWpSite.value = inputWpServerId.value = ''; $('inputName').value = $('inputUrl').value = $('inputWpSite').value = $('inputWpServerId').value = '';
renderServerList(); renderServerList();
} }
@@ -303,8 +351,8 @@ async function handleEdit() {
if (!selectedId) return; if (!selectedId) return;
const srv = servers.find(s => s.id === selectedId); const srv = servers.find(s => s.id === selectedId);
if (!srv) return; if (!srv) return;
const newName = prompt('Name:', srv.name) || srv.name; const newName = prompt('Name:', srv.name);
srv.name = newName.trim(); if (newName !== null) srv.name = newName.trim();
await saveServersToStorage(); await saveServersToStorage();
renderServerList(); renderServerList();
renderDetail(selectedId); renderDetail(selectedId);
@@ -323,6 +371,7 @@ async function manualRefresh() {
try { chrome.runtime.sendMessage({ cmd: 'refreshNow' }); } catch(e) {} try { chrome.runtime.sendMessage({ cmd: 'refreshNow' }); } catch(e) {}
} }
// ── Live updates from background ──
chrome.storage.onChanged.addListener((changes, area) => { chrome.storage.onChanged.addListener((changes, area) => {
if (area === 'local' && changes.serverStatuses) { if (area === 'local' && changes.serverStatuses) {
statuses = changes.serverStatuses.newValue || {}; statuses = changes.serverStatuses.newValue || {};