Skip to content

Commit 5de01b2

Browse files
PIYUSH-NEXTGENPIYUSH-NEXTGEN
authored
Merge branch 'main' into improve-typing-gameplay
2 parents f54fc05 + d6d03fd commit 5de01b2

11 files changed

Lines changed: 1167 additions & 1094 deletions

File tree

‎web-app/css/styles.css‎

Lines changed: 114 additions & 512 deletions
Large diffs are not rendered by default.

‎web-app/index.html‎

Lines changed: 711 additions & 490 deletions
Large diffs are not rendered by default.

‎web-app/js/main.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,10 @@ if (stickyFilterBar && heroSection) {
649649

650650
modal.classList.add('active');
651651
modal.setAttribute('aria-hidden', 'false');
652+
653+
// Prevent scroll shift by adding padding equal to scrollbar width
654+
var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
655+
document.body.style.paddingRight = scrollbarWidth + 'px';
652656
document.body.style.overflow = 'hidden';
653657
setMainInert(true);
654658

@@ -675,6 +679,7 @@ if (stickyFilterBar && heroSection) {
675679
if (!modal || !modal.classList.contains('active')) return;
676680
modal.classList.remove('active');
677681
modal.setAttribute('aria-hidden', 'true');
682+
document.body.style.paddingRight = '';
678683
document.body.style.overflow = '';
679684
setMainInert(false);
680685
if (removeTrap) { removeTrap(); removeTrap = null; }

‎web-app/js/projects.js‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1535,22 +1535,36 @@ function initFibonacci() {
15351535
const ctx = canvas.getContext('2d');
15361536

15371537
function generateFibonacci() {
1538-
const n = parseInt(termsInput.value) || 10;
1538+
const value = termsInput.value.trim();
1539+
const n = parseInt(value);
1540+
1541+
// Validation
1542+
if (value === '' || isNaN(n) || n <= 0) {
1543+
display.innerHTML = `
1544+
<p class="fib-error">
1545+
Please enter a number greater than 0
1546+
</p>
1547+
`;
1548+
1549+
ctx.clearRect(0, 0, canvas.width, canvas.height);
1550+
return;
1551+
}
1552+
15391553
display.innerHTML = '';
1540-
1554+
15411555
let fib = [0, 1];
15421556
for (let i = 2; i < n; i++) {
1543-
fib[i] = fib[i-1] + fib[i-2];
1557+
fib[i] = fib[i - 1] + fib[i - 2];
15441558
}
1545-
1559+
15461560
fib.slice(0, n).forEach((num, index) => {
15471561
const numEl = document.createElement('div');
15481562
numEl.className = 'fib-number';
15491563
numEl.textContent = num;
15501564
numEl.style.animationDelay = `${index * 0.1}s`;
15511565
display.appendChild(numEl);
15521566
});
1553-
1567+
15541568
drawSpiral(fib.slice(0, Math.min(n, 12)));
15551569
}
15561570

‎web-app/js/projects/2048-game.js‎

Lines changed: 53 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -78,43 +78,39 @@ function get2048GameHTML() {
7878
box-shadow: var(--shadow, 0 2px 4px rgba(0,0,0,0.05));
7979
}
8080
81-
/* Layout Manager for Board + Controls */
82-
.game-layout {
83-
display: flex;
84-
flex-direction: row; /* Aligns items horizontally */
85-
align-items: center;
86-
justify-content: center;
87-
gap: 30px; /* Space between board and controls */
81+
#grid-container {
82+
width: 100%;
83+
max-width: 440px;
8884
margin: auto;
8985
}
9086
9187
#grid-container {
9288
width: 340px;
9389
height: 340px;
9490
display: grid;
95-
grid-template-columns: repeat(4, 70px);
96-
grid-template-rows: repeat(4, 70px);
91+
grid-template-columns: repeat(4, 1fr);
9792
gap: 10px;
9893
background: var(--panel-color, #bbada0);
9994
border: 10px solid var(--panel-color, #bbada0);
10095
padding: 0;
10196
border-radius: 10px;
102-
box-sizing: border-box;
103-
box-shadow: inset 0 2px 8px rgba(0,0,0,0.15);
97+
touch-action: none;
10498
}
10599
106100
.tile {
107-
width: 70px;
108-
height: 70px;
109-
display: flex;
110-
justify-content: center;
111-
align-items: center;
112-
font-size: 26px;
113-
font-weight: bold;
114-
border-radius: 6px;
115-
box-sizing: border-box;
116-
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
117-
}
101+
width: 100%;
102+
aspect-ratio: 1 / 1;
103+
height: auto;
104+
background: var(--control-color);
105+
106+
display: flex;
107+
justify-content: center;
108+
align-items: center;
109+
110+
font-size: clamp(16px, 5vw, 28px);
111+
font-weight: bold;
112+
113+
border-radius: 12px;
118114
119115
/* Right Side Controls Layout */
120116
.controls {
@@ -441,22 +437,41 @@ function init2048Game() {
441437
}
442438
}
443439

444-
gridContainer.addEventListener("touchstart", (e) => {
445-
touchStartX = e.touches[0].clientX;
446-
touchStartY = e.touches[0].clientY;
447-
}, { passive: true });
448-
449-
gridContainer.addEventListener("touchend", (e) => {
450-
if (!e.changedTouches.length) return;
451-
handleSwipeEnd(e.changedTouches[0].clientX, e.changedTouches[0].clientY);
452-
}, { passive: true });
453-
454-
let isDragging = false;
455-
gridContainer.addEventListener("mousedown", (e) => {
456-
isDragging = true;
457-
touchStartX = e.clientX;
458-
touchStartY = e.clientY;
459-
});
440+
let touchStartX = 0;
441+
let touchStartY = 0;
442+
443+
gridContainer.addEventListener('touchstart', e => {
444+
e.preventDefault();
445+
touchStartX = e.changedTouches[0].screenX;
446+
touchStartY = e.changedTouches[0].screenY;
447+
}, { passive: false });
448+
449+
gridContainer.addEventListener('touchend', e => {
450+
e.preventDefault();
451+
let touchEndX = e.changedTouches[0].screenX;
452+
let touchEndY = e.changedTouches[0].screenY;
453+
454+
let dx = touchEndX - touchStartX;
455+
let dy = touchEndY - touchStartY;
456+
let moved = false;
457+
458+
if (Math.abs(dx) > Math.abs(dy)) {
459+
if (dx > 30) moved = moveRight();
460+
else if (dx < -30) moved = moveLeft();
461+
} else {
462+
if (dy > 30) moved = moveDown();
463+
else if (dy < -30) moved = moveUp();
464+
}
465+
466+
if(moved) {
467+
addNewTile();
468+
drawBoard();
469+
}
470+
}, { passive: false });
471+
472+
document
473+
.getElementById("restart-btn")
474+
.addEventListener("click", () => {
460475

461476
window.addEventListener("mouseup", (e) => {
462477
if (!isDragging) return;

‎web-app/js/projects/fibonacci.js‎

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,8 @@ function getFibonacciHTML() {
5151
#fibTerms{
5252
padding:13px;
5353
background-color:var(--bg-color);
54-
border:1px solid white;
54+
color: var(--text-color);
55+
border:1px solid var(--text-color);
5556
outline:none;
5657
border-radius:30px;
5758
}
@@ -61,6 +62,11 @@ function getFibonacciHTML() {
6162
align-items:center;
6263
justify-content:center;
6364
}
65+
.fib-error{
66+
color:red;
67+
font-weight:bold;
68+
margin-top:1rem;
69+
}
6470
</style>
6571
`;
6672
}
@@ -73,22 +79,35 @@ function initFibonacci() {
7379
const ctx = canvas.getContext('2d');
7480

7581
function generateFibonacci() {
76-
const n = parseInt(termsInput.value) || 10;
82+
const value = termsInput.value.trim();
83+
const n = parseInt(value);
84+
85+
// Validation
86+
if (value === '' || isNaN(n) || n <= 0) {
87+
display.innerHTML = `
88+
<p class="fib-error">
89+
Please enter a number greater than 0
90+
</p>
91+
`;
92+
ctx.clearRect(0, 0, canvas.width, canvas.height);
93+
return;
94+
}
95+
7796
display.innerHTML = '';
78-
97+
7998
let fib = [0, 1];
8099
for (let i = 2; i < n; i++) {
81-
fib[i] = fib[i-1] + fib[i-2];
100+
fib[i] = fib[i - 1] + fib[i - 2];
82101
}
83-
102+
84103
fib.slice(0, n).forEach((num, index) => {
85104
const numEl = document.createElement('div');
86105
numEl.className = 'fib-number';
87106
numEl.textContent = num;
88107
numEl.style.animationDelay = `${index * 0.1}s`;
89108
display.appendChild(numEl);
90109
});
91-
110+
92111
drawSpiral(fib.slice(0, Math.min(n, 12)));
93112
}
94113

‎web-app/js/projects/flappy-game.js‎

Lines changed: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -91,17 +91,23 @@ function getFlappyGameHTML() {
9191
}
9292
9393
#flappy-canvas-wrapper {
94-
border: 3px solid var(--border-color, #ffffff);
95-
background: #87ceeb;
96-
width: 400px;
97-
height: 600px;
98-
border-radius: 8px;
94+
position: relative;
95+
border: 3px solid var(--border-color);
96+
background: #0f172a; /* Sleek dark slate background */
9997
overflow: hidden;
98+
width: 100%;
99+
max-width: 400px;
100+
aspect-ratio: 1 / 1;
101+
border-radius: 8px;
102+
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
103+
touch-action: none;
100104
}
101105
102106
#flappyCanvas {
103107
display: block;
104108
cursor: pointer;
109+
width: 100%;
110+
height: 100%;
105111
}
106112
</style>
107113
`;
@@ -307,11 +313,10 @@ function initFlappyGame() {
307313
gameLoop();
308314
}
309315

310-
function jump() {
311-
if (gameScreen.style.display === "none") return;
312-
313-
if (gameRunning) {
314-
bird.velocity = bird.jumpStrength;
316+
function tap(e) {
317+
if (e && e.preventDefault) e.preventDefault();
318+
if (gameOver) {
319+
resetGame();
315320
} else {
316321
resetGame();
317322
}
@@ -326,8 +331,8 @@ function initFlappyGame() {
326331
}
327332
}
328333

329-
function stopGame() {
330-
gameRunning = false;
334+
canvas.addEventListener('mousedown', tap);
335+
canvas.addEventListener('touchstart', tap, { passive: false });
331336

332337
if (animationId) {
333338
cancelAnimationFrame(animationId);

0 commit comments

Comments
 (0)