Шаблон:Онлайн: відмінності між версіями
Перейти до навігації
Перейти до пошуку
Немає опису редагування |
Немає опису редагування Мітка: Скасовано |
||
| Рядок 1: | Рядок 1: | ||
< | <div> | ||
@php | |||
$serverAddress = \App\Models\Setting::getValue('server_ip') ?? 'bastion16.co.ua:35211'; | |||
$featureEnabled = \App\Models\Setting::getValue('feature_enabled') === '1'; | |||
$motdEnabled = \App\Models\Setting::getValue('motd_enabled') === '1'; | |||
$iconEnabled = true; | |||
$versionEnabled = \App\Models\Setting::getValue('version_enabled') === '1'; | |||
$playerName = 'xFaraday'; | |||
@endphp | |||
<style> | <style> | ||
.hidden { display: none !important; } | |||
.fade-in { | |||
animation: fadeIn 0.4s ease-in-out; | |||
} | } | ||
@keyframes fadeIn { | |||
from { opacity: 0; } | |||
to { opacity: 1; } | |||
} | } | ||
</style> | |||
<script> | |||
document.addEventListener('DOMContentLoaded', function () { | |||
const serverAddress = @json($serverAddress); | |||
const playerName = @json($playerName); | |||
const onlineBlock = document.getElementById('server-online'); | |||
const offlineBlock = document.getElementById('server-offline'); | |||
const versionEl = document.getElementById('server-version'); | |||
const iconEl = document.getElementById('icon-img'); | |||
const motdEl = document.getElementById('motd'); | |||
const playersEl = document.getElementById('players-online'); | |||
const playerList = document.getElementById('player-list'); | |||
const uptimeEl = document.getElementById('server-uptime'); | |||
function applyFadeInOnce(block) { | |||
text | if (block.classList.contains('hidden')) { | ||
block.classList.remove('hidden'); | |||
block.classList.add('fade-in'); | |||
block.addEventListener('animationend', () => { | |||
block.classList.remove('fade-in'); | |||
}, { once: true }); | |||
} | |||
} | |||
function parseMinecraftColors(text) { | |||
const colors = { | |||
'0': '#000000', '1': '#0000AA', '2': '#00AA00', '3': '#00AAAA', | |||
'4': '#AA0000', '5': '#AA00AA', '6': '#FFAA00', '7': '#AAAAAA', | |||
'8': '#555555', '9': '#5555FF', 'a': '#55FF55', 'b': '#55FFFF', | |||
'c': '#FF5555', 'd': '#FF55FF', 'e': '#FFFF55', 'f': '#FFFFFF', | |||
}; | |||
const formats = { 'l': 'b', 'n': 'u', 'm': 's', 'o': 'i' }; | |||
let result = '', openTags = []; | |||
text = (text || '').replace(/&/g, '§'); | |||
for (let i = 0; i < text.length; i++) { | |||
if (text[i] === '§') { | |||
const code = text[i + 1]?.toLowerCase(); | |||
if (code === 'x' && i + 13 < text.length) { | |||
const hex = `#${text[i + 2]}${text[i + 3]}${text[i + 4]}${text[i + 5]}${text[i + 6]}${text[i + 7]}`; | |||
while (openTags.length && openTags[openTags.length - 1] === 'span') { | |||
result += `</${openTags.pop()}>`; | |||
} | |||
result += `<span style="color:${hex}">`; | |||
openTags.push('span'); | |||
i += 7; | |||
continue; | |||
} | |||
i++; | |||
if (code === 'r') { | |||
while (openTags.length) result += `</${openTags.pop()}>`; | |||
} else if (colors[code]) { | |||
while (openTags.length && openTags[openTags.length - 1] === 'span') { | |||
result += `</${openTags.pop()}>`; | |||
} | |||
result += `<span style="color:${colors[code]}">`; | |||
openTags.push('span'); | |||
} else if (formats[code]) { | |||
const tag = formats[code]; | |||
result += `<${tag}>`; | |||
openTags.push(tag); | |||
} | |||
} else { | |||
result += text[i]; | |||
} | |||
} | |||
while (openTags.length) result += `</${openTags.pop()}>`; | |||
return result; | |||
} | |||
async function updateStatus() { | |||
try { | |||
const response = await fetch(`http://192.168.10.113:8888/placeholders?player=${encodeURIComponent(playerName)}`); | |||
const data = await response.json(); | |||
const isOnline = data["%pinger_online_bastion16.co.ua:35211%"]?.toLowerCase().includes("online"); | |||
if (!isOnline) return showOfflineUI(); | |||
offlineBlock.classList.add('hidden'); | |||
applyFadeInOnce(onlineBlock); | |||
if (iconEl) { | |||
fetch(`https://api.mcstatus.io/v2/status/java/${serverAddress}`) | |||
.then(res => res.json()) | |||
.then(msData => { | |||
if (iconEl.src !== msData.icon) { | |||
iconEl.src = msData.icon; | |||
} | |||
}); | |||
} | |||
const version = data["%pinger_version_bastion16.co.ua:35211%"] || ''; | |||
if (versionEl && versionEl.textContent !== version) versionEl.textContent = version; | |||
const motd = parseMinecraftColors(data["%pinger_motd_bastion16.co.ua:35211%"]); | |||
if (motdEl && motdEl.innerHTML !== motd) motdEl.innerHTML = motd; | |||
const uptime = data["%server_uptime%"] || '—'; | |||
if (uptimeEl && uptimeEl.textContent !== uptime) uptimeEl.textContent = uptime; | |||
const online = data["%pinger_players_bastion16.co.ua:35211%"] || '0'; | |||
const max = data["%pinger_max_bastion16.co.ua:35211%"] || '0'; | |||
const playersText = `${online} / ${max}`; | |||
if (playersEl && playersEl.textContent !== playersText) playersEl.textContent = playersText; | |||
if (playerList) { | |||
const playersRaw = data["%playerlist_players_list%"]; | |||
const currentPlayers = Array.from(playerList.querySelectorAll('li')).map(li => li.textContent.trim()); | |||
const players = playersRaw ? playersRaw.split(',').map(p => p.trim()) : []; | |||
if (players.map(p => p.toLowerCase()).join(',') !== currentPlayers.join(',').toLowerCase()) { | |||
playerList.innerHTML = ''; | |||
if (players.length > 0) { | |||
players.forEach(name => { | |||
const li = document.createElement('li'); | |||
li.style.display = 'flex'; | |||
li.style.alignItems = 'center'; | |||
li.style.gap = '8px'; | |||
const img = document.createElement('img'); | |||
img.src = `https://mc-heads.net/avatar/${name}/24`; | |||
img.alt = name; | |||
img.style.width = '24px'; | |||
img.style.height = '24px'; | |||
img.style.borderRadius = '4px'; | |||
const span = document.createElement('span'); | |||
fetch(`http://192.168.10.113:8888/placeholders?player=${name}`) | |||
.then(r => r.json()) | |||
.then(pData => { | |||
const displayName = parseMinecraftColors(pData["%player_displayname%"] || name); | |||
const afk = pData["%essentials_afk%"] === 'yes' ? '💤' : ''; | |||
span.innerHTML = `${displayName} ${afk}`; | |||
}); | |||
li.appendChild(img); | |||
li.appendChild(span); | |||
playerList.appendChild(li); | |||
}); | |||
} else { | |||
const li = document.createElement('li'); | |||
li.textContent = '— немає гравців —'; | |||
li.style.color = '#777'; | |||
playerList.appendChild(li); | |||
} | |||
} | |||
} | |||
} catch (e) { | |||
console.error('Помилка отримання плейсхолдерів:', e); | |||
showOfflineUI(); | |||
} | |||
} | } | ||
function showOfflineUI() { | |||
onlineBlock.classList.add('hidden'); | |||
applyFadeInOnce(offlineBlock); | |||
} | } | ||
updateStatus(); | |||
setInterval(updateStatus, 10000); | |||
}); | |||
</script> | |||
<h5>Статус Сервера</h5> | |||
<div id="server-status" class="card grey darken-3 white-text" style="margin-top: 20px; padding: 12px;"> | |||
<div id="server-online" class="card-content hidden"> | |||
<div style="display: flex; align-items: center; justify-content: space-between;"> | |||
<span style="font-size: 16px; font-weight: bold;"> | |||
<i class="material-icons green-text" style="vertical-align: middle;">cloud_done</i> | |||
Сервер Online | |||
</span> | |||
<span id="server-version" class="green-text text-lighten-2" style="font-size: 14px;"></span> | |||
</div> | |||
<div style="margin-top: 10px; text-align: center;"> | |||
<img id="icon-img" src="" alt="Server Icon" style="width: 48px; height: 48px;" /> | |||
</div> | |||
<div style="margin-top: 8px; font-size: 14px;"> | |||
<strong class="green-text">MOTD:</strong> | |||
<div id="motd" style="color: #a5d6a7; font-size: 13px;"></div> | |||
</ | |||
< | |||
</div> | </div> | ||
<div style="margin-top: 6px;"> | |||
<strong class="green-text">Аптайм:</strong> <span id="server-uptime" style="color: #a5d6a7; font-size: 13px;"></span> | |||
</div> | </div> | ||
<div | |||
< | <div style="margin-top: 8px; font-size: 14px;"> | ||
<div id=" | <strong class="green-text">Гравці онлайн:</strong> | ||
< | <div id="players-online" class="white-text">—</div> | ||
<ul id="player-list" class="white-text" style="list-style: none; padding-left: 0;"></ul> | |||
</div> | </div> | ||
</div> | </div> | ||
</ | |||
</ | <div id="server-offline" class="card-content hidden" style="text-align: center;"> | ||
<i class="material-icons red-text" style="vertical-align: middle;">cloud_off</i> | |||
<p style="margin-top: 10px; color: #ef9a9a;">Сервер недоступний</p> | |||
</div> | |||
</div> | |||
</div> | |||
Версія за 12:58, 5 червня 2025
@php
$serverAddress = \App\Models\Setting::getValue('server_ip') ?? 'bastion16.co.ua:35211';
$featureEnabled = \App\Models\Setting::getValue('feature_enabled') === '1';
$motdEnabled = \App\Models\Setting::getValue('motd_enabled') === '1';
$iconEnabled = true;
$versionEnabled = \App\Models\Setting::getValue('version_enabled') === '1';
$playerName = 'xFaraday';
@endphp
<style>
.hidden { display: none !important; }
.fade-in {
animation: fadeIn 0.4s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const serverAddress = @json($serverAddress);
const playerName = @json($playerName);
const onlineBlock = document.getElementById('server-online');
const offlineBlock = document.getElementById('server-offline');
const versionEl = document.getElementById('server-version');
const iconEl = document.getElementById('icon-img');
const motdEl = document.getElementById('motd');
const playersEl = document.getElementById('players-online');
const playerList = document.getElementById('player-list');
const uptimeEl = document.getElementById('server-uptime');
function applyFadeInOnce(block) {
if (block.classList.contains('hidden')) {
block.classList.remove('hidden');
block.classList.add('fade-in');
block.addEventListener('animationend', () => {
block.classList.remove('fade-in');
}, { once: true });
}
}
function parseMinecraftColors(text) {
const colors = {
'0': '#000000', '1': '#0000AA', '2': '#00AA00', '3': '#00AAAA',
'4': '#AA0000', '5': '#AA00AA', '6': '#FFAA00', '7': '#AAAAAA',
'8': '#555555', '9': '#5555FF', 'a': '#55FF55', 'b': '#55FFFF',
'c': '#FF5555', 'd': '#FF55FF', 'e': '#FFFF55', 'f': '#FFFFFF',
};
const formats = { 'l': 'b', 'n': 'u', 'm': 's', 'o': 'i' };
let result = , openTags = [];
text = (text || ).replace(/&/g, '§');
for (let i = 0; i < text.length; i++) {
if (text[i] === '§') {
const code = text[i + 1]?.toLowerCase();
if (code === 'x' && i + 13 < text.length) {
const hex = `#${text[i + 2]}${text[i + 3]}${text[i + 4]}${text[i + 5]}${text[i + 6]}${text[i + 7]}`;
while (openTags.length && openTags[openTags.length - 1] === 'span') {
result += `</${openTags.pop()}>`;
}
result += ``;
openTags.push('span');
i += 7;
continue;
}
i++;
if (code === 'r') {
while (openTags.length) result += `</${openTags.pop()}>`;
} else if (colors[code]) {
while (openTags.length && openTags[openTags.length - 1] === 'span') {
result += `</${openTags.pop()}>`;
}
result += ``;
openTags.push('span');
} else if (formats[code]) {
const tag = formats[code];
result += `<${tag}>`;
openTags.push(tag);
}
} else {
result += text[i];
}
}
while (openTags.length) result += `</${openTags.pop()}>`;
return result;
}
async function updateStatus() {
try {
const response = await fetch(`http://192.168.10.113:8888/placeholders?player=${encodeURIComponent(playerName)}`);
const data = await response.json();
const isOnline = data["%pinger_online_bastion16.co.ua:35211%"]?.toLowerCase().includes("online");
if (!isOnline) return showOfflineUI();
offlineBlock.classList.add('hidden');
applyFadeInOnce(onlineBlock);
if (iconEl) {
fetch(`https://api.mcstatus.io/v2/status/java/${serverAddress}`)
.then(res => res.json())
.then(msData => {
if (iconEl.src !== msData.icon) {
iconEl.src = msData.icon;
}
});
}
const version = data["%pinger_version_bastion16.co.ua:35211%"] || ;
if (versionEl && versionEl.textContent !== version) versionEl.textContent = version;
const motd = parseMinecraftColors(data["%pinger_motd_bastion16.co.ua:35211%"]);
if (motdEl && motdEl.innerHTML !== motd) motdEl.innerHTML = motd;
const uptime = data["%server_uptime%"] || '—';
if (uptimeEl && uptimeEl.textContent !== uptime) uptimeEl.textContent = uptime;
const online = data["%pinger_players_bastion16.co.ua:35211%"] || '0';
const max = data["%pinger_max_bastion16.co.ua:35211%"] || '0';
const playersText = `${online} / ${max}`;
if (playersEl && playersEl.textContent !== playersText) playersEl.textContent = playersText;
if (playerList) {
const playersRaw = data["%playerlist_players_list%"];
const currentPlayers = Array.from(playerList.querySelectorAll('li')).map(li => li.textContent.trim());
const players = playersRaw ? playersRaw.split(',').map(p => p.trim()) : [];
if (players.map(p => p.toLowerCase()).join(',') !== currentPlayers.join(',').toLowerCase()) {
playerList.innerHTML = ;
if (players.length > 0) {
players.forEach(name => {
const li = document.createElement('li');
li.style.display = 'flex';
li.style.alignItems = 'center';
li.style.gap = '8px';
const img = document.createElement('img');
img.src = `https://mc-heads.net/avatar/${name}/24`;
img.alt = name;
img.style.width = '24px';
img.style.height = '24px';
img.style.borderRadius = '4px';
const span = document.createElement('span');
fetch(`http://192.168.10.113:8888/placeholders?player=${name}`) .then(r => r.json()) .then(pData => { const displayName = parseMinecraftColors(pData["%player_displayname%"] || name); const afk = pData["%essentials_afk%"] === 'yes' ? '💤' : ; span.innerHTML = `${displayName} ${afk}`; });
li.appendChild(img);
li.appendChild(span);
playerList.appendChild(li);
});
} else {
const li = document.createElement('li');
li.textContent = '— немає гравців —';
li.style.color = '#777';
playerList.appendChild(li);
}
}
}
} catch (e) {
console.error('Помилка отримання плейсхолдерів:', e);
showOfflineUI();
}
}
function showOfflineUI() {
onlineBlock.classList.add('hidden');
applyFadeInOnce(offlineBlock);
}
updateStatus();
setInterval(updateStatus, 10000);
});
</script>