add a pig game project

.gitignore

@@ -0,0 +1,2 @@
+bootstrap
+font-awesome

pig game project/README.md

@@ -0,0 +1,8 @@
+in this project I use
+1- HTML
+2- CSS
+        a. bootstrap
+        b. font-awesome
+3- javascript
+
+by Abdulwahed talash

pig game project/app.js

@@ -0,0 +1,113 @@
+
+/*
+Game RULES:
+- The game has 2 players, playing in rounds 
+- In each turn, a player rolls a dice as many times as he whishes. Easch esult geet added to his ROUND score
+- BUT, if the player rolls a 1, all his ROUND score gets localStorage. After OES_texture_half_float_linear,
+   it's the next player's turn 
+- the player can chosse to 'hold', which means thet his ROUND score gets added to his GLBAL score.
+  After OES_texture_half_float_linear, it's the next player's turn
+- the first player to reach 100 points on GLOBAL score wins the  game  
+-two time six come you will lose all your score  */
+
+  //  important variable
+var score = [0,0]  , roundScore = 0 , activePlayer = 0 ,i=0,dice,WinngScore = 100;
+const newGame = document.querySelector(".newGame"),
+      circle0 = document.querySelector("#player0-circle"),
+      circle1 = document.querySelector("#player1-circle"), 
+      current0 = document.querySelector("#current-0"),
+      current1 = document.querySelector("#current-1"), 
+      rollDice = document.querySelector("#dice"),
+      hold = document.querySelector("#hold")
+      diceImage = document.querySelector(".dice-image");
+
+
+  diceImage.style.display = 'none';
+
+  // add event listener to ROLL DICE 
+
+  rollDice.addEventListener('click',function(){
+    // change icon color and reverse 
+    document.querySelector(".fa-refresh").classList.add("reverse");
+    // my icon should rotate over and over so i use setTimeout function to remove reverse function
+    setTimeout(function(){document.querySelector(".fa-refresh").classList.remove("reverse");},1000)
+    // rondam number
+    dice = Math.floor(Math.random()*6)+1;
+    // display the result
+    diceImage.style.display = 'block';
+    // document.querySelector('#score-' + roundScore).textContent = dice;
+    document.querySelector('.dice-image').src= `img/dice-${dice}.png`;
+    // Update the round score if the rolled number was not 1 
+    if (dice !== 1) {
+      roundScore += dice;
+      document.querySelector("#current-" + activePlayer).textContent = roundScore;
+    }else{
+      nextPlayer();
+    }
+    // two time six come you will lose all your score
+    if (activePlayer == 0) {
+      TwoTimeSix();
+    }
+    else if(activePlayer == 1){
+      TwoTimeSix();
+    } 
+  })
+
+  document.querySelector("#hold").addEventListener("click",function(){
+  // move current value to global value 
+  score[activePlayer] += roundScore;
+  document.querySelector("#score-" + activePlayer).textContent = score[activePlayer]; 
+  // change icon color and reverse 
+  // document.querySelector(".fa-download").style.transform = "rotate(180deg)";
+  // document.querySelector(".fa-download").style.transition = "transform 1s ease";
+
+
+  // if player won the game 
+  if (score[activePlayer] >= WinngScore) {
+    document.querySelector('#player-'+activePlayer).innerHTML = "<span style='color:green; margin-left:30px;'>Winner!🥳</span>";
+    document.querySelector('#player-'+(activePlayer ==0 ?activePlayer = 1:activePlayer = 0)).innerHTML = "<span style='color:red; margin-left:2px;'>Losser!😔</span>";
+    rollDice.disabled ="disabled";
+    hold.disabled="disabled";
+    circle0.remove("fa-circle");
+    circle1.remove("fa-circle");
+    diceImage.style.display ="none";
+  }
+  //next player
+  nextPlayer();
+
+})
+
+// next player function 
+
+function nextPlayer(){
+     roundScore = 0;
+    document.querySelector("#current-" + activePlayer).textContent = 0;
+    activePlayer == 0 ? activePlayer = 1 : activePlayer = 0;
+    circle0.classList.toggle("fa-circle");
+    circle1.classList.toggle("fa-circle");
+    document.querySelector('.left-div').classList.toggle("active-background");
+    document.querySelector('.right-div').classList.toggle("active-background");
+}
+
+// new game button
+newGame.addEventListener('click',function(){
+  window.location.reload();
+})
+// two time six function 
+
+function TwoTimeSix(){
+  if (dice != 6) {
+    i =0
+  }
+  else  {
+    ++i;
+   hold.onclick = function(){i=0}
+    if (i == 2) {
+        document.querySelector("#score-" + activePlayer).textContent = 0; 
+        nextPlayer();
+      i= 0;
+    } 
+    setTimeout(function(){i=0},2000);
+
+  }
+}

