Version 1.1.0

HassaniDev · Oct 9, 2024 · 7d4b86f · 7d4b86f
1 parent 2c07d0c
commit 7d4b86f
Show file tree

Hide file tree

Showing 37 changed files with 555 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,32 @@
+# Node.js dependencies
+node_modules/
+
+# Build output
+dist/
+build/
+
+# Logs
+logs
+*.log
+
+# Environment variables
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# Temporary files
+*.tmp
+*.temp
+
+# IDE specific files
+.vscode/
+.idea/
+
+# OS generated files
+.DS_Store
+Thumbs.db
+
+# Package lock files (if you're using yarn)
+yarn-error.log
diff --git a/README.md b/README.md
@@ -1 +1,75 @@
-# Dice-Game
+# Dice Game 🎲
+
+A simple two-player dice game built with vanilla JavaScript. Players take turns rolling a dice to accumulate points, but rolling a 1 resets their current score. The first player to reach **100 points** wins.
+
+This project demonstrates core JavaScript concepts like **DOM manipulation**, **event handling**, and **game logic**.
+
+## 📝 Features
+
+- 🎲 **Two-player game**: Players take turns to roll a dice and accumulate points.
+- ❌ **Rolling a 1 resets the current score**: Rolling a 1 will reset the player’s round score, and the turn is passed to the next player.
+- 🏆 **Winning condition**: The first player to reach **100 points** wins the game.
+- 🖱️ **Interactive buttons**: Includes buttons for rolling the dice, holding the score, and resetting the game.
+- 💻 **Vanilla JavaScript**: Built with modern JavaScript using DOM manipulation and event handling.
+
+## 🚀 How to Play
+
+1. **Roll the dice**: Click on the "Roll Dice" button to roll the dice. The result is added to your current score unless you roll a 1.
+2. **Hold your score**: Click "Hold" to save your current score to your total score. It’s then the next player's turn.
+3. **Watch out for the 1!**: If you roll a 1, your current score is reset, and your turn ends.
+4. **Win the game**: Be the first player to reach 100 points to win!
+
+## 💻 Technologies Used
+
+- **HTML**
+- **CSS**
+- **JavaScript (Vanilla JS)**
+
+## 🏗️ MVC Architecture
+
+This project is structured using the MVC (Model-View-Controller) architecture, which helps in organizing the code and separating concerns.
+
+- **Model**: Represents the data and the business logic of the application.
+- **View**: Handles the presentation layer, displaying the user interface.
+- **Controller**: Manages user input and interacts with both the Model and View to update the UI accordingly.
+
+## 🎮 Demo
+
+You can play the game live [here](#). _(This link isn't available yet)_
+
+## 📂 Installation
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/your-username/dice-game.git
+   ```
+
+1. Navigate to the project folder
+
+   ```bash
+   cd dice-game
+   ```
+
+1. Open the `index.html` file with a live server (e.g., using the Live Server extension in VS Code) to start playing, or just Open the `index.html` file in your browser to start playing.
+
+## 🔇 Sound Control
+
+If you prefer to play the game without sound, please feel free to mute your browser tab or computer. The button click sound is included to enhance the experience, but your enjoyment is what matters most! 🎮
+
+## 🔧 Future Improvements
+
+- ⚙️ Add more game settings (e.g., changing the target score).
+- 🎮 Implement single-player mode.
+- 📱 Improve mobile responsiveness.
+- 🎵 Add background soft music to enhance focus, with an option for the player to disable or mute the music.
+
+## 🏅 Credits
+
+- **[Hassani](https://github.com/HassaniDev)** (Owner)
+- **[Jonas Schmedtmann](https://codingheroes.io/)** for the JavaScript course that inspired this project.
+- **[GitHub Copilot](https://github.com/features/copilot)** for assistance with coding and documentation.
+
+## 📄 License
+
+This project is licensed under the [MIT License](https://opensource.org/license/mit) - see the LICENSE file for details.
diff --git a/src/CSS/style.css b/src/CSS/style.css
@@ -0,0 +1,275 @@
+:root {
+  --primary-color: #0419a7;
+  --white: #fff;
+  --black: #000;
+  --gray: #444;
+  --dark-gray: #333;
+  --light-gray: #ddd;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: inherit;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Nunito', sans-serif;
+  font-weight: 400;
+  height: 100vh;
+  color: var(--dark-gray);
+  background: var(--white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* LAYOUT */
+main {
+  position: relative;
+  width: 100rem;
+  height: 60rem;
+  background-color: rgba(255, 255, 255, 0.35);
+  backdrop-filter: blur(200px);
+  filter: blur();
+  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
+  border-radius: 9px;
+  overflow: hidden;
+  display: flex;
+}
+
+.player {
+  flex: 50%;
+  padding: 9rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: all 0.75s;
+}
+
+/* ELEMENTS */
+.name {
+  color: var(--primary-color);
+  position: relative;
+  font-size: 4rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  word-spacing: 2px;
+  font-weight: 300;
+  margin-bottom: 1rem;
+  opacity: 0.5;
+}
+
+.score {
+  font-size: 8rem;
+  font-weight: 300;
+  color: var(--primary-color);
+  margin-bottom: auto;
+  opacity: 0.5;
+}
+
+.player--active {
+  background-color: rgb(205, 210, 241, 0.5);
+}
+.player--active .name {
+  font-weight: 700;
+  opacity: 1;
+}
+
+.player--active .score {
+  font-weight: 400;
+  opacity: 1;
+}
+
+.player--active .current {
+  opacity: 1;
+}
+
+.current {
+  background-color: var(--primary-color);
+  opacity: 0.5;
+  border-radius: 9px;
+  color: var(--white);
+  width: 65%;
+  padding: 2rem;
+  text-align: center;
+  transition: all 0.75s;
+}
+
+.current-label {
+  text-transform: uppercase;
+  margin-bottom: 1rem;
+  font-size: 1.7rem;
+  color: var(--light-gray);
+}
+
+.current-score {
+  font-size: 3.5rem;
+}
+
+/* ABSOLUTE POSITIONED ELEMENTS */
+.btn {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  color: var(--gray);
+  background: none;
+  border: none;
+  font-family: inherit;
+  font-size: 1.8rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  font-weight: 400;
+  transition: all 0.2s;
+
+  background-color: var(--white);
+  background-color: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(10px);
+
+  padding: 0.7rem 2.5rem;
+  border-radius: 50rem;
+  box-shadow: 0 1.75rem 3.5rem rgba(0, 0, 0, 0.1);
+}
+
+.btn::first-letter {
+  font-size: 2.4rem;
+  display: inline-block;
+  margin-right: 0.7rem;
+}
+
+.btn--new {
+  top: 4rem;
+}
+.btn--roll {
+  top: 39.3rem;
+}
+.btn--hold {
+  top: 46.1rem;
+}
+
+.btn:active {
+  transform: translate(-50%, 3px);
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
+}
+
+.btn:focus {
+  outline: none;
+}
+
+.dice {
+  position: absolute;
+  left: 50%;
+  top: 16.5rem;
+  transform: translateX(-50%);
+  height: 10rem;
+  box-shadow: 0 2rem 5rem rgba(0, 0, 0, 0.2);
+  border-radius: 12px;
+  z-index: 5;
+}
+
+.player--winner {
+  background-image: url('../Images/Half-tone-bw-pattern.jpg');
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  position: relative;
+  opacity: 0.9;
+}
+
+.player--winner::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--primary-color);
+  mix-blend-mode: multiply;
+}
+
+.player--winner .score,
+.player--winner .name {
+  color: var(--white) !important;
+  animation: pulse 0.7s infinite ease;
+  z-index: 10;
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1; /* Start and end color: solid white */
+  }
+  50% {
+    opacity: 0.3; /* Color at the halfway point: fully transparent */
+  }
+}
+
+.player--winner .name {
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+.player--winner .current {
+  outline: 4px solid rgb(255, 255, 255, 0.5);
+}
+
+.player--winner .current-score,
+.player--winner .current-label {
+  color: var(--white);
+}
+
+.player--winner .current {
+  display: none;
+}
+
+.winner {
+  display: none;
+}
+
+.player--winner .winner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 3.2rem;
+  font-family: inherit;
+  color: var(--white);
+  z-index: 10;
+}
+
+.player--winner .icon {
+  font-size: 5rem;
+}
+
+.player--winner .message {
+  font-size: 4rem;
+}
+
+.player--winner .stats {
+  font-size: 1.6rem;
+  font-weight: 200;
+}
+
+.sparkles {
+  position: absolute;
+  display: none;
+  top: 15%;
+  left: 30%;
+  transform: translate(-50%, -50%);
+  transform: scale(1.1);
+  z-index: 10;
+  /* width: 100%;
+  height: 100%; */
+  /* border: 2px solid red; */
+}
+
+/* To hide the dice */
+.hidden {
+  display: none;
+}
diff --git a/src/Images/Abstract-pattern.jpg b/src/Images/Abstract-pattern.jpg
diff --git a/src/Images/Gray-abstract.jpg b/src/Images/Gray-abstract.jpg
diff --git a/src/Images/Half-tone-bw-pattern.jpg b/src/Images/Half-tone-bw-pattern.jpg
diff --git a/src/Images/Half-tone-bw.jpg b/src/Images/Half-tone-bw.jpg
diff --git a/src/Images/Half-tone-bw1.jpg b/src/Images/Half-tone-bw1.jpg
diff --git a/src/Images/Half-tone-bw2.jpg b/src/Images/Half-tone-bw2.jpg
diff --git a/src/Images/Halftone-bw-pattern.jpg b/src/Images/Halftone-bw-pattern.jpg
diff --git a/src/Images/Leopard-bw.jpg b/src/Images/Leopard-bw.jpg
diff --git a/src/Images/Leopard-pattern-bw.jpg b/src/Images/Leopard-pattern-bw.jpg
diff --git a/src/Images/Leopard-pattern.jpg b/src/Images/Leopard-pattern.jpg
diff --git a/src/Images/Tiger-pattern-bw.jpg b/src/Images/Tiger-pattern-bw.jpg
diff --git a/src/Images/Zebra-pattern.jpg b/src/Images/Zebra-pattern.jpg
diff --git a/src/Images/Zebra-wavy-pattern.jpg b/src/Images/Zebra-wavy-pattern.jpg
diff --git a/src/Images/dice-1.png b/src/Images/dice-1.png
diff --git a/src/Images/dice-2.png b/src/Images/dice-2.png
diff --git a/src/Images/dice-3.png b/src/Images/dice-3.png
diff --git a/src/Images/dice-4.png b/src/Images/dice-4.png
diff --git a/src/Images/dice-5.png b/src/Images/dice-5.png
diff --git a/src/Images/dice-6.png b/src/Images/dice-6.png
diff --git a/src/Images/favicon.png b/src/Images/favicon.png
diff --git a/src/Images/leopard-bw-pattern.jpg b/src/Images/leopard-bw-pattern.jpg
diff --git a/src/Images/leopard-skin-pattern.jpg b/src/Images/leopard-skin-pattern.jpg
diff --git a/src/Images/sparkles.gif b/src/Images/sparkles.gif
diff --git a/src/Images/zebra-halftone.jpg b/src/Images/zebra-halftone.jpg
diff --git a/src/JS/config.js b/src/JS/config.js
@@ -0,0 +1,5 @@
+'use strict';
+
+// exporting a default constant
+const WINNING_SCORE = 100;
+export default WINNING_SCORE;