player state sync added
+ player state syncronisation + host selection - FMs
This commit is contained in:
Vexure
parent
6534de3811
commit
338e0bd009
8675
FM/PHP-FM.php
8675
FM/PHP-FM.php
File diff suppressed because one or more lines are too long
478
client.css
478
client.css
@ -1,220 +1,318 @@
|
|||||||
body {
|
body {text-align: center;}
|
||||||
|
|
||||||
|
.pquiz-button {
|
||||||
|
background-color: #22223C;
|
||||||
|
color: #DDF;
|
||||||
|
|
||||||
|
margin: 3px;
|
||||||
|
font-weight: 700;
|
||||||
|
|
||||||
|
min-height: 32px;
|
||||||
|
|
||||||
|
border: 1px solid #537;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-container {
|
||||||
|
min-width: 300px;
|
||||||
|
max-width: 360px;
|
||||||
|
min-height: 80px;
|
||||||
|
width: fit-content;
|
||||||
|
height: fit-content;
|
||||||
|
|
||||||
|
border: 1px solid #112;
|
||||||
|
border-radius : 12px;
|
||||||
|
|
||||||
|
font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-top-header-game-date, #client-top-header-caption, #update-data-button {
|
||||||
|
padding: 3px;
|
||||||
|
padding-top: 6px;
|
||||||
|
padding-bottom: 2px;
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-top-header {
|
||||||
|
width: 100%;
|
||||||
|
margin-left: -1px;
|
||||||
|
margin-right: -1px;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
border-radius: 12px 12px 0 0;
|
||||||
|
border-bottom: 1px solid #224;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-top-header-game-date {
|
||||||
|
padding: 6px 6px 0px 12px;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 8;}
|
||||||
|
|
||||||
|
#client-top-header-caption {
|
||||||
|
min-width: 150px;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
order: 1;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
#client-container {
|
#update-data-button {
|
||||||
min-width: 300px;
|
float: right;
|
||||||
max-width: 326px;
|
margin-left: auto;
|
||||||
min-height: 80px;
|
margin-right: -4px;
|
||||||
width: fit-content;
|
height: auto;
|
||||||
height: fit-content;
|
width: 50px;
|
||||||
|
min-width: 32px;
|
||||||
|
order: 2;
|
||||||
|
|
||||||
border: 1px solid #112;
|
border-radius: 0 12px 0 0;
|
||||||
border-radius : 12px;
|
border: 1px none;
|
||||||
|
}
|
||||||
|
|
||||||
font-family: ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
|
#client-top-table {
|
||||||
|
min-width: 322px;
|
||||||
|
min-height: 60px;
|
||||||
|
padding: 6px 6px 1px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-top-string {
|
||||||
|
padding-left: 9px;
|
||||||
|
padding-right: 9px;
|
||||||
|
min-height: 45px;
|
||||||
|
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 21px;
|
||||||
|
border-radius : 6px;
|
||||||
|
margin-bottom: -12px;
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-top-string-place, .client-top-string-names, .client-top-string-score {
|
||||||
|
padding: 10;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
vertical-align: top;
|
||||||
|
justify-content: center; }
|
||||||
|
|
||||||
|
.client-top-string-place {
|
||||||
|
min-width: 36px;
|
||||||
|
|
||||||
|
height: auto;
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
|
||||||
display: block;
|
|
||||||
position: fixed;
|
|
||||||
z-index: 999;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-top-header-game-date, #client-top-header-caption, #update-data-button {
|
.client-top-string-names {
|
||||||
padding: 3px;
|
min-width: 200px;
|
||||||
padding-top: 6px;
|
max-width: 320px;
|
||||||
padding-bottom: 2px;
|
margin-left: auto;
|
||||||
display: block;
|
order: 1; }
|
||||||
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-top-header {
|
.client-top-string-score {
|
||||||
width: 100%;
|
float: right;
|
||||||
margin-left: -1px;
|
min-width: 36px;
|
||||||
margin-right: -1px;
|
margin-left: auto;
|
||||||
margin-bottom: 6px;
|
order: 2;
|
||||||
border-radius: 12px 12px 0 0;
|
}
|
||||||
border-bottom: 1px solid #224;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
overflow: hidden;
|
|
||||||
z-index: 15;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-top-header-game-date {
|
|
||||||
padding: 6px 6px 0px 12px;
|
|
||||||
font-size: 14px;
|
|
||||||
z-index: 8;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-top-header-caption {
|
|
||||||
min-width: 150px;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
font-size: 14px;
|
|
||||||
|
|
||||||
order: 1;
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#update-data-button {
|
|
||||||
float: right;
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: -4px;
|
|
||||||
height: 32px;
|
|
||||||
width: 50px;
|
|
||||||
min-width: 32px;
|
|
||||||
order: 2;
|
|
||||||
|
|
||||||
border-radius: 0 12px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-top-table {
|
|
||||||
min-width: 250px;
|
|
||||||
min-height: 60px;
|
|
||||||
padding: 6px 6px 1px 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-top-string {
|
|
||||||
padding-left: 9px;
|
|
||||||
padding-right: 9px;
|
|
||||||
min-height: 45px;
|
|
||||||
|
|
||||||
font-weight: 800;
|
|
||||||
font-size: 21px;
|
|
||||||
border-radius : 6px;
|
|
||||||
margin-bottom: -12px;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-top-string-place, .client-top-string-names, .client-top-string-score {
|
|
||||||
padding: 10;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
vertical-align: top;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-top-string-place {
|
|
||||||
min-width: 36px;
|
|
||||||
|
|
||||||
height: auto;
|
|
||||||
order: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.client-top-string-names {
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 320px;
|
|
||||||
margin-left: auto;
|
|
||||||
order: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.client-top-string-score {
|
|
||||||
float: right;
|
|
||||||
min-width: 36px;
|
|
||||||
margin-left: auto;
|
|
||||||
order: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
#client-extra-panel {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
#client-extra-panel {
|
width: 300px;
|
||||||
display: none;
|
height: fit-content;
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
width: 300px;
|
background: gray;
|
||||||
height: fit-content;
|
|
||||||
|
|
||||||
background: gray;
|
left: -310px;
|
||||||
|
top: 5px;
|
||||||
|
|
||||||
left: -310px;
|
z-index: 100;
|
||||||
top: 5px;
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
z-index: 100;
|
#client-extra-button {
|
||||||
border-radius: 5px;
|
width: 22px;
|
||||||
}
|
height: 24px;
|
||||||
|
left: -19px;
|
||||||
|
top: 5px;
|
||||||
|
position: absolute;
|
||||||
|
background-color: gray;
|
||||||
|
|
||||||
#client-extra-button {
|
font-weight: 700;
|
||||||
width: 22px;
|
font-size: 21px;
|
||||||
height: 24px;
|
|
||||||
left: -19px;
|
|
||||||
top: 5px;
|
|
||||||
position: absolute;
|
|
||||||
background-color: gray;
|
|
||||||
|
|
||||||
font-weight: 700;
|
border-radius: 5px 0 0 5px;
|
||||||
font-size: 21px;
|
z-index: 200;
|
||||||
|
}
|
||||||
|
|
||||||
border-radius: 5px 0 0 5px;
|
#client-settings-panel {
|
||||||
z-index: 200;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
#client-select-colorSheme {
|
.pquiz-select {
|
||||||
margin: 8px;
|
margin: 4px;
|
||||||
width: 140px;
|
width: 140px;
|
||||||
height: 40px;
|
height: 32px;
|
||||||
background-color: #224;
|
border: 1px solid transparent;
|
||||||
}
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
#client-extra-textarea-messages {
|
#client-extra-textarea-messages {
|
||||||
width: 96%;
|
width: 96%;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
|
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background-color: #224;
|
background-color: #224;
|
||||||
}
|
border: 1px solid transparent;
|
||||||
|
border-radius: 3px;
|
||||||
|
min-width: 290px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#client-update-progress-bar {
|
#client-update-progress-bar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 5px;
|
height: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
#client-bottom-block {
|
#client-bottom-block {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 32px;
|
border-radius: 0 0 12px 12px;
|
||||||
border-radius: 0 0 12px 12px;
|
|
||||||
|
font-weight: 700;
|
||||||
font-weight: 700;
|
font-size: 12px;
|
||||||
font-size: 12px;
|
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
overflow: hidden;
|
flex-direction: column;
|
||||||
z-index: 15;
|
overflow: hidden;
|
||||||
}
|
z-index: 15;
|
||||||
|
}
|
||||||
|
|
||||||
#client-bottom-block-update-time {
|
#client-bottom-panel {
|
||||||
padding: 6px 6px 6px 10px;
|
width: 100%;
|
||||||
z-index: 8;
|
|
||||||
}
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
#client-bottom-block-last-message {
|
display: flex;
|
||||||
min-width: 100px;
|
flex-direction: row;
|
||||||
margin-left: auto;
|
overflow: hidden;
|
||||||
padding: 6px;
|
z-index: 16;
|
||||||
order: 1;
|
}
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#client-bottom-block-video-adress {
|
#client-bottom-panel-update-time {
|
||||||
float: right;
|
padding: 6px 6px 6px 10px;
|
||||||
margin-left: auto;
|
z-index: 8;
|
||||||
margin-right: -4px;
|
}
|
||||||
height: 32px;
|
|
||||||
max-width: 120px;
|
#client-bottom-panel-last-message {
|
||||||
padding: 6px 10px 6px 6px;
|
min-width: 100px;
|
||||||
text-align: right;
|
margin-left: auto;
|
||||||
order: 2;
|
padding: 6px;
|
||||||
}
|
order: 1;
|
||||||
|
flex-grow: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-bottom-panel-video-adress {
|
||||||
|
float: right;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: -4px;
|
||||||
|
max-width: 120px;
|
||||||
|
padding: 6px 10px 6px 6px;
|
||||||
|
text-align: right;
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-player-panel {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 18;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-player-panel-indicator {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid black;
|
||||||
|
background-color: lightblue;
|
||||||
|
margin-right: 12px;
|
||||||
|
position: relative;
|
||||||
|
top: 10px;
|
||||||
|
left: 7px;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
color: #112;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pquiz-input {
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pquiz-checkbox-container{
|
||||||
|
margin: 4px;
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-player-panel-nick-input {
|
||||||
|
height: 28px;
|
||||||
|
margin: 3px 0 0 3px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-right: 6px;
|
||||||
|
display: inline-block;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-player-panel-answer-btn-container, #client-player-panel-nick-container {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.client-player-panel-answer-btn {
|
||||||
|
padding: 6px;
|
||||||
|
margin-left: 1px;
|
||||||
|
min-width: 58px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: purple;
|
||||||
|
}
|
||||||
|
|
||||||
|
#client-player-panel-answer-textarea {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 24px;
|
||||||
|
margin-top: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 4px 4px 12px 12px;
|
||||||
|
width: 95%;
|
||||||
|
}
|
||||||
787
client.js
787
client.js
@ -1,172 +1,153 @@
|
|||||||
|
|
||||||
// стартовые параметры формы
|
// стартовые параметры формы
|
||||||
const initColorSheme = 'w2g-dark'; //'twilight';
|
const defaultColorScheme = 'w2g-dark';
|
||||||
const autoUpdatingEnabled = false;
|
const autoUpdatingEnabled = false;
|
||||||
const setDefaultPositionOnResize = true;
|
const setDefaultPositionOnResize = true;
|
||||||
|
|
||||||
const topDataPath = './curgame';
|
//const defaultHostAdress = 'http://localhost:8080/pQuiz';
|
||||||
//const topDataPath = 'http://x96101uy.beget.tech/qclp/data';
|
//const defaultHostAdress = 'https://quiz.scuf.ru';
|
||||||
|
const defaultHostAdress = 'http://x96101uy.beget.tech/qclp';
|
||||||
|
|
||||||
|
|
||||||
var topData = {};
|
var topData = {};
|
||||||
|
|
||||||
// Основной объект формы, содержит настройки и функцию смены цветовой схемы
|
// Основной объект формы, содержит настройки и функцию смены цветовой схемы
|
||||||
// поля, содержащие ссылки на элементы формы, добавляются в initTopWindow()
|
// поля, содержащие ссылки на элементы формы, добавляются в initTopWindow()
|
||||||
var topWindow = {
|
var topWindow = {
|
||||||
colorScheme: initColorSheme,
|
colorScheme: {name:defaultColorScheme},
|
||||||
autoUpdating: autoUpdatingEnabled,
|
autoUpdating: autoUpdatingEnabled,
|
||||||
setDefaultPositionOnResize: setDefaultPositionOnResize,
|
setDefaultPositionOnResize: setDefaultPositionOnResize,
|
||||||
|
|
||||||
|
player : {nick:"player", uuid:""},
|
||||||
|
|
||||||
addLogMessage : function (lMessage) {
|
addLogMessage : function (lMessage) {
|
||||||
this.messagesTextarea.value = "[" + getTimeNow() + "] " + lMessage + "\r" + this.messagesTextarea.value;
|
this.messagesTextarea.value = "[" + getTimeNow() + "] " + lMessage + "\r" + this.messagesTextarea.value;
|
||||||
let bottomMessageBlock = document.querySelector("#client-bottom-block-last-message");
|
let bottomMessageBlock = document.querySelector("#client-bottom-panel-last-message");
|
||||||
if (bottomMessageBlock) bottomMessageBlock.innerHTML = lMessage;
|
if (bottomMessageBlock) bottomMessageBlock.innerHTML = lMessage;
|
||||||
},
|
},
|
||||||
changeColorScheme : function (cShemeName) {
|
|
||||||
|
changeColorScheme : function (cSchemeName) {
|
||||||
if (cShemeName == 'twilight') {
|
function performChange() {
|
||||||
this.colorScheme = 'twilight';
|
|
||||||
topWindow.colorShemeSelect.value = this.colorScheme;
|
|
||||||
|
|
||||||
let element = document.querySelector('body');
|
let element = document.querySelector('body');
|
||||||
element.style.backgroundColor = '#112';
|
element.style.backgroundColor = topWindow.colorScheme.bgColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-container');
|
element = document.querySelector('#client-container');
|
||||||
element.style.backgroundColor = '#335';
|
element.style.backgroundColor = topWindow.colorScheme.blockColor;
|
||||||
element.style.color = '#DDF';
|
element.style.color = topWindow.colorScheme.textColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-button');
|
element = document.querySelector('#client-extra-button');
|
||||||
element.style.backgroundColor = '#232342';
|
element.style.backgroundColor = topWindow.colorScheme.headerColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-textarea-messages');
|
element = document.querySelector('#client-extra-textarea-messages');
|
||||||
element.style.backgroundColor = '#122332';
|
element.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
element.style.color = '#DDF';
|
element.style.color = topWindow.colorScheme.textColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-select-colorSheme');
|
|
||||||
element.style.backgroundColor = '#122332';
|
|
||||||
element.style.color = '#DDF';
|
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-panel');
|
element = document.querySelector('#client-extra-panel');
|
||||||
element.style.backgroundColor = '#335';
|
element.style.backgroundColor = topWindow.colorScheme.blockColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-top-header');
|
element = document.querySelector('#client-top-header');
|
||||||
element.style.backgroundColor = '#232342';
|
element.style.backgroundColor = topWindow.colorScheme.headerColor;
|
||||||
element.style.borderBottom = '1px solid #224';
|
element.style.borderBottom = '1px solid '+topWindow.colorScheme.headerColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-update-progress-bar');
|
element = document.querySelector('#client-update-progress-bar');
|
||||||
element.style.backgroundColor = '#2d3d63';
|
element.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
|
||||||
element = document.querySelector('#update-data-button');
|
element = document.querySelector('#update-data-button');
|
||||||
element.style.backgroundColor = '#335';
|
element.style.backgroundColor = topWindow.colorScheme.blockColor;
|
||||||
|
|
||||||
element = document.querySelector('#client-bottom-block');
|
element = document.querySelector('#client-bottom-block');
|
||||||
element.style.backgroundColor = '#232342';
|
element.style.backgroundColor = topWindow.colorScheme.headerColor;
|
||||||
element.style.borderBottom = '1px solid #224';
|
element.style.borderBottom = '1px solid '+topWindow.colorScheme.headerColor;
|
||||||
|
|
||||||
element = document.querySelectorAll('.client-top-string').forEach(e => e.style.backgroundColor = '#557');
|
document.querySelectorAll('.client-top-string').forEach(
|
||||||
|
e => e.style.backgroundColor = topWindow.colorScheme.listAccentColor);
|
||||||
|
|
||||||
|
document.querySelectorAll('.pquiz-select').forEach(
|
||||||
|
e => {
|
||||||
|
e.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
|
e.style.color = topWindow.colorScheme.textColor;
|
||||||
|
|
||||||
|
});
|
||||||
|
document.querySelectorAll('.pquiz-checkbox-container').forEach(
|
||||||
|
e => {
|
||||||
|
e.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
|
e.style.color = topWindow.colorScheme.textColor;
|
||||||
|
});
|
||||||
|
document.querySelectorAll('input').forEach(
|
||||||
|
e => {
|
||||||
|
e.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
e.style.color = topWindow.colorScheme.textColor;
|
||||||
|
});
|
||||||
|
document.querySelectorAll('button').forEach(
|
||||||
|
e => {
|
||||||
|
e.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
e.style.color = topWindow.colorScheme.textColor;
|
||||||
|
|
||||||
|
});
|
||||||
|
document.querySelectorAll('textarea').forEach(
|
||||||
|
e => {
|
||||||
|
e.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
e.style.color = topWindow.colorScheme.textColor;
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
updateAnswerBtns(topWindow.curAnswerMode);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (cShemeName == 'light') {
|
if (!topWindow.colorScheme) topWindow.colorScheme = {};
|
||||||
this.colorScheme = 'light';
|
|
||||||
topWindow.colorShemeSelect.value = this.colorScheme;
|
|
||||||
|
|
||||||
let element = document.querySelector('body');
|
if (cSchemeName == "w2g-dark") {
|
||||||
element.style.backgroundColor = '#FFFDFF';
|
topWindow.colorScheme.name = "w2g-dark";
|
||||||
|
|
||||||
element = document.querySelector('#client-container');
|
topWindow.colorScheme.bgColor = '#112';
|
||||||
element.style.backgroundColor = '#edf5ed';
|
topWindow.colorScheme.blockColor = '#3a4759';
|
||||||
element.style.color = '#635';
|
topWindow.colorScheme.headerColor = '#283240';
|
||||||
|
topWindow.colorScheme.textColor = '#DDF';
|
||||||
|
topWindow.colorScheme.detailsColor = '#303d51';
|
||||||
|
topWindow.colorScheme.listAccentColor = "#557";
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-button');
|
performChange();
|
||||||
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') {
|
if (cSchemeName == "twilight") {
|
||||||
this.colorScheme = 'w2g-dark';
|
topWindow.colorScheme.name = "twilight";
|
||||||
topWindow.colorShemeSelect.value = this.colorScheme;
|
|
||||||
|
|
||||||
let element = document.querySelector('body');
|
topWindow.colorScheme.bgColor = '#112';
|
||||||
element.style.backgroundColor = '#112';
|
topWindow.colorScheme.textColor = '#DDF';
|
||||||
|
topWindow.colorScheme.blockColor = '#282852';
|
||||||
element = document.querySelector('#client-container');
|
topWindow.colorScheme.headerColor = '#224';
|
||||||
element.style.backgroundColor = '#3a4759';
|
topWindow.colorScheme.detailsColor = '#362862';
|
||||||
element.style.color = '#DDF';
|
topWindow.colorScheme.listAccentColor = "#423264";
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-button');
|
performChange();
|
||||||
element.style.backgroundColor = '#283240';
|
}
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-panel');
|
if (cSchemeName == "light") {
|
||||||
element.style.backgroundColor = '#303d51';
|
topWindow.colorScheme.name = "light";
|
||||||
|
|
||||||
element = document.querySelector('#client-extra-textarea-messages');
|
topWindow.colorScheme.bgColor = '#FFFDFF';
|
||||||
element.style.backgroundColor = '#283240';
|
topWindow.colorScheme.blockColor = '#edf5ed';
|
||||||
element.style.color = '#DDF';
|
topWindow.colorScheme.headerColor = '#ffebe1';
|
||||||
|
topWindow.colorScheme.textColor = '#993';
|
||||||
|
topWindow.colorScheme.detailsColor = '#ffffdf';
|
||||||
|
topWindow.colorScheme.listAccentColor = '#FAFAD5';
|
||||||
|
|
||||||
element = document.querySelector('#client-select-colorSheme');
|
performChange();
|
||||||
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 = {
|
var gameStateUpdater = {
|
||||||
delay: 15000,
|
delay : 15000,
|
||||||
tick: 32,
|
tick : 100,
|
||||||
counter: 1000,
|
counter : 1000,
|
||||||
check: function () {
|
check : function () {
|
||||||
if (this.counter > 0) {
|
if (this.counter > 0) {
|
||||||
this.counter -= this.tick;
|
this.counter -= this.tick;
|
||||||
} else {
|
} else {
|
||||||
loadTopData(topDataPath);
|
loadTopData();
|
||||||
this.counter = this.delay;
|
this.counter = this.delay;
|
||||||
topWindow.uBlock.style.width = '0%';
|
topWindow.uBlock.style.width = '0%';
|
||||||
}
|
}
|
||||||
@ -176,13 +157,130 @@ var updater = {
|
|||||||
topWindow.uBlock.style.width = 100 - (100 * (this.counter/this.delay)) + '%';
|
topWindow.uBlock.style.width = 100 - (100 * (this.counter/this.delay)) + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (topWindow.autoUpdating) setTimeout(()=>{updater.check();}, this.tick);
|
if (topWindow.autoUpdating) setTimeout(()=>{gameStateUpdater.check();}, this.tick);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var playerStateUpdater = {
|
||||||
|
delay : 6400,
|
||||||
|
tick : 200,
|
||||||
|
counter : 1000,
|
||||||
|
animframe : 0,
|
||||||
|
timerID : -1,
|
||||||
|
check : function () {
|
||||||
|
if (this.counter > 0) {
|
||||||
|
this.counter -= this.tick;
|
||||||
|
|
||||||
|
if (topWindow.player.state == "AWRG") {
|
||||||
|
var nickBtnCaption = "РЕГАЮСЬ ";
|
||||||
|
if (this.animframe == 0) nickBtnCaption += ">  ";
|
||||||
|
if (this.animframe == 1) nickBtnCaption += " > ";
|
||||||
|
if (this.animframe == 2) nickBtnCaption += "  >";
|
||||||
|
this.animframe++;
|
||||||
|
if (this.animframe > 2) this.animframe = 0;
|
||||||
|
topWindow.playerPanel.nickButton.innerHTML = nickBtnCaption;
|
||||||
|
}
|
||||||
|
//console.log("timerID: "+this.timerID+" counter: "+this.counter);
|
||||||
|
|
||||||
|
if (this.timerID != -1) clearTimeout(this.timerID);
|
||||||
|
this.timerID = setTimeout(()=>{playerStateUpdater.check();}, this.tick);
|
||||||
|
|
||||||
|
} else { // Загружаем состояние игрока с сервера
|
||||||
|
var tdPath = topWindow.hostAdress + "/games/" + topData.UUID + "/players/" + topWindow.player.UUID;
|
||||||
|
var XHR = new XMLHttpRequest();
|
||||||
|
XHR.open('GET', tdPath);
|
||||||
|
XHR.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=0');
|
||||||
|
|
||||||
|
console.log("playerStateUpdater: XHR");
|
||||||
|
|
||||||
|
XHR.onreadystatechange = function() {
|
||||||
|
if (XHR.readyState === XMLHttpRequest.DONE) {
|
||||||
|
let rText = JSON.parse(XHR.responseText);
|
||||||
|
|
||||||
|
if (rText.state) {
|
||||||
|
if (rText.state == "IDLE" && topWindow.player.state == "AWRG") topWindow.addLogMessage("хост зарегистрировал игрока");
|
||||||
|
if (rText.state == "IDLE") topWindow.player.state = rText.state;
|
||||||
|
topWindow.playerPanel.answerBtnContainer.style.display = "inline-block";
|
||||||
|
|
||||||
|
var hostSync = "нет";
|
||||||
|
var indicatorColor = "yellow";
|
||||||
|
if (rText.hsync && rText.hsync == true) {
|
||||||
|
hostSync = "да";
|
||||||
|
indicatorColor = "green";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (rText.state == "AWRG") {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "yellow";
|
||||||
|
topWindow.playerPanel.indicator.title = "Статус: регистрация игрока"+" \r\n Принято ведущим: " + hostSync;
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "";
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnContainer.style.display = "none";
|
||||||
|
}
|
||||||
|
if (rText.state == "IDLE") {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "lightblue";
|
||||||
|
topWindow.playerPanel.indicator.title = "Статус: IDLE"+" \r\n Принято ведущим: " + hostSync;
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "";
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickButton.innerHTML = "СМЕНИТЬ >>>";
|
||||||
|
|
||||||
|
updateAnswerBtns("IDLE");
|
||||||
|
}
|
||||||
|
if (rText.state == "ANSW") {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = indicatorColor;
|
||||||
|
topWindow.playerPanel.indicator.title = "Статус: ответ направлен"+" \r\n Принято ведущим: " + hostSync;
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "+";
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnContainer.style.display = "inline-block";
|
||||||
|
}
|
||||||
|
if (rText.state == "WAIT") {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = indicatorColor;
|
||||||
|
topWindow.playerPanel.indicator.title = "Статус: WAIT"+" \r\n Принято ведущим: " + hostSync;
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = ">";
|
||||||
|
}
|
||||||
|
if (rText.state == "PASS") {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = indicatorColor;
|
||||||
|
topWindow.playerPanel.indicator.title = "Статус: PASS"+" \r\n Принято ведущим: " + hostSync;
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "—";
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} else {
|
||||||
|
topWindow.player.state = "EROR";
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "red";
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "!";
|
||||||
|
topWindow.playerPanel.indicator.title = "Ошибка синхронизации, сервер недоступен или сделал хуйню";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topWindow.player.state != "IDLE" && topWindow.player.state != "EROR") {
|
||||||
|
playerStateUpdater.counter = playerStateUpdater.delay;
|
||||||
|
this.counter = this.delay;
|
||||||
|
this.timerID = setTimeout(()=>{playerStateUpdater.check();}, this.tick);
|
||||||
|
} else this.timerID = -1;
|
||||||
|
|
||||||
|
}
|
||||||
|
};
|
||||||
|
XHR.onerror = function() {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "red";
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "!";
|
||||||
|
topWindow.playerPanel.indicator.title = "Проблема сервера";
|
||||||
|
|
||||||
|
topWindow.addLogMessage("проблема с сервером");
|
||||||
|
};
|
||||||
|
XHR.send();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Сгенерить UUID
|
||||||
|
function generateUuidv4() {
|
||||||
|
return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c =>
|
||||||
|
(+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
// Получаем время в формате "24:60:60"
|
// Получаем время в формате "24:60:60"
|
||||||
var getTimeNow = function () {
|
function getTimeNow () {
|
||||||
var dNow = new Date();
|
var dNow = new Date();
|
||||||
|
|
||||||
let tnHours = dNow.getHours().toString();
|
let tnHours = dNow.getHours().toString();
|
||||||
@ -195,6 +293,62 @@ var getTimeNow = function () {
|
|||||||
return tnHours + ":" + tnMinutes + ":" + tnSeconds;
|
return tnHours + ":" + tnMinutes + ":" + tnSeconds;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// Преобразуем дату из 01.01.2000 в 01.01.00
|
||||||
|
function getShortDate (date) {
|
||||||
|
if (!date || date.length < 10) return null;
|
||||||
|
|
||||||
|
return date.substring(0,6) + date.slice(-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Обновляем отображение кнопок ответа игрока
|
||||||
|
function updateAnswerBtns(selectedAnswBtn) {
|
||||||
|
topWindow.playerPanel.answerBtnReady.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
|
topWindow.playerPanel.answerBtnPass.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
|
topWindow.playerPanel.answerBtnWait.style.backgroundColor = topWindow.colorScheme.detailsColor;
|
||||||
|
|
||||||
|
if (selectedAnswBtn == "ANSW") {
|
||||||
|
topWindow.playerPanel.answerBtnReady.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
topWindow.player.state = "ANSW";
|
||||||
|
}
|
||||||
|
if (selectedAnswBtn == "WAIT") {
|
||||||
|
topWindow.playerPanel.answerBtnWait.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
topWindow.player.state = "WAIT";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedAnswBtn == "PASS") {
|
||||||
|
topWindow.playerPanel.answerBtnPass.style.backgroundColor = topWindow.colorScheme.listAccentColor;
|
||||||
|
topWindow.player.state = "PASS";
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedAnswBtn == "IDLE") {
|
||||||
|
topWindow.playerPanel.answerTextArea.value = "";
|
||||||
|
topWindow.player.state = "IDLE";
|
||||||
|
}
|
||||||
|
|
||||||
|
topWindow.curAnswerMode = selectedAnswBtn;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Устанавливаем ник игрока, в topWindow, w2g.tv и заодно сохраняем в localStorage
|
||||||
|
function setPlayerNick(pNick) {
|
||||||
|
topWindow.player.nick = pNick;
|
||||||
|
|
||||||
|
if (topWindow.playerPanel.nickInput.value != topWindow.player.nick)
|
||||||
|
topWindow.playerPanel.nickInput.value = topWindow.player.nick;
|
||||||
|
|
||||||
|
if (W2GNickInput) {
|
||||||
|
W2GNickInput.value = pNick;
|
||||||
|
|
||||||
|
const kbEvent = new KeyboardEvent('keydown', {
|
||||||
|
bubbles: true,
|
||||||
|
cancelable: true,
|
||||||
|
key: 'Enter',
|
||||||
|
});
|
||||||
|
|
||||||
|
W2GNickInput.dispatchEvent(kbEvent);
|
||||||
|
}
|
||||||
|
|
||||||
|
localStorage.setItem('posani_quiz_player', JSON.stringify(topWindow.player));
|
||||||
|
}
|
||||||
|
|
||||||
// ====================== НАЧАЛО initTopWindow =========================
|
// ====================== НАЧАЛО initTopWindow =========================
|
||||||
// ========= Инициализируем (встраиваем) основную форму топа ===========
|
// ========= Инициализируем (встраиваем) основную форму топа ===========
|
||||||
@ -213,6 +367,19 @@ var initTopWindow = function () {
|
|||||||
topWindow.extraPanel.id = 'client-extra-panel';
|
topWindow.extraPanel.id = 'client-extra-panel';
|
||||||
topWindow.cBlock.appendChild(topWindow.extraPanel);
|
topWindow.cBlock.appendChild(topWindow.extraPanel);
|
||||||
|
|
||||||
|
// Панель опций - цветовая схема, адрес сервера, галочки =========
|
||||||
|
topWindow.extraPanel.settingsPanel = document.createElement('div');
|
||||||
|
topWindow.extraPanel.settingsPanel.id = "client-settings-panel";
|
||||||
|
topWindow.extraPanel.appendChild(topWindow.extraPanel.settingsPanel);
|
||||||
|
|
||||||
|
topWindow.extraPanel.settingsPanel.topBlock = document.createElement('div');
|
||||||
|
topWindow.extraPanel.settingsPanel.topBlock.style.marginTop = "4px";
|
||||||
|
topWindow.extraPanel.settingsPanel.appendChild(topWindow.extraPanel.settingsPanel.topBlock);
|
||||||
|
|
||||||
|
topWindow.extraPanel.settingsPanel.bottomBlock = document.createElement('div');
|
||||||
|
topWindow.extraPanel.settingsPanel.appendChild(topWindow.extraPanel.settingsPanel.bottomBlock);
|
||||||
|
|
||||||
|
|
||||||
topWindow.autoUpdateCheckbox = document.createElement('input');
|
topWindow.autoUpdateCheckbox = document.createElement('input');
|
||||||
topWindow.autoUpdateCheckbox.id = 'client-auto-update-checkbox';
|
topWindow.autoUpdateCheckbox.id = 'client-auto-update-checkbox';
|
||||||
topWindow.autoUpdateCheckbox.type = 'checkbox';
|
topWindow.autoUpdateCheckbox.type = 'checkbox';
|
||||||
@ -221,7 +388,7 @@ var initTopWindow = function () {
|
|||||||
if (topWindow.autoUpdateCheckbox.checked) {
|
if (topWindow.autoUpdateCheckbox.checked) {
|
||||||
topWindow.autoUpdating = true;
|
topWindow.autoUpdating = true;
|
||||||
topWindow.addLogMessage("автообн. запущено");
|
topWindow.addLogMessage("автообн. запущено");
|
||||||
updater.check();
|
gameStateUpdater.check();
|
||||||
} else {
|
} else {
|
||||||
topWindow.autoUpdating = false;
|
topWindow.autoUpdating = false;
|
||||||
topWindow.addLogMessage("автообн. остановлено");
|
topWindow.addLogMessage("автообн. остановлено");
|
||||||
@ -229,14 +396,16 @@ var initTopWindow = function () {
|
|||||||
});
|
});
|
||||||
var AUcheckboxContainer = document.createElement('div');
|
var AUcheckboxContainer = document.createElement('div');
|
||||||
AUcheckboxContainer.id = "autoUpdateCheckboxContainer";
|
AUcheckboxContainer.id = "autoUpdateCheckboxContainer";
|
||||||
AUcheckboxContainer.innerHTML += "AU  ";
|
AUcheckboxContainer.className = "pquiz-checkbox-container";
|
||||||
|
AUcheckboxContainer.innerHTML += "  автообновл.";
|
||||||
AUcheckboxContainer.style.display = "inline-block";
|
AUcheckboxContainer.style.display = "inline-block";
|
||||||
AUcheckboxContainer.appendChild(topWindow.autoUpdateCheckbox);
|
AUcheckboxContainer.prepend(topWindow.autoUpdateCheckbox);
|
||||||
topWindow.extraPanel.appendChild(AUcheckboxContainer);
|
topWindow.extraPanel.settingsPanel.topBlock.appendChild(AUcheckboxContainer);
|
||||||
|
|
||||||
topWindow.colorShemeSelect = document.createElement('select');
|
topWindow.colorShemeSelect = document.createElement('select');
|
||||||
|
topWindow.colorShemeSelect.className = 'pquiz-select';
|
||||||
topWindow.colorShemeSelect.id = 'client-select-colorSheme';
|
topWindow.colorShemeSelect.id = 'client-select-colorSheme';
|
||||||
topWindow.colorShemeSelect.value = initColorSheme;
|
topWindow.colorShemeSelect.value = defaultColorScheme;
|
||||||
topWindow.colorShemeSelect.setAttribute("list","colorSchemes");
|
topWindow.colorShemeSelect.setAttribute("list","colorSchemes");
|
||||||
topWindow.colorShemeSelect.innerHTML =
|
topWindow.colorShemeSelect.innerHTML =
|
||||||
"<datalist id='colorSchemes'>"
|
"<datalist id='colorSchemes'>"
|
||||||
@ -244,17 +413,60 @@ var initTopWindow = function () {
|
|||||||
+"<option value='w2g-dark'>W2G-Dark</option>"
|
+"<option value='w2g-dark'>W2G-Dark</option>"
|
||||||
+"<option value='light'>Light</option>"
|
+"<option value='light'>Light</option>"
|
||||||
+"</datalist>";
|
+"</datalist>";
|
||||||
topWindow.colorShemeSelect.addEventListener('change', () => {
|
|
||||||
topWindow.changeColorScheme(topWindow.colorShemeSelect.value);
|
|
||||||
});
|
|
||||||
topWindow.extraPanel.appendChild(topWindow.colorShemeSelect);
|
|
||||||
|
|
||||||
topWindow.bottomPanelCheckbox = document.createElement('input');
|
topWindow.colorShemeSelect.selectedIndex = localStorage.getItem("selectedColorSchemeIndex");
|
||||||
topWindow.bottomPanelCheckbox.id = 'client-show-bottom-panel-checkbox';
|
topWindow.colorScheme.name = topWindow.colorShemeSelect.value;
|
||||||
topWindow.bottomPanelCheckbox.type = 'checkbox';
|
topWindow.colorShemeSelect.addEventListener('change', () => {
|
||||||
topWindow.bottomPanelCheckbox.checked = true;
|
topWindow.colorScheme.name = topWindow.colorShemeSelect.value;
|
||||||
topWindow.bottomPanelCheckbox.addEventListener('change', () => {
|
topWindow.changeColorScheme(topWindow.colorScheme.name);
|
||||||
if (topWindow.bottomPanelCheckbox.checked) {
|
localStorage.setItem("selectedColorSchemeIndex", topWindow.colorShemeSelect.selectedIndex);
|
||||||
|
});
|
||||||
|
topWindow.extraPanel.settingsPanel.bottomBlock.appendChild(topWindow.colorShemeSelect);
|
||||||
|
|
||||||
|
topWindow.extraPanel.dataRecieverSelect = document.createElement('select');
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.className = 'pquiz-select';
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.id = 'select-reciever';
|
||||||
|
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.setAttribute("list", "recieverServers");
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.style.marginTop = '3px';
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.innerHTML =
|
||||||
|
"<datalist id='recieverServers'>"
|
||||||
|
+"<option value='https://quiz.scuf.ru/'>quiz.scuf.ru</option>"
|
||||||
|
+"<option value='http://x96101uy.beget.tech/qclp/'>x96.beget.tech</option>"
|
||||||
|
+"<option value='http://localhost:8080/pQuiz/'>localhost:8080</option>"
|
||||||
|
+"</datalist>";
|
||||||
|
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.selectedIndex = localStorage.getItem("selectedHostIndex");
|
||||||
|
topWindow.hostAdress = topWindow.extraPanel.dataRecieverSelect.value;
|
||||||
|
topWindow.extraPanel.dataRecieverSelect.addEventListener('change', () => {
|
||||||
|
if (topWindow.extraPanel.dataRecieverSelect.selectedIndex == 0) {
|
||||||
|
topWindow.hostAdress = "https://quiz.scuf.ru/";
|
||||||
|
topWindow.addLogMessage("Выбран хост scuf.ru");
|
||||||
|
}
|
||||||
|
if (topWindow.extraPanel.dataRecieverSelect.selectedIndex == 1) {
|
||||||
|
topWindow.hostAdress = "http://x96101uy.beget.tech/qclp/";
|
||||||
|
topWindow.addLogMessage("Выбран хост beget");
|
||||||
|
}
|
||||||
|
if (topWindow.extraPanel.dataRecieverSelect.selectedIndex == 2) {
|
||||||
|
topWindow.hostAdress = "http://localhost:8080/pQuiz/";
|
||||||
|
topWindow.addLogMessage("Выбран хост localhost");
|
||||||
|
}
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickContainer.style.display = 'none';
|
||||||
|
topWindow.playerPanel.answerBtnContainer.style.display = 'none';
|
||||||
|
topWindow.topBlock.innerHTML = '<div style="margin-top: 6px; font-weight: 700; font-size: 24px"> ТОП </div>';
|
||||||
|
|
||||||
|
localStorage.setItem("selectedHostIndex", topWindow.extraPanel.dataRecieverSelect.selectedIndex);
|
||||||
|
});
|
||||||
|
topWindow.extraPanel.settingsPanel.bottomBlock.appendChild(topWindow.extraPanel.dataRecieverSelect);
|
||||||
|
|
||||||
|
|
||||||
|
topWindow.extraPanel.bottomPanelCheckbox = document.createElement('input');
|
||||||
|
topWindow.extraPanel.bottomPanelCheckbox.id = 'client-show-bottom-panel-checkbox';
|
||||||
|
topWindow.extraPanel.bottomPanelCheckbox.type = 'checkbox';
|
||||||
|
topWindow.extraPanel.bottomPanelCheckbox.checked = true;
|
||||||
|
topWindow.extraPanel.bottomPanelCheckbox.addEventListener('change', () => {
|
||||||
|
if (topWindow.extraPanel.bottomPanelCheckbox.checked) {
|
||||||
topWindow.bottomBlock.style.display = "flex";
|
topWindow.bottomBlock.style.display = "flex";
|
||||||
} else {
|
} else {
|
||||||
topWindow.bottomBlock.style.display = "none";
|
topWindow.bottomBlock.style.display = "none";
|
||||||
@ -262,10 +474,11 @@ var initTopWindow = function () {
|
|||||||
});
|
});
|
||||||
var BPcheckboxContainer = document.createElement('div');
|
var BPcheckboxContainer = document.createElement('div');
|
||||||
BPcheckboxContainer.id = "bottomPanelCheckboxContainer";
|
BPcheckboxContainer.id = "bottomPanelCheckboxContainer";
|
||||||
|
BPcheckboxContainer.className = "pquiz-checkbox-container";
|
||||||
BPcheckboxContainer.style.display = "inline-block";
|
BPcheckboxContainer.style.display = "inline-block";
|
||||||
BPcheckboxContainer.innerHTML += "  BP";
|
BPcheckboxContainer.innerHTML += " нижняя панель";
|
||||||
BPcheckboxContainer.prepend(topWindow.bottomPanelCheckbox);
|
BPcheckboxContainer.prepend(topWindow.extraPanel.bottomPanelCheckbox);
|
||||||
topWindow.extraPanel.appendChild(BPcheckboxContainer);
|
topWindow.extraPanel.settingsPanel.topBlock.appendChild(BPcheckboxContainer);
|
||||||
|
|
||||||
topWindow.messagesTextarea = document.createElement('textarea');
|
topWindow.messagesTextarea = document.createElement('textarea');
|
||||||
topWindow.messagesTextarea.id = 'client-extra-textarea-messages';
|
topWindow.messagesTextarea.id = 'client-extra-textarea-messages';
|
||||||
@ -289,15 +502,23 @@ var initTopWindow = function () {
|
|||||||
|
|
||||||
topWindow.headerBlock = document.createElement('div');
|
topWindow.headerBlock = document.createElement('div');
|
||||||
topWindow.headerBlock.id = 'client-top-header';
|
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.cBlock.appendChild(topWindow.headerBlock);
|
||||||
|
|
||||||
|
topWindow.headerBlock.captionBlock = document.createElement('div');
|
||||||
|
topWindow.headerBlock.captionBlock.id = 'client-top-header-caption';
|
||||||
|
topWindow.headerBlock.captionBlock.innerHTML = "[Название]";
|
||||||
|
topWindow.headerBlock.appendChild(topWindow.headerBlock.captionBlock);
|
||||||
|
|
||||||
|
topWindow.headerBlock.dateBlock = document.createElement('div');
|
||||||
|
topWindow.headerBlock.dateBlock.id = 'client-top-header-game-date';
|
||||||
|
topWindow.headerBlock.dateBlock.innerHTML = "32.13.46";
|
||||||
|
topWindow.headerBlock.appendChild(topWindow.headerBlock.dateBlock);
|
||||||
|
|
||||||
|
topWindow.headerBlock.innerHTML +="<button id='update-data-button'>⟳</button>";
|
||||||
|
|
||||||
topWindow.topBlock = document.createElement('div');
|
topWindow.topBlock = document.createElement('div');
|
||||||
topWindow.topBlock.id = 'client-top-table';
|
topWindow.topBlock.id = 'client-top-table';
|
||||||
topWindow.topBlock.innerHTML = '<a style="margin-top: 15px; font-weight: 700; font-size: 24px"> ТОП </a>';
|
topWindow.topBlock.innerHTML = '<div style="margin-top: 6px; font-weight: 700; font-size: 24px"> ТОП </div>';
|
||||||
topWindow.cBlock.appendChild(topWindow.topBlock);
|
topWindow.cBlock.appendChild(topWindow.topBlock);
|
||||||
|
|
||||||
topWindow.updateBlock = document.createElement('div');
|
topWindow.updateBlock = document.createElement('div');
|
||||||
@ -307,40 +528,155 @@ var initTopWindow = function () {
|
|||||||
+"</div>";
|
+"</div>";
|
||||||
topWindow.cBlock.appendChild(topWindow.updateBlock);
|
topWindow.cBlock.appendChild(topWindow.updateBlock);
|
||||||
|
|
||||||
|
// bottom block ===================================================
|
||||||
topWindow.bottomBlock = document.createElement('div');
|
topWindow.bottomBlock = document.createElement('div');
|
||||||
topWindow.bottomBlock.id = 'client-bottom-block';
|
topWindow.bottomBlock.id = 'client-bottom-block';
|
||||||
topWindow.bottomBlock.innerHTML =
|
topWindow.bottomBlock.style.display = "flex";
|
||||||
"<div id='client-bottom-block-update-time'>00.00.00</div>"
|
topWindow.bottomBlock.style.flexDirection = "column";
|
||||||
+"<div id='client-bottom-block-last-message'></div>"
|
|
||||||
+"<div id='client-bottom-block-video-adress'>yt~dsfg4DF</div>";
|
topWindow.bottomPanel = document.createElement('div');
|
||||||
|
topWindow.bottomPanel.innerHTML =
|
||||||
|
"<div id='client-bottom-panel-update-time'>00.00.00</div>"
|
||||||
|
+"<div id='client-bottom-panel-last-message'></div>"
|
||||||
|
+"<div id='client-bottom-panel-video-adress'>yt~dsfg4DF</div>";
|
||||||
|
topWindow.bottomPanel.id = 'client-bottom-panel';
|
||||||
|
topWindow.bottomBlock.appendChild(topWindow.bottomPanel);
|
||||||
|
|
||||||
|
topWindow.playerPanel = document.createElement('div');
|
||||||
|
topWindow.playerPanel.id = 'client-player-panel';
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickContainer = document.createElement('div');
|
||||||
|
topWindow.playerPanel.nickContainer.id = "client-player-panel-nick-container";
|
||||||
|
topWindow.playerPanel.nickContainer.style.padding = "3px";
|
||||||
|
|
||||||
|
topWindow.playerPanel.indicator = document.createElement('div');
|
||||||
|
topWindow.playerPanel.indicator.id = "client-player-panel-indicator";
|
||||||
|
topWindow.playerPanel.nickContainer.appendChild(topWindow.playerPanel.indicator);
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickInput = document.createElement('input');
|
||||||
|
topWindow.playerPanel.nickInput.className = "pquiz-input";
|
||||||
|
topWindow.playerPanel.nickInput.id = "client-player-panel-nick-input";
|
||||||
|
topWindow.playerPanel.nickInput.addEventListener('change',()=>{
|
||||||
|
setPlayerNick( topWindow.playerPanel.nickInput.value);
|
||||||
|
});
|
||||||
|
topWindow.playerPanel.nickContainer.appendChild(topWindow.playerPanel.nickInput);
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickButton = document.createElement('button');
|
||||||
|
topWindow.playerPanel.nickButton.className = "pquiz-button";
|
||||||
|
topWindow.playerPanel.nickButton.id = "client-player-panel-nick-btn";
|
||||||
|
topWindow.playerPanel.nickButton.innerHTML = "УЧАСТВУЮ >>>";
|
||||||
|
topWindow.playerPanel.nickButton.addEventListener('click', ()=> {
|
||||||
|
topWindow.player.state = "AWRG";
|
||||||
|
updateAnswerBtns("AWRG");
|
||||||
|
sendPlayerState();
|
||||||
|
});
|
||||||
|
topWindow.playerPanel.nickContainer.appendChild(topWindow.playerPanel.nickButton);
|
||||||
|
|
||||||
|
topWindow.playerPanel.appendChild(topWindow.playerPanel.nickContainer);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnContainer = document.createElement('div');
|
||||||
|
topWindow.playerPanel.answerBtnContainer.id = "client-player-panel-answer-btn-container";
|
||||||
|
topWindow.playerPanel.answerBtnContainer.style.marginTop = '8px';
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnReady = document.createElement('div');
|
||||||
|
topWindow.playerPanel.answerBtnReady.innerHTML = "ОТВЕТ";
|
||||||
|
topWindow.playerPanel.answerBtnReady.style.borderRadius = "12px 0 0 12px";
|
||||||
|
topWindow.playerPanel.answerBtnReady.style.marginLeft = "8px";
|
||||||
|
topWindow.playerPanel.answerBtnReady.className = "client-player-panel-answer-btn";
|
||||||
|
topWindow.playerPanel.answerBtnReady.addEventListener("click", () => {updateAnswerBtns('ANSW')});
|
||||||
|
topWindow.playerPanel.answerBtnContainer.appendChild(topWindow.playerPanel.answerBtnReady);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnWait = document.createElement('div');
|
||||||
|
topWindow.playerPanel.answerBtnWait.innerHTML = "ЖДУ";
|
||||||
|
topWindow.playerPanel.answerBtnWait.className = "client-player-panel-answer-btn";
|
||||||
|
topWindow.playerPanel.answerBtnWait.addEventListener("click", () => {updateAnswerBtns('WAIT')});
|
||||||
|
topWindow.playerPanel.answerBtnContainer.appendChild(topWindow.playerPanel.answerBtnWait);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnPass = document.createElement('div');
|
||||||
|
topWindow.playerPanel.answerBtnPass.innerHTML = "ПАС";
|
||||||
|
topWindow.playerPanel.answerBtnPass.style.borderRadius = "0 12px 12px 0";
|
||||||
|
topWindow.playerPanel.answerBtnPass.className = "client-player-panel-answer-btn";
|
||||||
|
topWindow.playerPanel.answerBtnPass.addEventListener("click", () => {updateAnswerBtns('PASS')});
|
||||||
|
topWindow.playerPanel.answerBtnContainer.appendChild(topWindow.playerPanel.answerBtnPass);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnSend = document.createElement('button');
|
||||||
|
topWindow.playerPanel.answerBtnSend.disabled = true;
|
||||||
|
topWindow.playerPanel.answerBtnSend.className = "pquiz-button";
|
||||||
|
topWindow.playerPanel.answerBtnSend.innerHTML = "ОТПРАВИТЬ>>";
|
||||||
|
topWindow.playerPanel.answerBtnSend.style.margin = "0 0 0 16px";
|
||||||
|
topWindow.playerPanel.answerBtnSend.addEventListener('click', sendPlayerState);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerBtnContainer.appendChild(topWindow.playerPanel.answerBtnSend);
|
||||||
|
|
||||||
|
topWindow.playerPanel.appendChild(topWindow.playerPanel.answerBtnContainer);
|
||||||
|
|
||||||
|
topWindow.playerPanel.answerTextArea = document.createElement('textarea');
|
||||||
|
topWindow.playerPanel.answerTextArea.id = "client-player-panel-answer-textarea";
|
||||||
|
topWindow.playerPanel.answerTextArea.addEventListener('change', ()=>{
|
||||||
|
topWindow.player.answer = topWindow.playerPanel.answerTextArea.value;
|
||||||
|
});
|
||||||
|
topWindow.playerPanel.answerBtnContainer.appendChild(topWindow.playerPanel.answerTextArea);
|
||||||
|
|
||||||
|
topWindow.bottomBlock.appendChild(topWindow.playerPanel);
|
||||||
topWindow.cBlock.appendChild(topWindow.bottomBlock);
|
topWindow.cBlock.appendChild(topWindow.bottomBlock);
|
||||||
|
|
||||||
topWindow.uBlock = document.querySelector('#client-update-progress-bar');
|
topWindow.uBlock = document.querySelector('#client-update-progress-bar');
|
||||||
|
topWindow.w2gRightBlock = document.querySelector("#w2g-right");
|
||||||
|
|
||||||
topWindow.w2gRightBlock = document.querySelector("#w2g-at-right");
|
document.querySelector('#client-bottom-panel-update-time').innerHTML = '00:00:00';
|
||||||
|
|
||||||
document.querySelector('#client-bottom-block-update-time').innerHTML = '00:00:00';
|
|
||||||
|
|
||||||
document.querySelector('#update-data-button').addEventListener('click', () => {
|
document.querySelector('#update-data-button').addEventListener('click', () => {
|
||||||
loadTopData(topDataPath);
|
loadTopData();
|
||||||
|
|
||||||
updater.counter = updater.delay;
|
gameStateUpdater.counter = gameStateUpdater.delay;
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
topWindow.changeColorScheme(topWindow.colorScheme);
|
topWindow.changeColorScheme(topWindow.colorScheme.name);
|
||||||
|
|
||||||
makeDraggable(topWindow.cBlock);
|
makeDraggable(topWindow.cBlock);
|
||||||
|
|
||||||
|
// Выравниваем форму по центру, либо по блоку 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';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
topWindow.setDefaultPositionOnResize = setDefaultPositionOnResize;
|
topWindow.setDefaultPositionOnResize = setDefaultPositionOnResize;
|
||||||
topWindow.setDefaultPosition();
|
topWindow.setDefaultPosition();
|
||||||
|
|
||||||
topWindow.addLogMessage("окно инициализировано");
|
|
||||||
|
|
||||||
if (topWindow.autoUpdating) {
|
if (topWindow.autoUpdating) {
|
||||||
updater.check();
|
gameStateUpdater.check();
|
||||||
topWindow.addLogMessage("автообн. запущено");
|
topWindow.addLogMessage("автообн. запущено");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Создаем нового игрока либо подтягиваем ранее сохраненного
|
||||||
|
topWindow.player = JSON.parse(localStorage.getItem('posani_quiz_player'));
|
||||||
|
if (topWindow.player && topWindow.player.nick) {
|
||||||
|
if (W2GNickInput) W2GNickInput.value = topWindow.player.nick;
|
||||||
|
topWindow.playerPanel.nickInput.value = topWindow.player.nick;
|
||||||
|
topWindow.addLogMessage("игрок "+ topWindow.player.nick);
|
||||||
|
} else {
|
||||||
|
topWindow.player = {};
|
||||||
|
topWindow.player.nick = 'player';
|
||||||
|
topWindow.player.UUID = generateUuidv4();
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickInput.value = topWindow.player.nick;
|
||||||
|
localStorage.setItem('posani_quiz_player', JSON.stringify(topWindow.player));
|
||||||
|
|
||||||
|
topWindow.addLogMessage("это ноый игрок");
|
||||||
|
}
|
||||||
|
|
||||||
|
topWindow.addLogMessage("окно инициализировано");
|
||||||
};
|
};
|
||||||
// ====================================================================
|
// ====================================================================
|
||||||
// ====================== КОНЕЦ initTopWindow ==========================
|
// ====================== КОНЕЦ initTopWindow ==========================
|
||||||
@ -357,27 +693,12 @@ var getShortYTAdress = function(adress) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// Импортируем полученные данные
|
|
||||||
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 loadTopData = function () {
|
||||||
|
var tdPath = topWindow.hostAdress + "/curgame"
|
||||||
var XHR = new XMLHttpRequest();
|
var XHR = new XMLHttpRequest();
|
||||||
XHR.open('GET', tdPath);
|
XHR.open('GET', tdPath);
|
||||||
XHR.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=8');
|
XHR.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=0');
|
||||||
XHR.onreadystatechange = function() {
|
XHR.onreadystatechange = function() {
|
||||||
if (XHR.readyState === XMLHttpRequest.DONE) {
|
if (XHR.readyState === XMLHttpRequest.DONE) {
|
||||||
let rText = XHR.responseText;
|
let rText = XHR.responseText;
|
||||||
@ -389,39 +710,95 @@ var loadTopData = function (tdPath) {
|
|||||||
topWindow.addLogMessage("неверные данные");
|
topWindow.addLogMessage("неверные данные");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (!topData.UUID) topData.UUID = "00000000-0000-0000-0000-000000000000";
|
||||||
|
|
||||||
updateTopTable();
|
updateTopTable();
|
||||||
|
topWindow.playerPanel.answerBtnSend.disabled = false;
|
||||||
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();
|
var tNow = getTimeNow();
|
||||||
document.querySelector('#client-bottom-block-update-time').innerHTML = tNow;
|
|
||||||
document.querySelector('#client-top-header-caption').innerHTML = topData.name;
|
document.querySelector('#client-top-header-caption').innerHTML = topData.name;
|
||||||
document.querySelector('#client-bottom-block-last-message').innerHTML = 'обновлено успешно';
|
document.querySelector('#client-top-header-caption').title = topData.UUID;
|
||||||
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);
|
document.querySelector('#client-top-header-game-date').innerHTML = topData.date;
|
||||||
|
|
||||||
|
document.querySelector('#client-bottom-panel-update-time').innerHTML = tNow;
|
||||||
|
document.querySelector('#client-bottom-panel-last-message').innerHTML = 'обновлено успешно';
|
||||||
|
document.querySelector('#client-bottom-panel-video-adress').innerHTML = getShortYTAdress(topData.videoAdress);
|
||||||
|
|
||||||
|
topWindow.playerPanel.nickContainer.style.display = "flex";
|
||||||
|
|
||||||
|
topWindow.changeColorScheme(topWindow.colorScheme.name);
|
||||||
|
|
||||||
if (topData.stopped) {
|
if (topData.stopped) {
|
||||||
if (topData.stopped == true) {
|
if (topData.stopped == true) {
|
||||||
topWindow.autoUpdating = false;
|
topWindow.autoUpdating = false;
|
||||||
topWindow.autoUpdateCheckbox.checked = false;
|
topWindow.autoUpdateCheckbox.checked = false;
|
||||||
topWindow.addLogMessage("остановлено хостом");
|
topWindow.addLogMessage("игра остановлена");
|
||||||
} else topWindow.addLogMessage("счёт обновлен");
|
} else topWindow.addLogMessage("игра синхронизирована");
|
||||||
} else topWindow.addLogMessage("счёт обновлен");
|
} else topWindow.addLogMessage("игра синхронизирована");
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
XHR.onerror = function() {
|
||||||
|
topWindow.addLogMessage("проблема с сервером");
|
||||||
|
};
|
||||||
XHR.send();
|
XHR.send();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Отправляем состояние игрока на сервер
|
||||||
|
function sendPlayerState () {
|
||||||
|
var psPath = defaultHostAdress +"/pRec.php";
|
||||||
|
var XHR = new XMLHttpRequest();
|
||||||
|
XHR.open('POST', psPath);
|
||||||
|
XHR.setRequestHeader('Cache-Control', 'no-cache, no-store, max-age=0');
|
||||||
|
XHR.onreadystatechange = function() {
|
||||||
|
if (XHR.readyState === XMLHttpRequest.DONE) {
|
||||||
|
let rText = XHR.responseText;
|
||||||
|
|
||||||
|
var tNow = getTimeNow();
|
||||||
|
document.querySelector('#client-bottom-panel-update-time').innerHTML = tNow;
|
||||||
|
|
||||||
|
if (rText == "SC") {
|
||||||
|
topWindow.addLogMessage("статус "+topWindow.player.state+" передан");
|
||||||
|
|
||||||
|
playerStateUpdater.check();
|
||||||
|
} else {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "red";
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "!";
|
||||||
|
topWindow.playerPanel.indicator.title = "проблема сервера";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
XHR.onerror = function() {
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "red";
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "!";
|
||||||
|
topWindow.playerPanel.indicator.title = "Проблема сервера";
|
||||||
|
|
||||||
|
topWindow.addLogMessage("проблема с сервером");
|
||||||
|
};
|
||||||
|
|
||||||
|
var sendData = {
|
||||||
|
type : "psync",
|
||||||
|
gameUUID : topData.UUID,
|
||||||
|
player : {
|
||||||
|
name : topWindow.player.nick,
|
||||||
|
UUID : topWindow.player.UUID,
|
||||||
|
state : topWindow.player.state,
|
||||||
|
answer : topWindow.player.answer
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//console.log(JSON.stringify(sendData));
|
||||||
|
XHR.send(JSON.stringify(sendData));
|
||||||
|
|
||||||
|
topWindow.playerPanel.indicator.style.backgroundColor = "yellow";
|
||||||
|
topWindow.playerPanel.indicator.innerHTML = "^";
|
||||||
|
topWindow.playerPanel.indicator.title = "Состояние синхронизируется";
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
// Перестраиваем таблицу топа с актуальной информацией
|
// Перестраиваем таблицу топа с актуальной информацией
|
||||||
var updateTopTable = function() {
|
var updateTopTable = function() {
|
||||||
const sortFn = (a, b) => {
|
const sortFn = (a, b) => {
|
||||||
@ -432,8 +809,7 @@ var updateTopTable = function() {
|
|||||||
|
|
||||||
topData.players.sort(sortFn);
|
topData.players.sort(sortFn);
|
||||||
|
|
||||||
topTable = document.querySelector("#client-top-table");
|
topWindow.topBlock.innerHTML = "";
|
||||||
topTable.innerHTML = "";
|
|
||||||
|
|
||||||
var placeN = 1;
|
var placeN = 1;
|
||||||
for (let i = 0; i < topData.players.length; i++) {
|
for (let i = 0; i < topData.players.length; i++) {
|
||||||
@ -443,7 +819,7 @@ var updateTopTable = function() {
|
|||||||
if (placeN == 2) { pString = "🥈"; }
|
if (placeN == 2) { pString = "🥈"; }
|
||||||
if (placeN == 3) { pString = "🥉"; }
|
if (placeN == 3) { pString = "🥉"; }
|
||||||
|
|
||||||
topTable.innerHTML +=
|
topWindow.topBlock.innerHTML +=
|
||||||
"<div class='client-top-string' id='top"+placeN+"-player'>"
|
"<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-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-names' id='top"+placeN+"-player-names'></div>"
|
||||||
@ -464,10 +840,6 @@ var updateTopTable = function() {
|
|||||||
placeN += 1;
|
placeN += 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (document.URL.search("w2g.tv")>0) {
|
|
||||||
topWindow.curColorSchemeName = 'w2g-dark';
|
|
||||||
}
|
|
||||||
|
|
||||||
topWindow.changeColorScheme(topWindow.curColorSchemeName);
|
topWindow.changeColorScheme(topWindow.curColorSchemeName);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -519,29 +891,22 @@ function makeDraggable (element) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var W2GNickInput = document.querySelector("#nickname-form-nickname");
|
||||||
|
|
||||||
// Выравниваем форму по центру, либо по блоку w2g-at-right, если он есть
|
topWindow.hostAdress = defaultHostAdress;
|
||||||
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", ()=>{
|
||||||
window.addEventListener('load', () => {
|
|
||||||
// Запускаем ету шарманку
|
// Запускаем ету шарманку
|
||||||
initTopWindow();
|
initTopWindow();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Выравниваем форму по центру при ресайзе окна браузера
|
// Выравниваем форму по центру при ресайзе окна браузера
|
||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
topWindow.setDefaultPosition();
|
topWindow.setDefaultPosition()
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
if (W2GNickInput) W2GNickInput.addEventListener('change', () => {
|
||||||
|
topWindow.playerPanel.nickInput.value = W2GNickInput.value;
|
||||||
|
setPlayerNick(W2GNickInput.value);
|
||||||
});
|
});
|
||||||
41
pRec.php
Normal file
41
pRec.php
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<?php
|
||||||
|
header("Content-Type: text/plain");
|
||||||
|
|
||||||
|
try {
|
||||||
|
date_default_timezone_set("Europe/Moscow");
|
||||||
|
|
||||||
|
$data = json_decode(file_get_contents("php://input"));
|
||||||
|
if (json_last_error() != JSON_ERROR_NONE) $data = file_get_contents("php://input");
|
||||||
|
|
||||||
|
|
||||||
|
if (isset($data->type)) {
|
||||||
|
$filePath = "./games/" . $data->gameUUID . "/players/";
|
||||||
|
|
||||||
|
if ($data->type == "psync") {
|
||||||
|
if (!is_dir($filePath)) { mkdir($filePath, 0777, true); }
|
||||||
|
file_put_contents($filePath . $data->player->UUID, json_encode($data->player));
|
||||||
|
|
||||||
|
echo "SC";
|
||||||
|
}
|
||||||
|
|
||||||
|
if ($data->type == "hsync") {
|
||||||
|
$filePath = "./games/" . $data->gameUUID . "/players/";
|
||||||
|
|
||||||
|
$playersArray = [];
|
||||||
|
|
||||||
|
foreach(array_filter(glob($filePath.'*'), 'is_file') as $pFile) {
|
||||||
|
array_push($playersArray, file_get_contents($pFile));
|
||||||
|
}
|
||||||
|
|
||||||
|
$result = json_encode($playersArray);
|
||||||
|
|
||||||
|
echo $result;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
} else { echo "no type defined"; }
|
||||||
|
} catch(Throwable $ex) {
|
||||||
|
echo "ЕГГОГ";
|
||||||
|
}
|
||||||
|
|
||||||
|
?>
|
||||||
Loading…
Reference in New Issue
Block a user