/**
* Modal that is shown if you lost in the game mode
* @extends Modal
*/
class GameOverModal extends Modal{
constructor()
{
let idLangMap = new Map([
["game-over-title", () => languageManager.currentLang.kirchhoff.gameOverHeading],
["game-over-text", () => languageManager.currentLang.kirchhoff.gameOverText],
["game-over-close-btn", () => languageManager.currentLang.simplifier.closeBtn],
])
super(idLangMap, "gameOverModal");
}
get html()
{
return `
<div class="modal modal-sm fade" id="gameOverModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header justify-content-center" id="game-over-header">
<h5 class="modal-title" id="game-over-title"></h5>
</div>
<div class="modal-body" id="game-over-body">
<p id="game-over-text" class="text-center"></p>
<img loading="lazy" id="game-over-mascot-img" style="margin-top: -100px; transform: rotate(6deg) translate(-5px, 30px) scale(0.5)" class="img-fluid rounded mx-auto d-block" src="./src/resources/mascot/sad.svg" alt="mascot_sad">
</div>
<div class="modal-footer justify-content-center" id="game-over-footer">
<button id="game-over-close-btn" type="button" class="btn btn-secondary" data-bs-dismiss="modal">${languageManager.currentLang.simplifier.closeBtn}</button>
</div>
</div>
</div>
</div>
`;
}
setup()
{
let template = document.createElement("template");
template.innerHTML = this.html.trim();
document.body.appendChild(template.content.firstElementChild)
// a fragment can be added via document.appendChild() without error and does not add anything to the dom to keep
// the implementation of setup consistent
return new DocumentFragment()
}
}