cmclark00/tetris-3d
1
0
Fork 0
mirror of https://github.com/cmclark00/tetris-3d.git synced 2025-05-17 23:25:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix square piece rotation bug and duplicate UI elements

Browse source
This commit is contained in:
cmclark00 2025-03-25 18:27:53 -04:00
parent 7d45fc36fb
commit 4cb5250465
1 changed files with 83 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

39
script.js
View file

@ -579,6 +579,11 @@ class Piece {
// Direction can be 'right' or 'left' // Direction can be 'right' or 'left'
if (gameOver || paused) return; if (gameOver || paused) return;
// Square piece (O) doesn't rotate
if (this.tetrominoType === 'O') {
return;
}
// Clear previous position // Clear previous position
this.undraw(); this.undraw();
clearPreviousPiecePosition(); clearPreviousPiecePosition();
@ -692,6 +697,11 @@ class Piece {
// 3D horizontal rotation effect (around Y axis) // 3D horizontal rotation effect (around Y axis)
rotate3DY() { rotate3DY() {
// Square pieces (O) shouldn't rotate
if (this.tetrominoType === 'O') {
return;
}
// Clear previous position // Clear previous position
this.undraw(); this.undraw();
clearPreviousPiecePosition(); clearPreviousPiecePosition();
@ -748,6 +758,11 @@ class Piece {
// 3D vertical rotation effect (around X axis) // 3D vertical rotation effect (around X axis)
rotate3DX() { rotate3DX() {
// Square pieces (O) shouldn't rotate
if (this.tetrominoType === 'O') {
return;
}
// Clear previous position // Clear previous position
this.undraw(); this.undraw();
clearPreviousPiecePosition(); clearPreviousPiecePosition();
@ -2410,6 +2425,11 @@ function handleTouchEnd(event) {
// Create touch instructions overlay // Create touch instructions overlay
function createTouchControlButtons() { function createTouchControlButtons() {
// Check if elements already exist
if (document.querySelector('.rotate-buttons')) {
return;
}
// Create 3D rotation buttons // Create 3D rotation buttons
const rotateButtons = document.createElement('div'); const rotateButtons = document.createElement('div');
rotateButtons.className = 'rotate-buttons'; rotateButtons.className = 'rotate-buttons';
@ -2434,7 +2454,8 @@ function createTouchControlButtons() {
} }
}); });
// Create touch instructions overlay // Create touch instructions overlay if it doesn't exist
if (!document.querySelector('.touch-instructions')) {
const touchInstructions = document.createElement('div'); const touchInstructions = document.createElement('div');
touchInstructions.className = 'touch-instructions'; touchInstructions.className = 'touch-instructions';
touchInstructions.innerHTML = ` touchInstructions.innerHTML = `
@ -2456,13 +2477,18 @@ function createTouchControlButtons() {
touchInstructions.style.display = 'none'; touchInstructions.style.display = 'none';
}, 1000); }, 1000);
}, 5000); }, 5000);
}
// Add instruction toggle button to score container // Add instruction toggle button to score container if it doesn't exist
const scoreContainer = document.querySelector('.score-container');
if (scoreContainer && !document.querySelector('.instructions-btn')) {
const instructionsBtn = document.createElement('button'); const instructionsBtn = document.createElement('button');
instructionsBtn.className = 'game-btn instructions-btn'; instructionsBtn.className = 'game-btn instructions-btn';
instructionsBtn.innerHTML = 'Controls'; instructionsBtn.innerHTML = 'Controls';
instructionsBtn.addEventListener('click', function() { instructionsBtn.addEventListener('click', function() {
// Show instructions again // Show instructions again
const touchInstructions = document.querySelector('.touch-instructions');
if (touchInstructions) {
touchInstructions.style.display = 'block'; touchInstructions.style.display = 'block';
touchInstructions.style.opacity = '1'; touchInstructions.style.opacity = '1';
touchInstructions.classList.remove('fade-out'); touchInstructions.classList.remove('fade-out');
@ -2474,15 +2500,15 @@ function createTouchControlButtons() {
touchInstructions.style.display = 'none'; touchInstructions.style.display = 'none';
}, 1000); }, 1000);
}, 5000); }, 5000);
}
}); });
// Add button to score container // Add button to score container
const scoreContainer = document.querySelector('.score-container');
if (scoreContainer) {
scoreContainer.appendChild(instructionsBtn); scoreContainer.appendChild(instructionsBtn);
} }
// Add performance mode toggle // Add performance mode toggle if it doesn't exist
if (scoreContainer && !document.querySelector('.perf-toggle')) {
const perfToggle = document.createElement('input'); const perfToggle = document.createElement('input');
perfToggle.type = 'checkbox'; perfToggle.type = 'checkbox';
perfToggle.id = 'toggle-mobile-performance'; perfToggle.id = 'toggle-mobile-performance';
@ -2498,14 +2524,13 @@ function createTouchControlButtons() {
perfContainer.appendChild(perfToggle); perfContainer.appendChild(perfToggle);
perfContainer.appendChild(perfLabel); perfContainer.appendChild(perfLabel);
if (scoreContainer) {
scoreContainer.appendChild(perfContainer); scoreContainer.appendChild(perfContainer);
}
// Add event listener // Add event listener
perfToggle.addEventListener('change', function() { perfToggle.addEventListener('change', function() {
mobilePerformanceMode = this.checked; mobilePerformanceMode = this.checked;
}); });
}
} }
// Set active piece to next piece and create new next piece // Set active piece to next piece and create new next piece