rock-paper-scissore assignment

css/style.css

@@ -0,0 +1,69 @@
+body{
+            background-color:#601155;
+            display: flex;
+            flex-direction: row;
+            height: 100vh;
+            padding: 0px;
+            margin: 0px;
+            color: white;
+            font-family: 'Chilanka', cursive;
+        }
+        .container{
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            width: 75%;
+            padding: 30px;
+        }
+        .score{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: center;
+            min-height: 150px;
+            font-size: 40px;
+
+        }
+        .score div{
+            min-width: 20%;
+        }
+        .arena{
+            display: flex;
+            flex-direction: row;
+            justify-content: space-around;
+            align-items: center;
+            min-height: 450px;
+            font-weight: bold;
+            font-size: 50px;
+        }
+        .arena img{
+            width: 350px;
+        }
+
+        #rounds{
+            background-color: #c8e615;
+            width: 18%;
+            height: 100%;
+            border-right: 20px dashed #601155;
+            padding: 50px 20px 10px 40px;
+            color: #601155;
+        }
+        #player, #computer{
+            border: 4px solid #c8e615;
+            font-size: 30px;
+            padding: 20px 20px 10px 20px;
+        }
+
+        button{
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+        }
+        i{
+            color: #c8e615;
+            margin: 5px 40px;
+        }
+        a{
+            color: #c8e615;
+            font-size: 26px;
+        }

game.js

@@ -1,3 +1,74 @@
-// Write all your code here
-// Replace the contents of this file with your own code
-console.log('Hello, world!');
+const choices = ['rock', 'paper', 'scissors'];
+
+function computerPlay() {
+    return choices[Math.floor(Math.random() * choices.length)];
+}
+
+function userPlay(playAgain){
+    let msg = (playAgain) ? "Invalid input ...\n please chose one of : rock, paper or scissors":"Lets Play ...\n chose one of : rock, paper or scissors";
+    let player = prompt(msg);
+    //check if player submited a good value, if yes return player input or prompt again
+    return (!choices.includes(player.toLowerCase())) ? userPlay(1): player.toLowerCase();
+}
+
+function playRound() {
+    let player = userPlay();
+    let computer = computerPlay();
+    let result = "";
+
+    if(player === computer){
+        return "Deaw..!! Play again";
+    }
+
+
+    let computerWin = "COMPUTER WIN :|";
+    let playerWin = "YOU WIN :)";
+
+    if(player === "rock"){
+        result = (computer === "scissors")? playerWin:computerWin;
+    }else if(player === "scissors"){
+        result = (computer === "rock")? computerWin:playerWin;
+    }else if(player === "paper"){
+        result = (computer === "rock")? playerWin:computerWin;
+    }
+
+    let winer = (result === computer)? computer:player;
+    let loser = (result === computer)? player:computer;
+
+    result = `${result} \n ${winer} beats ${loser}`;
+    return result;
+}
+
+function game(rounds = 5){
+    let report = {
+        rounds:[],
+        score:[]
+    };
+
+    report.score['player'] = 0;
+    report.score['computer'] = 0;
+
+    let i = 0;
+    while(i < rounds){
+        let round = playRound();
+        console.log(round);
+        //add this round to the report
+        report.rounds.push(round);
+
+        if(round !== "Deaw..!! Play again"){
+            if(round.includes("YOU WIN")){
+                report.score['player'] = report.score['player'] + 1;
+            }else{
+                report.score['computer'] = report.score['computer'] + 1;
+            }
+            i++;
+        }
+
+    }
+    report.finalResult = (report.score['computer'] > report.score['player'])? `Computer win ${report.score['computer']} of ${rounds}`:`You win ${report.score['player']} of ${rounds}`;
+    return report;
+    //this will return an pbject ,, includes the result of each game, and the score for both player and computer, and final result (who win)
+}
+
+
+console.log(game());

index.html

@@ -3,8 +3,60 @@
 <head>
     <meta charset="UTF-8">
     <title>Rock, Paper, Scissors!</title>
-    <script src="game.js" defer></script>
+    <script src="js/game.js" defer></script>
+
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
+
+    <link href="https://fonts.googleapis.com/css?family=Chilanka&display=swap" rel="stylesheet">
+
+    <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
+
+    <div id="rounds">
+        <h2>Rounds :</h2>
+        <ul id="rounds-list">
+
+        </ul>
+    </div>
+
+    <div class="container">
+
+        <div class="score">
+            <div id="player">
+                YOU :
+                <span>0</span>
+            </div>
+
+            <div id="result">
+
+            </div>
+
+            <div id="computer">
+                COUMPUTER :
+                <span>0</span>
+            </div>
+        </div>
+
+        <div class="buttons">
+            <button id="rock"><i class="fab fa-cloudversify fa-9x"></i></button>
+            <button id="paper"><i class="fas fa-leaf fa-9x"></i></button>
+            <button id="scissors"><i class="fas fa-cut fa-9x"></i></button>
+        </div>
+
+        <div class="arena">
+            <div id="player-choice">
+                <img src="https://i.pinimg.com/originals/7c/c7/a6/7cc7a630624d20f7797cb4c8e93c09c1.png" alt="">
+            </div>
+            <div> VS </div>
+            <div id="computer-choice">
+                <img src="https://image.flaticon.com/icons/svg/2098/2098147.svg" alt="">
+            </div>
+        </div>
+
+
+
+
+    </div>
 </body>
 </html>

