From 299983c483694208db1205e8d301ab5c5b4110e2 Mon Sep 17 00:00:00 2001 From: monika-789 Date: Wed, 27 Mar 2024 19:34:21 -0700 Subject: [PATCH 1/4] Update solution with detailed coding --- app.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/app.js b/app.js index 8acbdef..ca86327 100644 --- a/app.js +++ b/app.js @@ -83,6 +83,8 @@ function compare(player, computer) { resultEl.innerText = won; youScore.innerText = score.you; } + // enable buttons again + ResetButtonsState(); // playerHand.classList.remove('shake') // computerHand.classList.remove('shake') } @@ -126,6 +128,32 @@ resetBtn.addEventListener("click", () => { }); +/* Disable button untill */ +function disableButton() { + + // Get the button element by its ID + var rockBtn = document.getElementById("rockButton"); + var paperBtn = document.getElementById("paperButton"); + var scissorBtn = document.getElementById("scissorButton"); + + // Disable the button + rockBtn.disabled = true; + paperBtn.disabled = true; + scissorBtn.disabled = true; +} + +function ResetButtonsState() +{ + var rockBtn = document.getElementById("rockButton"); + var paperBtn = document.getElementById("paperButton"); + var scissorBtn = document.getElementById("scissorButton"); + + // Disable the button + rockBtn.disabled = false; + paperBtn.disabled = false; + scissorBtn.disabled = false; +} + // // Mapping // // 0 -> rock, 1->paper, 2->scissor // const options = ["rock", "paper", "scissor"]; From 998ac986cc5703e118825e90f6000b83ffad31b0 Mon Sep 17 00:00:00 2001 From: monika <144393563+monika-789@users.noreply.github.com> Date: Thu, 28 Mar 2024 09:21:09 -0700 Subject: [PATCH 2/4] Create Contributing-V1.md --- Contributing-V1.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 Contributing-V1.md diff --git a/Contributing-V1.md b/Contributing-V1.md new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/Contributing-V1.md @@ -0,0 +1 @@ + From 20630f9173c5a6d5e81b582a330c845d95df99f6 Mon Sep 17 00:00:00 2001 From: monika <144393563+monika-789@users.noreply.github.com> Date: Thu, 28 Mar 2024 09:21:52 -0700 Subject: [PATCH 3/4] Update Contributing-V1.md --- Contributing-V1.md | 116 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) diff --git a/Contributing-V1.md b/Contributing-V1.md index 8b13789..9992f30 100644 --- a/Contributing-V1.md +++ b/Contributing-V1.md @@ -1 +1,117 @@ +# Intoduction + +## Project Name: Rock-Paper-Scissors-Game + +This project aims to create a responsive Rock, Paper, Scissors game using HTML, CSS, and JavaScript. HTML will structure the game layout, CSS will style it for visual appeal +and responsiveness, and JavaScript will handle player input and game logic. This classic game will be enjoyable on any device, providing entertainment for users of all ages. + +### Key Feaures: + +Responsive Design: The game interface is designed to be responsive, ensuring a seamless experience across various devices and screen sizes. +Score Tracking: The game keeps track of the player's and computer's scores, updating them dynamically with each round. +Randomized Computer Choice: The computer's choice (rock, paper, or scissors) is generated randomly for each round, adding unpredictability to the game. +Reset Functionality: A reset button allows the player to reset the game, clearing scores and resetting hand images to their initial state. +Animation: The game features animation effects (shake) to provide an engaging and interactive experience when the player and computer make their choices. + + +### Link: + +https://github.com/monika-789/rock-paper-scissors-game/tree/monika-dev-game + + +### Summary of issues examined: + +The issue identified is that when the buttons are rapidly clicked, multiple inputs can be registered for subsequent rounds before the current round is resolved. +This can lead to unexpected behavior and disrupt the flow of the game. + + +### Detailed discussion of issues contributed to: + +I worked on a specific issue related to preventing multiple button clicks in my Rock, Paper, Scissors game. I explored different methods, including using the disabled attribute of HTML +buttons and adding/removing event listeners.I found a solution by immediately disabling the buttons after a player makes a selection and re-enabling them after displaying +the round outcome. This approach ensured that only one round is processed at a time, preventing confusion and unexpected results. I also looked into other websites and tutorials such +as MDN Web Docs and Stack Overflow to gather insights and examples on how to handle button clicks and prevent multiple selections in JavaScript. + + +The solution involves two functions: disableButton() and ResetButtonsState(). + +In the disableButton() function, the buttons for rock, paper, and scissors are disabled immediately after a player makes a selection. This prevents the player from clicking them +again until the current round is resolved. The function retrieves the button elements by their IDs and sets their disabled property to true, effectively disabling them. + +The ResetButtonsState() function is responsible for re-enabling the buttons after the outcome of the round is displayed and the game resets. This function retrieves the button +elements again and sets their disabled property back to false, allowing the player to make selections for the next round. + +Together, these functions ensure that only one selection can be made at a time, preventing multiple button clicks and ensuring a smoother gameplay experience for the player. + + +### Code: + +#### app.js: + +Updated solution code +``` + // enable buttons again + ResetButtonsState(); +``` +``` + +/* Disable button untill */ +function disableButton() { + + // Get the button element by its ID + var rockBtn = document.getElementById("rockButton"); + var paperBtn = document.getElementById("paperButton"); + var scissorBtn = document.getElementById("scissorButton"); + + // Disable the button + rockBtn.disabled = true; + paperBtn.disabled = true; + scissorBtn.disabled = true; +} + +function ResetButtonsState() +{ + var rockBtn = document.getElementById("rockButton"); + var paperBtn = document.getElementById("paperButton"); + var scissorBtn = document.getElementById("scissorButton"); + + // Disable the button + rockBtn.disabled = false; + paperBtn.disabled = false; + scissorBtn.disabled = false; +} +``` + + +### Code review and Outcomes: + + + + + + + + +### Reflection: + +Upon reflection, the issue of preventing multiple button clicks was successfully resolved. Initially, the game experienced the problem of processing multiple rounds simultaneously +when players clicked buttons rapidly, leading to confusion and unexpected outcomes. The roadblock faced was finding an effective way to disable the buttons temporarily after a +player's selection until the current round was resolved. This was overcome by implementing the disableButton() function to disable the buttons immediately after a click, preventing +additional selections until the current round was completed. Additionally, the ResetButtonsState() function ensured that the buttons were re-enabled after the round outcome was +displayed, allowing for subsequent rounds to proceed smoothly. Through careful implementation and testing, the solution effectively addressed the issue, resulting in a more controlled +and enjoyable gameplay experience for players. + + +### Discussion of next steps: + +The next step is to conduct thorough testing of the button disabling functionality to ensure it works reliably across different scenarios and devices. Gathering feedback from users +will provide valuable insights into any usability issues or areas for improvement. Additionally, documenting the implemented solution will serve as a reference for future development +and maintenance. Finally, considering potential enhancements to further improve the gameplay experience, based on user feedback and project requirements, will be essential for the +game's continued success. + + +### Reference : + +* [MDN Web Docs] (https://developer.mozilla.org/en-US/docs/Web) +* [Stack Overflow] (https://stackoverflow.com/) From 3495a89820c0b6c37598967365a0b48e134e3a22 Mon Sep 17 00:00:00 2001 From: monika <144393563+monika-789@users.noreply.github.com> Date: Sat, 30 Mar 2024 21:19:02 -0700 Subject: [PATCH 4/4] Delete Contributing-V1.md --- Contributing-V1.md | 117 --------------------------------------------- 1 file changed, 117 deletions(-) delete mode 100644 Contributing-V1.md diff --git a/Contributing-V1.md b/Contributing-V1.md deleted file mode 100644 index 9992f30..0000000 --- a/Contributing-V1.md +++ /dev/null @@ -1,117 +0,0 @@ -# Intoduction - -## Project Name: Rock-Paper-Scissors-Game - -This project aims to create a responsive Rock, Paper, Scissors game using HTML, CSS, and JavaScript. HTML will structure the game layout, CSS will style it for visual appeal -and responsiveness, and JavaScript will handle player input and game logic. This classic game will be enjoyable on any device, providing entertainment for users of all ages. - -### Key Feaures: - -Responsive Design: The game interface is designed to be responsive, ensuring a seamless experience across various devices and screen sizes. -Score Tracking: The game keeps track of the player's and computer's scores, updating them dynamically with each round. -Randomized Computer Choice: The computer's choice (rock, paper, or scissors) is generated randomly for each round, adding unpredictability to the game. -Reset Functionality: A reset button allows the player to reset the game, clearing scores and resetting hand images to their initial state. -Animation: The game features animation effects (shake) to provide an engaging and interactive experience when the player and computer make their choices. - - -### Link: - -https://github.com/monika-789/rock-paper-scissors-game/tree/monika-dev-game - - -### Summary of issues examined: - -The issue identified is that when the buttons are rapidly clicked, multiple inputs can be registered for subsequent rounds before the current round is resolved. -This can lead to unexpected behavior and disrupt the flow of the game. - - -### Detailed discussion of issues contributed to: - -I worked on a specific issue related to preventing multiple button clicks in my Rock, Paper, Scissors game. I explored different methods, including using the disabled attribute of HTML -buttons and adding/removing event listeners.I found a solution by immediately disabling the buttons after a player makes a selection and re-enabling them after displaying -the round outcome. This approach ensured that only one round is processed at a time, preventing confusion and unexpected results. I also looked into other websites and tutorials such -as MDN Web Docs and Stack Overflow to gather insights and examples on how to handle button clicks and prevent multiple selections in JavaScript. - - -The solution involves two functions: disableButton() and ResetButtonsState(). - -In the disableButton() function, the buttons for rock, paper, and scissors are disabled immediately after a player makes a selection. This prevents the player from clicking them -again until the current round is resolved. The function retrieves the button elements by their IDs and sets their disabled property to true, effectively disabling them. - -The ResetButtonsState() function is responsible for re-enabling the buttons after the outcome of the round is displayed and the game resets. This function retrieves the button -elements again and sets their disabled property back to false, allowing the player to make selections for the next round. - -Together, these functions ensure that only one selection can be made at a time, preventing multiple button clicks and ensuring a smoother gameplay experience for the player. - - -### Code: - -#### app.js: - -Updated solution code -``` - // enable buttons again - ResetButtonsState(); -``` -``` - -/* Disable button untill */ -function disableButton() { - - // Get the button element by its ID - var rockBtn = document.getElementById("rockButton"); - var paperBtn = document.getElementById("paperButton"); - var scissorBtn = document.getElementById("scissorButton"); - - // Disable the button - rockBtn.disabled = true; - paperBtn.disabled = true; - scissorBtn.disabled = true; -} - -function ResetButtonsState() -{ - var rockBtn = document.getElementById("rockButton"); - var paperBtn = document.getElementById("paperButton"); - var scissorBtn = document.getElementById("scissorButton"); - - // Disable the button - rockBtn.disabled = false; - paperBtn.disabled = false; - scissorBtn.disabled = false; -} -``` - - -### Code review and Outcomes: - - - - - - - - -### Reflection: - -Upon reflection, the issue of preventing multiple button clicks was successfully resolved. Initially, the game experienced the problem of processing multiple rounds simultaneously -when players clicked buttons rapidly, leading to confusion and unexpected outcomes. The roadblock faced was finding an effective way to disable the buttons temporarily after a -player's selection until the current round was resolved. This was overcome by implementing the disableButton() function to disable the buttons immediately after a click, preventing -additional selections until the current round was completed. Additionally, the ResetButtonsState() function ensured that the buttons were re-enabled after the round outcome was -displayed, allowing for subsequent rounds to proceed smoothly. Through careful implementation and testing, the solution effectively addressed the issue, resulting in a more controlled -and enjoyable gameplay experience for players. - - -### Discussion of next steps: - -The next step is to conduct thorough testing of the button disabling functionality to ensure it works reliably across different scenarios and devices. Gathering feedback from users -will provide valuable insights into any usability issues or areas for improvement. Additionally, documenting the implemented solution will serve as a reference for future development -and maintenance. Finally, considering potential enhancements to further improve the gameplay experience, based on user feedback and project requirements, will be essential for the -game's continued success. - - -### Reference : - -* [MDN Web Docs] (https://developer.mozilla.org/en-US/docs/Web) -* [Stack Overflow] (https://stackoverflow.com/) -