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

Implement Android app with improved features: 1. Enhanced swipe controls for smoother movement 2. Improved 3D rotation with visual effects 3. Updated UI to match web app style

Browse source
This commit is contained in:
Corey 2025-03-26 00:38:43 -04:00
parent 210a518ad5
commit c76cde0f1f
103 changed files with 4180 additions and 357 deletions
Download patch file Download diff file Expand all files Collapse all files

269
style.css
View file

@ -404,16 +404,11 @@ canvas#tetris {
max-width: 200px;
}
/* Mobile-only class should be hidden always since we're removing mobile support */
.mobile-only {
display: none;
}
@media (max-width: 768px) {
.mobile-only {
display: flex;
}
}
/* Toggle switch styles */
.switch {
position: relative;
@ -504,14 +499,7 @@ input[type=range]::-moz-range-thumb {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
/* Mobile-specific styles */
.mobile-mode {
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
}
/* 3D Rotation buttons */
/* 3D Rotation buttons - keep these for desktop */
.rotate-buttons {
position: fixed;
bottom: 20px;
@ -541,257 +529,10 @@ input[type=range]::-moz-range-thumb {
background: linear-gradient(45deg, #0062cc, #00b3ff);
}
/* Performance toggle */
.perf-toggle {
display: flex;
align-items: center;
margin-top: 5px;
background: rgba(0, 0, 0, 0.3);
padding: 5px;
border-radius: 4px;
font-size: 11px;
}
.perf-label {
margin-left: 5px;
color: #00ffff;
cursor: pointer;
}
#toggle-mobile-performance {
cursor: pointer;
}
/* Mobile mode adjustments for rotation buttons */
.mobile-mode .rotate-buttons {
bottom: 15px;
right: 15px;
gap: 8px;
}
.mobile-mode .rotate-btn {
padding: 10px 12px;
font-size: 12px;
}
/* Mobile landscape orientation */
@media (orientation: landscape) {
.mobile-mode .rotate-buttons {
flex-direction: row;
bottom: 10px;
right: 10px;
}
}
/* Smaller devices */
@media (max-width: 400px) {
.mobile-mode .rotate-btn {
padding: 8px 10px;
font-size: 11px;
}
}
.mobile-mode .game-container {
flex-direction: row;
align-items: flex-start;
gap: 5px;
padding: 10px;
max-width: 100vw;
box-sizing: border-box;
margin-top: 40px; /* Reduced top margin */
}
.mobile-mode .game-title {
font-size: 22px;
top: 5px;
text-shadow: 0 0 8px rgba(255, 0, 255, 0.7);
}
.mobile-mode .game-wrapper {
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
order: 2; /* Move game board to the right */
flex-grow: 1;
}
.mobile-mode .score-container {
width: auto;
min-width: 100px;
max-width: 120px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
padding: 8px;
background: rgba(0, 0, 0, 0.7);
order: 1; /* Move score container to the left */
margin-right: 5px;
border-radius: 8px;
height: auto;
align-self: stretch;
}
.mobile-mode .score-container p {
margin: 3px 0;
font-size: 10px;
}
.mobile-mode .game-btn {
margin: 3px;
padding: 6px 8px;
font-size: 9px;
width: 95%;
}
.mobile-mode .controls-info {
display: none;
}
.mobile-mode #next-piece-preview {
position: relative;
top: auto;
bottom: auto;
left: auto;
right: auto;
transform: none;
margin: 0 0 10px 0;
background: rgba(0, 0, 0, 0.7);
z-index: 10;
border-color: rgba(0, 255, 255, 0.5);
width: 90%; /* Make it fit inside the score container */
box-sizing: border-box;
}
.mobile-mode #next-piece-preview h3 {
font-size: 12px;
margin-bottom: 5px;
}
.mobile-mode canvas#tetris {
max-width: 100%;
height: auto;
border-radius: 8px;
}
/* Portrait vs landscape adjustments */
@media (orientation: portrait) {
.mobile-mode .game-container {
padding-top: 35px;
height: calc(100vh - 40px);
}
.mobile-mode .score-container {
height: calc(100vh - 80px);
justify-content: flex-start;
}
.mobile-mode canvas#tetris {
height: calc(100vh - 80px);
width: auto;
object-fit: contain;
}
}
@media (orientation: landscape) {
.mobile-mode .game-container {
margin-top: 35px;
padding: 5px;
height: calc(100vh - 40px);
}
.mobile-mode .score-container {
height: calc(100vh - 50px);
max-width: 100px;
}
.mobile-mode canvas#tetris {
height: calc(100vh - 50px);
width: auto;
object-fit: contain;
}
}
/* Smaller devices */
@media (max-width: 400px) {
.mobile-mode .game-title {
font-size: 18px;
}
.mobile-mode .score-container p {
font-size: 9px;
}
.mobile-mode .score-container {
min-width: 85px;
max-width: 90px;
}
.mobile-mode .game-btn {
font-size: 8px;
padding: 5px 6px;
}
}
/* Tablet optimization */
@media (min-width: 768px) and (max-width: 1024px) {
.mobile-mode .game-container {
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.mobile-mode .game-title {
font-size: 28px;
}
}
/* Touch instructions */
.touch-instructions {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(0, 0, 0, 0.9);
border: 2px solid rgba(0, 255, 255, 0.7);
border-radius: 10px;
padding: 15px;
z-index: 1000;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
transition: opacity 1s ease;
text-align: center;
max-width: 90vw;
}
.touch-instructions h3 {
color: #00ffff;
text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
margin-bottom: 15px;
font-size: 16px;
}
.mobile-mode .touch-instructions {
display: block;
}
.touch-instructions p {
margin: 10px 0;
font-size: 13px;
color: #fff;
text-align: left;
}
.touch-instructions p b {
color: #ff9900;
text-shadow: 0 0 5px rgba(255, 153, 0, 0.5);
}
.touch-instructions.fade-out {
opacity: 0;
}
/* Performance toggle - Since we're removing mobile support */
/* Removing mobile-specific media queries and styles */
/* Removing touch-instructions class and related styles */
.instructions-btn {
margin-top: 15px;
background: linear-gradient(45deg, #ff9900, #ff5500);