Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 16 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,16 @@
}

#container {
background-color: pink;
border-radius: 25px;
text-align: center;
background-color: rgb(132, 206, 236);
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
}

input {
border-radius: 25px;
font-size: 21px;
line-height: 33px;
margin: 0 0 23px 0;
Expand All @@ -41,14 +44,16 @@
}

button {
border-radius: 25px;
font-size: 21px;
line-height: 33px;
margin: 0 0 23px 0;
padding: 0 6px;
}

#output-div {
background-color: lightgrey;
border-radius: 25px;
background-color: rgb(234, 255, 186);
margin: 20px auto;
padding: 20px;
width: 100%;
Expand All @@ -59,18 +64,23 @@
<!-- The <body> element defines the document's body, and is a container for all the visible contents that will be rendered by the browser. -->
<body>
<!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
<h1 id="header">SWE Fundamentals! 🚀</h1>
<h1 id="header">✊Beat That!✊</h1>
<!-- The <div> tag defines a division or a section in an HTML document, and is commonly use as a "container" for nested HTML elements. -->
<div id="container">
<!-- The <p> tag defines a paragraph element. -->
<p>Input:</p>
<p><h2>Welcome to Beat That!</h2></p>
<p>
Please press submit to roll the dice, which will give you 2 numbers.<br>
You will be able to create a two-digit number by selecting the order of
your dice.<br>
The player with the highest number wins!</p>
<!-- The self-closing <input /> tag represents a field for a user to enter input. -->
<input id="input-field" />
<!-- The self-closing <br /> tag represents a line break - a line's worth of spacing before dispalying the next element. -->
<br />
<!-- The <button> tag represents.. you guessed it! a button. -->
<button id="submit-button">Submit</button>
<p>Output:</p>
<button id="submit-button">Submit!</button>
<p><b>Output:</b></p>
<div id="output-div"></div>
</div>
<!-- Everything below this is incorporating JavaScript programming logic into the webpage. -->
Expand Down
129 changes: 127 additions & 2 deletions script.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,129 @@
// There are 2 players and players take turns.
// When a player clicks Submit, the game rolls 2 dice and shows the dice rolls, for example 3 and 6.
// The player picks the order of the dice they want. For example, if they wanted the number 63, they would specify that the 2nd dice goes first. You can choose how the player specifies dice order.
// After both players have rolled and chosen dice order, the player with the higher combined number wins.

// define game states
var DICE_ROLL = "DICE_ROLL";
var CHOOSE_DICE_ORDER = "CHOOSE_DICE_ORDER";
var DECLARE_WINNER = "DECLARE_WINNER";
// game starts with the DICE_ROLL game state
var gameMode = DICE_ROLL;

// create a variable to define which player is playing
var currentPlayer = 1;

// create an array that stores the values of each player
var playerRolls = [];

// create an array that stores the values of both players
var bothPlayerRolls = [];

