547 lines
22 KiB
JavaScript
547 lines
22 KiB
JavaScript
|
||
// стартовые параметры формы
|
||
const initColorSheme = 'w2g-dark'; //'twilight';
|
||
const autoUpdatingEnabled = false;
|
||
const setDefaultPositionOnResize = true;
|
||
|
||
const topDataPath = './curgame';
|
||
//const topDataPath = 'http://x96101uy.beget.tech/qclp/data';
|
||
|
||
var topData = {};
|
||
|
||
// Основной объект формы, содержит настройки и функцию смены цветовой схемы
|
||
// поля, содержащие ссылки на элементы формы, добавляются в initTopWindow()
|
||
var topWindow = {
|
||
colorScheme: initColorSheme,
|
||
autoUpdating: autoUpdatingEnabled,
|
||
setDefaultPositionOnResize: setDefaultPositionOnResize,
|
||
|
||
addLogMessage : function (lMessage) {
|
||
this.messagesTextarea.value = "[" + getTimeNow() + "] " + lMessage + "\r" + this.messagesTextarea.value;
|
||
let bottomMessageBlock = document.querySelector("#client-bottom-block-last-message");
|
||
if (bottomMessageBlock) bottomMessageBlock.innerHTML = lMessage;
|
||
},
|
||
changeColorScheme : function (cShemeName) {
|
||
|
||
if (cShemeName == 'twilight') {
|
||
this.colorScheme = 'twilight';
|
||
topWindow.colorShemeSelect.value = this.colorScheme;
|
||
|
||
let element = document.querySelector('body');
|
||
element.style.backgroundColor = '#112';
|
||
|
||
element = document.querySelector('#client-container');
|
||
element.style.backgroundColor = '#335';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-extra-button');
|
||
element.style.backgroundColor = '#232342';
|
||
|
||
element = document.querySelector('#client-extra-textarea-messages');
|
||
element.style.backgroundColor = '#122332';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-select-colorSheme');
|
||
element.style.backgroundColor = '#122332';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-extra-panel');
|
||
element.style.backgroundColor = '#335';
|
||
|
||
element = document.querySelector('#client-top-header');
|
||
element.style.backgroundColor = '#232342';
|
||
element.style.borderBottom = '1px solid #224';
|
||
|
||
element = document.querySelector('#client-update-progress-bar');
|
||
element.style.backgroundColor = '#2d3d63';
|
||
|
||
element = document.querySelector('#update-data-button');
|
||
element.style.backgroundColor = '#335';
|
||
|
||
element = document.querySelector('#client-bottom-block');
|
||
element.style.backgroundColor = '#232342';
|
||
element.style.borderBottom = '1px solid #224';
|
||
|
||
element = document.querySelectorAll('.client-top-string').forEach(e => e.style.backgroundColor = '#557');
|
||
}
|
||
|
||
if (cShemeName == 'light') {
|
||
this.colorScheme = 'light';
|
||
topWindow.colorShemeSelect.value = this.colorScheme;
|
||
|
||
let element = document.querySelector('body');
|
||
element.style.backgroundColor = '#FFFDFF';
|
||
|
||
element = document.querySelector('#client-container');
|
||
element.style.backgroundColor = '#edf5ed';
|
||
element.style.color = '#635';
|
||
|
||
element = document.querySelector('#client-extra-button');
|
||
element.style.backgroundColor = '#ffebe1';
|
||
element = document.querySelector('#client-extra-panel');
|
||
element.style.backgroundColor = '#ffebe1';
|
||
|
||
element = document.querySelector('#client-extra-panel');
|
||
element.style.backgroundColor = '#edf5ed';
|
||
|
||
element = document.querySelector('#client-extra-textarea-messages');
|
||
element.style.backgroundColor = '#FFFDFF';
|
||
element.style.color = '#635';
|
||
|
||
element = document.querySelector('#client-select-colorSheme');
|
||
element.style.backgroundColor = '#FFFDFF';
|
||
element.style.color = '#635';
|
||
|
||
element = document.querySelector('#client-top-header');
|
||
element.style.backgroundColor = '#ffebe1';
|
||
element.style.borderBottom = '1px solid #CCA';
|
||
|
||
element = document.querySelector('#client-update-progress-bar');
|
||
element.style.backgroundColor = '#CdBdA3';
|
||
|
||
element = document.querySelector('#update-data-button');
|
||
element.style.backgroundColor = '#edf5ed';
|
||
|
||
element = document.querySelector('#client-bottom-block');
|
||
element.style.backgroundColor = '#ffebe1';
|
||
element.style.borderBottom = '1px solid #CCA';
|
||
|
||
element = document.querySelectorAll('.client-top-string').forEach(e => {
|
||
e.style.backgroundColor = '#FAFAD5';
|
||
});
|
||
|
||
}
|
||
|
||
if (cShemeName == 'w2g-dark') {
|
||
this.colorScheme = 'w2g-dark';
|
||
topWindow.colorShemeSelect.value = this.colorScheme;
|
||
|
||
let element = document.querySelector('body');
|
||
element.style.backgroundColor = '#112';
|
||
|
||
element = document.querySelector('#client-container');
|
||
element.style.backgroundColor = '#3a4759';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-extra-button');
|
||
element.style.backgroundColor = '#283240';
|
||
|
||
element = document.querySelector('#client-extra-panel');
|
||
element.style.backgroundColor = '#303d51';
|
||
|
||
element = document.querySelector('#client-extra-textarea-messages');
|
||
element.style.backgroundColor = '#283240';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-select-colorSheme');
|
||
element.style.backgroundColor = '#283240';
|
||
element.style.color = '#DDF';
|
||
|
||
element = document.querySelector('#client-top-header');
|
||
element.style.backgroundColor = '#283240';
|
||
element.style.borderBottom = '1px solid #224';
|
||
|
||
element = document.querySelector('#client-update-progress-bar');
|
||
element.style.backgroundColor = '#2d3d63';
|
||
|
||
element = document.querySelector('#update-data-button');
|
||
element.style.backgroundColor = '#293446';
|
||
|
||
element = document.querySelector('#client-bottom-block');
|
||
element.style.backgroundColor = '#283240';
|
||
element.style.borderBottom = '1px solid #224';
|
||
|
||
element = document.querySelectorAll('.client-top-string').forEach(e => e.style.backgroundColor = '#557');
|
||
}
|
||
}
|
||
};
|
||
|
||
|
||
// Объект для контроля обновлений
|
||
var updater = {
|
||
delay: 15000,
|
||
tick: 32,
|
||
counter: 1000,
|
||
check: function () {
|
||
if (this.counter > 0) {
|
||
this.counter -= this.tick;
|
||
} else {
|
||
loadTopData(topDataPath);
|
||
this.counter = this.delay;
|
||
topWindow.uBlock.style.width = '0%';
|
||
}
|
||
|
||
if (this.counter === 0) { topWindow.uBlock.style.width ='0%'; }
|
||
else {
|
||
topWindow.uBlock.style.width = 100 - (100 * (this.counter/this.delay)) + '%';
|
||
}
|
||
|
||
if (topWindow.autoUpdating) setTimeout(()=>{updater.check();}, this.tick);
|
||
}
|
||
};
|
||
|
||
|
||
// Получаем время в формате "24:60:60"
|
||
var getTimeNow = function () {
|
||
var dNow = new Date();
|
||
|
||
let tnHours = dNow.getHours().toString();
|
||
if (tnHours.length < 2) { tnHours = '0'+tnHours; }
|
||
let tnMinutes = dNow.getMinutes().toString();
|
||
if (tnMinutes.length < 2) { tnMinutes = '0'+tnMinutes; }
|
||
let tnSeconds = dNow.getSeconds().toString();
|
||
if (tnSeconds.length < 2) { tnSeconds = '0'+tnSeconds; }
|
||
|
||
return tnHours + ":" + tnMinutes + ":" + tnSeconds;
|
||
};
|
||
|
||
|
||
// ====================== НАЧАЛО initTopWindow =========================
|
||
// ========= Инициализируем (встраиваем) основную форму топа ===========
|
||
var initTopWindow = function () {
|
||
var hBlock = document.querySelector('head');
|
||
var bBlock = document.querySelector('body');
|
||
|
||
topWindow.cBlock = document.createElement('div');
|
||
topWindow.cBlock.id = 'client-container';
|
||
topWindow.cBlock.innerHTML =
|
||
"<div id='client-extra-button'>"
|
||
+"<div id='client-extra-button-text'><</div>"
|
||
+"</div>";
|
||
|
||
topWindow.extraPanel = document.createElement('div');
|
||
topWindow.extraPanel.id = 'client-extra-panel';
|
||
topWindow.cBlock.appendChild(topWindow.extraPanel);
|
||
|
||
topWindow.autoUpdateCheckbox = document.createElement('input');
|
||
topWindow.autoUpdateCheckbox.id = 'client-auto-update-checkbox';
|
||
topWindow.autoUpdateCheckbox.type = 'checkbox';
|
||
topWindow.autoUpdateCheckbox.checked = topWindow.autoUpdating;
|
||
topWindow.autoUpdateCheckbox.addEventListener('change', () => {
|
||
if (topWindow.autoUpdateCheckbox.checked) {
|
||
topWindow.autoUpdating = true;
|
||
topWindow.addLogMessage("автообн. запущено");
|
||
updater.check();
|
||
} else {
|
||
topWindow.autoUpdating = false;
|
||
topWindow.addLogMessage("автообн. остановлено");
|
||
}
|
||
});
|
||
var AUcheckboxContainer = document.createElement('div');
|
||
AUcheckboxContainer.id = "autoUpdateCheckboxContainer";
|
||
AUcheckboxContainer.innerHTML += "AU  ";
|
||
AUcheckboxContainer.style.display = "inline-block";
|
||
AUcheckboxContainer.appendChild(topWindow.autoUpdateCheckbox);
|
||
topWindow.extraPanel.appendChild(AUcheckboxContainer);
|
||
|
||
topWindow.colorShemeSelect = document.createElement('select');
|
||
topWindow.colorShemeSelect.id = 'client-select-colorSheme';
|
||
topWindow.colorShemeSelect.value = initColorSheme;
|
||
topWindow.colorShemeSelect.setAttribute("list","colorSchemes");
|
||
topWindow.colorShemeSelect.innerHTML =
|
||
"<datalist id='colorSchemes'>"
|
||
+"<option value='twilight'>Twilight</option>"
|
||
+"<option value='w2g-dark'>W2G-Dark</option>"
|
||
+"<option value='light'>Light</option>"
|
||
+"</datalist>";
|
||
topWindow.colorShemeSelect.addEventListener('change', () => {
|
||
topWindow.changeColorScheme(topWindow.colorShemeSelect.value);
|
||
});
|
||
topWindow.extraPanel.appendChild(topWindow.colorShemeSelect);
|
||
|
||
topWindow.bottomPanelCheckbox = document.createElement('input');
|
||
topWindow.bottomPanelCheckbox.id = 'client-show-bottom-panel-checkbox';
|
||
topWindow.bottomPanelCheckbox.type = 'checkbox';
|
||
topWindow.bottomPanelCheckbox.checked = true;
|
||
topWindow.bottomPanelCheckbox.addEventListener('change', () => {
|
||
if (topWindow.bottomPanelCheckbox.checked) {
|
||
topWindow.bottomBlock.style.display = "flex";
|
||
} else {
|
||
topWindow.bottomBlock.style.display = "none";
|
||
}
|
||
});
|
||
var BPcheckboxContainer = document.createElement('div');
|
||
BPcheckboxContainer.id = "bottomPanelCheckboxContainer";
|
||
BPcheckboxContainer.style.display = "inline-block";
|
||
BPcheckboxContainer.innerHTML += "  BP";
|
||
BPcheckboxContainer.prepend(topWindow.bottomPanelCheckbox);
|
||
topWindow.extraPanel.appendChild(BPcheckboxContainer);
|
||
|
||
topWindow.messagesTextarea = document.createElement('textarea');
|
||
topWindow.messagesTextarea.id = 'client-extra-textarea-messages';
|
||
topWindow.messagesTextarea.readOnly = true;
|
||
topWindow.extraPanel.appendChild(topWindow.messagesTextarea);
|
||
|
||
bBlock.appendChild(topWindow.cBlock);
|
||
topWindow.eBtnText = document.querySelector('#client-extra-button-text');
|
||
|
||
topWindow.eBlockBtn = document.querySelector('#client-extra-button').addEventListener('click', (eBtn) => {
|
||
topWindow.ePanel = document.querySelector('#client-extra-panel');
|
||
if (topWindow.ePanel.style.display == 'none') {
|
||
topWindow.ePanel.style.display = 'block';
|
||
|
||
topWindow.eBtnText.innerHTML = '>';
|
||
} else {
|
||
topWindow.ePanel.style.display = 'none';
|
||
topWindow.eBtnText.innerHTML = '<';
|
||
}
|
||
});
|
||
|
||
topWindow.headerBlock = document.createElement('div');
|
||
topWindow.headerBlock.id = 'client-top-header';
|
||
topWindow.headerBlock.innerHTML =
|
||
"<div id='client-top-header-game-date'>32.13.46</div>"
|
||
+"<div id='client-top-header-caption'>[Название]</div>"
|
||
+"<button id='update-data-button'>⟳</button>";
|
||
topWindow.cBlock.appendChild(topWindow.headerBlock);
|
||
|
||
topWindow.topBlock = document.createElement('div');
|
||
topWindow.topBlock.id = 'client-top-table';
|
||
topWindow.topBlock.innerHTML = '<a style="margin-top: 15px; font-weight: 700; font-size: 24px"> ТОП </a>';
|
||
topWindow.cBlock.appendChild(topWindow.topBlock);
|
||
|
||
topWindow.updateBlock = document.createElement('div');
|
||
topWindow.updateBlock.innerHTML =
|
||
"<div id='client-bottom-update'>"
|
||
+"<div id='client-update-progress-bar'></div>"
|
||
+"</div>";
|
||
topWindow.cBlock.appendChild(topWindow.updateBlock);
|
||
|
||
topWindow.bottomBlock = document.createElement('div');
|
||
topWindow.bottomBlock.id = 'client-bottom-block';
|
||
topWindow.bottomBlock.innerHTML =
|
||
"<div id='client-bottom-block-update-time'>00.00.00</div>"
|
||
+"<div id='client-bottom-block-last-message'></div>"
|
||
+"<div id='client-bottom-block-video-adress'>yt~dsfg4DF</div>";
|
||
topWindow.cBlock.appendChild(topWindow.bottomBlock);
|
||
|
||
topWindow.uBlock = document.querySelector('#client-update-progress-bar');
|
||
|
||
topWindow.w2gRightBlock = document.querySelector("#w2g-at-right");
|
||
|
||
document.querySelector('#client-bottom-block-update-time').innerHTML = '00:00:00';
|
||
|
||
document.querySelector('#update-data-button').addEventListener('click', () => {
|
||
loadTopData(topDataPath);
|
||
|
||
updater.counter = updater.delay;
|
||
|
||
});
|
||
|
||
topWindow.changeColorScheme(topWindow.colorScheme);
|
||
|
||
makeDraggable(topWindow.cBlock);
|
||
|
||
topWindow.setDefaultPositionOnResize = setDefaultPositionOnResize;
|
||
topWindow.setDefaultPosition();
|
||
|
||
topWindow.addLogMessage("окно инициализировано");
|
||
|
||
if (topWindow.autoUpdating) {
|
||
updater.check();
|
||
topWindow.addLogMessage("автообн. запущено");
|
||
}
|
||
};
|
||
// ====================================================================
|
||
// ====================== КОНЕЦ initTopWindow ==========================
|
||
|
||
|
||
// Сокрашаем полный адрес ютуб-видео до "yt~XXXXXXXX"
|
||
var getShortYTAdress = function(adress) {
|
||
let shortAdress = adress;
|
||
if (adress.search('youtube')>0) {
|
||
shortAdress = "yt~"+adress.split("?v=")[1];
|
||
}
|
||
|
||
return shortAdress;
|
||
}
|
||
|
||
|
||
// Импортируем полученные данные
|
||
var importData = function (tData) {
|
||
console.log('import start');
|
||
var parsedData = JSON.parse(decodeURIComponent(escape(atob(tData))));
|
||
|
||
if (!parsedData.name) {
|
||
console.log('importing string not valid');
|
||
} else {
|
||
console.log(parsedData);
|
||
topData = parsedData;
|
||
|
||
updateTopTable();
|
||
}
|
||
};
|
||
|
||
|
||
// Подгружаем с сервера свежие данные
|
||
var loadTopData = function (tdPath) {
|
||
var XHR = new XMLHttpRequest();
|
||
XHR.open('GET', tdPath);
|
||
XHR.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=8');
|
||
XHR.onreadystatechange = function() {
|
||
if (XHR.readyState === XMLHttpRequest.DONE) {
|
||
let rText = XHR.responseText;
|
||
rText = JSON.parse(decodeURIComponent(escape(atob(rText))));
|
||
|
||
topData = rText;
|
||
|
||
if (!topData.players) {
|
||
topWindow.addLogMessage("неверные данные");
|
||
return;
|
||
}
|
||
|
||
updateTopTable();
|
||
|
||
var dNow = new Date();
|
||
let tnHours = dNow.getHours().toString();
|
||
if (tnHours.length < 2) { tnHours = '0'+tnHours; }
|
||
let tnMinutes = dNow.getMinutes().toString();
|
||
if (tnMinutes.length < 2) { tnMinutes = '0'+tnMinutes; }
|
||
let tnSeconds = dNow.getSeconds().toString();
|
||
if (tnSeconds.length < 2) { tnSeconds = '0'+tnSeconds; }
|
||
|
||
var tNow = getTimeNow();
|
||
document.querySelector('#client-bottom-block-update-time').innerHTML = tNow;
|
||
document.querySelector('#client-top-header-caption').innerHTML = topData.name;
|
||
document.querySelector('#client-bottom-block-last-message').innerHTML = 'обновлено успешно';
|
||
document.querySelector('#client-top-header-game-date').innerHTML = topData.date;
|
||
document.querySelector('#client-bottom-block-video-adress').innerHTML = getShortYTAdress(topData.videoAdress);
|
||
|
||
topWindow.changeColorScheme(topWindow.colorScheme);
|
||
|
||
if (topData.stopped) {
|
||
if (topData.stopped == true) {
|
||
topWindow.autoUpdating = false;
|
||
topWindow.autoUpdateCheckbox.checked = false;
|
||
topWindow.addLogMessage("остановлено хостом");
|
||
} else topWindow.addLogMessage("счёт обновлен");
|
||
} else topWindow.addLogMessage("счёт обновлен");
|
||
}
|
||
};
|
||
XHR.send();
|
||
};
|
||
|
||
|
||
// Перестраиваем таблицу топа с актуальной информацией
|
||
var updateTopTable = function() {
|
||
const sortFn = (a, b) => {
|
||
if (a.points < b.points) { return 1;
|
||
} else if (a.points > b.points) { return -1; }
|
||
return 0;
|
||
};
|
||
|
||
topData.players.sort(sortFn);
|
||
|
||
topTable = document.querySelector("#client-top-table");
|
||
topTable.innerHTML = "";
|
||
|
||
var placeN = 1;
|
||
for (let i = 0; i < topData.players.length; i++) {
|
||
|
||
pString = "  "+placeN + " ";
|
||
if (placeN == 1) { pString = "🏆"; }
|
||
if (placeN == 2) { pString = "🥈"; }
|
||
if (placeN == 3) { pString = "🥉"; }
|
||
|
||
topTable.innerHTML +=
|
||
"<div class='client-top-string' id='top"+placeN+"-player'>"
|
||
+"<div class='client-top-string-place' id='top"+placeN+"-player-place'>"+pString+"</div>"
|
||
+"<div class='client-top-string-names' id='top"+placeN+"-player-names'></div>"
|
||
+"<div class='client-top-string-score' id='top"+placeN+"-score'></div>"
|
||
+"</div><br>";
|
||
tpNameElement = document.querySelector("#top"+placeN+"-player-names");
|
||
tpScoreElement = document.querySelector("#top"+placeN+"-score");
|
||
|
||
tpNameElement.innerHTML = topData.players[i].name;
|
||
tpScoreElement.innerHTML = topData.players[i].points;
|
||
|
||
for (let j = i+1; j < topData.players.length; j++) {
|
||
if (topData.players[j].points >= topData.players[i].points) {
|
||
tpNameElement.innerHTML += " " + topData.players[j].name;
|
||
i = i+1;
|
||
}
|
||
}
|
||
placeN += 1;
|
||
}
|
||
|
||
if (document.URL.search("w2g.tv")>0) {
|
||
topWindow.curColorSchemeName = 'w2g-dark';
|
||
}
|
||
|
||
topWindow.changeColorScheme(topWindow.curColorSchemeName);
|
||
};
|
||
|
||
|
||
function makeDraggable (element) {
|
||
// Make an element draggable (or if it has a .window-top class, drag based on the .window-top element)
|
||
let currentPosX = 0, currentPosY = 0, previousPosX = 0, previousPosY = 0;
|
||
|
||
// If there is a window-top classed element, attach to that element instead of full window
|
||
if (element.querySelector('#client-top-header')) {
|
||
// If present, the window-top element is where you move the parent element from
|
||
element.querySelector('#client-top-header').onmousedown = dragMouseDown;
|
||
}
|
||
else {
|
||
// Otherwise, move the element itself
|
||
element.onmousedown = dragMouseDown;
|
||
}
|
||
|
||
function dragMouseDown (e) {
|
||
// Prevent any default action on this element (you can remove if you need this element to perform its default action)
|
||
e.preventDefault();
|
||
// Get the mouse cursor position and set the initial previous positions to begin
|
||
previousPosX = e.clientX;
|
||
previousPosY = e.clientY;
|
||
// When the mouse is let go, call the closing event
|
||
document.onmouseup = closeDragElement;
|
||
// call a function whenever the cursor moves
|
||
document.onmousemove = elementDrag;
|
||
}
|
||
|
||
function elementDrag (e) {
|
||
// Prevent any default action on this element (you can remove if you need this element to perform its default action)
|
||
e.preventDefault();
|
||
// Calculate the new cursor position by using the previous x and y positions of the mouse
|
||
currentPosX = previousPosX - e.clientX;
|
||
currentPosY = previousPosY - e.clientY;
|
||
// Replace the previous positions with the new x and y positions of the mouse
|
||
previousPosX = e.clientX;
|
||
previousPosY = e.clientY;
|
||
// Set the element's new position
|
||
element.style.top = (element.offsetTop - currentPosY) + 'px';
|
||
element.style.left = (element.offsetLeft - currentPosX) + 'px';
|
||
}
|
||
|
||
function closeDragElement () {
|
||
// Stop moving when mouse button is released and release events
|
||
document.onmouseup = null;
|
||
document.onmousemove = null;
|
||
}
|
||
}
|
||
|
||
|
||
// Выравниваем форму по центру, либо по блоку w2g-at-right, если он есть
|
||
topWindow.setDefaultPosition = function() {
|
||
if (topWindow.setDefaultPositionOnResize) {
|
||
if (topWindow.w2gRightBlock != null) {
|
||
let bClientRect = topWindow.w2gRightBlock.getBoundingClientRect();
|
||
topWindow.cBlock.style.left = (6+bClientRect.left).toString()+'px';
|
||
topWindow.cBlock.style.top = (6+bClientRect.top).toString()+'px';
|
||
} else {
|
||
topWindow.cBlock.style.left = (window.innerWidth/2 - topWindow.cBlock.offsetWidth/2) + 'px';
|
||
topWindow.cBlock.style.top = (window.innerHeight/2 - topWindow.cBlock.offsetHeight/2) + 'px';
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
window.addEventListener('load', () => {
|
||
// Запускаем ету шарманку
|
||
initTopWindow();
|
||
});
|
||
|
||
|
||
// Выравниваем форму по центру при ресайзе окна браузера
|
||
window.addEventListener('resize', () => {
|
||
topWindow.setDefaultPosition();
|
||
}); |