123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
  
  <div class="disclaimer-rules">
    <p>
      <strong>Disclaimer: </strong>Hello! This little project idea comes from <a href="https://www.udemy.com/the-complete-javascript-course/">"The Complete Javascript Course"</a>  by <strong>Jonas Schmedtmann</strong>. This is my own version and a lot of things may be different as I attempted the project on my own and corrected it afterwards with a few things from the course itself.
    </p>
    <p><strong>The rules: </strong>The player must roll the dice, accumulating points which are shown under the "Current Round Score". If the player rolls a 1 he loses all of his points and it will be the turn of the other player. You can Hold your points and then your turn will pass as well. First player to accumulate up to 30 points will win the game.</p>
  </div>
  
  <div class="score-setter-wrap">
    <input type="number" id="winningScoreNum" value="30">
    <input type="submit" id="submitWinningScore" value="Set the Winning Score">
  </div>
  
  <div class="mainwrap">
    
    <!-- Buttons -->
    <div class="new-game">
      <i class="fas fa-plus"></i> <span>New Game</span>
    </div>
    
    <div class="roll-dice">
      <i class="fas fa-circle-notch"></i><span> Roll Dice</span>
    </div>
    
    <div class="hold">
      <i class="fas fa-piggy-bank"></i><span> Hold</span>
    </div>
    
    <!-- dice -->
    <div class="dice">
      <div id="one" class="dice-numbers number1"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-1_gznqdp.jpg" alt=""></div>
      <div id="two" class="dice-numbers number2"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-2_f3varq.jpg" alt=""></div>
      <div id="three" class="dice-numbers number3"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-3_cyyauy.jpg" alt=""></div>
      <div id="four" class="dice-numbers number4"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-4_geomfe.jpg" alt=""></div>
      <div id="five" class="dice-numbers number5"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-5_csesyo.jpg" alt=""></div>
      <div id="six" class="dice-numbers number6"><img src="http://res.cloudinary.com/diqkerptd/image/upload/v1524250257/dice-6_rfu99k.jpg" alt=""></div>
    </div>
    <!--players -->
    <div class="player0 active">
      <div class="player-one-wrap">
        <span><i class="fas fa-sort-down"></i></span>
        <h1>PLAYER ONE</h1>
        Main Score: <span id="player0Score">0</span>
      </div>
      <div class="player0Current">
        Current Round Score:
        <span id="player0CurrentScore">Current: <span>0</span></span>
      </div>
    </div>
    <div class="player1">
      <div class="player-two-wrap">
        <span><i class="fas fa-sort-down"></i></span>
        <h1>PLAYER TWO</h1>
        Main Score: 
        <span id="player1Score">0</span>
      </div>
      <div class="player1Current">
        Current Round Score: 
        <span id="player1CurrentScore"> <span>0</span></span>
      </div>
    </div>
  </div>
</body>
            
          
!
            
              body{
  background: tomato;
  padding: 2% 5%;
  background: #1c92d2;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #f2fcfe, #1c92d2);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #f2fcfe, #1c92d2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  color: #1E1E1E;
  font-family: 'Lato', sans-serif;
}

.disclaimer-rules{
  width: 75%;
  margin: 0 auto;
  background: #D8D7D7;
  padding: 20px 40px;
  border-radius: 10px;
  margin-bottom: 30px;
  background: #EECDA3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

a{
  color: inherit;
  font-weight: bold;
}

.score-setter-wrap{
  text-align: center;
  margin-bottom: 30px;
}

#winningScoreNum{
  width: 55px;
  padding: 10px;
  border-radius: 5px;
}

#submitWinningScore{
  padding: 10px;
  border-radius: 5px;
  background: #EECDA3;
  color: #1E1E1E;
}

.mainwrap{
  max-width:800px;
  min-width: 500px;
  margin: 0 auto;
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  position: relative;
  background: #EECDA3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  margin-bottom: 50px;
}

.new-game{
  position: absolute;
  left: 42.8%;
  top: 8%;
  font-size: 18px;
  cursor: pointer;
  transition: ease-in 1s;
  height: 50px;
}

.svg-inline--fa{
  transition: ease-in 200ms;
}

.new-game:hover .fa-plus{
  transform: rotate(90deg);
}


.dice{
  position: absolute;
  left: 43.5%;
  top: 30%;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  display: none;
}

.roll-dice{
  position: absolute;
  left: 43.3%;
  top: 70%;
  cursor: pointer;
  font-size: 18px;
}

.roll-dice:hover .fa-circle-notch{
  transform: rotate(90deg);
}

.hold{
  position: absolute;
  left: 47.3%;
  top: 85%;
  font-size: 18px;
  cursor: pointer;
}

.hold:hover .fa-piggy-bank{
  transform: translateY(-3px);
}

.player0{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  background: white;
}

.player1{
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
  background: white;
}

.player-one-wrap, .player-two-wrap{
  grid-row: 2 / 3;
  text-align: center;
}
.player-one-wrap span, .player-two-wrap span {
  font-size: 20px;
}

