Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

27-3 Coree #569

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

27-3 Coree #569

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c72e291
bug-error
Feb 5, 2024
a8ac6ac
fixed validation bug but now prerolled dices return as undefined
Feb 10, 2024
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
20 changes: 17 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
}

#container {
background-color: pink;
background-color: rgb(109, 156, 242);
Copy link

Choose a reason for hiding this comment

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

love to see you having fun with colors! It certainly makes it a more personalized game!

margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
Expand All @@ -40,7 +40,7 @@
}

#output-div {
background-color: lightgrey;
background-color: lightgray;
margin: 20px auto;
padding: 20px;
width: 100%;
Expand All @@ -49,15 +49,29 @@
</head>

<body>
<h1 id="header">Basics: Beat That! 🚀</h1>
<h1 id="header">🎲 Basics: Beat That! 🎲</h1>
<div id="container">
<p style = "color: aliceblue;">Click the submit button to start!</p>
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
</div>
<div id="gameinstructions">
<p>
<FONT COLOR= #9b9b9b >
<b style="font-size: 19px;"><center>How to play beat that❓❓</b>
</p>
<p>
Roll two dices and put them in order to make the highest number
possible.
</p>
<p>For example, if you roll a 1 and 5, your best answer would be 51.</p>

<p>This is a two-player game, so grab a friend ya scally wags! 🧞‍♀️🧞‍♂️</p></center>
</div>
Copy link

Choose a reason for hiding this comment

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

Great that you have a div for instructions here! just a small thing.

id names are generally standardised in kebab-case so it is best to have game-instructions.

also, while the <center> center tag </center> works, a lot of the newer browsers are starting to phase out the center tag. It's not part of the newer HTML standard.

<!-- Import program logic -->
<script src="script.js"></script>
<!-- Define button click functionality -->
Expand Down
155 changes: 153 additions & 2 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,155 @@
// Global variables
var GAME_STATE_DICE_ROLL = "GAME_STATE_DICE_ROLL";
var GAME_STATE_CHOOSE_DICE_ORDER = "GAME_STATE_CHOOSE_DICE_ORDER";
var GAME_STATE_COMPARE_SCORES = "GAME_STATE_COMPARE_SCORES";
var gameState = GAME_STATE_DICE_ROLL;

var INSTRUCTIONS_FOR_NEXT_GAME_STATE = `Please choose the order of the dice by inputting 1 or 2`;
Copy link

Choose a reason for hiding this comment

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

Great use of constants here!


var currentPlayerRolls = [];

var player1ScoreCounter = 0;
var player2ScoreCounter = 0;

var currentPlayer = 1;
var allPlayersScore = [];

var mode = "";
var regularMode = "regular";
var lowestMode = "lowest";
var MODE_SELECTION_INSTRUCTIONS = `please choose a mode to play:<br><br>${regularMode} or ${lowestMode}`;

// Helper Function
var diceRoll = function () {
return Math.floor(Math.random() * 6) + 1;
Copy link

Choose a reason for hiding this comment

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

hey! an awesome one liner here!

};

var rollDiceForPlayer = function () {
var counter = 0;
for (var counter = 0; counter < 2; counter += 1) {
currentPlayerRolls.push(diceRoll());
console.log("error check " + currentPlayerRolls);
}
Copy link

Choose a reason for hiding this comment

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

great that you've opted for a for loop here.

Also generally, it's best to remove console logs from final codebase, as console log is for you to check stuff internally.

return `Player ${currentPlayer}, your rolls are ${currentPlayerRolls[0]} and ${currentPlayerRolls[1]}<br><br>${INSTRUCTIONS_FOR_NEXT_GAME_STATE}`;
};