var main = function (input) {
var myOutputValue = 'hello world';
return myOutputValue;
// if input is anything other than blank, return this message
if (gameMode == DICE_ROLL && input != "") {
return `Please press Submit to roll the dice`;
}
if (gameMode == DICE_ROLL && input == "") {
// return 2 dice output message
var myOutputValue = playerDiceRolls();
// change game state to Choose Dice Order
gameMode = CHOOSE_DICE_ORDER;
return myOutputValue;
}
if (gameMode == CHOOSE_DICE_ORDER) {
myOutputValue = finalNumber(input);
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remember your block scopes, myOutputValue was declared in an if block before this, which means technically you should not be able to access myOutputValue here.

if (currentPlayer == 1) {
// once player 1's turn is completed, switch to player 2
currentPlayer = 2;
// switch the game mode back to DICE_ROLL to start from the beginning
gameMode = DICE_ROLL;
return `${myOutputValue} It is now Player ${currentPlayer}'s turn! <br>
Please press submit again to roll the dice.`;
}
if (currentPlayer == 2) {
gameMode = DECLARE_WINNER;
console.log(`GAME MODE = ${gameMode}`);
return `${myOutputValue} Press submit again to see the winner!`;
}
}
if (gameMode == DECLARE_WINNER) {
myOutputValue = `Player 1's score is <b>${bothPlayerRolls[0]}</b> and Player 2's score is <b>${bothPlayerRolls[1]}</b>.`;
if (bothPlayerRolls[0] > bothPlayerRolls[1]) {
myOutputValue = `${myOutputValue} <br> <h2>Player 1 wins!</h2><br> Press submit to roll Player 1's dice again.`;
}
if (bothPlayerRolls[1] > bothPlayerRolls[0]) {
myOutputValue = `${myOutputValue} <br> <h2>Player 2 wins!</h2><br> Press submit to roll Player 1's dice again.`;
}
if (bothPlayerRolls[1] == bothPlayerRolls[0]) {
Comment on lines +52 to +58
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this would be a good scenario to use else ifs so that the program doesnt unnecessarily continue checking if conditions

myOutputValue = `${myOutputValue} <br><h2> It's a tie! </h2><br> Press submit to roll Player 1's dice again.`;
}
resetGame();
return myOutputValue;
}
};

// create a function that lets the player get their final number
var finalNumber = function (input) {
var playerFinalNumber = "";
// if the player inputs any number but 1 or 2, return this message.
// how to show this message again if they continue clicking submit?
if (gameMode == CHOOSE_DICE_ORDER && input != 1 && input != 2) {
return `Input not recognised. Please input either 1 or 2 to choose the number order.<br><br>
You rolled: <br> Dice One - <b>${playerRolls[0]}</b> and <br> Dice Two - <b>${playerRolls[1]}</b>`;
}
if (input == 1) {
// capture Player's number. Convert numbers to a string because the numbers will add together otherwise
var playerFinalNumber = Number(
String(playerRolls[0]) + String(playerRolls[1])
);
}
if (input == 2) {
// capture Player's number
var playerFinalNumber = Number(
String(playerRolls[1]) + String(playerRolls[0])
Comment on lines +77 to +84
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is fine, but I would rather not intentionally convert the number to string to concatenate them. Can we simply use numbers in this scenario?

var playerFinalNumber = playerRolls[1] * 10 + playerRolls[0]

);
}
Comment on lines +67 to +86
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is where the game breaks, remember that even though you do early return here for your input validation, this is not your main function. the main function that calls this continues execution, unless you specifically check in main for a certain condition that will stop execution. Otherwise, you can simply just click submit continually and it runs


// store players final numbers
bothPlayerRolls.push(playerFinalNumber);
console.log(`Both Player Rolls: ${bothPlayerRolls}`);
// reset the array for the current player
playerRolls = [];
console.log(`Player Rolls: ${playerRolls}`);
return `Your final number is <b>${playerFinalNumber}</b>. <br>`;
};

// create a loop that rolls 2 dice
var playerDiceRolls = function () {
var counter = 0;
while (counter < 2) {
playerRolls.push(diceRoll());
counter = counter + 1;
}
return `<h3>Greetings Player ${currentPlayer}!</h3>
You rolled: <br> Dice One - <b>${playerRolls[0]}</b> and <br> Dice Two - <b>${playerRolls[1]}</b><br><br>
Please input either 1 or 2 to decide the number order.`;
};
Comment on lines +98 to +107
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍👍

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Although, i wouldnt expect a function named playerDiceRolls to return me a string


// create dice roll
var diceRoll = function () {
// randomly output decimals from 0-5.9999
var randomNumber = Math.random() * 6;
// removes decimals (0-5)
var integerNumber = Math.floor(randomNumber);
// add 1 to raise the range to 1-6
var randomNumber = integerNumber + 1;
console.log(randomNumber);
return randomNumber;
};

// reset the game
var resetGame = function () {
// reset to player 1
currentPlayer = 1;
// reset to first mode
gameMode = DICE_ROLL;
// clear the bothPlayerRolls array
bothPlayerRolls = [];
};