.player0Current, .player1Current{
  grid-row: 3 / 4;
  text-align: center;
}

/* DICE */
.dice div{
  display: flex;
  height: 100%;
}

#one{
  display: none;
}

#two{
  display: none;
}

#two .two-second-dot{
  align-items: flex-end;
}

#three, #four, #five, #six{
  display: none;
}

.show-number{
  display: block !important;
}

.active{
  background: #EECDA3;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #EF629F, #EECDA3);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #EF629F, #EECDA3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.fa-sort-down{
  opacity: 0;
}

.active .fa-sort-down{
  opacity: 1;
}
            
          
!
            
              var currentScore;
var roundScore;
var activePlayer;
//Default winning Score
var winningScoreNum = 30;

var diceWrap =  document.querySelector(".dice");
var rollDice = document.querySelector(".roll-dice");
var hold = document.querySelector(".hold");

/* Using a state variable to determine wether or not the game has ended when someone has won.

A state variable tells us the condition of a system. The state of this varible can be "Are we playing?" or "Are we not playing?" We simply use a boolean for this variable.

We set it to true in the start game function, then when someone has won, which is determined in the hold function, it is set to false.

The functions that checks the state of the variable are the roll dice function, if it's set to true we can roll, if it's set to false we are not playing since someone has won and the value is false, and also the hold function.
*/
var playing;

//Reusable function to start a new game, resets everything.
function startGame(){
  playing = true;
  currentScore = [0,0];
  roundScore = 0;
  activePlayer = 0;
  document.getElementById("player0CurrentScore").textContent = 0;
  document.getElementById("player1CurrentScore").textContent = 0;
  document.getElementById("player0Score").textContent = 0;
  document.getElementById("player1Score").textContent = 0;
  document.querySelector(".player0 h1").textContent = "Player One";
  document.querySelector(".player1 h1").textContent = "Player Two";
  diceWrap.style.display = "none";
  document.querySelector(".player0").classList.add("active");
  document.querySelector(".player1").classList.remove("active");
}

//We start the game on load
startGame();

//Listener for the start game button
document.querySelector(".new-game").addEventListener("click", startGame);

//function to set the game score
document.getElementById("submitWinningScore").addEventListener("click", function(){
  winningScoreNum = document.getElementById("winningScoreNum").value;
})


//Reusable function to switch activePlayer and toggle active class (styling purposes)
function switchPlayers(){
  //Ternary operator. Is activePlayer equal to 0 (?). Then make activePlayer be 1. Else (:) make activePlayer be 0
   activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
   document.querySelector(".player0").classList.toggle("active");
   document.querySelector(".player1").classList.toggle("active");
};

//Listener and function for the roll dice button
rollDice.addEventListener("click", function(){
  //Check the playing variable
  if(playing){
    
    var currentScoreDisplay = document.querySelector("#player" + activePlayer + "CurrentScore");

     diceWrap.style.display = "block";
    //On every new roll remove the number showing in the dice by setting all the numbers to display none. We could display none on the whole dice but I wanted to use a loop and to not have it dissapear while playing.
    var allNums = document.getElementsByClassName("dice-numbers");
      for (var i = 0; i < allNums.length; i++){
        allNums[i].style.display ="none";
     }

    //Get a number between a and 6 for the dice
    var rolledValue = Math.floor(Math.random() * 6) + 1;

    //Use the score to form a selector to select the correct div in order to display the correct dice number
    document.querySelector(".number" + rolledValue).style.display = "block";

    //If the rolled value is not 1 - Add the scores to the roundscore variable. Display it in the correct player screen by using the currentScoreDisplay variable defined earlier in this function.
    // If the rolled value is 1 - Reset the roundScore, display 0 on the currentScoreDisplay, reset the value in the currentScore Array for the active player who hit the 0 and finally switch players.
    if ( rolledValue !== 1){
      roundScore += rolledValue;
      currentScoreDisplay.textContent = roundScore;
    } else {
      roundScore = 0;
      currentScoreDisplay.textContent = 0;
      currentScore[activePlayer] = 0;
      document.querySelector("#player" + activePlayer + "Score").textContent = currentScore[activePlayer];

      //SwitchPlayers
      switchPlayers();
    }
  }
});

//Listener and function for the hold button
hold.addEventListener("click", function(){
  if(playing){
  document.querySelector("#player" + activePlayer + "CurrentScore").textContent = 0;
  //Define the current player
  //Grab his score based on current player and add it to the main counter
  currentScore[activePlayer] += roundScore;
  document.querySelector("#player" + activePlayer + "Score").textContent = currentScore[activePlayer];
  roundScore = 0;
  //Check if the player won the game, first to the set number wins
  if( currentScore[activePlayer] >= winningScoreNum ){
    document.querySelector(".player" + activePlayer + " h1").textContent = "WINNER!";
    diceWrap.style.display = "none";
    //set the state variable to false so we cannot roll the dice anymore and we are forced to start a new game.
    playing = false;
  };
    switchPlayers();
  }
});

//Coding challenges
//2 6's in a row loses the points. use 2 variables, past and present

//Players can set the winning score


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console