131 lines
4.3 KiB
TypeScript
131 lines
4.3 KiB
TypeScript
// Приколы
|
||
const audios = document.querySelectorAll('.audio') as NodeListOf<HTMLAudioElement>;
|
||
const audioButtons = document.querySelectorAll('.audioButton');
|
||
|
||
audioButtons.forEach((audioButton, index) => {
|
||
audioButton.addEventListener('click', () => audios[index].play());
|
||
});
|
||
|
||
let zIndex = 100;
|
||
|
||
const windowDragHandler = (_window: HTMLDivElement) => {
|
||
const closeButton = _window.querySelector('.close');
|
||
if (closeButton) {
|
||
closeButton.addEventListener('click', () => _window.remove());
|
||
}
|
||
|
||
const windowTitle = _window.querySelector<HTMLDivElement>('.window-title');
|
||
|
||
windowTitle.addEventListener('dragstart', (e) => e.preventDefault());
|
||
windowTitle.addEventListener('mousedown', (event) => {
|
||
let shiftX = event.clientX - windowTitle.getBoundingClientRect().left;
|
||
let shiftY = event.clientY - windowTitle.getBoundingClientRect().top;
|
||
|
||
_window.style.zIndex = String(++zIndex);
|
||
|
||
const moveAt = (pageX: number, pageY: number) => {
|
||
_window.style.left = pageX - shiftX + 'px';
|
||
_window.style.top = pageY - shiftY + 'px';
|
||
}
|
||
|
||
moveAt(event.pageX, event.pageY);
|
||
|
||
const moveF = (event: MouseEvent) => moveAt(event.pageX, event.pageY);
|
||
document.addEventListener('mousemove', moveF);
|
||
|
||
windowTitle.onmouseup = () => {
|
||
document.removeEventListener('mousemove', moveF);
|
||
windowTitle.onmouseup = null;
|
||
};
|
||
})
|
||
};
|
||
|
||
document.querySelectorAll<HTMLDivElement>('.window').forEach(w => windowDragHandler(w));
|
||
|
||
// Не приколы
|
||
interface ApiRequest {
|
||
x: number;
|
||
y: number;
|
||
r: number;
|
||
}
|
||
let request: ApiRequest = {
|
||
x: 0,
|
||
y: 0,
|
||
r: 1,
|
||
}
|
||
|
||
document.querySelectorAll('.form-x-input').forEach((input: HTMLInputElement) => {
|
||
input.addEventListener('change', (event: Event) => {
|
||
request.x = Number(input.value);
|
||
});
|
||
});
|
||
|
||
const yInput = document.querySelector<HTMLInputElement>('#form_y');
|
||
yInput.addEventListener('change', (event: Event) => {
|
||
request.y = Number(yInput.value);
|
||
if (!isNaN(request.y)) {
|
||
request.y = Math.min(5, Math.max(-3, request.y));
|
||
yInput.value = String(request.y);
|
||
}
|
||
});
|
||
|
||
const rButtons = document.querySelectorAll<HTMLButtonElement>('.form-r-button');
|
||
rButtons.forEach((button: HTMLButtonElement) => {
|
||
button.addEventListener('click', (event: Event) => {
|
||
request.r = Number(button.value);
|
||
rButtons.forEach((_button: HTMLButtonElement) => {_button.classList.remove('active')});
|
||
button.classList.add('active');
|
||
});
|
||
});
|
||
|
||
const showError = (errorText: string) => {
|
||
document.querySelector<HTMLAudioElement>('#error_sound').play();
|
||
const _window = document.createElement('div');
|
||
_window.classList.add('window');
|
||
_window.style.zIndex = String(500);
|
||
_window.style.left = "35%";
|
||
_window.style.top = "35%";
|
||
_window.innerHTML = `
|
||
<div class="window-title">
|
||
<span>Ошибка</span>
|
||
<span class="button close">X</span>
|
||
</div>
|
||
<div class="window-body">
|
||
<div class="error">
|
||
<img src="images/error.png" alt="Error Icon"/>
|
||
<p>${errorText}</p>
|
||
</div>
|
||
</div>`;
|
||
windowDragHandler(_window);
|
||
document.querySelector<HTMLDivElement>('.work-area').append(_window);
|
||
}
|
||
|
||
const form = document.querySelector('#form');
|
||
form.addEventListener('submit', e => {
|
||
e.preventDefault();
|
||
if (isNaN(request.y)) {
|
||
showError('Ошибка, проверьте, что Y это число')
|
||
return;
|
||
}
|
||
|
||
const params = new URLSearchParams({
|
||
x: String(request.x),
|
||
y: String(request.y),
|
||
r: String(request.r),
|
||
});
|
||
const response = fetch(`/ipa/cgi.jar?${params.toString()}`);
|
||
response.then(response => {
|
||
if (response.status !== 200) {
|
||
showError("Ошибка при обработке запроса. Пожалуйста, попробуйте позже");
|
||
return;
|
||
}
|
||
response.text().then(
|
||
html => {
|
||
const element = document.createElement('tr');
|
||
element.innerHTML += html;
|
||
if (response.headers.get('X-Gol') === 'no') element.classList.add('grey');
|
||
document.querySelector("#results").append(element);
|
||
}
|
||
)
|
||
});
|
||
}); |