ghndrx/k8s-game-2048
1
0
Fork 0
mirror of https://github.com/ghndrx/k8s-game-2048.git synced 2026-02-10 14:54:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Auto-promote: Merge develop to staging after successful dev tests

Browse Source
This commit is contained in:
github-actions[bot]
2025-07-01 22:21:53 +00:00
committed by GitHub
parent edfe8db6d8 e57450aa65
commit 724630965e
3 changed files with 76 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2048 Game - v2.0.6</title> <title>2048 Game - v2.0.7</title>
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="icon" type="image/png" href="favicon.png"> <link rel="icon" type="image/png" href="favicon.png">
</head> </head>

7
src/script.js
View File

@@ -246,11 +246,14 @@ class Game2048 {
const tile = document.createElement('div'); const tile = document.createElement('div');
tile.className = `tile tile-${this.grid[row][col]}`; tile.className = `tile tile-${this.grid[row][col]}`;
tile.textContent = this.grid[row][col]; tile.textContent = this.grid[row][col];
tile.style.left = `${col * 124.25}px`;
tile.style.top = `${row * 124.25}px`; // Use CSS Grid positioning instead of absolute positioning
tile.style.gridColumn = `${col + 1}`;
tile.style.gridRow = `${row + 1}`;
if (this.grid[row][col] > 2048) { if (this.grid[row][col] > 2048) {
tile.className = 'tile tile-super'; tile.className = 'tile tile-super';
tile.textContent = this.grid[row][col];
} }
container.appendChild(tile); container.appendChild(tile);

113
src/style.css
View File

@@ -165,6 +165,10 @@ h1.title {
aspect-ratio: 1; aspect-ratio: 1;
margin: 0 auto; margin: 0 auto;
box-sizing: border-box; box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
} }
.game-message { .game-message {
@@ -226,48 +230,62 @@ h1.title {
.grid-container { .grid-container {
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: clamp(8px, 2.5vw, 18px);
box-sizing: border-box;
} }
.grid-row { .grid-row {
margin-bottom: 18px; display: contents;
}
.grid-row:last-child {
margin-bottom: 0;
} }
.grid-cell { .grid-cell {
width: 106.25px;
height: 106.25px;
background: rgba(238, 228, 218, 0.35); background: rgba(238, 228, 218, 0.35);
border-radius: 6px; border-radius: 6px;
margin-right: 18px; width: 100%;
float: left; height: 100%;
} min-height: 0;
aspect-ratio: 1;
.grid-cell:last-child {
margin-right: 0;
} }
.tile-container { .tile-container {
position: absolute; position: absolute;
z-index: 2; z-index: 2;
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: clamp(8px, 2.5vw, 18px);
box-sizing: border-box;
pointer-events: none;
} }
.tile { .tile {
width: 106.25px;
height: 106.25px;
background: #eee4da; background: #eee4da;
color: #776e65; color: #776e65;
border-radius: 6px; border-radius: 6px;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
vertical-align: middle; display: flex;
line-height: 106.25px; align-items: center;
font-size: 55px; justify-content: center;
position: absolute; font-size: clamp(24px, 6vw, 55px);
transition: 0.15s ease-in-out; transition: 0.15s ease-in-out;
transform-origin: center center; transform-origin: center center;
width: 100%;
height: 100%;
min-height: 0;
aspect-ratio: 1;
box-sizing: border-box;
} }
.tile-2 { background: #eee4da; color: #776e65; } .tile-2 { background: #eee4da; color: #776e65; }
@@ -276,13 +294,13 @@ h1.title {
.tile-16 { color: #f9f6f2; background: #f59563; } .tile-16 { color: #f9f6f2; background: #f59563; }
.tile-32 { color: #f9f6f2; background: #f67c5f; } .tile-32 { color: #f9f6f2; background: #f67c5f; }
.tile-64 { color: #f9f6f2; background: #f65e3b; } .tile-64 { color: #f9f6f2; background: #f65e3b; }
.tile-128 { color: #f9f6f2; background: #edcf72; font-size: 45px; } .tile-128 { color: #f9f6f2; background: #edcf72; font-size: clamp(20px, 5vw, 45px); }
.tile-256 { color: #f9f6f2; background: #edcc61; font-size: 45px; } .tile-256 { color: #f9f6f2; background: #edcc61; font-size: clamp(20px, 5vw, 45px); }
.tile-512 { color: #f9f6f2; background: #edc850; font-size: 45px; } .tile-512 { color: #f9f6f2; background: #edc850; font-size: clamp(20px, 5vw, 45px); }
.tile-1024 { color: #f9f6f2; background: #edc53f; font-size: 35px; } .tile-1024 { color: #f9f6f2; background: #edc53f; font-size: clamp(16px, 4vw, 35px); }
.tile-2048 { color: #f9f6f2; background: #edc22e; font-size: 35px; } .tile-2048 { color: #f9f6f2; background: #edc22e; font-size: clamp(16px, 4vw, 35px); }
.tile-super { color: #f9f6f2; background: #3c3a32; font-size: 30px; } .tile-super { color: #f9f6f2; background: #3c3a32; font-size: clamp(14px, 3.5vw, 30px); }
.tile-new { .tile-new {
animation: appear 200ms ease-in-out; animation: appear 200ms ease-in-out;
@@ -352,12 +370,13 @@ h1.title {
/* Responsive design */ /* Responsive design */
@media screen and (max-width: 520px) { @media screen and (max-width: 520px) {
.container { .container {
width: 280px; width: 100%;
max-width: 320px;
margin: 0 auto; margin: 0 auto;
} }
.header h1 { .header h1 {
font-size: 50px; font-size: 40px;
} }
.scores-container { .scores-container {
@@ -372,35 +391,34 @@ h1.title {
} }
.game-container { .game-container {
width: 280px; width: 100%;
height: 280px; max-width: 320px;
padding: 10px; padding: 10px;
} }
.grid-cell { .grid-container,
width: 60px; .tile-container {
height: 60px; top: 10px;
margin-right: 10px; left: 10px;
margin-bottom: 10px; right: 10px;
bottom: 10px;
gap: clamp(5px, 2vw, 10px);
} }
.tile { .tile {
width: 60px; font-size: clamp(18px, 5vw, 28px);
height: 60px;
line-height: 60px;
font-size: 35px;
} }
.tile-128, .tile-256, .tile-512 { .tile-128, .tile-256, .tile-512 {
font-size: 25px; font-size: clamp(14px, 4vw, 22px);
} }
.tile-1024, .tile-2048 { .tile-1024, .tile-2048 {
font-size: 20px; font-size: clamp(12px, 3.5vw, 18px);
} }
.tile-super { .tile-super {
font-size: 18px; font-size: clamp(10px, 3vw, 16px);
} }
} }
@@ -460,8 +478,17 @@ h1.title {
.game-container { .game-container {
width: calc(100vw - 20px); width: calc(100vw - 20px);
max-width: 400px; max-width: 300px;
padding: 10px; padding: 8px;
}
.grid-container,
.tile-container {
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
gap: clamp(4px, 1.5vw, 8px);
} }
.scores-container { .scores-container {