2023-02-03 21:26:35 +01:00
|
|
|
<head th:fragment="head">
|
2023-02-07 21:14:03 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Metadata -->
|
|
|
|
|
<meta charset="UTF-8">
|
2023-03-25 23:16:26 +01:00
|
|
|
|
2023-04-01 22:02:54 +02:00
|
|
|
<title th:text="${@appName} + (${title} != null and ${title} != '' ? ' - ' + ${title} : '')"></title>
|
2023-02-11 15:27:15 +01:00
|
|
|
<link rel="shortcut icon" href="favicon.svg">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
|
|
|
|
<!-- jQuery -->
|
2023-06-01 22:37:33 +02:00
|
|
|
<script src="js/thirdParty/jquery.min.js"></script>
|
2023-02-11 15:27:15 +01:00
|
|
|
|
2023-03-20 22:55:11 +01:00
|
|
|
<!-- jQuery -->
|
2023-06-01 22:37:33 +02:00
|
|
|
<script src="js/thirdParty/jszip.min.js"></script>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Bootstrap -->
|
2023-06-01 22:37:33 +02:00
|
|
|
<script src="js/thirdParty/popper.min.js"></script>
|
|
|
|
|
<script src="js/thirdParty/bootstrap.min.js"></script>
|
2023-02-11 15:27:15 +01:00
|
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
|
|
|
<link rel="stylesheet" href="css/bootstrap-icons.css">
|
|
|
|
|
|
|
|
|
|
<!-- PDF.js -->
|
2023-03-20 22:55:11 +01:00
|
|
|
<script src="pdfjs/pdf.js"></script>
|
2023-02-11 15:27:15 +01:00
|
|
|
|
2023-04-18 04:08:38 +02:00
|
|
|
<!-- PDF-Lib -->
|
2023-06-01 22:37:33 +02:00
|
|
|
<script src="js/thirdParty/pdf-lib.min.js"></script>
|
2023-04-18 04:08:38 +02:00
|
|
|
|
2023-02-11 15:27:15 +01:00
|
|
|
<!-- Custom -->
|
|
|
|
|
<link rel="stylesheet" href="css/general.css">
|
2023-05-08 03:23:45 +02:00
|
|
|
<link rel="stylesheet" th:href="@{css/light-mode.css}" id="light-mode-styles">
|
2023-02-11 15:27:15 +01:00
|
|
|
<link rel="stylesheet" th:href="@{css/dark-mode.css}" id="dark-mode-styles">
|
2023-04-29 00:18:10 +02:00
|
|
|
<link rel="stylesheet" th:href="@{css/rainbow-mode.css}" id="rainbow-mode-styles" disabled="true">
|
2023-05-07 22:39:34 +02:00
|
|
|
<link rel="stylesheet" href="css/tab-container.css">
|
|
|
|
|
<script src="js/tab-container.js"></script>
|
|
|
|
|
|
|
|
|
|
|
2023-06-02 21:15:10 +02:00
|
|
|
<script src="js/darkmode.js"></script>
|
2023-03-20 22:55:11 +01:00
|
|
|
|
2023-02-03 21:26:35 +01:00
|
|
|
</head>
|
|
|
|
|
|
2023-05-03 23:07:51 +02:00
|
|
|
<th:block th:fragment="game">
|
|
|
|
|
<dialog id="game-container-wrapper" class="game-container-wrapper" data-modal>
|
|
|
|
|
<script>
|
|
|
|
|
console.log("loaded game")
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
function loadGameScript(callback) {
|
|
|
|
|
console.log('loadGameScript called');
|
|
|
|
|
const script = document.createElement('script');
|
|
|
|
|
script.src = 'js/game.js';
|
|
|
|
|
script.onload = callback;
|
|
|
|
|
document.body.appendChild(script);
|
|
|
|
|
}
|
|
|
|
|
let gameScriptLoaded = false;
|
2023-05-04 18:46:00 +02:00
|
|
|
const gameDialog = document.getElementById('game-container-wrapper')
|
2023-05-03 23:07:51 +02:00
|
|
|
$('#show-game-btn').on('click', function() {
|
|
|
|
|
console.log('Show game button clicked');
|
|
|
|
|
if (!gameScriptLoaded) {
|
|
|
|
|
console.log('Show game button load');
|
|
|
|
|
loadGameScript(function() {
|
|
|
|
|
console.log('Game script loaded');
|
|
|
|
|
window.initializeGame();
|
|
|
|
|
gameScriptLoaded = true;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
window.resetGame();
|
|
|
|
|
}
|
2023-05-04 18:46:00 +02:00
|
|
|
gameDialog.showModal();
|
2023-05-03 23:07:51 +02:00
|
|
|
});
|
2023-05-04 18:46:00 +02:00
|
|
|
gameDialog.addEventListener("click", e => {
|
|
|
|
|
const dialogDimensions = gameDialog.getBoundingClientRect()
|
|
|
|
|
if (
|
|
|
|
|
e.clientX < dialogDimensions.left ||
|
|
|
|
|
e.clientX > dialogDimensions.right ||
|
|
|
|
|
e.clientY < dialogDimensions.top ||
|
|
|
|
|
e.clientY > dialogDimensions.bottom
|
|
|
|
|
) {
|
|
|
|
|
gameDialog.close()
|
|
|
|
|
}
|
|
|
|
|
})
|
2023-05-03 23:07:51 +02:00
|
|
|
})
|
|
|
|
|
</script>
|
|
|
|
|
<div id="game-container">
|
|
|
|
|
<div id="lives">Lives: 3</div>
|
|
|
|
|
<div id="score">Score: 0</div>
|
|
|
|
|
<div id="high-score">High Score: 0</div>
|
|
|
|
|
<div id="level">Level: 1</div>
|
|
|
|
|
<img src="favicon.svg" class="player" id="player">
|
|
|
|
|
</div>
|
2023-06-02 00:12:55 +02:00
|
|
|
<link rel="stylesheet" href="css/game.css">
|
2023-05-03 23:07:51 +02:00
|
|
|
</dialog>
|
|
|
|
|
</th:block>
|
2023-02-03 21:26:35 +01:00
|
|
|
|
2023-06-08 21:25:55 +02:00
|
|
|
<th:block th:fragment="fileSelector(name, multiple)" th:with="accept=${accept} ?: '*/*', inputText=${inputText} ?: #{pdfPrompt}, remoteCall=${remoteCall} ?: true, notRequired=${notRequired} ?: false">
|
2023-06-03 23:56:15 +02:00
|
|
|
<script th:inline="javascript">
|
2023-06-04 23:40:14 +02:00
|
|
|
const pdfPasswordPrompt =/*[[#{error.pdfPassword}]]*/ '';
|
2023-06-08 21:25:55 +02:00
|
|
|
const multiple = [[${multiple}]] || false;
|
|
|
|
|
const remoteCall = [[${remoteCall}]] || true;
|
2023-06-03 23:56:15 +02:00
|
|
|
</script>
|
2023-06-02 21:15:10 +02:00
|
|
|
<script src="js/downloader.js"></script>
|
2023-04-01 22:02:54 +02:00
|
|
|
|
2023-08-02 23:49:43 +02:00
|
|
|
<div class="custom-file-chooser" th:attr="data-unique-id=${name},
|
|
|
|
|
data-element-id=${name+'-input'},
|
|
|
|
|
data-files-selected=#{filesSelected},
|
|
|
|
|
data-pdf-prompt=#{pdfPrompt}">
|
2023-05-03 23:07:51 +02:00
|
|
|
<div class="custom-file">
|
2023-05-21 13:32:24 +02:00
|
|
|
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:accept="${accept}" multiple th:classappend="${notRequired ? '' : 'required'}">
|
2023-05-03 23:07:51 +02:00
|
|
|
<label class="custom-file-label" th:for="${name}+'-input'" th:text="${inputText}"></label>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="selected-files"></div>
|
|
|
|
|
</div>
|
2023-04-30 18:29:35 +02:00
|
|
|
<div id="progressBarContainer" style="display: none; position: relative;">
|
2023-05-03 23:07:51 +02:00
|
|
|
<div class="progress" style="height: 1rem;">
|
|
|
|
|
<div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
|
|
|
|
|
<span class="sr-only">Loading...</span>
|
2023-04-30 18:29:35 +02:00
|
|
|
</div>
|
2023-05-03 23:07:51 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<button type="button" class="btn btn-primary" id="show-game-btn" style="display:none;">Bored waiting?</button>
|
2023-04-30 18:29:35 +02:00
|
|
|
|
2023-08-02 23:49:43 +02:00
|
|
|
|
2023-06-02 21:15:10 +02:00
|
|
|
|
|
|
|
|
<script src="js/fileInput.js"></script>
|
|
|
|
|
<link rel="stylesheet" href="css/fileSelect.css">
|
2023-02-03 21:26:35 +01:00
|
|
|
</th:block>
|
