126 lines
3.4 KiB
JavaScript
126 lines
3.4 KiB
JavaScript
/* ------------------------
|
|
4. UI MANAGER
|
|
------------------------ */
|
|
function setupBoard() {
|
|
board = [];
|
|
currentScore = 0;
|
|
updateScoreDisplay();
|
|
|
|
const container = document.getElementById("board");
|
|
if (!container) {
|
|
console.error("Board element not found (#board).");
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = "";
|
|
for (let r = 0; r < 4; r++) {
|
|
board[r] = [];
|
|
for (let c = 0; c < 4; c++) {
|
|
board[r][c] = 0;
|
|
const tile = document.createElement("div");
|
|
tile.id = `${r}-${c}`;
|
|
tile.className = "tile";
|
|
container.appendChild(tile);
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateTile(row, col, num) {
|
|
const tile = document.getElementById(`${row}-${col}`);
|
|
if (!tile) return;
|
|
|
|
tile.className = "tile";
|
|
|
|
if (num > 0) {
|
|
tile.textContent = num;
|
|
tile.classList.add("tile-" + num);
|
|
} else {
|
|
tile.textContent = "";
|
|
}
|
|
}
|
|
|
|
function refreshBoard() {
|
|
for (let r = 0; r < 4; r++) {
|
|
for (let c = 0; c < 4; c++) {
|
|
updateTile(r, c, board[r][c]);
|
|
}
|
|
}
|
|
updateScoreDisplay();
|
|
}
|
|
|
|
function updateScoreDisplay() {
|
|
const scoreEl = document.getElementById("score");
|
|
if (scoreEl) {
|
|
scoreEl.textContent = currentScore;
|
|
}
|
|
|
|
if (currentScore > highScore) {
|
|
highScore = currentScore;
|
|
localStorage.setItem(storageKey, highScore);
|
|
updateHighScoreDisplay();
|
|
}
|
|
}
|
|
|
|
function updateHighScoreDisplay() {
|
|
const highScoreEl = document.getElementById('high-score');
|
|
if (highScoreEl) {
|
|
highScoreEl.textContent = highScore;
|
|
}
|
|
}
|
|
|
|
function resetScore() {
|
|
currentScore = 0;
|
|
updateScoreDisplay();
|
|
}
|
|
|
|
function checkAndShowTutorial() {
|
|
const showTutorial = sessionStorage.getItem("showTutorial");
|
|
const loggedInUser = sessionStorage.getItem("loggedInUser");
|
|
|
|
if (showTutorial === "true" && loggedInUser) {
|
|
setTimeout(() => {
|
|
const tutorialOverlay = document.getElementById('tutorial-overlay');
|
|
if (tutorialOverlay) {
|
|
tutorialOverlay.style.display = 'flex';
|
|
}
|
|
sessionStorage.setItem("showTutorial", "false");
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
function showGameOver() {
|
|
const finalScore = currentScore;
|
|
|
|
if (typeof saveScore === 'function') {
|
|
console.log("Mengirim skor ke database:", finalScore);
|
|
saveScore(finalScore);
|
|
} else {
|
|
console.error("Fungsi saveScore tidak ditemukan! Pastikan Score_Request.js sudah diload.");
|
|
}
|
|
|
|
const isNewHighScore = finalScore >= highScore && finalScore > 0;
|
|
|
|
const finalScoreEl = document.getElementById('final-score');
|
|
if (finalScoreEl) finalScoreEl.textContent = finalScore;
|
|
|
|
const newHighScoreBadge = document.getElementById('new-high-score-badge');
|
|
const highScoreDisplay = document.getElementById('high-score-display');
|
|
|
|
if (isNewHighScore) {
|
|
if (newHighScoreBadge) newHighScoreBadge.style.display = 'inline-block';
|
|
if (highScoreDisplay) highScoreDisplay.style.display = 'none';
|
|
} else {
|
|
if (newHighScoreBadge) newHighScoreBadge.style.display = 'none';
|
|
if (highScoreDisplay) highScoreDisplay.style.display = 'block';
|
|
const modalHighScore = document.getElementById('modal-high-score');
|
|
if (modalHighScore) modalHighScore.textContent = highScore;
|
|
}
|
|
|
|
const gameOverOverlay = document.getElementById('game-over-overlay');
|
|
if (gameOverOverlay) gameOverOverlay.style.display = 'flex';
|
|
}
|
|
|
|
function hideGameOver() {
|
|
const gameOverOverlay = document.getElementById('game-over-overlay');
|
|
if (gameOverOverlay) gameOverOverlay.style.display = 'none';
|
|
} |