Luanti-Minetest/luanti-web
1
0
Fork 0
Code Issues Pull requests Projects Releases 6 Packages Wiki Activity Actions

second alpha (v0.2)

Browse source
This commit is contained in:
Rainer 2025-06-21 15:58:52 +02:00
parent 7a343254e2
commit 7a1094c733
22 changed files with 2343 additions and 1511 deletions
Download patch file Download diff file Expand all files Collapse all files

129
site_generator/templates/css.template
View file

@ -100,7 +100,14 @@ a.world-preview:hover {
.page-nav-buttons { text-align: right; margin-top: 10px; margin-bottom: 15px; }
.page-nav-buttons .button { background-color: #555; color: #FFA500; border: 1px solid #666; padding: 5px 10px; margin-left: 5px; margin-bottom: 5px; border-radius: 3px; text-decoration: none; font-size: 0.9em; display: inline-block; }
.page-nav-buttons .button:hover { background-color: #666; color: #FFC500; }
.leaflet-map { width: 100%; height: 600px; border: 1px solid #666; margin-bottom: 5px; border-radius: 3px; background-color: #111;}
/* KORREKTUR: Klasse umbenannt von .leaflet-map zu .map-view-container */
.map-view-container {
width: 100%;
height: 600px;
border: 1px solid #666;
margin-bottom: 5px;
border-radius: 3px;
}
.map-sub-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.9em; color: #aaa; margin-bottom: 20px; padding: 5px 0; }
.map-sub-info .map-file-link { text-align: left; }
.map-sub-info .map-last-update { text-align: right; }
@ -119,7 +126,7 @@ a.world-preview:hover {
padding: 15px;
border-radius: 5px;
border: 1px solid #4a4a4a;
flex-grow: 0; /* KORREKTUR: Verhindert das Strecken der letzten Box */
flex-grow: 0;
flex-shrink: 1;
flex-basis: calc(50% - 8px);
box-sizing: border-box;
@ -181,7 +188,7 @@ a.world-preview:hover {
border: 1px solid #555;
border-radius: 5px;
padding: 10px;
width: calc((100% - 30px) / 3); /* KORREKTUR: Max 3 Boxen pro Zeile */
width: calc((100% - 30px) / 3);
box-sizing: border-box;
display: flex;
flex-direction: column;
@ -429,57 +436,6 @@ a.read-more-link {
display: block;
}
/* KORREKTUR: Leaflet Fullscreen Button Icon */
.leaflet-control-fullscreen a {
background: #fff url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M2 9H0v7h7v-2H2V9zM0 7h2V2h5V0H0v7zm14 2v5h-5v2h7V9h-2zm0-2V0h-7v2h5v5h2z" fill="%23333"/%3E%3C/svg%3E') no-repeat center center;
background-size: 16px 16px;
font-size: 0; /* Versteckt fehlerhafte Text-Icons */
}
.leaflet-control-fullscreen a.leaflet-fullscreen-on {
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 11h5v5h2V9H0v2zm11 5h5V9h-2v5h-3v2zM5 0H0v7h2V2h3V0zm9 2V0h-2v7h7V5h-5z" fill="%23333"/%3E%3C/svg%3E');
}
/* KORREKTUR: Stile für Marker-Popup */
.leaflet-popup-content-wrapper, .leaflet-popup-content {
background-color: #303030 !important;
color: #ddd !important;
border-radius: 5px;
}
.leaflet-popup-content {
margin: 0 !important;
padding: 0 !important;
line-height: 1.5;
}
.leaflet-container a.leaflet-popup-close-button {
color: #ddd;
padding: 8px 8px 0 0;
}
.leaflet-container a.leaflet-popup-close-button:hover {
color: #fff;
background-color: transparent;
}
.popup-player-box {
padding: 10px;
}
.popup-player-box .player-name {
font-size: 1.2em; /* Schriftgröße für Namen im Popup erhöht */
}
.popup-player-vitals {
display: flex;
justify-content: space-around;
gap: 10px;
align-items: center;
margin-top: 8px;
}
.popup-player-vitals .vital {
display: flex;
align-items: center;
gap: 5px;
}
.popup-player-vitals .icon {
font-size: 1.2em;
}
@media (max-width: 768px) {
/* Responsive Stile für Burger-Menü */
.responsive-nav {
@ -525,7 +481,7 @@ a.read-more-link {
margin-right: 0;
margin-bottom: 15px;
}
.leaflet-map {
.map-view-container { /* KORREKTUR: Klasse umbenannt */
height: auto;
aspect-ratio: 4 / 3;
max-height: 70vh;
@ -535,3 +491,66 @@ a.read-more-link {
.player-box { width: 100%; } /* 1 Spalte auf Handys */
.admin-box { flex-basis: 100%; } /* 1 Spalte auf Handys */
}
/* Stile für OpenLayers Popups (Leaflet-Look-and-Feel) */
.ol-popup {
position: absolute;
background-color: #303030;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
padding: 1px;
border-radius: 5px;
bottom: 12px;
left: -50px;
min-width: 280px;
border: 1px solid #555;
color: #ddd;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: #303030;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #555;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
.ol-popup-closer {
text-decoration: none;
position: absolute;
top: 2px;
right: 8px;
color: #ddd;
font-size: 1.5em;
font-weight: bold;
}
.ol-popup-closer:hover {
color: #fff;
}
.ol-popup-content {
font-size: 13px;
line-height: 1.5;
padding: 10px;
margin: 0;
}
/* Stile für den Inhalt innerhalb des Popups */
.popup-player-box .player-header { display: flex; align-items: center; margin-bottom: 8px; }
.popup-player-box .player-identity { display: flex; align-items: center; }
.popup-player-box .player-icon { width: 40px; height: 40px; margin-right: 10px; border-radius: 3px; flex-shrink: 0;}
.popup-player-box .player-name-status { display: flex; align-items: center; }
.popup-player-box .player-name { font-weight: bold; font-size: 1.2em; color: #FFD700; margin-left: 5px; }
.popup-player-box .privilege-separator { height: 1px; background-color: #555; border: 0; margin: 8px 0; }
.popup-player-box .popup-player-vitals { display: flex; justify-content: space-around; gap: 10px; align-items: center; margin-top: 8px; }
.popup-player-box .popup-player-vitals .vital { display: flex; align-items: center; gap: 5px; }
.popup-player-box .popup-player-vitals .icon { font-size: 1.2em; }

16
site_generator/templates/html_header.template
View file

@ -5,16 +5,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>%%current_page_title%% - %%SITE_TITLE%%</title>
<link rel="stylesheet" href="%%relative_path_prefix%%/style.css?v=%%CACHE_BUSTER%%">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link href='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/leaflet.fullscreen.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-fullscreen/v1.0.1/Leaflet.fullscreen.min.js'></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.css" type="text/css">
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@main/dist/en/v7.0.0/legacy/ol.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const scrollToTopBtn = document.getElementById('scrollToTopBtn');
// Scroll-Event nur für den "Nach oben"-Button
if (scrollToTopBtn) {
window.addEventListener('scroll', function() {
window.requestAnimationFrame(function() {
@ -25,14 +22,9 @@
}
});
});
// Klick-Event für den Scroll-To-Top Button
scrollToTopBtn.addEventListener('click', function(e) {
e.preventDefault();
window.scrollTo({
top: 0,
behavior: 'smooth'
});
window.scrollTo({ top: 0, behavior: 'smooth' });
});
}
});

70
site_generator/templates/world_detail_archiv.template Executable file
View file

@ -0,0 +1,70 @@
<div class="archive-controls">
<label for="archive-date-selector-%%current_world_key%%">Archivdatum:</label>
<select id="archive-date-selector-%%current_world_key%%">
<option value="">-- Bitte wählen --</option>
</select>
<span id="archive-error-msg-%%current_world_key%%" class="archive-error"></span>
</div>
<div class="archive-image-container">
<img id="archive-image-%%current_world_key%%" alt="Archivierte Karte" style="display:none; max-width:100%;">
<p id="archive-placeholder-%%current_world_key%%">Bitte ein Datum auswählen, um die Karte anzuzeigen.</p>
</div>
<script>
// Um zu verhindern, dass das Skript mehrfach ausgeführt wird
if (!window.archiveScriptLoaded_%%current_world_key%%) {
window.archiveScriptLoaded_%%current_world_key%% = true;
const selector = document.getElementById('archive-date-selector-%%current_world_key%%');
const imageElement = document.getElementById('archive-image-%%current_world_key%%');
const placeholder = document.getElementById('archive-placeholder-%%current_world_key%%');
const errorMessage = document.getElementById('archive-error-msg-%%current_world_key%%');
const availableDates = %%available_archive_dates_js_array%%;
const imageBaseUrl = '%%archive_world_rel_to_webroot%%';
if (selector && availableDates && availableDates.length > 0) {
availableDates.forEach(dateStr => {
const option = document.createElement('option');
const parts = dateStr.split('-');
option.value = dateStr;
option.textContent = `${parts[2]}.${parts[1]}.${parts[0]}`;
selector.appendChild(option);
});
selector.addEventListener('change', function() {
imageElement.style.display = 'none';
errorMessage.textContent = '';
const selectedDate = this.value;
if (selectedDate) {
// WICHTIGE ÄNDERUNG: Platzhalter wird jetzt hier versteckt
placeholder.style.display = 'none';
const dateParts = selectedDate.split('-');
const imageUrl = `${imageBaseUrl}/${dateParts[0]}/${dateParts[1]}/${dateParts[2]}.png?v=%%CACHE_BUSTER%%`;
imageElement.src = imageUrl;
} else {
// Wenn "-- Bitte wählen --" ausgewählt wird, Platzhalter wieder anzeigen
placeholder.style.display = 'block';
}
});
imageElement.onload = function() {
this.style.display = 'block';
errorMessage.textContent = ''; // Sicherstellen, dass keine alte Fehlermeldung mehr da ist
};
imageElement.onerror = function() {
this.style.display = 'none';
// WICHTIGE ÄNDERUNG: Fehlermeldung ersetzt jetzt den Platzhalter
placeholder.style.display = 'none';
errorMessage.textContent = 'Fehler: Bild für dieses Datum konnte nicht geladen werden.';
};
} else if (selector) {
selector.disabled = true;
selector.querySelector('option').textContent = 'Keine Archive verfügbar';
}
}
</script>

454
site_generator/templates/world_detail_page.template
View file

@ -1,18 +1,11 @@
<div class='page-title-container'>
<h2 class='world-detail-title'>%%WORLD_DISPLAY_NAME_PAGE%%</h2>
</div>
<div class="close-button-container">
<a href="worlds.html" class="close-button" title="Zurück zur Weltenübersicht"><b>X</b></a>
</div>
<div class="responsive-nav">
<button id="burger-menu-toggle" class="burger-menu" aria-label="Menü öffnen/schließen">
<span></span>
<span></span>
<span></span>
</button>
<button id="burger-menu-toggle" class="burger-menu" aria-label="Menü öffnen/schließen"><span></span><span></span><span></span></button>
<div class='page-nav-buttons' id="page-nav-buttons-container-%%current_world_key%%">
<a href='#server-info' class='button'>Server-Info</a>
<a href='#server-verbindung' class='button'>Verbindung</a>
@ -25,62 +18,68 @@
</div>
</div>
<div id='server-info' class='info-box server-details'>
<h3>Server-Info</h3>
<p><strong>Status:</strong> <span class='status-dot' id='status-dot-%%current_world_key%%'></span><span id='world-status-%%current_world_key%%' class='status-text status-loading'>%%STATUS_TEXT_FALLBACK_PAGE%%</span></p>
<p><strong>Spiel:</strong> <a href='https://content.luanti.org/packages/?type=game&q=%%MT_GAMEID%%' target='_blank' rel='noopener noreferrer'>%%MT_GAMEID%%</a></p>
<p><strong>Kreativmodus:</strong> <span class='status-text-colored %%creative_text_class%%'>%%creative_text%%</span></p>
<p><strong>Schaden:</strong> <span class='status-text-colored %%damage_text_class%%'>%%damage_text%%</span></p>
<h3>Server-Info</h3>
<p><strong>Status:</strong> <span class='status-dot' id='status-dot-%%current_world_key%%'></span><span id='world-status-%%current_world_key%%' class='status-text status-loading'>%%STATUS_TEXT_FALLBACK_PAGE%%</span></p>
<p><strong>Spiel:</strong> <a href='https://content.luanti.org/packages/?type=game&q=%%MT_GAMEID%%' target='_blank' rel='noopener noreferrer'>%%MT_GAMEID%%</a></p>
<p><strong>Kreativmodus:</strong> <span class='status-text-colored %%creative_text_class%%'>%%creative_text%%</span></p>
<p><strong>Schaden:</strong> <span class='status-text-colored %%damage_text_class%%'>%%damage_text%%</span></p>
<div id="weather-info-%%current_world_key%%"></div>
</div>
<div id='server-verbindung' class='info-box server-details'>
<h3>Server-Verbindung</h3>
<p><strong>Adresse:</strong> <span id='addr-%%current_world_key%%'>%%SERVER_ADDRESS_PAGE%%</span><button title='Adresse kopieren' class='copy-button' onclick='copyToClipboard("addr-%%current_world_key%%")'>📋</button></p>
<p><strong>Port:</strong> <span id='port-%%current_world_key%%'>%%SERVER_PORT_PAGE%%</span><button title='Port kopieren' class='copy-button' onclick='copyToClipboard("port-%%current_world_key%%")'>📋</button></p>
<p><strong>Passwort:</strong> <span id='pass-%%current_world_key%%'>%%SERVER_ACCESS_INFO_PAGE%%</span><button title='Info kopieren' class='copy-button' onclick='copyToClipboard("pass-%%current_world_key%%")'>📋</button></p>
<h3>Server-Verbindung</h3>
<p><strong>Adresse:</strong> <span id='addr-%%current_world_key%%'>%%SERVER_ADDRESS_PAGE%%</span><button title='Adresse kopieren' class='copy-button' onclick='copyToClipboard("addr-%%current_world_key%%")'>📋</button></p>
<p><strong>Port:</strong> <span id='port-%%current_world_key%%'>%%SERVER_PORT_PAGE%%</span><button title='Port kopieren' class='copy-button' onclick='copyToClipboard("port-%%current_world_key%%")'>📋</button></p>
<p><strong>Passwort:</strong> <span id='pass-%%current_world_key%%'>%%SERVER_ACCESS_INFO_PAGE%%</span><button title='Info kopieren' class='copy-button' onclick='copyToClipboard("pass-%%current_world_key%%")'>📋</button></p>
</div>
<div id='welt-admin' class='admin-section'>
<h3>Welt-Admin</h3>
<div class='admin-grid'>
%%ADMIN_BOXES_HTML%%
</div>
<h3>Welt-Admin</h3>
<div class='admin-grid'>%%ADMIN_BOXES_HTML%%</div>
</div>
<script>
// === Globale Variablen für Spielerliste und Karte ===
let map_%%current_world_key%%;
let playerMarkers_%%current_world_key%% = {};
let masterPlayerData_%%current_world_key%% = {};
let playerFilters_%%current_world_key%% = {
activeOnly: false,
privileges: new Set()
};
<div id="description-text-wrapper">
<h3 id='beschreibung'>Beschreibung</h3>
<div id="description-text" class="collapsible-text">%%WORLD_LONG_DESCRIPTION_PAGE%%</div>
<div class="read-more-container"><a href="#" class="read-more-link" data-target="description-text">weiterlesen</a></div>
</div>
// === Hilfsfunktionen ===
function copyToClipboard(elementId) { const el = document.getElementById(elementId); if(el) { navigator.clipboard.writeText(el.innerText || el.textContent).then(() => { const btn = el.nextElementSibling; if(btn && btn.classList.contains('copy-button')) { const orig_btn_text = btn.innerHTML; btn.innerHTML = '✓'; setTimeout(() => { btn.innerHTML = orig_btn_text; }, 1500); } else { alert('Kopiert: ' + el.innerText); } }).catch(err => console.error('Fehler Kopieren: ', err));}}
<div id="gamerules-section">
<h3 id='spielregeln'>Spielregeln</h3>
<div id="gamerules-text-wrapper">
<div id="gamerules-text" class="collapsible-text">%%WORLD_GAME_RULES_PAGE%%</div>
<div class="read-more-container"><a href="#" class="read-more-link" data-target="gamerules-text">weiterlesen</a></div>
</div>
</div>
%%WORLD_RADAR_HTML%%
<h3 id='mods'>Verwendete Mods</h3>
<div class='scrollable-mod-list'>%%MODS_HTML%%</div>
%%WORLD_PLAYERLIST_HTML%%
<script>
// === Globale Hilfsfunktionen & Datenabruf ===
function copyToClipboard(elementId) { const el = document.getElementById(elementId); if(el) { navigator.clipboard.writeText(el.innerText || el.textContent).then(() => { const btn = el.nextElementSibling; if(btn && btn.classList.contains('copy-button')) { const orig_btn_text = btn.innerHTML; btn.innerHTML = '✓'; setTimeout(() => { btn.innerHTML = orig_btn_text; }, 1500); } }).catch(err => console.error('Fehler Kopieren: ', err));}}
function formatTimestampForDisplay(epochSeconds) { if (!epochSeconds || epochSeconds == 0) return 'unbekannt'; const date = new Date(epochSeconds * 1000); return date.toLocaleString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', second: '2-digit'}) + ' Uhr';}
// === Status- und Datenabruf ===
function fetchWorldStatus_%%current_world_key%%() {
const statusTextEl = document.getElementById('world-status-%%current_world_key%%');
const statusDotEl = document.getElementById('status-dot-%%current_world_key%%');
if (!statusTextEl || !statusDotEl) return;
const onlineStatusUrl = '/%%web_online_status_rel_path%%?v=%%CACHE_BUSTER%%&t=' + new Date().getTime();
const lastUpdateUrl = '/%%web_last_update_rel_path%%?v=%%CACHE_BUSTER%%&t=' + new Date().getTime();
Promise.all([
fetch(onlineStatusUrl).then(res => res.text()),
fetch(lastUpdateUrl).then(res => res.text())
]).then(([onlineStatusContent, lastUpdateContent]) => {
Promise.all([fetch(onlineStatusUrl).then(res => res.text()), fetch(lastUpdateUrl).then(res => res.text())])
.then(([onlineStatusContent, lastUpdateContent]) => {
const dateObject = new Date(lastUpdateContent.trim());
const lastUpdateEpoch = !isNaN(dateObject.getTime()) ? Math.floor(dateObject.getTime() / 1000) : NaN;
const nowInSeconds = Math.floor(Date.now() / 1000);
if (!isNaN(lastUpdateEpoch) && (nowInSeconds - lastUpdateEpoch > 900)) {
statusDotEl.className = 'status-dot unknown';
statusTextEl.className = 'status-text status-unknown';
const formattedTime = formatTimestampForDisplay(lastUpdateEpoch);
statusTextEl.textContent = 'Unbekannt (seit: ' + formattedTime + ')';
statusTextEl.textContent = 'Unbekannt (seit: ' + formatTimestampForDisplay(lastUpdateEpoch) + ')';
return;
}
const onlineStatusParts = onlineStatusContent.split(' - ');
@ -96,7 +95,6 @@ function fetchWorldStatus_%%current_world_key%%() {
statusTextEl.textContent = 'Offline (seit: ' + offlineSince + ')';
}
}).catch(error => {
console.error('Fehler beim Abrufen des Welt-Status (%%current_world_key%%):', error);
statusDotEl.className = 'status-dot offline';
statusTextEl.className = 'status-text status-offline';
statusTextEl.textContent = 'Status nicht abrufbar';
@ -105,242 +103,38 @@ function fetchWorldStatus_%%current_world_key%%() {
function fetchDataForElement(elementId, filePath, isRawText, prefixText, suffixText, isJsonPlayerList) {
const el = document.getElementById(elementId);
if (!el) { return; }
if (!el && !isJsonPlayerList) return;
fetch('/' + filePath + '?v=%%CACHE_BUSTER%%&t=' + new Date().getTime())
.then(r => { if (!r.ok) throw new Error('Datei ' + filePath + ' nicht erreichbar (' + r.status + ')'); return r.text(); })
.then(t => {
let content = "";
if (t.trim() === "") {
content = (elementId.startsWith("map-last-update") ? "<em>unbekannt</em>" : "<em>Keine Daten verfügbar.</em>");
if (isJsonPlayerList) {
masterPlayerData_%%current_world_key%% = {};
updatePlayerMarkers_%%current_world_key%%(masterPlayerData_%%current_world_key%%);
applyPlayerFiltersAndRender_%%current_world_key%%();
if (isJsonPlayerList && window.playerListLogic_%%current_world_key%%) {
window.playerListLogic_%%current_world_key%%.masterPlayerData = {};
window.playerListLogic_%%current_world_key%%.updatePlayerMarkers({});
window.playerListLogic_%%current_world_key%%.applyPlayerFiltersAndRender();
}
} else {
if (isJsonPlayerList) {
if (isJsonPlayerList && window.playerListLogic_%%current_world_key%%) {
try {
masterPlayerData_%%current_world_key%% = JSON.parse(t);
updatePlayerMarkers_%%current_world_key%%(masterPlayerData_%%current_world_key%%);
applyPlayerFiltersAndRender_%%current_world_key%%();
} catch (e) {
console.error("Fehler beim Parsen der Spielerdaten:", e);
}
const playerData = JSON.parse(t);
const logic = window.playerListLogic_%%current_world_key%%;
logic.masterPlayerData = playerData;
logic.updatePlayerMarkers(playerData);
logic.applyPlayerFiltersAndRender();
} catch (e) { console.error("Fehler beim Parsen der Spielerdaten:", e); }
return;
} else if (isRawText) {
const dv = document.createElement('div');
dv.textContent = t;
content = dv.innerHTML.replace(/\n|\r\n|\r/g, '<br>');
} else {
content = t.replace(/\n|\r\n|\r/g, '<br>');
}
} else { content = isRawText ? t.replace(/\n/g, '<br>') : t; }
}
el.innerHTML = (prefixText ? prefixText : '') + content + (suffixText ? suffixText : '');
if(el) { el.innerHTML = (prefixText || '') + content + (suffixText || ''); }
}).catch(e => {
console.error('Fehler Laden ' + filePath + ':', e);
el.innerHTML = (prefixText ? prefixText : '') + '<em>nicht abrufbar</em>' + (suffixText ? suffixText : '');
if(el) { el.innerHTML = (prefixText || '') + '<em>nicht abrufbar</em>' + (suffixText || ''); }
});
}
// === Spieler- und Marker-Logik ===
function convertMinetestToLeaflet_%%current_world_key%%(posX, posZ) {
const mapWidth = %%MAP_WIDTH%%;
const mapHeight = %%MAP_HEIGHT%%;
const minX = %%MAP_EXTENT_MIN_X%%;
const minZ = %%MAP_EXTENT_MIN_Z%%;
const extentWidth = %%MAP_EXTENT_WIDTH%%;
const extentHeight = %%MAP_EXTENT_HEIGHT%%;
if (mapWidth === 0 || extentWidth === 0) return null;
const percentX = (posX - minX) / extentWidth;
const percentZ = (posZ - minZ) / extentHeight;
const pixelX = percentX * mapWidth;
const pixelY_from_bottom = percentZ * mapHeight;
const pixelY_from_top = mapHeight - pixelY_from_bottom;
return L.latLng(-pixelY_from_top, pixelX);
}
function updatePlayerMarkers_%%current_world_key%%(playerData) {
if (!map_%%current_world_key%%) return;
const adminIcon = L.icon({ iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-yellow.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
const playerIcon = L.icon({ iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-grey.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png', iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34], shadowSize: [41, 41] });
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
const playersOnMap = new Set();
for (const id in playerData) {
const p = playerData[id];
playersOnMap.add(p.name);
const latLng = convertMinetestToLeaflet_%%current_world_key%%(p.posX, p.posZ);
if (!latLng) continue;
const isAdmin = (p.privilege || '').includes('server');
const icon = isAdmin ? adminIcon : playerIcon;
let lastLoginFormatted = 'unbekannt';
let statusDotClass = 'offline';
if (p.last_login) {
if ((now_epoch - p.last_login < twentyFourHoursInSeconds)) { statusDotClass = 'online'; }
lastLoginFormatted = formatTimestampForDisplay(p.last_login);
}
const popupContent = `
<div class='popup-player-box'>
<div class="player-header">
<div class="player-identity">
<img src="/images/players/${encodeURIComponent(p.name)}.png?v=%%CACHE_BUSTER%%" class="player-icon" alt="${p.name}" onerror="this.onerror=null;this.src='/%%DEFAULT_PLAYER_SKIN_URL%%?v=%%CACHE_BUSTER%%';">
<span class="player-name-status">
<span class="status-dot ${statusDotClass}" title="Letzter Login: ${lastLoginFormatted}"></span>
<strong class="player-name">${p.name}</strong>
</span>
</div>
</div>
<hr class="privilege-separator">
<div class="popup-player-vitals">
<span class="vital"><span class="icon">❤️</span> ${p.hp !== undefined ? p.hp : '?'}</span>
<span class="vital"><span class="icon">💨</span> ${p.breath !== undefined ? p.breath : '?'}</span>
<span class="vital"><span class="icon">🍖</span> ${p.stamina !== undefined ? p.stamina : '?'}</span>
</div>
</div>`;
if (playerMarkers_%%current_world_key%%[p.name]) {
const marker = playerMarkers_%%current_world_key%%[p.name];
marker.setLatLng(latLng);
marker.setIcon(icon);
marker.setPopupContent(popupContent);
} else {
const newMarker = L.marker(latLng, { icon: icon }).bindPopup(popupContent, { minWidth: 240 });
newMarker.addTo(map_%%current_world_key%%);
playerMarkers_%%current_world_key%%[p.name] = newMarker;
}
}
for (const name in playerMarkers_%%current_world_key%%) {
if (!playersOnMap.has(name)) {
map_%%current_world_key%%.removeLayer(playerMarkers_%%current_world_key%%[name]);
delete playerMarkers_%%current_world_key%%[name];
}
}
}
function applyPlayerFiltersAndRender_%%current_world_key%%() {
const filteredData = {};
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in masterPlayerData_%%current_world_key%%) {
const player = masterPlayerData_%%current_world_key%%[id];
let passesFilter = true;
if (playerFilters_%%current_world_key%%.activeOnly) {
const isActive = player.last_login && (now_epoch - player.last_login < twentyFourHoursInSeconds);
if (!isActive) { passesFilter = false; }
}
if (passesFilter && playerFilters_%%current_world_key%%.privileges.size > 0) {
const playerPrivs = new Set(player.privilege ? player.privilege.toLowerCase().split(',') : []);
for (const requiredPriv of playerFilters_%%current_world_key%%.privileges) {
if (!playerPrivs.has(requiredPriv)) {
passesFilter = false;
break;
}
}
}
if (passesFilter) { filteredData[id] = player; }
}
const playerListContainer = document.getElementById('player-info-%%current_world_key%%');
if(playerListContainer) { playerListContainer.innerHTML = renderPlayerListHTML_%%current_world_key%%(filteredData); }
}
function renderPlayerListHTML_%%current_world_key%%(playerData) {
if (!playerData || Object.keys(playerData).length === 0) {
return "<p><em>Keine Spieler entsprechen den aktuellen Filtereinstellungen.</em></p>";
}
let html = "<div class='player-list-grid'>";
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in playerData) {
const p = playerData[id];
const privs = p.privilege ? p.privilege.toLowerCase().split(',') : [];
const hasServerPriv = privs.includes("server");
const playerBoxClass = "player-box" + (hasServerPriv ? " has-server-priv" : "");
let statusDotClass = "offline";
let lastLoginFormatted = 'unbekannt';
if (p.last_login) {
if ((now_epoch - p.last_login < twentyFourHoursInSeconds)) { statusDotClass = "online"; }
lastLoginFormatted = formatTimestampForDisplay(p.last_login);
}
const hasInteract = privs.includes('interact'); const hasShout = privs.includes('shout'); const hasFast = privs.includes('fast'); const hasFly = privs.includes('fly'); const hasGive = privs.includes('give'); const hasTeleport = privs.includes('teleport'); const hasAreas = privs.includes('areas'); const hasNoclip = privs.includes('noclip'); const hasSettime = privs.includes('settime'); const hasWeather = privs.includes('weather');
html += `
<div class="${playerBoxClass}">
<div class="player-header">
<div class="player-identity">
<img src="/images/players/${encodeURIComponent(p.name)}.png?v=%%CACHE_BUSTER%%" class="player-icon" alt="${p.name}" onerror="this.onerror=null;this.src='/%%DEFAULT_PLAYER_SKIN_URL%%?v=%%CACHE_BUSTER%%';">
<span class="player-name-status">
<span class="status-dot ${statusDotClass}" data-title="Letzter Login: ${lastLoginFormatted}"></span>
<strong class="player-name">${p.name}</strong>
</span>
</div>
<div class="player-vitals">
<span class="icon" data-title="HP: ${p.hp !== undefined ? p.hp : '?'}">❤️</span>
<span class="icon" data-title="Atem: ${p.breath !== undefined ? p.breath : '?'}">💨</span>
<span class="icon" data-title="Ausdauer: ${p.stamina !== undefined ? p.stamina : '?'}">🍖</span>
</div>
</div>
<hr class="privilege-separator">
<div class="player-attributes">
<span class="icon privilege ${hasInteract ? 'active' : ''}" data-title="Interagieren">🖐️</span>
<span class="icon privilege ${hasShout ? 'active' : ''}" data-title="Rufen">📢</span>
<span class="icon privilege ${hasFast ? 'active' : ''}" data-title="Schnelles Laufen">🏃</span>
<span class="icon privilege ${hasFly ? 'active' : ''}" data-title="Fliegen">🕊️</span>
<span class="icon privilege ${hasGive ? 'active' : ''}" data-title="Geben">🎁</span>
<span class="icon privilege ${hasTeleport ? 'active' : ''}" data-title="Teleportieren">✨</span>
<span class="icon privilege ${hasAreas ? 'active' : ''}" data-title="Bereiche">🗺️</span>
<span class="icon privilege ${hasNoclip ? 'active' : ''}" data-title="Noclip">👻</span>
<span class="icon privilege ${hasSettime ? 'active' : ''}" data-title="Zeit setzen">🕒</span>
<span class="icon privilege ${hasWeather ? 'active' : ''}" data-title="Wetter">🌦️</span>
<span class="icon privilege ${hasServerPriv ? 'active' : ''}" data-title="Server-Admin">🛠️</span>
</div>
</div>`;
}
html += "</div>";
return html;
}
document.addEventListener('DOMContentLoaded', function() {
// === Leaflet-Karten Initialisierung ===
const mapContainer = document.getElementById('leaflet-map-container-%%current_world_key%%');
if (mapContainer && typeof L !== 'undefined' && %%MAP_WIDTH%% > 0) {
map_%%current_world_key%% = L.map(mapContainer, {
crs: L.CRS.Simple,
minZoom: -4, // Erlaubt sehr weites Herauszoomen
fullscreenControl: true,
fullscreenControlOptions: {
position: 'topleft',
title: 'Vollbild',
titleCancel: 'Vollbild verlassen'
}
});
const mapWidth = %%MAP_WIDTH%%;
const mapHeight = %%MAP_HEIGHT%%;
const bounds = [[-mapHeight, 0], [0, mapWidth]];
const imageUrl = '/%%web_map_preview_rel_path%%?v=%%CACHE_BUSTER%%';
L.imageOverlay(imageUrl, bounds).addTo(map_%%current_world_key%%);
map_%%current_world_key%%.fitBounds(bounds);
map_%%current_world_key%%.setMaxBounds(bounds);
} else if (mapContainer) {
if (%%MAP_WIDTH%% <= 0) {
mapContainer.innerHTML = "<p><em>Dynamische Karte konnte nicht geladen werden (fehlende Kartendaten).</em></p>";
}
}
// === Burger-Menü Logik ===
// Burger-Menü Logik
const burgerToggle = document.getElementById('burger-menu-toggle');
const navContainer = document.getElementById('page-nav-buttons-container-%%current_world_key%%');
if (burgerToggle && navContainer) {
@ -348,43 +142,9 @@ document.addEventListener('DOMContentLoaded', function() {
navContainer.addEventListener('click', e => { if (e.target.classList.contains('button')) { navContainer.classList.remove('menu-open'); }});
}
// === Live/Archiv Umschalter Logik ===
const liveBtn = document.getElementById('toggle-live-btn-%%current_world_key%%');
const archiveBtn = document.getElementById('toggle-archive-btn-%%current_world_key%%');
const liveContainer = document.getElementById('live-map-container-%%current_world_key%%');
const archiveContainer = document.getElementById('archive-view-container-%%current_world_key%%');
if (liveBtn && archiveBtn && liveContainer && archiveContainer) {
liveBtn.addEventListener('click', () => {
liveBtn.classList.add('active'); archiveBtn.classList.remove('active');
liveContainer.style.display = 'block'; archiveContainer.style.display = 'none';
if (map_%%current_world_key%%) { setTimeout(() => map_%%current_world_key%%.invalidateSize(), 10); }
});
archiveBtn.addEventListener('click', () => {
archiveBtn.classList.add('active'); liveBtn.classList.remove('active');
archiveContainer.style.display = 'block'; liveContainer.style.display = 'none';
});
}
// === Spieler-Filter Logik ===
const filterBtn = document.getElementById('player-filter-toggle-btn-%%current_world_key%%');
const filterDropdown = document.getElementById('player-filter-dropdown-%%current_world_key%%');
if(filterBtn && filterDropdown) {
filterBtn.addEventListener('click', (e) => { e.stopPropagation(); filterDropdown.classList.toggle('show'); });
filterDropdown.addEventListener('change', (e) => {
if (e.target.type === 'checkbox') {
const filterType = e.target.dataset.filter; const filterValue = e.target.dataset.priv;
if(filterType === 'active') { playerFilters_%%current_world_key%%.activeOnly = e.target.checked; }
else if(filterType === 'privilege') { if(e.target.checked) { playerFilters_%%current_world_key%%.privileges.add(filterValue); } else { playerFilters_%%current_world_key%%.privileges.delete(filterValue); } }
applyPlayerFiltersAndRender_%%current_world_key%%();
}
});
}
window.addEventListener('click', (e) => { if (filterDropdown && !filterBtn.contains(e.target) && !filterDropdown.contains(e.target)) { filterDropdown.classList.remove('show'); }});
// === "Weiterlesen"-Logik ===
// "Weiterlesen"-Logik
document.querySelectorAll('.read-more-link').forEach(link => {
const targetId = link.dataset.target;
const targetElement = document.getElementById(targetId);
const targetElement = document.getElementById(link.dataset.target);
if (targetElement) {
if (targetElement.scrollHeight <= targetElement.clientHeight) {
link.parentElement.style.display = 'none';
@ -398,112 +158,16 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
// === Initiale Daten-Ladeaufrufe ===
// Initiale Daten-Ladeaufrufe
fetchWorldStatus_%%current_world_key%%();
fetchDataForElement('player-info-%%current_world_key%%', '%%web_players_txt_rel_path%%', false, '', '', true);
fetchDataForElement('weather-info-%%current_world_key%%', '%%web_weather_txt_rel_path%%', true, '<p><strong>Wetter:</strong> ', '</p>');
fetchDataForElement('map-last-update-text-%%current_world_key%%', '%%web_last_update_rel_path%%', true, '', '');
});
// === Periodische Updates ===
// Periodische Updates
setInterval(fetchWorldStatus_%%current_world_key%%, 60000);
setInterval(() => fetchDataForElement('map-last-update-text-%%current_world_key%%', '%%web_last_update_rel_path%%', true, '', ''), 60000);
setInterval(() => fetchDataForElement('player-info-%%current_world_key%%', '%%web_players_txt_rel_path%%', false, '', '', true), 70000);
setInterval(() => fetchDataForElement('weather-info-%%current_world_key%%', '%%web_weather_txt_rel_path%%', true, '<p><strong>Wetter:</strong> ', '</p>'), 300000);
</script>
<div id="description-text-wrapper">
<h3 id='beschreibung'>Beschreibung</h3>
<div id="description-text" class="collapsible-text">
%%WORLD_LONG_DESCRIPTION_PAGE%%
</div>
<div class="read-more-container">
<a href="#" class="read-more-link" data-target="description-text">weiterlesen</a>
</div>
</div>
<div id="gamerules-section">
<h3 id='spielregeln'>Spielregeln</h3>
<div id="gamerules-text-wrapper">
<div id="gamerules-text" class="collapsible-text">
%%WORLD_GAME_RULES_PAGE%%
</div>
<div class="read-more-container">
<a href="#" class="read-more-link" data-target="gamerules-text">weiterlesen</a>
</div>
</div>
</div>
<h3 id='weltradar' class="section-header-flex">
<span>Weltradar</span>
<div class="map-toggle-controls">
<button id="toggle-live-btn-%%current_world_key%%" class="map-toggle-button active">Live</button>
<button id="toggle-archive-btn-%%current_world_key%%" class="map-toggle-button">Archiv</button>
</div>
</h3>
<div id="live-map-container-%%current_world_key%%">
<div id="leaflet-map-container-%%current_world_key%%" class="leaflet-map">
</div>
<div class='map-sub-info'>
%%map_sub_info_link%%
<span class='map-last-update'>Letzte Kartenaktualisierung: <span id='map-last-update-text-%%current_world_key%%'><em>wird geladen...</em></span></span>
</div>
</div>
<div id="archive-view-container-%%current_world_key%%" style="display: none;">
%%ARCHIVE_HTML%%
</div>
<h3 id='mods'>Verwendete Mods</h3>
<div class='scrollable-mod-list'>%%MODS_HTML%%</div>
<h3 id='spielerliste' class="section-header-flex">
<span>Spielerliste</span>
<div class="filter-container">
<button id="player-filter-toggle-btn-%%current_world_key%%" class="filter-dropdown-btn">Filter ▾</button>
<div id="player-filter-dropdown-%%current_world_key%%" class="filter-dropdown">
<label class="filter-option">
<input type="checkbox" data-filter="active">
<span class="status-dot online"></span>
zuletzt aktiv
</label>
<hr class="privilege-separator">
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="interact"> <span class="icon">🖐️</span> Interagieren
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="shout"> <span class="icon">📢</span> Rufen
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="fast"> <span class="icon">🏃</span> Schnell
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="fly"> <span class="icon">🕊️</span> Fliegen
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="give"> <span class="icon">🎁</span> Geben
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="teleport"> <span class="icon">✨</span> Teleportieren
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="areas"> <span class="icon">🗺️</span> Bereiche
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="noclip"> <span class="icon">👻</span> Noclip
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="settime"> <span class="icon">🕒</span> Zeit
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="weather"> <span class="icon">🌦️</span> Wetter
</label>
<label class="filter-option">
<input type="checkbox" data-filter="privilege" data-priv="server"> <span class="icon">🛠️</span> Server
</label>
</div>
</div>
</h3>
<div id='player-info-%%current_world_key%%' class='player-list-container'>
<p><em>Spielerdaten werden geladen...</em></p>
</div>

164
site_generator/templates/world_detail_playerlist.template Normal file
View file

@ -0,0 +1,164 @@
<h3 id='spielerliste' class="section-header-flex">
<span>Spielerliste</span>
<div class="filter-container">
<button id="player-filter-toggle-btn-%%current_world_key%%" class="filter-dropdown-btn">Filter ▾</button>
<div id="player-filter-dropdown-%%current_world_key%%" class="filter-dropdown">
<label class="filter-option">
<input type="checkbox" data-filter="active">
<span class="status-dot online"></span>
zuletzt aktiv
</label>
<hr class="privilege-separator">
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="interact"> <span class="icon">🖐️</span> Interagieren</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="shout"> <span class="icon">📢</span> Rufen</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="fast"> <span class="icon">🏃</span> Schnell</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="fly"> <span class="icon">🕊️</span> Fliegen</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="give"> <span class="icon">🎁</span> Geben</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="teleport"> <span class="icon">✨</span> Teleportieren</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="areas"> <span class="icon">🗺️</span> Bereiche</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="noclip"> <span class="icon">👻</span> Noclip</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="settime"> <span class="icon">🕒</span> Zeit</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="weather"> <span class="icon">🌦️</span> Wetter</label>
<label class="filter-option"><input type="checkbox" data-filter="privilege" data-priv="server"> <span class="icon">🛠️</span> Server</label>
</div>
</div>
</h3>
<div id='player-info-%%current_world_key%%' class='player-list-container'>
<p><em>Spielerdaten werden geladen...</em></p>
</div>
<script>
if (!window.playerListLogic_%%current_world_key%%) {
window.playerListLogic_%%current_world_key%% = {
masterPlayerData: {},
playerFilters: { activeOnly: false, privileges: new Set() },
updatePlayerMarkers: function(playerData) {
const source = window.playerMarkerSource_%%current_world_key%%;
if (!source || typeof ol === 'undefined') return;
source.clear(); // Entferne alle alten Marker
// KORREKTUR: Marker-Stile auf Kreise umgestellt
const adminIconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 7,
fill: new ol.style.Fill({ color: 'rgba(255, 255, 0, 0.9)' }), // Gelb
stroke: new ol.style.Stroke({ color: '#fff', width: 2 })
})
});
const playerIconStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 6,
fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.9)' }), // Rot
stroke: new ol.style.Stroke({ color: '#fff', width: 1 })
})
});
const features = [];
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in playerData) {
const p = playerData[id];
const coords = convertMinetestToOpenLayers_%%current_world_key%%(p.posX, p.posZ);
if (!coords) continue;
const isAdmin = (p.privilege || '').includes('server');
let lastLoginFormatted = 'unbekannt';
let statusDotClass = 'offline';
if (p.last_login) {
if ((now_epoch - p.last_login < twentyFourHoursInSeconds)) { statusDotClass = 'online'; }
lastLoginFormatted = formatTimestampForDisplay(p.last_login);
}
const feature = new ol.Feature({
geometry: new ol.geom.Point(coords),
playerData: p,
statusDotClass: statusDotClass,
lastLoginFormatted: lastLoginFormatted
});
feature.set('style', isAdmin ? adminIconStyle : playerIconStyle);
features.push(feature);
}
source.addFeatures(features);
},
renderPlayerListHTML: function(playerData) {
if (!playerData || Object.keys(playerData).length === 0) {
return "<p><em>Keine Spieler entsprechen den aktuellen Filtereinstellungen.</em></p>";
}
let html = "<div class='player-list-grid'>";
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in playerData) {
const p = playerData[id];
const privs = p.privilege ? p.privilege.toLowerCase().split(',') : [];
const hasServerPriv = privs.includes("server");
let statusDotClass = "offline";
let lastLoginFormatted = 'unbekannt';
if (p.last_login) {
if ((now_epoch - p.last_login < twentyFourHoursInSeconds)) { statusDotClass = "online"; }
lastLoginFormatted = formatTimestampForDisplay(p.last_login);
}
html += `<div class="player-box ${hasServerPriv ? "has-server-priv" : ""}">
<div class="player-header">
<div class="player-identity"><img src="/images/players/${encodeURIComponent(p.name)}.png?v=%%CACHE_BUSTER%%" class="player-icon" onerror="this.onerror=null;this.src='/%%DEFAULT_PLAYER_SKIN_URL%%?v=%%CACHE_BUSTER%%';"><span class="player-name-status"><span class="status-dot ${statusDotClass}" data-title="Letzter Login: ${lastLoginFormatted}"></span><strong class="player-name">${p.name}</strong></span></div>
<div class="player-vitals"><span class="icon" data-title="HP: ${p.hp ?? '?'}">❤️</span><span class="icon" data-title="Atem: ${p.breath ?? '?'}">💨</span><span class="icon" data-title="Ausdauer: ${p.stamina ?? '?'}">🍖</span></div>
</div>
<hr class="privilege-separator">
<div class="player-attributes">
<span class="icon privilege ${privs.includes('interact')?'active':''}" data-title="Interagieren">🖐️</span> <span class="icon privilege ${privs.includes('shout')?'active':''}" data-title="Rufen">📢</span>
<span class="icon privilege ${privs.includes('fast')?'active':''}" data-title="Schnelles Laufen">🏃</span> <span class="icon privilege ${privs.includes('fly')?'active':''}" data-title="Fliegen">🕊️</span>
<span class="icon privilege ${privs.includes('give')?'active':''}" data-title="Geben">🎁</span> <span class="icon privilege ${privs.includes('teleport')?'active':''}" data-title="Teleportieren">✨</span>
<span class="icon privilege ${privs.includes('areas')?'active':''}" data-title="Bereiche">🗺️</span> <span class="icon privilege ${privs.includes('noclip')?'active':''}" data-title="Noclip">👻</span>
<span class="icon privilege ${privs.includes('settime')?'active':''}" data-title="Zeit setzen">🕒</span> <span class="icon privilege ${privs.includes('weather')?'active':''}" data-title="Wetter">🌦️</span>
<span class="icon privilege ${hasServerPriv?'active':''}" data-title="Server-Admin">🛠️</span>
</div></div>`;
}
html += "</div>";
return html;
},
applyPlayerFiltersAndRender: function() {
const filteredData = {};
const now_epoch = Math.floor(Date.now() / 1000);
const twentyFourHoursInSeconds = 24 * 60 * 60;
for (const id in this.masterPlayerData) {
const player = this.masterPlayerData[id];
let passesFilter = true;
if (this.playerFilters.activeOnly) {
if (!player.last_login || !(now_epoch - player.last_login < twentyFourHoursInSeconds)) passesFilter = false;
}
if (passesFilter && this.playerFilters.privileges.size > 0) {
const playerPrivs = new Set(player.privilege ? player.privilege.toLowerCase().split(',') : []);
for (const requiredPriv of this.playerFilters.privileges) {
if (!playerPrivs.has(requiredPriv)) { passesFilter = false; break; }
}
}
if (passesFilter) { filteredData[id] = player; }
}
const playerListContainer = document.getElementById('player-info-%%current_world_key%%');
if(playerListContainer) { playerListContainer.innerHTML = this.renderPlayerListHTML(filteredData); }
},
init: function() {
const filterBtn = document.getElementById('player-filter-toggle-btn-%%current_world_key%%');
const filterDropdown = document.getElementById('player-filter-dropdown-%%current_world_key%%');
if(filterBtn && filterDropdown) {
filterBtn.addEventListener('click', (e) => { e.stopPropagation(); filterDropdown.classList.toggle('show'); });
filterDropdown.addEventListener('change', (e) => {
if (e.target.type === 'checkbox') {
const filterType = e.target.dataset.filter; const filterValue = e.target.dataset.priv;
if(filterType === 'active') { this.playerFilters.activeOnly = e.target.checked; }
else if(filterType === 'privilege') { if(e.target.checked) { this.playerFilters.privileges.add(filterValue); } else { this.playerFilters.privileges.delete(filterValue); } }
this.applyPlayerFiltersAndRender();
}
});
}
window.addEventListener('click', (e) => { if (filterDropdown && filterDropdown.classList.contains('show') && !filterBtn.contains(e.target) && !filterDropdown.contains(e.target)) { filterDropdown.classList.remove('show'); }});
}
};
document.addEventListener('DOMContentLoaded', () => window.playerListLogic_%%current_world_key%%.init());
}
</script>

202
site_generator/templates/world_detail_radar.template Normal file
View file

@ -0,0 +1,202 @@
<h3 id='weltradar' class="section-header-flex">
<span>Weltradar</span>
<div class="map-toggle-controls">
<button id="toggle-live-btn-%%current_world_key%%" class="map-toggle-button active">Live</button>
<button id="toggle-archive-btn-%%current_world_key%%" class="map-toggle-button">Archiv</button>
</div>
</h3>
<div id="live-map-container-%%current_world_key%%">
<div id="ol-map-container-%%current_world_key%%" class="map-view-container"></div>
<div id="popup-%%current_world_key%%" class="ol-popup">
<a href="#" id="popup-closer-%%current_world_key%%" class="ol-popup-closer"></a>
<div id="popup-content-%%current_world_key%%" class="ol-popup-content"></div>
</div>
<div class='map-sub-info'>
%%map_sub_info_link%%
<span class='map-last-update'>Letzte Kartenaktualisierung: <span id='map-last-update-text-%%current_world_key%%'><em>wird geladen...</em></span></span>
</div>
</div>
<div id="archive-view-container-%%current_world_key%%" style="display: none;">
%%ARCHIVE_HTML%%
</div>
<script>
// Globale Referenzen
window.olMap_%%current_world_key%% = null;
window.playerMarkerSource_%%current_world_key%% = new ol.source.Vector();
window.mapData_%%current_world_key%% = {};
// Konvertiert Minetest-Koordinaten in OpenLayers-Pixel-Koordinaten
function convertMinetestToOpenLayers_%%current_world_key%%(posX, posZ) {
const mapData = window.mapData_%%current_world_key%%;
if (!mapData || !mapData.mapWidth) return null;
const percentX = (posX - mapData.minX) / mapData.extentWidth;
const percentZ = (posZ - mapData.minZ) / mapData.extentHeight;
const pixelX = percentX * mapData.mapWidth;
const pixelY = - (mapData.mapHeight - (percentZ * mapData.mapHeight));
return [pixelX, pixelY];
}
document.addEventListener('DOMContentLoaded', function() {
const mapContainer = document.getElementById('ol-map-container-%%current_world_key%%');
const mapInfoPath = '/%%web_map_info_rel_path%%?v=' + new Date().getTime();
fetch(mapInfoPath)
.then(response => {
if (!response.ok) throw new Error('map_info.txt nicht gefunden (Status: ' + response.status + ')');
return response.text();
})
.then(mapInfoText => {
const mapInfo = (text => {
const data = {};
text.split('\n').forEach(line => {
const parts = line.split('=');
if (parts.length === 2 && parts[0] && parts[1]) data[parts[0].trim()] = parts[1].trim();
});
return data;
})(mapInfoText);
if (!mapInfo.map_dimension || !mapInfo.map_extent) throw new Error('map_info.txt ist unvollständig.');
const mapData = window.mapData_%%current_world_key%%;
const mapDim = mapInfo.map_dimension.split('x');
mapData.mapWidth = parseInt(mapDim[0], 10);
mapData.mapHeight = parseInt(mapDim[1], 10);
const mapExt = mapInfo.map_extent.split(/[+:]/);
mapData.minX = parseInt(mapExt[0], 10);
mapData.minZ = parseInt(mapExt[1], 10);
mapData.extentWidth = parseInt(mapExt[2], 10);
mapData.extentHeight = parseInt(mapExt[3], 10);
if (mapContainer && typeof ol !== 'undefined' && mapData.mapWidth > 0) {
mapContainer.innerHTML = '';
const extent = [0, -mapData.mapHeight, mapData.mapWidth, 0];
const resolutions = %%RESOLUTIONS_JS_ARRAY%%;
const projection = new ol.proj.Projection({
code: 'pixel-map-%%current_world_key%%',
units: 'pixels',
extent: extent
});
const tileGrid = new ol.tilegrid.TileGrid({
origin: ol.extent.getTopLeft(extent),
resolutions: resolutions,
});
const tileSource = new ol.source.TileImage({
projection: projection,
tileGrid: tileGrid,
tileUrlFunction: function(tileCoord) {
if (!tileCoord) return '';
return ('/%%web_tiles_rel_path%%/' + tileCoord[0] + '/' + tileCoord[1] + '/' + tileCoord[2] + '.png?v=%%CACHE_BUSTER%%');
}
});
const tileLayer = new ol.layer.Tile({ source: tileSource });
const playerLayer = new ol.layer.Vector({ source: window.playerMarkerSource_%%current_world_key%%, style: f => f.get('style') });
const view = new ol.View({
projection: projection,
center: ol.extent.getCenter(extent),
resolutions: resolutions,
maxZoom: resolutions.length - 1
});
const popupContainer = document.getElementById('popup-%%current_world_key%%');
const popupContent = document.getElementById('popup-content-%%current_world_key%%');
const popupCloser = document.getElementById('popup-closer-%%current_world_key%%');
const overlay = new ol.Overlay({ element: popupContainer, autoPan: { animation: { duration: 250 } } });
popupCloser.onclick = () => { overlay.setPosition(undefined); popupCloser.blur(); return false; };
const mapControls = [ new ol.control.Zoom(), new ol.control.Rotate(), new ol.control.Attribution({ collapsible: false }), new ol.control.FullScreen() ];
window.olMap_%%current_world_key%% = new ol.Map({
controls: mapControls,
layers: [tileLayer, playerLayer],
overlays: [overlay],
target: mapContainer,
view: view
});
const map = window.olMap_%%current_world_key%%;
// KORREKTUR: Hintergrundfarbe wird hier per JavaScript gesetzt
map.getViewport().style.backgroundColor = '%%map_background_color%%';
map.getView().fit(extent, { size: map.getSize() });
map.on('click', function(evt) {
const feature = map.forEachFeatureAtPixel(evt.pixel, f => f);
overlay.setPosition(undefined);
popupCloser.blur();
if (feature) {
const playerData = feature.get('playerData');
if (playerData) {
const statusDotClass = feature.get('statusDotClass');
const lastLoginFormatted = feature.get('lastLoginFormatted');
const popupHTML = `
<div class='popup-player-box'>
<div class="player-header">
<div class="player-identity">
<img src="/images/players/${encodeURIComponent(playerData.name)}.png?v=%%CACHE_BUSTER%%" class="player-icon" onerror="this.onerror=null;this.src='/%%DEFAULT_PLAYER_SKIN_URL%%?v=%%CACHE_BUSTER%%';">
<span class="player-name-status">
<span class="status-dot ${statusDotClass}" title="Letzter Login: ${lastLoginFormatted}"></span>
<strong class="player-name">${playerData.name}</strong>
</span>
</div>
</div>
<hr class="privilege-separator">
<div class="popup-player-vitals">
<span class="vital"><span class="icon">❤️</span> ${playerData.hp ?? '?'}</span>
<span class="vital"><span class="icon">💨</span> ${playerData.breath ?? '?'}</span>
<span class="vital"><span class="icon">🍖</span> ${playerData.stamina ?? '?'}</span>
</div>
</div>`;
popupContent.innerHTML = popupHTML;
overlay.setPosition(feature.getGeometry().getCoordinates());
}
}
});
if (window.playerListLogic_%%current_world_key%% && window.playerListLogic_%%current_world_key%%.masterPlayerData) {
window.playerListLogic_%%current_world_key%%.updatePlayerMarkers(window.playerListLogic_%%current_world_key%%.masterPlayerData);
}
}
})
.catch(error => {
console.error("Fehler beim Initialisieren der Karte:", error);
mapContainer.innerHTML = "<p><em>Karte konnte nicht initialisiert werden: " + error.message + "</em></p>";
});
const liveBtn = document.getElementById('toggle-live-btn-%%current_world_key%%');
const archiveBtn = document.getElementById('toggle-archive-btn-%%current_world_key%%');
const liveContainer = document.getElementById('live-map-container-%%current_world_key%%');
const archiveContainer = document.getElementById('archive-view-container-%%current_world_key%%');
if (liveBtn && archiveBtn && liveContainer && archiveContainer) {
liveBtn.addEventListener('click', () => {
liveBtn.classList.add('active'); archiveBtn.classList.remove('active');
liveContainer.style.display = 'block'; archiveContainer.style.display = 'none';
if (window.olMap_%%current_world_key%%) {
setTimeout(() => window.olMap_%%current_world_key%%.updateSize(), 10);
}
});
archiveBtn.addEventListener('click', () => {
archiveBtn.classList.add('active'); liveBtn.classList.remove('active');
archiveContainer.style.display = 'block'; liveContainer.style.display = 'none';
});
}
});
</script>