/** * 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(); }