diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index ce4fdca..1b34073 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,4 +1,4 @@ -## Pull Request Title Convention +# Pull Request Title Convention Please ensure your PR title follows this format: [Type]: Short, descriptive summary of changes Examples: @@ -6,37 +6,41 @@ Examples: - [Bugfix]: Resolve camera clipping on narrow viewports - [CI/CD]: Add code formatting check with Prettier -## ๐ŸŽฏ What issue does this address? -Closes # +๐ŸŽฏ **What issue does this address?** +Closes ### โœจ What does this change? -## โœจ What does this change? +**Checklist:** +- New functionality meets the goals defined in the linked issue. +- If changing the UI or game experience, screenshots or a GIF are included below. +- Code is formatted cleanly (ran Prettier/ESLint locally). +- All CI/CD checks in this PR passed. -## Checklist: -- [ ] New functionality meets the goals defined in the linked issue. -- [ ] If changing the UI or game experience, screenshots or a GIF are included below. -- [ ] Code is formatted cleanly (ran Prettier/ESLint locally). -- [ ] All CI/CD checks in this PR passed. -- [ ] Game mechanics work correctly (blocks stack, physics behave properly). -- [ ] Performance is maintained (no frame drops or lag introduced). -- [ ] Mobile/touch controls still function properly. -- [ ] Game resets correctly with 'R' key. +๐Ÿ–ผ๏ธ **Screenshots / Video Preview** -## ๐Ÿ–ผ๏ธ Screenshots / Video Preview | Before Changes | After Changes | -| :---: | :---: | +|----------------|---------------| | [Screenshot of old state] | [Screenshot of new state] | -## ๐Ÿงช Testing -### Steps to Test Locally (for Reviewer): -1. Clone this branch locally. -2. Open `index.html` in your browser. -3. Test core game functionality: - - Click/tap/spacebar to drop blocks - - Verify blocks stack properly with physics - - Test 'R' key to reset game - - Check mobile touch controls work -4. Verify the changes (e.g., if it's a bug fix, confirm the bug is gone). -5. Check browser console for any new errors or warnings. -6. Test on different screen sizes/devices if UI changes were made. - -## ๐Ÿ”— Related Resources \ No newline at end of file + +## ๐Ÿ”— **Related Issue(s)** +Link the GitHub Issue(s) this PR addresses. Use keywords like Fixes, Closes, or Resolves to automatically close the issue when the PR is merged. +Fixes #123 + +Resolves #456 + +## โœ… Checklist (Required) +Please check all boxes that apply and ensure your PR is ready for review. + +[ ] I have read the project's [CONTRIBUTING.md] guidelines. + +[ ] My code follows the project's coding style and conventions. + +[ ] I have performed a self-review of my own code. + +[ ] My changes generate no new errors or warnings in the browser console. + +[ ] I have tested my changes locally on the Vercel-simulated environment (if applicable). + +[ ] For UI changes, I have tested on different screen sizes (responsive design check). + +[ ] My commit message(s) are clear and descriptive. \ No newline at end of file diff --git a/script.js b/Js/script.js similarity index 98% rename from script.js rename to Js/script.js index 943ea76..3e0dcd4 100644 --- a/script.js +++ b/Js/script.js @@ -61,7 +61,7 @@ function loadHighScore() { function saveHighScore(value) { try { localStorage.setItem(HIGH_SCORE_KEY, String(Math.max(0, value | 0))); - } catch (_) {} + } catch (_) { } } // Initialize the game @@ -99,17 +99,17 @@ function createGradientBackground(colors) { // Function to update scene colors based on current theme function updateSceneColors() { if (!scene) return; // Scene not initialized yet - + const themeColors = window.themeManager.getCurrentThemeColors(); - + // Update scene background scene.background = createGradientBackground(themeColors.sceneBackground); - + // Update particle colors if they exist if (particleData && particleData.particles) { particleData.particles.material.color.set(themeColors.particleSpecialColor); } - + // We don't update existing blocks' colors, only new ones will use the new theme } @@ -143,7 +143,7 @@ function init() { // Get theme colors for particles const themeColors = window.themeManager.getCurrentThemeColors(); - + const particlesMaterial = new THREE.PointsMaterial({ color: themeColors.particleColor, size: 0.05, @@ -199,7 +199,7 @@ function init() { camera.lookAt(0, 0, 0); scene = new THREE.Scene(); - + // Apply initial theme colors const initialThemeColors = window.themeManager.getCurrentThemeColors(); scene.background = createGradientBackground(initialThemeColors.sceneBackground); @@ -342,11 +342,11 @@ const particleData = createParticles(); // Helper function to generate a box (both in ThreeJS and CannonJS) function generateBox(x, y, z, width, depth, falls) { const geometry = new THREE.BoxGeometry(width, boxHeight, depth); - + // Get current theme colors for block generation const themeColors = window.themeManager.getCurrentThemeColors(); const hueBase = themeColors.blockHueBase || 30; - + // Create color with theme-based hue const color = new THREE.Color(`hsl(${hueBase + stack.length * 4}, 100%, 50%)`); const material = new THREE.MeshLambertMaterial({ color }); @@ -401,8 +401,6 @@ function cutBox(topLayer, overlap, size, delta) { topLayer.cannonjs.addShape(shape); } - - // Function to split the block and add the next one if it overlaps function splitBlockAndAddNextOneIfOverlaps() { if (gameEnded) return; @@ -487,7 +485,7 @@ muteBtn.addEventListener("click", () => { }); function enableBackgroundMusic() { - sounds.bgm.play().catch(() => {}); + sounds.bgm.play().catch(() => { }); } ["mousedown", "touchstart", "keydown"].forEach((evt) => window.addEventListener(evt, enableBackgroundMusic, { once: true }) @@ -497,14 +495,14 @@ function playPlaceSound() { if (!muted) { const s = sounds.place.cloneNode(); s.volume = 0.7; - s.play().catch(() => {}); + s.play().catch(() => { }); } } function playFailSound() { if (!muted) { const s = sounds.fail.cloneNode(); s.volume = 0.7; - s.play().catch(() => {}); + s.play().catch(() => { }); } } @@ -537,7 +535,7 @@ window.addEventListener( e.target.closest(".twitter-link") || // The Twitter link e.target.closest("#muteBtn") || // The mute button e.target.closest("#theme-controls") || // The theme buttons container - e.target.closest("#close-results") + e.target.closest("#close-results") ) { // If it was, do nothing and let the browser handle the 'click' event return; @@ -549,6 +547,7 @@ window.addEventListener( }, { passive: false } ); + // Close results dialog button const closeResultsBtn = document.getElementById("close-results"); if (closeResultsBtn) { @@ -576,8 +575,6 @@ window.addEventListener("resize", () => { renderer.render(scene, camera); }); - - // ----- Physics Update ----- function updatePhysics(deltaTime) { world.step(deltaTime / 1000); @@ -600,7 +597,7 @@ function animation(time) { (!autopilot || (autopilot && top.threejs.position[top.direction] < - prev.threejs.position[top.direction] + robotPrecision)); + prev.threejs.position[top.direction] + robotPrecision)); if (moveBox) { top.threejs.position[top.direction] += 0.008 * deltaTime; diff --git a/themes.js b/Js/themes.js similarity index 99% rename from themes.js rename to Js/themes.js index 7a58c69..744c5e0 100644 --- a/themes.js +++ b/Js/themes.js @@ -53,7 +53,7 @@ const themeButtons = { function initThemes() { // Load saved theme from localStorage loadTheme(); - + // Add event listeners to theme buttons for (const theme of AVAILABLE_THEMES) { const button = themeButtons[theme]; @@ -91,13 +91,13 @@ function setTheme(theme, save = true) { // Update current theme currentTheme = theme; - + // Update body class document.body.classList.remove(...AVAILABLE_THEMES.map(t => `theme-${t}`)); if (theme !== 'default') { document.body.classList.add(`theme-${theme}`); } - + // Update active button state for (const t of AVAILABLE_THEMES) { const button = themeButtons[t]; @@ -105,12 +105,12 @@ function setTheme(theme, save = true) { button.classList.toggle('active', t === theme); } } - + // Update scene colors if the game has started if (typeof updateSceneColors === 'function') { updateSceneColors(); } - + // Save theme preference if requested if (save) { saveTheme(theme); diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md deleted file mode 100644 index 1b34073..0000000 --- a/PULL_REQUEST_TEMPLATE.md +++ /dev/null @@ -1,46 +0,0 @@ -# Pull Request Title Convention -Please ensure your PR title follows this format: [Type]: Short, descriptive summary of changes - -Examples: -- [Feature]: Implement high score system using localStorage -- [Bugfix]: Resolve camera clipping on narrow viewports -- [CI/CD]: Add code formatting check with Prettier - -๐ŸŽฏ **What issue does this address?** -Closes ### โœจ What does this change? - -**Checklist:** -- New functionality meets the goals defined in the linked issue. -- If changing the UI or game experience, screenshots or a GIF are included below. -- Code is formatted cleanly (ran Prettier/ESLint locally). -- All CI/CD checks in this PR passed. - -๐Ÿ–ผ๏ธ **Screenshots / Video Preview** - -| Before Changes | After Changes | -|----------------|---------------| -| [Screenshot of old state] | [Screenshot of new state] | - - -## ๐Ÿ”— **Related Issue(s)** -Link the GitHub Issue(s) this PR addresses. Use keywords like Fixes, Closes, or Resolves to automatically close the issue when the PR is merged. -Fixes #123 - -Resolves #456 - -## โœ… Checklist (Required) -Please check all boxes that apply and ensure your PR is ready for review. - -[ ] I have read the project's [CONTRIBUTING.md] guidelines. - -[ ] My code follows the project's coding style and conventions. - -[ ] I have performed a self-review of my own code. - -[ ] My changes generate no new errors or warnings in the browser console. - -[ ] I have tested my changes locally on the Vercel-simulated environment (if applicable). - -[ ] For UI changes, I have tested on different screen sizes (responsive design check). - -[ ] My commit message(s) are clear and descriptive. \ No newline at end of file diff --git a/README.md b/README.md index 4d03b24..e85a897 100644 --- a/README.md +++ b/README.md @@ -5,13 +5,17 @@ [![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT) [![Made with Three.js](https://img.shields.io/badge/Made%20with-Three.js-orange.svg)](https://threejs.org/) [![Contributions Welcome](https://img.shields.io/badge/Contributions-Welcome-blue.svg)](CONTRIBUTING.md) -[![Live Demo](https://img.shields.io/badge/Live%20Demo-Play%20Now-brightgreen.svg)](https://your-username.github.io/3D-Blockstack/) +[![Live Demo](https://img.shields.io/badge/Live%20Demo-Play%20Now-brightgreen.svg)](https://3d-blockstack.vercel.app/) --- ## ๐ŸŽฎ Demo -![Game Screenshot](screenshot.png) +## Light Theme +![Game Screenshot](preview/Light.png) +## Dark Theme +![Game Screenshot](preview/Dark.png) + *Stack blocks with precision and watch them fall with realistic physics!* --- @@ -119,7 +123,7 @@ I welcome contributions! Here's how you can help: ### ๐Ÿ› Bug Reports -- Use the [GitHub Issues](https://github.com/your-username/3D-Blockstack/issues) tab +- Use the [GitHub Issues](https://github.com/maitri-vv/3D-Blockstack/issues) tab - Include steps to reproduce the issue - Specify your browser and device type @@ -176,13 +180,25 @@ This project is licensed under the **MIT License** - see the [LICENSE](LICENSE) --- +## ๐Ÿ‘จโ€๐Ÿ’ป Author & Maintainer + +**[Maitri V V](https://github.com/maitri-vv)** +๐ŸŽฎ Developer & Designer of *3D Blockstack* + +๐Ÿ“ซ **Reach me at:** + +* GitHub: [@maitri-vv](https://github.com/maitri-vv) +* LinkedIn: [maitrivaghasiya](https://linkedin.com/in/maitrivaghasiya) +* Twitter: [maitrivv](https://twitter.com/maitrivv) + +--- + ## ๐Ÿ“„ We're Still Playing! Shoutout to the Amazing Contributors Who Secured the Win. - + - --- ## โญ Show Your Support @@ -196,4 +212,4 @@ If you enjoyed this game, please give it a โญ on GitHub! *Happy Stacking! ๐Ÿงฑ* - + \ No newline at end of file diff --git a/style.css b/css/style.css similarity index 96% rename from style.css rename to css/style.css index d0dcbd0..5b4ea15 100644 --- a/style.css +++ b/css/style.css @@ -346,7 +346,8 @@ body { #muteBtn { position: absolute; top: clamp(8px, 2.5vh, 20px); - left: clamp(12px, 2.5vw, 24px); /* Changed from 'right' */ + left: clamp(12px, 2.5vw, 24px); + /* Changed from 'right' */ font-family: "Montserrat", sans-serif; font-size: clamp(1.5rem, 4vw, 2.5rem); font-weight: 900; @@ -360,12 +361,17 @@ body { z-index: 11; display: flex; align-items: center; - justify-content: center; /* Added to center the icon */ + justify-content: center; + /* Added to center the icon */ transition: transform 0.3s ease, box-shadow 0.3s ease; - color: white; /* Added to make sure icon is visible */ - border: none; /* Added from JS */ - cursor: pointer; /* Added from JS */ - line-height: 1; /* Helps center the icon */ + color: white; + /* Added to make sure icon is visible */ + border: none; + /* Added from JS */ + cursor: pointer; + /* Added from JS */ + line-height: 1; + /* Helps center the icon */ } /* Optional: Add a matching hover effect */ @@ -386,9 +392,20 @@ body { /* Animation for score update */ @keyframes score-pop { - 0% { transform: scale(1); color: white; } - 50% { transform: scale(1.25); color: #ffdd40; } - 100% { transform: scale(1); color: white; } + 0% { + transform: scale(1); + color: white; + } + + 50% { + transform: scale(1.25); + color: #ffdd40; + } + + 100% { + transform: scale(1); + color: white; + } } .score-updated { diff --git a/themes.css b/css/themes.css similarity index 97% rename from themes.css rename to css/themes.css index 3a39b40..17c26ba 100644 --- a/themes.css +++ b/css/themes.css @@ -183,12 +183,14 @@ body { /* Theme Controls Container */ #theme-controls { position: absolute; - top: clamp(80px, 12vh, 120px); /* Position below the score */ - right: clamp(12px, 2.5vw, 24px); /* Align with score's right edge */ + top: clamp(120px, 12vh, 120px); + /* Position below the score */ + right: clamp(12px, 2.5vw, 24px); + /* Align with score's right edge */ z-index: 1000; display: flex; flex-direction: column; - gap: 10px; + gap: 12px; } @media (max-width: 600px) { @@ -202,7 +204,7 @@ body { #theme-selector { right: clamp(60px, 12vw, 140px); } - + .theme-button { width: 32px; height: 32px; @@ -217,7 +219,7 @@ body { gap: 10px; padding: 6px 10px; } - + .theme-button { width: 28px; height: 28px; diff --git a/index.html b/index.html index 220f325..70849f5 100644 --- a/index.html +++ b/index.html @@ -9,13 +9,16 @@ Stacking Game - - + + + + +

Stack the blocks on top of each other

@@ -24,6 +27,7 @@
+
@@ -87,6 +91,7 @@

Game Over!

+
0
@@ -103,9 +108,9 @@

Game Over!

- + - + diff --git a/preview/Dark.png b/preview/Dark.png new file mode 100644 index 0000000..e237518 Binary files /dev/null and b/preview/Dark.png differ diff --git a/preview/Light.png b/preview/Light.png new file mode 100644 index 0000000..cc53316 Binary files /dev/null and b/preview/Light.png differ