diff --git a/index.html b/index.html index 74f9da2a..63db81e1 100644 --- a/index.html +++ b/index.html @@ -17,47 +17,97 @@ text-align: center; } + #h2 { + margin-left: 30px; + margin-right: 30px; + } + #container { - background-color: pink; + background-color: #9fd8cb; + border-radius: 6px; margin: 40px auto; max-width: 800px; - padding: 38px 31px; + padding: 20px 40px; + display: flex; + flex-direction: column; + gap: 10px; } - input { + .input-container { + display: flex; + flex-direction: column; /* Adjusted to column layout */ + gap: 10px; + } + + input, + select { font-size: 21px; - line-height: 33px; - margin: 0 0 23px 0; + line-height: 40px; + border: 0.5px; + margin: 0 0 10px 0; padding: 0 9px; width: 100%; } + select { + height: 38px; + width: 200px; + } + button { - font-size: 21px; - line-height: 33px; - margin: 0 0 23px 0; - padding: 0 6px; + background-color: #fbdce2; + font-size: 20px; + line-height: 40px; + border: 0.5px; + border-radius: 4px; + margin: 0 0 10px 0; + padding: 0 20px; } #output-div { - background-color: lightgrey; + border-radius: 4px; + margin: auto; + padding: 15px; + width: 75%; + text-align: center; + } + + #instructions { + border-radius: 4px; margin: 20px auto; - padding: 20px; - width: 100%; + padding: 15px; + width: 75%; + text-align: center; } - -

Basics: Beat That! 🚀

+

🎲 🎲 Beat That! 🎲 🎲

-

Input:

- -
- -

Output:

+
+

Input:

+ + +
+
+
+

Game Instructions:

+

Choose your game mode (Normal or Special).

+

+ Normal mode: Roll 2 dice, take turns picking the order, and aim for the + highest number to win. +

+

+ Special mode: Roll 2 dice, and the computer generates the best + combination for you. Get the highest number to win. +

+

Click "Submit" to start!

+
@@ -66,7 +116,9 @@

Basics: Beat That! 🚀

