Skip to content

Commit

Permalink
Merge branch 'navbar' of https://github.com/hars-21/Dot-Box into navbar
Browse files Browse the repository at this point in the history
  • Loading branch information
@hars-21
hars-21 committed Aug 9, 2024
2 parents 57572d5 + 4ab385e commit 39f3122
Show file tree
Hide file tree
Showing 7 changed files with 402 additions and 4 deletions.
Binary file added assets/sounds/pop.mp3
View file
Binary file not shown.
Binary file added assets/testimonial-Favi.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
21 changes: 17 additions & 4 deletions js/game.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand All @@ -112,17 +109,33 @@ 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);
const playerIndex = playerData.indexOf(player);
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) {
Expand Down
1 change: 1 addition & 0 deletions pages/game.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,5 +251,6 @@ <h3>Step 7</h3>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/[email protected]/tsparticles.confetti.bundle.min.js"></script>
</body>
</html>
187 changes: 187 additions & 0 deletions pages/testimonials.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testimonials - Dot-Box </title>
<link rel="shortcut icon" href="../assets/testimonial-Favi.png" type="image/x-icon">
<link rel="stylesheet" href="../styles/testimonials.css">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
/>
</head>
<body>
<nav class="navbarr" style="color: white">
<div class="logo">
<a href="../index.html">Dots & Boxes ⚄</a>
</div>

<ul class="nav-links" id="nav-links-toggled">
<li><a href="../index.html"><i class="fas fa-home">Home</i></a></li>
<li><a href="../pages/about.html"><i class="fas fa-info-circle"></i> AboutUs</a></li>
<li><a href="../pages/FAQs.html"><i class="fas fa-question-circle"></i> FAQs</a></li>
<li><a href="../pages/contributors.html"><i class="fas fa-users"></i> Contributors</a></li>

</ul>

<nav class="mobile-menu">
<div class="mobile-menu__trigger"><span></span></div>
<a class="page-scroll active-link" href="/index.html">Home </a>
<a class="page-scroll" href="/pages/about.html">About Us </a>
<a class="page-scroll" href="/pages/FAQs.html">FAQs</a>
<a class="page-scroll" href="/pages/contributors.html">Contributors</a>
</nav>

<!-- Js and CSS files for hamburger-menu -->
<link href="../styles/navbar.css" rel="stylesheet" />
<script type="text/javascript" src="../js/navbar.js"></script>
</nav>
<div class="testimonials-container">
<div class="testimonial-header">
<h1>What Players Say About Dot-Box?</h1>
<p>Discover what our passionate community of gamers has to say about Dot-Box, <br>From casual gamers to competitive strategists, players of all levels are raving about their experiences. </p>
</div>
<div class="testimonials">
<!-- Testimonial Card 1 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/16.png" alt="Profile 1">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Jess K</h3>
<p class="testimonial-role">Gamer Enthusiast</p>
<p class="testimonial-text">"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!"
</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- Testimonial Card 2 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/11.png" alt="Profile 2">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Ryan L </h3>
<p class="testimonial-role">Competitive Player</p>
<p class="testimonial-text">"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!"</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 3 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/12.png" alt="Profile 3">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">David Miller</h3>
<p class="testimonial-role">Puzzle Lover</p>
<p class="testimonial-text">"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!"</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<!-- Testimonial Card 4 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/6.png" alt="Profile 4">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Sophie M</h3>
<p class="testimonial-role">Esports Aspirant</p>
<p class="testimonial-text">"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."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 5 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/15.png" alt="Profile 5">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Nilu Sona</h3>
<p class="testimonial-role">Game Enthusiast</p>
<p class="testimonial-text">"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."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<!-- Testimonial Card 6 -->
<div class="testimonial-card">
<div class="profile-img">
<img src="../assets/avatars/8.png" alt="Profile 6">
</div>
<div class="testimonial-content">
<h3 class="testimonial-name">Jack C</h3>
<p class="testimonial-role">Board Game Buff</p>
<p class="testimonial-text">"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."</p>
<div class="rating">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
</div>
</div>

<!-- Add Font Awesome for the stars icons -->
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>

<script>
// Adding scroll reveal animation
document.addEventListener('DOMContentLoaded', function() {
const testimonials = document.querySelector('.testimonials');
window.addEventListener('scroll', function() {
const revealPoint = 0;
const windowHeight = window.innerHeight;
const testimonialsTop = testimonials.getBoundingClientRect().top;
if (testimonialsTop < windowHeight - revealPoint) {
testimonials.style.opacity = '1';
testimonials.style.transform = 'translateY(0)';
}
});

// Adding random movement animation to cards
const cards = document.querySelectorAll('.testimonial-card');
cards.forEach(card => {
setInterval(() => {
const x = Math.floor(Math.random() * 7) - 2; // Random number between -2 and 2
const y = Math.floor(Math.random() * 7) - 2; // Random number between -2 and 2
card.style.transform = `translate(${x}px, ${y}px)`;
}, 1000); // Adjust the speed as necessary
});
});
</script>
</body>
</html>
1 change: 1 addition & 0 deletions styles/game.style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 39f3122

Please sign in to comment.