diff --git a/assets/sounds/pop.mp3 b/assets/sounds/pop.mp3 new file mode 100644 index 00000000..202ac055 Binary files /dev/null and b/assets/sounds/pop.mp3 differ diff --git a/assets/testimonial-Favi.png b/assets/testimonial-Favi.png new file mode 100644 index 00000000..a4b0dc00 Binary files /dev/null and b/assets/testimonial-Favi.png differ diff --git a/js/game.js b/js/game.js index 7dbf1ce7..832f1d17 100644 --- a/js/game.js +++ b/js/game.js @@ -96,9 +96,6 @@ class Game { this.removeEventListener("boxFill"); clearInterval(this.timer); // Stop the timer - let winSound = new Audio("../assets/sounds/win.mp3"); - winSound.play(); - // Determine winner or draw const winner = this.determineWinner(this.players); @@ -112,7 +109,7 @@ class Game { this.playerTurnBgUI.classList.add("win"); this.playerTurnBgUI.style.background = winner.color; } - + // Storing winner data for leaderboard const playerData = JSON.parse(localStorage.getItem("playerData")); const player = playerData.find((player) => player.name === winner.name); @@ -120,9 +117,25 @@ class Game { playerData[playerIndex].score = winner.filledBoxes; playerData[playerIndex].winner = true; localStorage.setItem("winnerData", JSON.stringify(playerData)); + + // Winning Sound effect + let winSound = new Audio("../assets/sounds/win.mp3"); + winSound.play(); // Open the win overlay document.getElementById("win-overlay").style.height = "100%"; + + for (let i = 0; i < 10; i++) { + setTimeout(() => { + const pop = new Audio("../assets/sounds/pop.mp3"); + pop.play(); + confetti({ + particleCount: 200, + spread: 100, + origin: { y: 0.6 }, + }); + }, i * 1000); + } } determineWinner(players) { diff --git a/pages/game.html b/pages/game.html index 94479892..3f20291c 100644 --- a/pages/game.html +++ b/pages/game.html @@ -251,5 +251,6 @@

Step 7

+ diff --git a/pages/testimonials.html b/pages/testimonials.html new file mode 100644 index 00000000..8458f91b --- /dev/null +++ b/pages/testimonials.html @@ -0,0 +1,187 @@ + + + + + + Testimonials - Dot-Box + + + + + + +
+
+

What Players Say About Dot-Box?

+

Discover what our passionate community of gamers has to say about Dot-Box,
From casual gamers to competitive strategists, players of all levels are raving about their experiences.

+
+
+ +
+
+ Profile 1 +
+
+

Jess K

+

Gamer Enthusiast

+

"Dot-Box is an incredibly strategic game. The multiplayer aspect really makes it engaging and fun! I've played so many rounds with my friends, and each time it feels like a new experience. The simplicity of the game belies the complex decisions you need to make, and that's what makes it so rewarding. Every win feels well-earned!" +

+
+ + + + + +
+
+
+ +
+
+ Profile 2 +
+
+

Ryan L

+

Competitive Player

+

"I've always been a fan of competitive games, and Dot-Box takes the cake! The fast-paced nature of the game combined with the need to think ahead makes every match an intense battle of wits. The game’s design is elegant and addictive, making it perfect for both short and long gaming sessions. Dot-Box is not just a game—it's a challenge!"

+
+ + + + + +
+
+
+ +
+
+ Profile 3 +
+
+

David Miller

+

Puzzle Lover

+

"It's amazing how such a simple concept can provide endless hours of entertainment. I love how each game can turn on a single decision, making it crucial to stay sharp and think several moves ahead. It’s like chess, but faster and more accessible. A must-play for any strategy lover!"

+
+ + + + + +
+
+
+ +
+
+ Profile 4 +
+
+

Sophie M

+

Esports Aspirant

+

"I’ve played countless multiplayer games, but few have the perfect blend of strategy and simplicity that Dot-Box offers. The thrill of outsmarting your friends and pulling off a victory from the brink of defeat is unmatched."

+
+ + + + + +
+
+
+ +
+
+ Profile 5 +
+
+

Nilu Sona

+

Game Enthusiast

+

"The game’s design is so clever that it constantly keeps you guessing and adapting. Whether you're setting traps for your opponent or trying to outmaneuver their tactics, there’s always a sense of accomplishment when your plan comes together. It’s one of those games that makes you think, 'Just one more round!' over and over again."

+
+ + + + + +
+
+
+ +
+
+ Profile 6 +
+
+

Jack C

+

Board Game Buff

+

"As someone who loves exploring new games, Dot-Box has been a fantastic discovery. It's simple on the surface but offers layers of depth the more you play. The game’s pacing is perfect for both quick matches and longer sessions, making it versatile for different moods."

+
+ + + + + +
+
+
+
+
+ + + + + + + diff --git a/styles/game.style.css b/styles/game.style.css index 2411d850..72058ac9 100644 --- a/styles/game.style.css +++ b/styles/game.style.css @@ -831,6 +831,7 @@ body { box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); width: 17rem; cursor: move; + z-index: 89; } .scoreboard-container h2 { diff --git a/styles/testimonials.css b/styles/testimonials.css new file mode 100644 index 00000000..7331f3f7 --- /dev/null +++ b/styles/testimonials.css @@ -0,0 +1,196 @@ +body { + background-color: #1c003c; + font-family: 'Arial', sans-serif; + color: white; + margin: 0; + padding: 0; + overflow-x: hidden; +} + +.navbarr { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 20px; + background-color: rgb(28, 0, 60) !important; + position: fixed; + top: 0px; + left: 0px; + width: 100%; + z-index: 300; +} +.mobile-menu__trigger { + cursor: pointer; + content: ""; + position: absolute; + z-index: 3; + width: 3rem; + height: 3rem; + border-radius: 50%; + top: 0.5rem !important; + left: -5rem; + background: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; +} + +.testimonials-container { + padding: 60px 20px; + max-width: 1200px; + margin: auto; +} + +.testimonial-header { + text-align: center; + margin-bottom: 60px; + margin-top: 60px; +} + +.testimonial-header h1 { + font-size: 38px; + color: #f0f0f0; + margin-bottom: 20px; + /* text-shadow: 2px 2px 5px #6200ea; */ + text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue; +} + +.testimonial-header p { + font-size: 18px; + color: #fb9c28; + /* text-shadow: 1px 1px 3px #333; */ + text-shadow: 1px 1px 2px rgb(84, 0, 107), 0 0 1em #4ff0ff, 0 0 0.2em #4ff0ff; +} + +.testimonials { + display: flex; + flex-wrap: wrap; + justify-content: space-around; + gap: 70px; + opacity: 0; + transform: translateY(50px); + transition: opacity 0.5s ease, transform 0.5s ease; + position: relative; +} + +.testimonial-card { + background-color: #380d6f; + padding: 20px; + border-radius: 10px; + width: calc(38% - 30px); + box-shadow: 0 10px 20px rgba(17, 17, 161, 0.4); + position: relative; + text-align: center; + transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, background-color 0.3s ease-in-out; + animation: float 5s ease-in-out infinite; +} + +.testimonial-card:hover { + transform: scale(1.1); + box-shadow: 0 10px 40px rgba(1, 6, 136, 0.853); + background-color: #460c92d8; + +} + +@keyframes float { + 0%, 100% { + transform: translateY(0px); + } + 50%{ + transform: translateY(-10px); + } +} + +.profile-img { + width: 100px; + height: 100px; + border-radius: 50%; + /* margin: 0 auto 20px auto; */ + margin: auto; + overflow: hidden; + border: 3px solid #6200ea; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + transition: box-shadow 0.3s ease, border 0.4s ease-in-out; +} + +.profile-img img { + width: 100%; + height: 100%; + object-fit: cover; +} +.testimonial-card:hover .profile-img { + box-shadow: 0 4px 15px rgba(25, 255, 224, 0.497); + border: 3px solid #eaea00; + +} + +.testimonial-content { + padding: 10px; +} + +.testimonial-name { + font-size: 20px; + font-weight: bold; + color: #f0f0f0; + margin-bottom: 5px; + text-shadow: 2px 2px 5px #000; + transition: text-shadow 0.3s ease-in; +} +.testimonial-card:hover .testimonial-name { + text-shadow: rgb(0, 225, 255) 1px 0 10px; + +} + +.testimonial-role { + font-size: 16px; + /* color: #ddd; */ + color: #ffbb00; + margin-bottom: 15px; + text-shadow: 1px 1px 3px #333; +} + + + +.testimonial-text { + font-size: 14px; + color: #a5e8ff; + margin-bottom: 20px; + text-shadow: 1px 1px 3px #000; +} + + + + +.rating { + display: flex; + justify-content: center; + margin-top: 10px; +} + +.rating i { + color: #ffbf00; + font-size: 18px; + margin: 0 2px; + text-shadow: 1px 1px 3px #000; + transition: text-shadow 0.3s ease-in; +} + +.testimonial-card:hover .rating i { + /* text-shadow: 0px 1px 3px #1403ff; */ + text-shadow: #FC0 1px 0 10px; +} + + + + +@media (max-width: 768px) { + .testimonial-card { + width: calc(50% - 30px); + } +} + +@media (max-width: 480px) { + .testimonial-card { + width: calc(100% - 20px); + } +} \ No newline at end of file