button.addEventListener("click", function () { // Set result to input value var input = document.querySelector("#input-field"); - var result = main(input.value); + var dropdown = document.querySelector("#dropdown1"); + var selectedOption = dropdown.value; + var result = main(input.value, selectedOption); // Pass selected option to main // Display result in output element var output = document.querySelector("#output-div"); diff --git a/script.js b/script.js index bbe8a293..83ef5bad 100644 --- a/script.js +++ b/script.js @@ -1,4 +1,257 @@ -var main = function (input) { - var myOutputValue = 'hello world'; +// Assigning variables +let gameState = "Player 1 roll"; +let player1Roll = []; +let player2Roll = []; + +let player1num = ""; +let player2num = ""; +let p1largestNum = ""; +let p2largestNum = ""; + +let player1Score = 0; +let player2Score = 0; + +let roundResults = ""; + +let dice1 = ""; +let dice2 = ""; +let statement = ""; + +let player1list = []; +let player2list = []; + +let leaderboard = [player1Score, player2Score]; + +//messsage +let ErrorMessage = "Error: Please enter 'normal' or 'special' only."; + +// Set up dice function +let genDiceRoll = function () { + return Math.ceil(Math.random() * 6); +}; + +let main = function (input, selectedOption) { + console.log("main function"); + console.log(gameState); + + //If users select SPECIAL game, special rolls for both players at once will proceed. + if (selectedOption == "option2" && gameState != "Special-results") { + console.log("game is now special"); + gameState = "Special"; + } + if ( + (selectedOption == "option1" && gameState == "Special-results") || + (selectedOption == "option1" && gameState == "Special") + ) { + console.log("game is now normal"); + gameState = "Player 1 roll"; + } + //NORMAL game mode starts here. Dice will roll twice. Computer output a message for Player 1 to select the order of number. + if (gameState == "Player 1 roll") { + for (counter = 0; counter < 2; counter += 1) { + let diceResult = genDiceRoll(); + player1Roll.push(diceResult); + } + dice1 = player1Roll[0]; + dice2 = player1Roll[1]; + gameState = "Player 1 choice"; + return `🐱 Hi Player 1!

You rolled ${dice1} for Dice 1 and ${dice2} for Dice 2.

+Choose the order of the dice by entering 1 or 2.`; + } + // Return with error message if no input when asked to select order. + + // Now input is read as Player 1's choice + if (gameState === "Player 1 choice") { + console.log("inside player 1 choice"); + console.log(gameState); + + let playerselect = parseInt(input); // Convert input to a number + + // Output a message to summarize what Player 1's choice is and invite Player 2 to play + if (playerselect == 1) { + player1num = player1Roll[0] * 10 + player1Roll[1]; + console.log("A"); + gameState = "Player 2 roll"; + console.log("B"); + console.log(player1num); + console.log("end of player 1 choice - 1"); + return `🐱 Hi Player 1!

You chose Dice 1 to come first. Your number is ${player1num}.

Player 2, you're up next!`; + } else if (playerselect == 2) { + player1num = player1Roll[1] * 10 + player1Roll[0]; + gameState = "Player 2 roll"; + console.log("end of player 1 choice - 2"); + return `🐱 Hi Player 1!

You chose Dice 2 to come first. Your number is ${player1num}.

Player 2, you're up next!`; + } else { + // Handle the case where playerselect is neither 1 nor 2 + return "Oops! Please enter 1 or 2."; + } + } + + // Player 2's turn. Dice will roll twice. Computer output a message for Player 2 to select the order of number. + if (gameState == "Player 2 roll") { + for (let counter = 0; counter < 2; counter += 1) { + let diceResult = genDiceRoll(); + player2Roll.push(diceResult); + } + dice1 = player2Roll[0]; + dice2 = player2Roll[1]; + gameState = "Player 2 choice"; + return `🐙 Hi Player 2!

You rolled ${dice1} for Dice 1 and ${dice2} for Dice 2.

+Choose the order of the dice by entering 1 or 2.`; + } + + // Output a message to summarise what Player 2's choice is and to bring players to final results + if (gameState == "Player 2 choice") { + let player2Choice = input; + + if (player2Choice == 1) { + player2num = player2Roll[0] * 10 + player2Roll[1]; + gameState = "Comparison"; + return `🐙 Hi Player 2!

You chose Dice 1 to come first. Your number is ${player2num}.

Let's compare!`; + } + if (player2Choice == 2) { + player2num = player2Roll[1] * 10 + player2Roll[0]; + gameState = "Comparison"; + return `🐙 Hi Player 2!

You chose Dice 2 to come first. Your number is ${player2num}.

Let's compare!`; + } else { + // Handle the case where playerselect is neither 1 nor 2 + return "Oops! Please enter 1 or 2."; + } + } + //SPECIAL game mode starts here. Dice will roll twice for both players Computer output a message for both players to hit submit once to reach comparison state. + if (gameState == "Special") { + console.log(gameState); + //Player 1 auto rolls twice and highest possible combination is stored + for (counter = 0; counter < 2; counter += 1) { + let diceResult = genDiceRoll(); + player1Roll.push(diceResult); + console.log("P1 dice result: " + player1Roll); + player1num1 = player1Roll[0] * 10 + player1Roll[1]; + player1num2 = player1Roll[1] * 10 + player1Roll[0]; + player1list.push(player1num1, player1num2); + } + //Player 2 auto rolls twice and highest possible combination is stored + for (counter = 0; counter < 2; counter += 1) { + let diceResult = genDiceRoll(); + player2Roll.push(diceResult); + console.log("P2 dice result: " + player2Roll); + player2num1 = player2Roll[0] * 10 + player2Roll[1]; + player2num2 = player2Roll[1] * 10 + player2Roll[0]; + player2list.push(player2num1, player2num2); + } + let array1WithoutNaN = player1list.filter((value) => !isNaN(value)); + let array2WithoutNaN = player2list.filter((value) => !isNaN(value)); + p1largestNum = Math.max(...array1WithoutNaN); + p2largestNum = Math.max(...array2WithoutNaN); + gameState = "Special-results"; + console.log("Player 1 list:", player1list); + console.log("Player 2 list:", player2list); + return "🦄 You are in the special game mode!

Computer will now roll 2 dice for each player and generate the best combination!

Click 'Submit' to see the results!"; + } + + // Comparing the final numbers of both players + if ( + (gameState == "Special-results" && selectedOption == "option2") || + gameState == "Comparison" + ) { + console.log("Comparing results and scoring"); + + // NORMAL mode - If Player 1 has the greater number, he wins. Game state to remain at NORMAL and invite Player 1 to start again + if (gameState == "Comparison") { + if (player1num > player2num) { + leaderboard[0] += 1; + player1Score += 1; + roundResults = "Player 1 wins"; + } else { + leaderboard[1] += 1; + player2Score += 1; + roundResults = "Player 2 wins"; + } + } + // SPECIAL mode - If Player 1 has the greater number, he wins. Game state to remain at SPECIAL and invite both to start again + if (gameState == "Special-results" && selectedOption == "option2") { + if (p1largestNum > p2largestNum) { + console.log("special mode comparison"); + leaderboard[0] += 1; + player1Score += 1; + console.log("player1win" + leaderboard); + roundResults = "Player 1 wins"; + // SPECIAL mode - If Player 2 has the greater number, he wins. Game state to remain at SPECIAL and invite both to start again + } else { + leaderboard[1] += 1; + console.log("special mode comparison"); + player2Score += 1; + console.log("player2win" + leaderboard); + roundResults = "Player 2 wins"; + } + } + } + + // Reading the leaderboard array and sort the scores in descending order + let order = [...leaderboard].sort((a, b) => b - a); + console.log(order); + console.log(leaderboard); + + // Choosing the output. If Player 1 scores is greater than Player 2, then the statement starts with Player 1. Vice versa. + if (player1Score > player2Score) { + console.log("player 1 winning"); + statement = "⭐️⭐️⭐️

Player 1 is leading with: "; + } else if (player1Score < player2Score) { + console.log("player 2 winning"); + statement = "⭐️⭐️⭐️

Player 2 is leading with: "; + } + // Output if both players draw + else { + console.log("draw"); + statement = "⭐️⭐️⭐️

It's a draw!
Score: "; + } + // Winning announcement messages + let NormalComparison = `🐱 Player 1 rolled ${player1num} vs 🐙 Player 2 rolled ${player2num}

`; + let SpecialComparison = `🐱 Player 1 rolled ${p1largestNum} vs 🐙 Player 2 rolled ${p2largestNum}

`; + let StandardStatement = `

${statement}${order}`; + let P1Win = `${NormalComparison}🐱 Player 1 wins!${StandardStatement}`; + let P2Win = `${NormalComparison}🐙 Player 2 wins!${StandardStatement}`; + let P1WinSpecial = `${SpecialComparison}🐱 Player 1 wins! ${StandardStatement}`; + let P2WinSpecial = `${SpecialComparison}🐙 Player 2 wins! ${StandardStatement}`; + + // SPECIAL MODE - If player 1 wins, arrays reset + if (gameState == "Special-results") { + if (roundResults == "Player 1 wins") { + myOutputValue = P1WinSpecial; + roundResults = ""; + gameState = "Special"; + player1num = ""; + player2num = ""; + player1Roll = []; + player2Roll = []; + player1list = []; + player2list = []; + } + // SPECIAL MODE - If player 2 wins, arrays reset + if (roundResults == "Player 2 wins") { + myOutputValue = P2WinSpecial; + roundResults = ""; + gameState = "Special"; + player1num = ""; + player2num = ""; + player1Roll = []; + player2Roll = []; + player1list = []; + player2list = []; + } + } + + // NORMAL MODE - If player 1 wins, game mode resets + if (roundResults == "Player 1 wins") { + myOutputValue = P1Win; + roundResults = ""; + gameState = "Player 1 roll"; + } + // NORMAL MODE - If player 2 wins, game mode resets + if (roundResults == "Player 2 wins") { + myOutputValue = P2Win; + roundResults = ""; + gameState = "Player 1 roll"; + } return myOutputValue; };