245 lines
6.8 KiB
JavaScript
245 lines
6.8 KiB
JavaScript
/**
|
|
* Neon Ping-Pong UI Manager
|
|
* Copyright (c) 2026 Wspólnie - wspolpraca@togethere.cloud
|
|
* All rights reserved. Unauthorized copying, distribution, or modification is prohibited.
|
|
*
|
|
* Menedżer interfejsu użytkownika dla gry Ping-Pong
|
|
* Obsługuje menu, modalne okna i wyświetlanie wyniku
|
|
*/
|
|
|
|
(function() {
|
|
'use strict';
|
|
|
|
class UIManager {
|
|
constructor(game) {
|
|
this.game = game;
|
|
this.elements = {
|
|
mainMenu: document.getElementById('mainMenu'),
|
|
difficultyMenu: document.getElementById('difficultyMenu'),
|
|
gameCanvas: document.getElementById('gameCanvas'),
|
|
scoreContainer: document.getElementById('scoreContainer'),
|
|
playerScoreLabel: document.getElementById('playerScoreLabel'),
|
|
playerScore: document.getElementById('playerScore'),
|
|
botScoreLabel: document.getElementById('botScoreLabel'),
|
|
botScore: document.getElementById('botScore'),
|
|
gameBackButton: document.getElementById('gameBackButton'),
|
|
comingSoonModal: document.getElementById('comingSoonModal'),
|
|
winModal: document.getElementById('winModal'),
|
|
loseModal: document.getElementById('loseModal')
|
|
};
|
|
}
|
|
|
|
/**
|
|
* Pokazuje menu główne
|
|
*/
|
|
showMainMenu() {
|
|
this.hideAll();
|
|
this.elements.mainMenu.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Pokazuje menu wyboru trudności
|
|
*/
|
|
showDifficultyMenu() {
|
|
this.hideAll();
|
|
this.elements.difficultyMenu.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Pokazuje grę
|
|
*/
|
|
showGame() {
|
|
this.hideAll();
|
|
this.elements.gameCanvas.style.display = 'block';
|
|
this.elements.scoreContainer.style.display = 'flex';
|
|
this.elements.gameBackButton.style.display = 'block';
|
|
|
|
// Pokaż podpowiedź sterowania
|
|
const controlsHint = document.getElementById('controlsHint');
|
|
if (controlsHint) {
|
|
controlsHint.style.display = 'block';
|
|
}
|
|
|
|
// Ukryj nav i footer
|
|
document.body.classList.add('game-active');
|
|
|
|
// Ustaw focus na canvas żeby przechwytywać klawisze
|
|
this.elements.gameCanvas.focus();
|
|
}
|
|
|
|
/**
|
|
* Ukrywa wszystkie elementy główne
|
|
*/
|
|
hideAll() {
|
|
this.elements.mainMenu.style.display = 'none';
|
|
this.elements.difficultyMenu.style.display = 'none';
|
|
this.elements.gameCanvas.style.display = 'none';
|
|
this.elements.scoreContainer.style.display = 'none';
|
|
this.elements.gameBackButton.style.display = 'none';
|
|
|
|
const controlsHint = document.getElementById('controlsHint');
|
|
if (controlsHint) {
|
|
controlsHint.style.display = 'none';
|
|
}
|
|
|
|
// Pokaż nav i footer
|
|
document.body.classList.remove('game-active');
|
|
}
|
|
|
|
/**
|
|
* Pokazuje modal "W przygotowaniu"
|
|
*/
|
|
showComingSoonModal() {
|
|
this.elements.comingSoonModal.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Pokazuje modal wygranej
|
|
*/
|
|
showWinModal(time) {
|
|
if (time) {
|
|
const timeElement = document.getElementById('winTime');
|
|
if (timeElement) {
|
|
timeElement.textContent = time;
|
|
}
|
|
}
|
|
this.elements.winModal.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Pokazuje modal przegranej
|
|
*/
|
|
showLoseModal(time) {
|
|
if (time) {
|
|
const timeElement = document.getElementById('loseTime');
|
|
if (timeElement) {
|
|
timeElement.textContent = time;
|
|
}
|
|
}
|
|
this.elements.loseModal.style.display = 'block';
|
|
}
|
|
|
|
/**
|
|
* Zamyka modal
|
|
* @param {String} modalId - ID modala do zamknięcia
|
|
*/
|
|
closeModal(modalId) {
|
|
const modal = document.getElementById(modalId);
|
|
if (modal) {
|
|
modal.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Aktualizuje wyświetlany wynik
|
|
* @param {Number} playerScore - Wynik gracza
|
|
* @param {Number} botScore - Wynik bota
|
|
*/
|
|
updateScore(playerScore, botScore, playerSets = 0, botSets = 0) {
|
|
this.elements.playerScore.textContent = playerScore;
|
|
this.elements.botScore.textContent = botScore;
|
|
if (this.elements.playerScoreLabel) {
|
|
this.elements.playerScoreLabel.textContent = `👤 GRACZ • SETY ${playerSets}`;
|
|
}
|
|
if (this.elements.botScoreLabel) {
|
|
this.elements.botScoreLabel.textContent = `🤖 BOT • SETY ${botSets}`;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Rozpoczyna grę online (w przygotowaniu)
|
|
*/
|
|
startOnlineGame() {
|
|
window.location.href = '/disciplines/ping-pong/1v1/';
|
|
}
|
|
|
|
/**
|
|
* Rozpoczyna grę z botem
|
|
* @param {String} difficulty - Poziom trudności ('easy', 'medium', 'hard')
|
|
*/
|
|
startBotGame(difficulty) {
|
|
// Walidacja poziomu trudności
|
|
if (!['easy', 'medium', 'hard', 'extreme'].includes(difficulty)) {
|
|
this.showComingSoonModal();
|
|
return;
|
|
}
|
|
|
|
this.showGame();
|
|
this.updateScore(0, 0, 0, 0);
|
|
this.game.start('bot', difficulty);
|
|
}
|
|
|
|
/**
|
|
* Resetuje i rozpoczyna grę od nowa
|
|
*/
|
|
resetGame() {
|
|
this.closeModal('winModal');
|
|
this.closeModal('loseModal');
|
|
|
|
const difficulty = this.game.difficulty;
|
|
const mode = this.game.gameMode;
|
|
|
|
this.game.resetGameState();
|
|
this.updateScore(0, 0, 0, 0);
|
|
this.game.gameActive = true;
|
|
this.game.gameLoop();
|
|
}
|
|
|
|
/**
|
|
* Kończy grę i wraca do menu głównego
|
|
*/
|
|
endGame() {
|
|
this.game.stop();
|
|
this.closeModal('winModal');
|
|
this.closeModal('loseModal');
|
|
this.showMainMenu();
|
|
}
|
|
|
|
/**
|
|
* Wraca do menu głównego z menu wyboru trudności
|
|
*/
|
|
backToMainMenu() {
|
|
this.showMainMenu();
|
|
}
|
|
}
|
|
|
|
// Eksportuj UIManager
|
|
if (typeof window !== 'undefined') {
|
|
window.UIManager = UIManager;
|
|
}
|
|
|
|
})(); // End of IIFE
|
|
|
|
// Funkcje globalne wywoływane z HTML (poza IIFE!)
|
|
function showOnlineMessage() {
|
|
window.uiManager.startOnlineGame();
|
|
}
|
|
|
|
function showDifficultyMenu() {
|
|
window.uiManager.showDifficultyMenu();
|
|
}
|
|
|
|
function showComingSoon() {
|
|
window.uiManager.showComingSoonModal();
|
|
}
|
|
|
|
function backToMainMenu() {
|
|
window.uiManager.backToMainMenu();
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
window.uiManager.closeModal(modalId);
|
|
}
|
|
|
|
function startGame(difficulty) {
|
|
window.uiManager.startBotGame(difficulty);
|
|
}
|
|
|
|
function resetGame() {
|
|
window.uiManager.resetGame();
|
|
}
|
|
|
|
function endGame() {
|
|
window.uiManager.endGame();
|
|
}
|