firstVersionOfDiceGame

assets/css/style.css

@@ -0,0 +1,99 @@
+body{
+    background-repeat:repeat !important   ;
+    background-size:4%   ;
+    background-position: center;
+    background-image:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat-back.svg");
+}
+*{
+  box-sizing: border-box;  
+  padding: 0;
+  margin: 0;
+}
+.container{
+    display: flex;
+    justify-content: space-between;
+    align-items: center !important;
+    width:80%;
+    margin:8vw auto;
+    padding-left: 1vw;
+}
+.player{
+    width: 25vw;
+    font-weight: 600;
+    font-size: 1vw;
+    padding: 1rem;
+    text-align: center;
+    border-radius:15%;
+    border-top: 1px springgreen solid;
+    box-shadow: 0px 0px 2.1rem -22px #1da1f26b;
+    -webkit-border-radius:15%;
+    -moz-border-radius:15%;
+    -ms-border-radius:15%;
+    -o-border-radius:15%;
+}
+.playerImg{
+    width: 12vw;
+}
+
+.btns{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.btn{
+    width: 10vw;
+    margin-right: 3vw;
+    background-color:blue ;
+    color: white;
+    text-transform: capitalize;
+    font-weight: bold;
+    font-size: 1.5vw;
+    padding: 1vw;
+    border: 0;
+    border-radius: .5vw;
+    -webkit-border-radius: .5vw;
+    -moz-border-radius: .5vw;
+    -ms-border-radius: .5vw;
+    -o-border-radius: .5vw;
+    box-shadow: 2px 2px 10px 2px rgb(2 2 2 / 30%);
+
+}
+.btn:nth-child(1){
+    background-color: white;
+    color: black;
+}
+.btn:nth-child(2){
+    background-color: black;
+    color: white;
+}
+.btn:nth-child(3){
+    background-color: green;
+    color: white;
+}
+
+.dice{
+    width: 8vw;
+}
+.CustomText{
+    text-transform: capitalize;
+    color: black;
+    margin-right: 1vw;
+}
+.custom{
+    margin-top: 2vw;
+    font-size: 1.5vw;
+    text-align: center;
+}
+.customNumber{
+    background-color: white !important;
+    color: black;
+    width: 10vw;
+    color: white;
+    font-size: 1.5vw;
+    padding: 1vw;
+    border: 0;
+    box-shadow: 2px 2px 10px 2px rgb(2 2 2 / 30%);
+    border-radius: .5vw;
+    text-align: center;
+    margin-bottom: 0vw;
+}

assets/js/main.js

@@ -0,0 +1,133 @@
+var Player = [
+  { Title: "Player 1", TotalScore: 0, currentScore: 0 },
+  { Title: "Player 2", TotalScore: 0, currentScore: 0 },
+];
+var playerIndex = null;
+var imgElement = document.getElementById("#imgs");
+var total1 = document.getElementById("#total1");
+var current1 = document.getElementById("#current1");
+var current2 = document.getElementById("#current2");
+var total2 = document.getElementById("#total2");
+var playerOne = document.getElementById("playerOne");
+var playerTwo = document.getElementById("playerTwo");
+
+function NewGame() {
+  playerOne.style = "background-color : #dddfe647";
+  this.playerIndex = 0;
+  Player[1].TotalScore = 0;
+  Player[0].TotalScore = 0;
+  Player[0].currentScore = 0;
+  Player[1].currentScore = 0;
+  console.log(Player[this.playerIndex].Title);
+  generateScore1();
+  generateScore2();
+  imgElement.innerHTML = `<img src="assets/img/dice1.png" class="dice" alt="" />`;
+}
+function winner(playerIndex) {
+  if (
+    Player[this.playerIndex].TotalScore >= 30 ||
+    Player[this.playerIndex].currentScore >= 30
+  ) {
+    return console.log(
+      `Winner : ${Player[this.playerIndex].Title} \r\n start new game`
+    );
+  }
+}
+
+function resetPlayerScore(random, playerIndex) {
+  if (random == 1) {
+    Player[playerIndex].currentScore = 0;
+    console.log(
+      Player[playerIndex].Title,
+      ": You got num 1 will replace the turn"
+    );
+    this.playerIndex = this.playerIndex === 1 ? 0 : 1;
+  } else {
+    console.log(
+      `current2 score  : ${Player[playerIndex].currentScore} - ${Player[playerIndex].Title}`
+    );
+  }
+}
+function generateDiceImage(random) {
+  imgElement.innerHTML = `<img src="assets/img/dice${random}.png" class="dice" alt="" />`;
+}
+function generateScore2() {
+  let totalScore = Player[1].TotalScore;
+  let currentScore = Player[1].currentScore;
+  if (totalScore == 0) {
+    total2.innerHTML = `Total Is <span style="text-decoration: underline" >00</span>`;
+  } else {
+    total2.innerHTML = `Total Is <span style="text-decoration: underline" >${totalScore}</span>`;
+  }
+  if (currentScore == 0) {
+    current2.innerHTML = `current Is <span style="text-decoration: underline" >00</span>`;
+  } else {
+    current2.innerHTML = `current Is <span style="text-decoration: underline" >${currentScore}</span>`;
+  }
+}
+function generateScore1() {
+  let totalScore = Player[0].TotalScore;
+  let currentScore = Player[0].currentScore;
+  if (totalScore == 0) {
+    total1.innerHTML = `Total Is <span style="text-decoration: underline" >00</span>`;
+  } else {
+    total1.innerHTML = `Total Is <span style="text-decoration: underline" >${totalScore}</span>`;
+  }
+  if (currentScore == 0) {
+    current1.innerHTML = `current Is <span style="text-decoration: underline" >00</span>`;
+  } else {
+    current1.innerHTML = `current Is <span style="text-decoration: underline" >${currentScore}</span>`;
+  }
+}
+function specifyPlayerScore(playerIndex) {
+  if (playerIndex === 0) {
+    generateScore1();
+    playerOne.style = "background-color : #dddfe647";
+    playerTwo.style = "background-color : none";
+  } else if (playerIndex === 1) {
+    playerTwo.style = "background-color : #dddfe647";
+    playerOne.style = "background-color : none";
+    generateScore2();
+  }
+}
+
+function GenerateRandomNumber(playerIndex) {
+  if (Player[this.playerIndex].currentScore >= 30) {
+    winner(this.playerIndex);
+  } else {
+    random = Math.floor(Math.random() * 6 + 1);
+    resetPlayerScore(random, this.playerIndex);
+    let play = Player[this.playerIndex];
+    play.currentScore += random;
+  }
+  generateDiceImage(random);
+}
+function hold(playerIndex) {
+  if (this.playerIndex == null) {
+    console.log("Click On new game");
+  } else {
+    Player[this.playerIndex].TotalScore +=
+      Player[this.playerIndex].currentScore;
+    Player[this.playerIndex].currentScore = 0;
+    console.log(
+      `This is the total score for ${Player[this.playerIndex].Title} : ${
+        Player[this.playerIndex].TotalScore
+      }   we will replece the turn`
+    );
+    this.playerIndex = playerIndex === 1 ? 0 : 1;
+      specifyPlayerScore(this.playerIndex);
+  }
+}
+function roll(playerIndex) {
+  if (this.playerIndex == null) {
+    console.log("Click On new game");
+  } else {
+    if (Player[playerIndex].TotalScore >= 30) {
+      return false;
+    } else {
+      playerIndex = this.playerIndex;
+      GenerateRandomNumber(playerIndex);
+      specifyPlayerScore(this.playerIndex);
+    }
+  }
+}

index.html

@@ -1,13 +1,44 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="assets/css/style.css">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="assets/css/style.css" />
     <title>Document</title>
 </head>
+
 <body>
-
+    <div class="container">
+        <div class="player" id="playerOne">
+            <img src="assets/img/PlayerOne.png" class="playerImg" alt="" />
+            <h2 style="color: #0e0091">Player 1</h2>
+            <p id="#total1">Total Is </p>
+            <p id="#current1">Current Is </p>
+
+        </div>
+        <div class="img" id="#imgs">
+            <img src="assets/img/dice1.png" id="#img-1" class="dice" alt="" />
+        </div>
+        <div class="player" id="playerTwo">
+            <img src="assets/img/PlayerTwo.png" class="playerImg" alt="" />
+            <h2 style="color: #0e0091">Player 2</h2>
+            <p id="#total2">Total Is </p>
+            <p id="#current2">Current Is </p>
+        </div>
+    </div>
+    <section class="gameSettings">
+        <div class="btns">
+            <button id="#roll" class="btn" onclick="roll(playerIndex)">roll</button>
+            <button id="#hold" class="btn" onclick="hold(playerIndex)">hold</button>
+            <button id="#NewGame" class="btn" onclick="NewGame()">New game</button>
+        </div>
+        <div class="custom">
+            <span class="CustomText">you can custom final score</span>
+            <input id="#" type="number" placeholder="30"  class="customNumber" onclick="">
+        </div>
+    </section>
     <script src="assets/js/main.js"></script>
 </body>
+
 </html>