sivicstudio / starkludo

Ludo game on Starknet
https://testnet.starkludo.com
MIT License
8 stars 27 forks source link

Confirm before restarting game #11

Closed princeibs closed 1 week ago

princeibs commented 3 weeks ago

When the restart button is clicked, a confirmation window should pop up asking the player confirm if they want to restart the game. If "Yes" is selected, proceed to restart the game, if "No" is selected, close the confirmation window without taking any action.

image

If you have any more questions or need more clarity on this issue, endeavour to join the StarkLudo contributors channel (https://t.me/+hnjQooODZOA2M2Rk) on Telegram and the project leads will be there to help.

Gift-Naomi commented 3 weeks ago

Hi @princeibs can I work on this?

onlydustapp[bot] commented 3 weeks ago

Hi @Gift-Naomi! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

onlydustapp[bot] commented 3 weeks ago

Hi @od-hunter! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

onlydustapp[bot] commented 3 weeks ago

Hi @od-hunter! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

thesledge04 commented 3 weeks ago

hi

martinvibes commented 3 weeks ago

I @princeibs am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i'm a frontend dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this i i'm giving the oppotunity

How I plan on tackling this issue

Display Confirmation Window: When the restart button is clicked, show a popup or dialog box asking the player to confirm if they want to restart the game.

Provide Yes/No Options: Give the player the option to choose "Yes" to proceed with the restart or "No" to cancel the action.

Handle User Input: If the player selects "Yes," initiate the game restart process. If the player selects "No," close the confirmation window without taking any further action.

onlydustapp[bot] commented 3 weeks ago

Hi @martinvibes! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

MullerTheScientist commented 3 weeks ago

Hello @princeibs Can I address this issue

CollinsC1O commented 3 weeks ago

Hi @princeibs I will love to work on this

onlydustapp[bot] commented 3 weeks ago

Hi @CollinsC1O! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

Supa-mega commented 3 weeks ago

hi @princeibs can i work on this

onlydustapp[bot] commented 3 weeks ago

Hi @Supa-mega! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

melnikga commented 3 weeks ago

Hi, can I take this? My profile on OnlyDust: https://app.onlydust.com/u/melnikga

onlydustapp[bot] commented 3 weeks ago

Hi @melnikga! Maintainers during the ODHack # 7.0 will be tracking applications via OnlyDust. Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

PabloVillaplana commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack developer with 6 years of experience in the industry, I am super excited to be able to contribute to Web 3 projects, this to continue paving my way as an Open Source Contributor.


How I plan on tackling this issue

This won't take long to resolve, the longest time it would take would be to set up the project and get it working properly locally.

I’ll add a button labeled "Restart" to the game interface. 
Next, I’ll attach an Event Listener to the "Restart" button, so that when clicked, it triggers a function to display a confirmation window. 
Then, I’ll display a confirmation window (using a modal or dialog box) with a message asking, "Are you sure you want to restart the game?" The confirmation window should include two buttons: "Yes" and "No." 
For the "Yes" and "No" options: if the player clicks "Yes," the game will execute the function that handles restarting; if they click "No," the confirmation window will close without taking any further action.

Ayoazeez26 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web developer with over 6 years experience building applications both personal and professional projects. I started contributing to open source via onlydust in march this year and I have contributed to a couple of issues, you can see them in my profile.

How I plan on tackling this issue

Create a confirmation modal to ask the player to confirm if they want to restart the game and restart if they click yes and close the modal if they click no

Ugo-X commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack blockchain Developer with expertise in Next.js, Nest.js, TypeScript, JavaScript, React, Node.js, Three.js, and Solidity. My journey with OnlyDust hackathons began at Edition 1, and I've since made 47 contributions across 11 projects. With my extensive experience on the OnlyDust platform (profile: https://app.onlydust.com/u/Ugo-X), I've honed my skills in delivering quality solutions under pressure. I bring a unique blend of technical proficiency and user-focused design to every project, whether it's crafting immersive 3D experiences or developing smart contracts. My track record shows I can adapt quickly and contribute effectively to diverse challenges. As we surf through Edition 7, I'm excited to leverage my skills and hackathon experience to push the boundaries of blockchain development. I'm confident in my ability to tackle new challenges and drive innovation in this space.

How I plan on tackling this issue

I will implement a confirmation window for the restart button in the game as follows:

  1. Design Confirmation Modal: a. I will create a simple, user-friendly modal component for the confirmation window. b. I will ensure the modal includes "Yes" and "No" options, and a clear message asking for confirmation.

  2. Implement Modal Logic: a. I will create a state variable to control the visibility of the confirmation modal. b. I will implement functions to show and hide the modal.

  3. Modify Restart Button Behavior: a. I will update the restart button's onClick handler to show the confirmation modal instead of immediately restarting the game.

  4. Implement Confirmation Actions: a. I will create a function to handle the "Yes" option, which will close the modal and then restart the game. b. I will implement the "No" option to simply close the modal without any further action.

  5. Integrate with Existing Game Logic: a. I will ensure the restart function is properly called when "Yes" is selected. b. I will verify that the game state remains unchanged when "No" is selected.

  6. Style the Modal: a. I will style the confirmation modal to match the game's existing UI design. b. I will ensure the modal is responsive and looks good on various screen sizes.

  7. Implement Accessibility Features: a. I will add appropriate ARIA attributes to make the modal accessible. b. I will ensure the modal can be navigated and activated using keyboard controls.

  8. Testing: a. I will test the confirmation flow thoroughly, ensuring both "Yes" and "No" options work as expected. b. I will verify that the game state is correctly handled in all scenarios.

  9. Code Review and Refactoring: a. I will review the implemented code for clarity and efficiency. b. I will refactor if necessary to improve code quality or performance.

  10. Documentation: a. I will update any relevant documentation to reflect the new restart confirmation feature. b. I will add inline comments to explain the confirmation logic where necessary.

This approach ensures a smooth implementation of the restart confirmation feature, enhancing the user experience by preventing accidental game restarts while maintaining the game's existing functionality and design cohesion.

od-hunter commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, please I'd love to be given the opportunity to contribute to this repo, I am a blockchain developer html, css, react, JavaScript, typescript, solidity and Cairo.This would be my first time contributing to this repo and I’d love to be given the opportunity to prove my skills.

How I plan on tackling this issue

Hi @princeibs , please can I be assigned this issue? To solve this issue, I'll take the following steps:

  1. I’ll add a button labeled "Restart" to your game interface.
  2. I’ll then add an Event Listener to the "Restart" button. So that When clicked, it will trigger a function to display the confirmation window.
  3. Next, I’ll display a Confirmation Window(use a modal or a dialog box to present the confirmation message to the player. This message should ask, "Are you sure you want to restart the game?" The confirmation window should include two buttons: "Yes" and "No.")
  4. For the Yes or no options; If the player clicks "Yes," the game should call the function that handles restarting the game and; If the player clicks "No," the confirmation window should close without any further action

Kindly assign me please, I’m ready to work.

DioChuks commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Full-Stack Development: End-to-End Projects: With expertise in both frontend (React.js, TypeScript) and backend (Node.js, Laravel), i can handle full-stack projects, building robust and scalable web applications from the ground up. API Design and Integration: My knowledge of Node.js and Laravel positions me well to design and implement APIs that power frontend applications, ensuring seamless integration and performance.

  1. Advanced Frontend Techniques: Component Design: With experience in React.js, I can create reusable, modular components that improve code maintainability and consistency across projects. State Management: Leverage my knowledge to implement advanced state management strategies, whether using built-in React tools like Context API or external libraries like Redux. Performance Optimization: Use my understanding of JavaScript and TypeScript to write optimized code, improving the performance and responsiveness of the applications.

How I plan on tackling this issue

To implement a confirmation window before restarting the game, here's how I would approach the problem:

  1. Add the Restart Button Click Handler: Identify the existing Restart button in the code and add an event handler to capture the click event. Ensure the event handler triggers a confirmation dialog.

  2. Implement the Confirmation Dialog: Native Browser Dialog: Use the built-in window.confirm method to display a simple confirmation dialog Custom Modal Dialog: If a more customized dialog is needed (e.g., matching the game’s UI theme), i'll create a modal component. The modal can be conditionally rendered based on the component state.

  3. Handle the Restart Logic: Ensure that the restartGame function is properly defined to reset the game state when called. If necessary, the function should reset all relevant variables, components, and game status to their initial states. Styling the Confirmation Modal: If using a custom modal, apply styles to ensure it fits well with the existing UI. Make sure the modal is centered, the background is slightly dimmed to focus on the dialog, and the buttons are easily clickable. Lastly, accessibility considerations: Ensure the modal is accessible by including keyboard navigation (e.g., focus management). Add appropriate ARIA roles (role="dialog") and labels to enhance accessibility.

martinvibes commented 3 weeks ago

I @princeibs am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i'm a frontend dev and i have skills in react, typescript, next.js, tailwind, sass, boostrap etc. i would love to work on this i i'm giving the oppotunity

How I plan on tackling this issue

Display Confirmation Window: When the restart button is clicked, show a popup or dialog box asking the player to confirm if they want to restart the game.

Provide Yes/No Options: Give the player the option to choose "Yes" to proceed with the restart or "No" to cancel the action.

Handle User Input: If the player selects "Yes," initiate the game restart process. If the player selects "No," close the confirmation window without taking any further action.

ScottyDavies commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am front end developer with 4 years experience. this will be my first time contributing and i am ready to

How I plan on tackling this issue

I would approach this issue with following steps Understand the Requirement: Display a confirmation window when the restart button is clicked. If the user selects "Yes", proceed to restart the game. If the user selects "No", close the confirmation window without taking any action. Key Elements: Handling the click event on the restart button. Displaying the confirmation window. Capturing the user's response and taking appropriate action. Solution Design: Event Handling: Add a click event listener to the restart button. Confirmation Window: Create a modal or overlay element to display the confirmation window. Include "Yes" and "No" buttons in the confirmation window. User Response Handling: Listen for the user's response (click on "Yes" or "No" button). If "Yes" is selected, proceed to restart the game. If "No" is selected, close the confirmation window. Implement the Solution: Add the click event listener to the restart button. Create the HTML structure for the confirmation window. Implement the JavaScript code to display the confirmation window and handle the user's response. Test and Refine: Thoroughly test the confirmation window functionality, including handling edge cases. Refine the implementation based on feedback or identified issues. Document and Review: Document the code and the approach, highlighting the key design decisions.

josephchimebuka commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @princelbs I am Joseph Chimebuka I'm a full-stack software developer with 4+ years of experience in crafting innovative products. I've built a range of projects, including https://mattedsgn.vercel.app/ and https://metacrypt.vercel.app/ showcasing my expertise in React, Next.js, and blockchain technologies. I'm also an active contributor onlydust. here's my account https://app.onlydust.com/u/josephchimebuka.

How I plan on tackling this issue

When the restart button is clicked, I will show a confirmation dialog asking if the player wants to restart the game. If the player selects "Yes," I will proceed to restart the game. If they select "No," I will simply close the confirmation window without taking any action.

Benjtalkshow commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @princeibs

I’m available to work on the "Confirm before restarting game #11" issue. My name is Benjamin, and I have extensive experience building gamified TypeScript projects, specializing in Next.js, TypeScript, and frontend development. I’ve contributed to various projects, including those on OnlyDust, where I tackled complex UI and component challenges.

Understanding the Issue

Currently, when the restart button is clicked, the game restarts immediately. To improve the user experience, a confirmation window should be introduced to ensure players genuinely intend to restart the game, preventing accidental restarts.

How I plan on tackling this issue

Implement Confirmation Window

User Experience Focus

Testing and Validation

Mgonzalez06 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a full stack developer with 2 years of experience, working daily with TypeScript. My expertise allows me to build robust, user-friendly interfaces and ensure seamless interactions, making me well-suited to handle tasks like implementing confirmation modals and managing game state effectively. First time trying to contribute to the OD Hack. Ready to work and learn new things!

How I plan on tackling this issue

I would start by implementing an event listener on the restart button that triggers a modal confirmation window when clicked. This window would present the player with "Yes" and "No" options. If "Yes" is selected, the game state will be reset to its initial state, ensuring that all variables and UI elements reflect the beginning of a new game. If "No" is selected, the modal will simply close, and the game will continue as is. I will follow the app's design standards to ensure consistency and a clear user experience while maintaining code simplicity and efficiency.

LazarusAA commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a blockchain developer html, react, JavaScript, typescript, solidity and Cairo. This is my first time contributing to StarkLudo and I'm exited to implement my frontend skills on this issue.

How I plan on tackling this issue

Best regards, Lazarus

Jayse007 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have over 5 years of experience with JavaScript and typescript, and I have worked on multiple projects with these tools. This involves frontend of websites, casual web apps, personal leisure projects to just play around with codes. I have lots of experience using its DOM (Document Object Model) property to manipulate

How I plan on tackling this issue

I would add in a functionality that would prompt a confirmation message when the restart button is clicked and I would accomplish this with a confirm command in JS.

If 'yes' is selected, it would restart and for 'no', is selected, close the confirmation window without taking any action: I would solve this using flow conditions to address the variable holding the confirm keyword.

SoarinSkySagar commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have 2 years of experience in frontend engineering using various tech stacks like Next.js, React.js, redux, zustand and many CSS frameworks.

How I plan on tackling this issue

I would create a modal component which will in the same theme as the entire page, and then move the restart function from the restart button onClick to the confirmation button's onClick on the modal component. Now on the restart button I will add the function to open the modal component.

melnikga commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I am a frontend developer, I have participated in all ODHacks since the second one, I would be very pleased to work on your project.

How I plan on tackling this issue

My profile on OnlyDust: https://app.onlydust.com/u/melnikga

thesledge04 commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a strong background in front-end development, with a focus on creating interactive and user-friendly interfaces. My experience includes implementing various types of modals and confirmation dialogs, which are crucial for providing clear user interactions and feedback.

In previous projects, I’ve successfully integrated confirmation dialogs and handling user responses using JavaScript. For example, I’ve used JavaScript to create custom modals that prompt users for confirmation before taking an action, such as restarting a game or submitting a form. This involves managing the display of the modal, capturing user input, and executing the appropriate actions based on the user’s choice.

To implement the confirmation dialog for the restart button, I would leverage my skills in JavaScript and CSS to ensure a smooth and intuitive user experience. This includes creating a modal with options for 'Yes' and 'No,' and handling the logic to restart the game or close the modal based on the user's selection.

How I plan on tackling this issue

  1. Create the HTML Structure for the Modal: First, create the HTML structure for the confirmation modal. This modal will be hidden initially and will be displayed when the restart button is clicked.

html Copy code

  1. Add CSS for Styling the Modal: Add CSS to style the modal and make it appear centered on the screen.

css Copy code / Modal Styles / .modal { display: none; / Hidden by default / position: fixed; / Stay in place / z-index: 1000; / Sit on top / left: 0; top: 0; width: 100%; / Full width / height: 100%; / Full height / overflow: auto; / Enable scroll if needed / background-color: rgba(0,0,0,0.4); / Black background with opacity / }

.modal-content { background-color: #fefefe; margin: 15% auto; / 15% from top and centered / padding: 20px; border: 1px solid #888; width: 80%; / Could be more or less, depending on screen size / }

button { margin: 10px; padding: 10px; cursor: pointer; }

  1. Add JavaScript to Handle Modal Behavior: Use JavaScript to handle the logic for displaying the modal, and taking actions based on user input.

javascript Copy code // Get elements const restartButton = document.getElementById('restartButton'); const confirmationModal = document.getElementById('confirmationModal'); const confirmYes = document.getElementById('confirmYes'); const confirmNo = document.getElementById('confirmNo');

// Function to show the modal function showModal() { confirmationModal.style.display = 'block'; }

// Function to hide the modal function hideModal() { confirmationModal.style.display = 'none'; }

// Function to restart the game function restartGame() { // Your game restart logic here console.log('Game restarted'); }

// Event listener for restart button restartButton.addEventListener('click', showModal);

// Event listener for 'Yes' button confirmYes.addEventListener('click', function() { restartGame(); hideModal(); });

// Event listener for 'No' button confirmNo.addEventListener('click', hideModal);

// Optional: Close the modal when clicking outside of the modal-content window.addEventListener('click', function(event) { if (event.target === confirmationModal) { hideModal(); } });

  1. Testing: Check Modal Display: Ensure that clicking the restart button shows the modal. Confirm Actions: Verify that clicking "Yes" triggers the restart logic and hides the modal, and that clicking "No" simply hides the modal without restarting the game. Cross-Browser Testing: Test the functionality across different browsers and devices to ensure compatibility.
Elsie-ND commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am excited to participate in ODHack 7.0 for Starkludo. With a strong foundation in Python and prior experience developing various projects, including a calculator application, I have honed my skills in logic, structure, and functionality in code. While my proficiency lies primarily in Python, I am eager to leverage this knowledge as I transition into TypeScript for this task. My background in writing efficient and logical Python code enables me to approach problems with a strong understanding of syntax and design, which I can translate to TypeScript.

I have tackled complex logic in Python, and I believe that my ability to break down tasks into manageable pieces and follow structured programming practices will serve me well in implementing features like the restart confirmation window. The adaptability and problem-solving skills I've developed with Python will help me efficiently learn and apply TypeScript for this task, ensuring the successful execution of the required feature.

How I plan on tackling this issue

In approaching the task for ODHack 7.0 on Starkludo, I plan to take the following steps to implement the functionality of the restart button, ensuring a smooth user experience by adding a confirmation window:

Initial Setup: I will start by ensuring my TypeScript environment is configured correctly for the task. I will verify that StarkNet-related dependencies are installed and that the game interface is functioning as expected.

Button Identification: My first task will be to identify the restart button within the game’s HTML structure. This will be essential for attaching the necessary logic for user interaction.

Event Listener Implementation: I will add a click event listener to the restart button. This will allow me to trigger a function whenever the user clicks the restart button, initiating the confirmation process.

Confirmation Window Creation: I will design and implement a confirmation window. When the user clicks the restart button, this window will pop up, asking for confirmation with the options “Yes” or “No.” This will ensure that the user has control over whether or not to proceed with restarting the game.

Restart Game Logic: I will create a function that executes the game reset logic, including clearing the game state and resetting variables. This function will only be called if the user confirms their intent by selecting “Yes.”

Testing and Validation: After implementation, I will thoroughly test the functionality, ensuring the confirmation window appears correctly and that the appropriate actions are taken based on the user’s choice. Selecting “Yes” will restart the game, while selecting “No” will close the window without any further action.

LukePereyra commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hey team, I'm a Frontend Engineer doing my first steps in web3. This can be one of my first tickets in Onlydust :)

How I plan on tackling this issue

I will add the functionality to the component as it's described.

juankohler commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Juan Kohler, nice to meet you. I'm currently a member of Dojo Coding, and if accepted, this would be my first contribution to open-source code. I have over 7 years of experience in my career. In the early years, I focused on front-end development, and in addition to learning the fundamentals, I gained experience in React and Angular. In my first job, I worked on 8 different front-ends. My second job was at MercadoLibre, where I worked on BFF (Backend for Frontend) and front-end projects, and learned Node.js and TypeScript. In my third job at PedidosYa, I focused more on backend development using Go. In my current job at a new company, I'm part of the initial team, and my role initially was Fullstack Developer, working on front-end, back-end, and even some infrastructure tasks. I'm currently the Technical Lead at the company. All of this can be validated on my LinkedIn profile: https://www.linkedin.com/in/juankohler/.

How I plan on tackling this issue

The steps I would follow in my proposal are:

1- Create a new generic modal or pop-up component that could be reused for future purposes. Regarding the styling, I would ensure it aligns with the existing design of the page, and when the modal opens, I would like the background to dim slightly to enhance the user experience. 2- Implement the new component in the RestartGame component.

This would result in a PR of 3 files. I look forward to your feedback and thank you for the opportunity provided by this hackathon.

deeseeker commented 3 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Frontend developer with over 2 years of experience working with React, TypeScript, and JavaScript. Throughout my career, I have tackled complex business challenges, particularly those that require careful logic and problem-solving. Given my experience, I believe my skill set aligns well with the task of implementing the "Confirm Before Restarting Game" feature, and I'm confident I can contribute effectively to this enhancement.

How I plan on tackling this issue

Clone the project on my pc Spin it up following the documentation Review the existing codebase to understand how the restart button currently functions within the game I plan to design a simple confirmation window that pops up when the restart button is clicked Implement the Confirmation Logic Integrate with the Existing Code Test the Feature Document the Feature

onlydustapp[bot] commented 3 weeks ago

The maintainer princeibs has assigned martinvibes to this issue via OnlyDust Platform. Good luck!

martinvibes commented 3 weeks ago

@princeibs thanks chief will get to it