pig game project/index.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
+    <link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
+    <link rel="stylesheet" href="font-awesome/css/font-awesome.css">
+    <title>Pig Game</title>
+</head>
+<body>
+    <div class="container">
+        <div class="row ">
+            <div class="new-game">
+                <span class="fa fa-plus-circle new-game-span "></span>
+                <input type="button" value="NEW GAME" class="newGame">
+            </div>
+            <div class="left-div active-background">
+                <h1 class="playerText" id="player-0">PLAYER 1</h1>
+                <span class="fa fa-circle text-danger " id="player0-circle"></span>
+                <div class="point" id="point1">
+                    <p class="point-p text-danger display-3" id="score-0">0</p>
+                </div>
+                <div class="current bg-danger" id="">
+                    <p class="pt-2">Current</p>
+                    <p class="text-light current-point" id="current-0">0</p>
+                </div>
+            </div>
+            <div class="right-div ">
+                <h1 class="playerText" id="player-1">PLAYER 2</h1>
+                <span class="fa  text-danger" id="player1-circle"></span>
+                <div class="point" id="point2">
+                    <p class="point-p text-danger display-3" id="score-1">0</p>
+                </div>
+                <div class="current bg-danger" id="">
+                    <p class="pt-2">Current</p>
+                    <p class="text-light current-point" id="current-1">0</p>
+                </div>
+            </div>
+            <div class="roll-dice">
+                <button class=" " id="dice" > <span class="fa fa-refresh "></span>ROLL DICE</button>
+                <button class="" id="hold"> <span class="fa fa-download"></span>HOLD</button>
+            </div>
+            <img src="img/dice-1.png" class="dice-image" alt="" srcset="">
+        </div>
+    </div>
+
+
+
+    <script src="app.js"></script>
+</body>
+</html>

pig game project/style.css

@@ -0,0 +1,96 @@
+*{
+    font-family:'Courier New', Courier, monospace;
+}
+body{
+    background:tan !important;
+}
+.row{
+    width: 80%;
+    height: 450px;
+    position: relative;
+    margin-top: 60px;
+    margin-left: 100px !important;
+
+}
+.left-div{
+    width: 50%;
+    background-color: rgba(255, 255, 255, 0.5);
+}
+.right-div{
+    width: 50%;
+        background-color: rgba(255, 255, 255, 0.5);
+}
+.active-background{
+    background-color:#e9ecef;
+}
+.new-game{
+    position: absolute;
+     margin: 20px 0 0 44%; /* top right bottom left  */
+
+}
+.new-game-span{
+    position: absolute;
+    font-size: 23px !important;
+    margin-left:-20px !important;
+    margin-top: 7px !important;
+
+}
+.new-game input{
+    font-size: 24px;
+    word-spacing: -7px;
+    background: transparent;
+    border: none;
+
+}
+.roll-dice{
+    position: absolute;
+    margin: 36% 0 0 40%;
+    font-size: 23px;
+}
+#dice ,#hold{
+    display: block;
+    margin-bottom: 23px;
+    background: transparent;
+    border: none;
+    outline: none;  
+}
+#hold:hover{
+
+    margin-top: 2px !important;
+    /* transition: all 1s ease; */
+    float: left;
+
+}
+#hold{
+    margin-left: 31px;
+}
+.reverse{
+  transform : rotate(180deg) !important;
+  transition : transform 1s ease !important;
+}
+.playerText{
+    margin: 80px 0 0 110px;
+}
+.fa-circle{
+    position: absolute;
+    margin:-33px 0 0 318px;
+    /* display: none !important;  */
+}
+.point{
+    margin: 0px 0 0 173px;
+}
+.current{
+    width: 100px;
+    height: 80px;
+    text-align: center;
+    margin: 116px 0 0 150px;
+}
+.current-point{
+    font-size: 35px;
+    margin-top: -20px;
+}
+.dice-image{
+    position: absolute;
+    width: 90px;
+    margin: 166px 0 0 390px;
+}