var getPlayerScore = function (playerInput) {
var playerScore;
//playerInput == 1
if (playerInput == 1) {
playerScore = Number(
String(currentPlayerRolls[0]) + String(currentPlayerRolls[1])
);
}
//playerInput == 2
if (playerInput == 2) {
playerScore = Number(
String(currentPlayerRolls[1]) + String(currentPlayerRolls[0])
);
}

// Store playerScore in array
allPlayersScore.push(playerScore);

//clear current player rolls array
currentPlayerRolls = [];

return `Player ${currentPlayer}, your chosen value is: ${playerScore}`;
};

var comparePlayersScores = function () {
compareMessage = `Player 1 value: ${allPlayersScore[0]}<br>Player 2 value: ${allPlayersScore[1]}`;
var checkPlayer1Win = false;
if (allPlayersScore[0] == allPlayersScore[1]) {
compareMessage = `${compareMessage}<br><br>It's a tie!`;
return compareMessage;
}
if (allPlayersScore[0] > allPlayersScore[1]) {
checkPlayer1Win = true;
}
if (mode == lowestMode) {
checkPlayer1Win = !checkPlayer1Win;
}
if (checkPlayer1Win == true) {
Copy link

Choose a reason for hiding this comment

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

the if(booleanVariable == true) here is a bit redundant.

booleanVariable already has a true/false value, and while you can compare it with a static boolean value, it kinda already is one.

in this instance if(checkPlayer1Win) already suffice!

player1ScoreCounter = player1ScoreCounter + 1;
compareMessage = `${compareMessage}<br><br>Player 1 wins!`;
} else {
player2ScoreCounter = player2ScoreCounter + 1;
compareMessage = `${compareMessage}<br><br>Player 2 wins!`;
}
return compareMessage;
};

var resetGame = function () {
currentPlayer = 1;
gameState = GAME_STATE_DICE_ROLL;
allPlayersScore = [];
};

var beatThat = function (input) {
var outputMessage = "";
if (gameState == GAME_STATE_DICE_ROLL) {
// Display Dice rolled as output message
outputMessage = rollDiceForPlayer();
// Change the gamestate
gameState = GAME_STATE_CHOOSE_DICE_ORDER;
return outputMessage;
}

if (gameState == GAME_STATE_CHOOSE_DICE_ORDER) {
//Call playerScore Function
outputMessage = getPlayerScore(input);
//playerInput validation
if (input != 1 && input != 2) {
return `Error! ${INSTRUCTIONS_FOR_NEXT_GAME_STATE}
<br><br> Dice 1: ${currentPlayerRolls[0]} | Dice 2: ${currentPlayerRolls[1]}`;
}
if (currentPlayer == 1) {
currentPlayer = 2;
gameState = GAME_STATE_DICE_ROLL;
return `${outputMessage}<br><br> It is now player 2's turn!`;
}
if (currentPlayer == 2) {
gameState = GAME_STATE_COMPARE_SCORES;

return `${outputMessage}<br><br> Press submit to calculate scores!`;
}
}

if (gameState == GAME_STATE_COMPARE_SCORES) {
if (mode == lowestMode) {
outputMessage = comparePlayersScores();
}

return `${outputMessage}<br><br>Current scores<br>Player 1: ${player1ScoreCounter} | Player 2: ${player2ScoreCounter}`;
}
};

var checkModeInput = function (userInput) {
return userInput == regularMode || userInput == lowestMode;
};

var getGameInstructions = function () {
if (mode == lowestMode) {
return `You have chosen lowest mode! <br><br>The player with the lowest value wins!`;
}
return `You have chosen regular mode! <br><br>The player with the highest value wins!`;
};

var main = function (input) {
var myOutputValue = 'hello world';
return myOutputValue;
if (!mode) {
if (!input) {
return MODE_SELECTION_INSTRUCTIONS;
}
var modeInputIsValid = checkModeInput(input);
if (!modeInputIsValid) {
return MODE_SELECTION_INSTRUCTIONS;
}
mode = input;
var GameInstructions = getGameInstructions();
return GameInstructions;
} else {
myOutputValue = beatThat(input);
return myOutputValue;
}
};