js/game.js

@@ -0,0 +1,141 @@
+//LISTENER ,, to make action when a button clicked
+document.getElementById('rock').addEventListener('click', function(e){
+    let round = playRound('rock', computerPlay());
+});
+document.getElementById('paper').addEventListener('click', function(e){
+    let round = playRound('paper', computerPlay());
+});
+document.getElementById('scissors').addEventListener('click', function(e){
+    let round = playRound('scissors', computerPlay());
+});
+
+//p = player score, c = computer score ,, just to count till 5 and one of them win
+let p = 0 , c= 0;
+const choices = ['rock', 'paper', 'scissors'];
+
+//add images as the choices of player and computer
+function arenaImages(player, computer){
+    //show images
+    document.getElementById('player-choice').innerHTML = `<img src="images/${player}.png">`;
+    document.getElementById('computer-choice').innerHTML = `<img src="images/${computer}.png">`;
+}
+
+//get random choice for computer play
+function computerPlay() {
+    return choices[Math.floor(Math.random() * choices.length)];
+}
+
+//start a game and get winner and loser :)
+function playRound(player, computer) {
+    arenaImages(player, computer)
+    //select the score element to change it after this round
+    let playerScore = document.querySelector('#player span');
+    let computerScore = document.querySelector('#computer span');
+
+
+    // let player = userPlay();
+    // let computer = computerPlay();
+    let result = "";
+
+    //check if both player and computer have the same choice
+    if(player === computer){
+        document.getElementById('result').innerHTML = "Deaw.. 😑 😶 !! Play again";
+
+        //create element to add it to the rounds element
+        let roundResult = document.createElement('li');
+        roundResult.innerHTML = "Deaw.. 😑 😶 !!";
+        document.getElementById('rounds-list').appendChild(roundResult);
+
+        //the retern was for the old version
+        return "Deaw.. 😑 😶 !! Play again";
+    }
+
+    //defined the content for round result
+    let computerWin = "COMPUTER WIN 😡 🤬 <br>";
+    let playerWin = "YOU WIN 🤪 💪 <br>";
+
+    //check who win ?
+    if(player === "rock"){
+        result = (computer === "scissors")? playerWin:computerWin;
+    }else if(player === "scissors"){
+        result = (computer === "rock")? computerWin:playerWin;
+    }else if(player === "paper"){
+        result = (computer === "rock")? playerWin:computerWin;
+    }
+
+    let winer = (result === computerWin)? computer:player;
+    let loser = (result === computerWin)? player:computer;
+    (result === playerWin) ? p++:c++;
+
+    //increase the score for winner
+    playerScore.textContent = p;
+    computerScore.textContent = c;
+    if(p === 5 || c === 5){
+        //finish the game if computer or player hits score 5
+        finishTheGame();
+    }
+
+    result = `${result} \n ${winer} beats ${loser}`;
+    let roundResult = document.createElement('li');
+    roundResult.innerHTML = result;
+    document.getElementById('rounds-list').appendChild(roundResult);
+    document.getElementById('result').innerHTML = result;
+    return result;
+}
+
+//delete the buttons and show a link (play again) to restart the game
+function finishTheGame() {
+    console.log(c);
+    console.log(p);
+    let text = "LOSER";
+    if(p > c){
+        text = "winner winner chicken dinner";
+    }
+    document.querySelector('.buttons').innerHTML = `<h1>${text}</h1><p><a href="">play again</a></p>`;
+}
+
+
+
+
+//THIS WORKS WITH THE OLD VERSION ..
+/*
+function game(rounds = 5){
+    let report = {
+        rounds:[],
+        score:[]
+    };
+
+    report.score['player'] = 0;
+    report.score['computer'] = 0;
+
+    let i = 0;
+    while(i < rounds){
+        let round = playRound(userPlay(), computerPlay());
+        console.log(round);
+        //add this round to the report
+        report.rounds.push(round);
+
+        if(round !== "Deaw..!! Play again"){
+            if(round.includes("YOU WIN")){
+                report.score['player'] = report.score['player'] + 1;
+            }else{
+                report.score['computer'] = report.score['computer'] + 1;
+            }
+            i++;
+        }
+    }
+    report.finalResult = (report.score['computer'] > report.score['player'])? `Computer win ${report.score['computer']} of ${rounds}`:`You win ${report.score['player']} of ${rounds}`;
+    return report;
+    //this will return an pbject ,, includes the result of each game, and the score for both player and computer, and final result (who win)
+}
+
+
+function userPlay(playAgain){
+    let msg = (playAgain) ? "Invalid input ...\n please chose one of : rock, paper or scissors":"Lets Play ...\n chose one of : rock, paper or scissors";
+    let player = prompt(msg);
+    //check if player submited a good value, if yes return player input or prompt again
+    return (!choices.includes(player.toLowerCase())) ? userPlay(1): player.toLowerCase();
+}
+
+ //console.log(game());
+*/