330 lines
13 KiB
JavaScript
330 lines
13 KiB
JavaScript
let websocket_connection;
|
|
let pending_administrator_form = null;
|
|
let stopwatch_interval_identifier = null;
|
|
|
|
function initialize_lucide_icons() {
|
|
if (typeof lucide !== "undefined") {
|
|
lucide.createIcons();
|
|
}
|
|
}
|
|
|
|
function update_game_stopwatch() {
|
|
const stopwatch_element = document.getElementById("game-stopwatch");
|
|
if (!stopwatch_element) {
|
|
return;
|
|
}
|
|
|
|
const start_time_string = stopwatch_element.getAttribute("data-start-time");
|
|
if (!start_time_string) {
|
|
return;
|
|
}
|
|
|
|
const start_date = new Date(start_time_string);
|
|
if (isNaN(start_date.getTime())) {
|
|
return;
|
|
}
|
|
|
|
const current_date = new Date();
|
|
const difference_in_milliseconds = current_date.getTime() - start_date.getTime();
|
|
|
|
if (difference_in_milliseconds < 0) {
|
|
stopwatch_element.textContent = "00:00 Minuten";
|
|
return;
|
|
}
|
|
|
|
const total_seconds = Math.floor(difference_in_milliseconds / 1000);
|
|
const days_passed = Math.floor(total_seconds / 86400);
|
|
const hours_passed = Math.floor((total_seconds % 86400) / 3600);
|
|
const minutes_passed = Math.floor((total_seconds % 3600) / 60);
|
|
const seconds_passed = total_seconds % 60;
|
|
|
|
let output_string = "";
|
|
|
|
if (days_passed === 1) {
|
|
output_string += "1 Tag und ";
|
|
} else if (days_passed > 1) {
|
|
output_string += days_passed + " Tage und ";
|
|
}
|
|
|
|
const padded_minutes = String(minutes_passed).padStart(2, "0");
|
|
const padded_seconds = String(seconds_passed).padStart(2, "0");
|
|
|
|
if (hours_passed === 1) {
|
|
output_string += "1:" + padded_minutes + ":" + padded_seconds + " Stunde";
|
|
} else if (hours_passed > 1) {
|
|
output_string += hours_passed + ":" + padded_minutes + ":" + padded_seconds + " Stunden";
|
|
} else {
|
|
output_string += padded_minutes + ":" + padded_seconds + " Minuten";
|
|
}
|
|
|
|
stopwatch_element.textContent = output_string;
|
|
}
|
|
|
|
function initialize_application_behavior() {
|
|
initialize_lucide_icons();
|
|
|
|
if (stopwatch_interval_identifier) {
|
|
clearInterval(stopwatch_interval_identifier);
|
|
}
|
|
stopwatch_interval_identifier = setInterval(update_game_stopwatch, 1000);
|
|
update_game_stopwatch();
|
|
|
|
const tab_buttons = document.querySelectorAll(".tab-button");
|
|
tab_buttons.forEach(function(current_button) {
|
|
current_button.addEventListener("click", function() {
|
|
const target_identifier = current_button.getAttribute("data-target");
|
|
const parent_container = current_button.closest(".application-content");
|
|
|
|
parent_container.querySelectorAll(".tab-button").forEach(function(button_element) {
|
|
button_element.classList.remove("active-tab");
|
|
});
|
|
parent_container.querySelectorAll(".tab-content").forEach(function(content_element) {
|
|
content_element.classList.remove("active-content");
|
|
});
|
|
|
|
current_button.classList.add("active-tab");
|
|
const target_panel = document.getElementById(target_identifier);
|
|
if (target_panel) {
|
|
target_panel.classList.add("active-content");
|
|
}
|
|
});
|
|
});
|
|
|
|
const player_forms = document.querySelectorAll(".asynchronous-form");
|
|
player_forms.forEach(function(current_form) {
|
|
current_form.addEventListener("submit", function(form_submission_event) {
|
|
form_submission_event.preventDefault();
|
|
execute_form_submission(current_form);
|
|
});
|
|
});
|
|
|
|
const administrator_forms = document.querySelectorAll(".admin-asynchronous-form");
|
|
administrator_forms.forEach(function(current_form) {
|
|
current_form.addEventListener("submit", function(form_submission_event) {
|
|
form_submission_event.preventDefault();
|
|
pending_administrator_form = current_form;
|
|
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
|
if (administrator_modal) {
|
|
const time_input = document.getElementById("modal_execution_time");
|
|
if (time_input) {
|
|
time_input.value = "";
|
|
}
|
|
administrator_modal.classList.add("active-modal");
|
|
}
|
|
});
|
|
});
|
|
|
|
const confirm_administrator_button = document.getElementById("confirm-admin-action");
|
|
if (confirm_administrator_button) {
|
|
confirm_administrator_button.addEventListener("click", function() {
|
|
if (pending_administrator_form) {
|
|
const time_input = document.getElementById("modal_execution_time");
|
|
if (time_input && time_input.value) {
|
|
let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
|
|
if (!hidden_time_input) {
|
|
hidden_time_input = document.createElement("input");
|
|
hidden_time_input.type = "hidden";
|
|
hidden_time_input.name = "execution_time";
|
|
pending_administrator_form.appendChild(hidden_time_input);
|
|
}
|
|
hidden_time_input.value = time_input.value;
|
|
} else {
|
|
let hidden_time_input = pending_administrator_form.querySelector("input[name='execution_time']");
|
|
if (hidden_time_input) {
|
|
hidden_time_input.remove();
|
|
}
|
|
}
|
|
execute_form_submission(pending_administrator_form);
|
|
pending_administrator_form = null;
|
|
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
|
if (administrator_modal) {
|
|
administrator_modal.classList.remove("active-modal");
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
const cancel_administrator_button = document.getElementById("cancel-admin-action");
|
|
if (cancel_administrator_button) {
|
|
cancel_administrator_button.addEventListener("click", function() {
|
|
pending_administrator_form = null;
|
|
const administrator_modal = document.getElementById("admin-confirmation-modal");
|
|
if (administrator_modal) {
|
|
administrator_modal.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const trigger_elimination_button = document.getElementById("trigger-elimination");
|
|
if (trigger_elimination_button) {
|
|
trigger_elimination_button.addEventListener("click", function() {
|
|
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
|
if (elimination_modal) {
|
|
elimination_modal.classList.add("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const proceed_elimination_button = document.getElementById("proceed-elimination");
|
|
if (proceed_elimination_button) {
|
|
proceed_elimination_button.addEventListener("click", function() {
|
|
websocket_connection.emit("request_elimination");
|
|
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
|
if (elimination_modal) {
|
|
elimination_modal.classList.remove("active-modal");
|
|
}
|
|
const waiting_modal = document.getElementById("waiting-modal");
|
|
if (waiting_modal) {
|
|
waiting_modal.classList.add("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const cancel_elimination_button = document.getElementById("cancel-elimination");
|
|
if (cancel_elimination_button) {
|
|
cancel_elimination_button.addEventListener("click", function() {
|
|
const elimination_modal = document.getElementById("elimination-confirm-modal");
|
|
if (elimination_modal) {
|
|
elimination_modal.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const confirm_button = document.getElementById("confirm-elimination");
|
|
if (confirm_button) {
|
|
confirm_button.addEventListener("click", function() {
|
|
websocket_connection.emit("confirm_elimination");
|
|
const modal_element = document.getElementById("verification-modal");
|
|
if (modal_element) {
|
|
modal_element.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const reject_button = document.getElementById("reject-elimination");
|
|
if (reject_button) {
|
|
reject_button.addEventListener("click", function() {
|
|
websocket_connection.emit("reject_elimination");
|
|
const modal_element = document.getElementById("verification-modal");
|
|
if (modal_element) {
|
|
modal_element.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const acknowledge_rejection_button = document.getElementById("acknowledge-rejection");
|
|
if (acknowledge_rejection_button) {
|
|
acknowledge_rejection_button.addEventListener("click", function() {
|
|
const rejection_modal = document.getElementById("rejection-modal");
|
|
if (rejection_modal) {
|
|
rejection_modal.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const open_name_modal_button = document.getElementById("trigger-name-change-modal");
|
|
if (open_name_modal_button) {
|
|
open_name_modal_button.addEventListener("click", function() {
|
|
const name_modal = document.getElementById("name-change-modal");
|
|
if (name_modal) {
|
|
name_modal.classList.add("active-modal");
|
|
}
|
|
});
|
|
}
|
|
|
|
const close_name_modal_button = document.getElementById("cancel-name-change");
|
|
if (close_name_modal_button) {
|
|
close_name_modal_button.addEventListener("click", function() {
|
|
const name_modal = document.getElementById("name-change-modal");
|
|
if (name_modal) {
|
|
name_modal.classList.remove("active-modal");
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function execute_form_submission(target_form) {
|
|
const active_tab_element = document.querySelector(".active-tab");
|
|
let active_target = "control-panel";
|
|
if (active_tab_element) {
|
|
active_target = active_tab_element.getAttribute("data-target");
|
|
}
|
|
|
|
fetch(target_form.action, {
|
|
method: target_form.method,
|
|
body: new FormData(target_form)
|
|
})
|
|
.then(function(network_response) { return network_response.text(); })
|
|
.then(function(markup_text) {
|
|
replace_main_content(markup_text);
|
|
const new_tab_button = document.querySelector(".tab-button[data-target='" + active_target + "']");
|
|
if (new_tab_button) {
|
|
new_tab_button.click();
|
|
}
|
|
});
|
|
}
|
|
|
|
function replace_main_content(markup_text) {
|
|
const document_parser = new DOMParser();
|
|
const parsed_document = document_parser.parseFromString(markup_text, "text/html");
|
|
const current_container = document.querySelector(".application-content");
|
|
const new_container = parsed_document.querySelector(".application-content");
|
|
if (current_container && new_container) {
|
|
current_container.innerHTML = new_container.innerHTML;
|
|
initialize_application_behavior();
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function() {
|
|
if ("serviceWorker" in navigator) {
|
|
navigator.serviceWorker.register("/service_worker.js");
|
|
}
|
|
|
|
if (typeof io !== "undefined") {
|
|
websocket_connection = io();
|
|
|
|
websocket_connection.on("game_state_changed", function() {
|
|
if (document.querySelector(".game-section") || document.querySelector(".administrator-section")) {
|
|
fetch(window.location.href)
|
|
.then(function(network_response) { return network_response.text(); })
|
|
.then(function(markup_text) {
|
|
replace_main_content(markup_text);
|
|
});
|
|
}
|
|
});
|
|
|
|
websocket_connection.on("admin_state_changed", function() {
|
|
if (document.querySelector(".administrator-section")) {
|
|
fetch(window.location.href)
|
|
.then(function(network_response) { return network_response.text(); })
|
|
.then(function(markup_text) {
|
|
replace_main_content(markup_text);
|
|
});
|
|
}
|
|
});
|
|
|
|
websocket_connection.on("elimination_verification_requested", function() {
|
|
fetch(window.location.href)
|
|
.then(function(network_response) { return network_response.text(); })
|
|
.then(function(markup_text) {
|
|
replace_main_content(markup_text);
|
|
const new_modal_element = document.getElementById("verification-modal");
|
|
if (new_modal_element) {
|
|
new_modal_element.classList.add("active-modal");
|
|
}
|
|
});
|
|
});
|
|
|
|
websocket_connection.on("elimination_rejected", function() {
|
|
const waiting_modal = document.getElementById("waiting-modal");
|
|
if (waiting_modal) {
|
|
waiting_modal.classList.remove("active-modal");
|
|
}
|
|
const rejection_modal = document.getElementById("rejection-modal");
|
|
if (rejection_modal) {
|
|
rejection_modal.classList.add("active-modal");
|
|
}
|
|
});
|
|
}
|
|
initialize_application_behavior();
|
|
}); |