Implement design for "Restart game" modal

princeibs commented 1 day ago

Description

Action items

Implement design for "Restart game" modal
Click on "Start over" in this prototype in order to see the animations

Calebux commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged I will like to jump on this i'm good with FE

How I plan on tackling this issue To implement the "Restart game" modal, I will take the following steps:

Study Design and Animations:

Analyze the prototype for design and animation details of the "Restart game" modal. Create Reusable Modal Component:

Develop a Modal component in React, ensuring accessibility and compliance with WAI-ARIA guidelines. Implement Specific Content and Styling:

Design the "Restart game" content within the modal, including custom styling and typography. Add Animations:

Use CSS transitions and transforms, leveraging React’s transition hooks for smooth mounting and unmounting effects. Ensure Responsiveness:

Make the modal responsive to ensure functionality across various screen sizes. Trigger Logic:

Implement the logic to open the modal when the "Start over" action is initiated.

onlydustapp[bot] commented 1 day ago

Hi @Calebux! Maintainers during the ODHack # 8.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.

Joy-Adah commented 1 day ago

Hi can I be assigned this?

onlydustapp[bot] commented 1 day ago

Hi @Joy-Adah! Maintainers during the ODHack # 8.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 1 day ago

Hi @CollinsC1O! Maintainers during the ODHack # 8.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.

martinvibes commented 1 day ago

Hello @princeibs I'm a frontend developer and u would love to hop on this issue

onlydustapp[bot] commented 1 day ago

Hi @martinvibes! Maintainers during the ODHack # 8.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.

martinvibes commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

i would solve this issue by:

Design Implementation: Implement the modal design as shown in the prototype.

Animation: Ensure the animations are correctly applied when clicking on the "Start over" button in the prototype.

Gift-Naomi commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Web3/frontend developer With a lot of experiences in open source contribution.

How I plan on tackling this issue

Can I please be assigned to work on this issue?

PabloVillaplana commented 1 day 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. I am from Dojo Coding Community

How I plan on tackling this issue

Starkludo gave me one of my first contributions and I would like to be able to give it to him again, and contribute with this small restart game issue

ridwanalaps commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with 2 years experience building applications

How I plan on tackling this issue

I will follow the figma design to implement to pixel perfect details and also implement the animations

Mario-Araya commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hii! My name is Mario Araya, I’m a Software Developer with 2+ years of experience. I have worked with backend technologies such as Cairo, Java, and C#, as well as frontend development using React, NextJS, and JavaScript/TypeScript. I’ve made contributions to open-source projects, completed a Starknet Bootcamp, exercises on NodeGuardians, finished Starklings, and participated in multiple hackathons. I’m also a member of the Dojo Coding community here in Costa Rica.

How I plan on tackling this issue

Review the Prototype: First, I would examine the provided prototype to understand the design elements and animations specified for the "Restart game" modal, ensuring I take note of the visual aspects and interactions.

Create Modal Component: I would implement a new modal component for the "Restart game" functionality, following the design specifications from the prototype. This would include setting up the necessary HTML structure, CSS styles, and any required animation classes.

Implement Animations: I would add the animations specified in the prototype using CSS transitions or a library like Framer Motion (if applicable) to create a smooth opening and closing effect for the modal when the "Start over" button is clicked.

Integrate Functionality: I would ensure that the modal can be triggered by the "Start over" button and contains necessary actions, such as confirming the restart or canceling the action. I would implement handlers to manage the state of the game accordingly.

Test the Modal: After implementation, I would test the modal to ensure it appears correctly, functions as intended, and that the animations work smoothly. I would also check for responsiveness across different screen sizes.

Seek Feedback: If any uncertainties arise during the process or if there are design decisions to clarify, I would consult with the maintainers or designers to confirm that the implementation aligns with their vision.

Calebux commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I will like to jump on this i'm good with FE

How I plan on tackling this issue

To implement the "Restart game" modal, I will take the following steps:

Study Design and Animations:

Analyze the prototype for design and animation details of the "Restart game" modal. Create Reusable Modal Component:

Develop a Modal component in React, ensuring accessibility and compliance with WAI-ARIA guidelines. Implement Specific Content and Styling:

Design the "Restart game" content within the modal, including custom styling and typography. Add Animations:

Use CSS transitions and transforms, leveraging React’s transition hooks for smooth mounting and unmounting effects. Ensure Responsiveness:

Make the modal responsive to ensure functionality across various screen sizes. Trigger Logic:

Implement the logic to open the modal when the "Start over" action is initiated.

Rayan9064 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer and Cairo Developer. I have good experience building web application. I am new to Open Source and want to begin with this project. I am good in React, Typescript, Redux and Context APIs. I can leverage the same to make this a better game for the users.

How I plan on tackling this issue

1) Checking the structure of the project and understanding the codebase. 2) Knowing the tech stack required 3) Finding the area of the problem. 3) Designing the Figma solution. 4) Implementing into code. 5) Testing the code by inspecting in different screen size. 6) Modify the code when not working as expected. 7) After successful review, create a pull request.

Solomonsolomonsolomon commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

3 years fullstack developer with experience contributing to starkludo

How I plan on tackling this issue

Ill use the figma file,and implement the model based on the design

MatiasAchucarro commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a passionate and results-driven web developer, currently deepening my knowledge in web3 technologies, Cairo, and open-source development through Dojo Coding. My skill set includes expertise in JavaScript, React, HTML, CSS, C# with .NET Entity Framework, and more. I also have experience with tools like Git, GitHub, SQL Server, and Postman. My focus has been on building solid web applications, from task lists to full-fledged CRUD systems, with front-end, back-end, and database integration.

I have already made a contribution to the open-source ecosystem, and I am eager to engage in more projects, particularly those involving Cairo.

How I plan on tackling this issue

To implement the "Restart Game" modal using Cairo and TypeScript, start by analyzing the prototype design to understand the necessary elements and animations. Then, create the HTML structure for the modal and apply the corresponding CSS styles to ensure it displays correctly and has the desired animation.

In TypeScript, handle the modal logic by making it visible when a specific event, such as a button click, occurs. Implement functions to open and close the modal, as well as to manage the restart action. If needed, integrate the restart logic with Cairo functions through appropriate communication, such as calls to a smart contract or state management.

Finally, conduct tests to ensure the modal functions correctly and is accessible on different devices.

Agbeleshe commented 1 day 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 3 years experience in HTML, CSS JavaScript, node.js React, Typescript and other libraries and frameworks .

How I plan on tackling this issue

I would love this to be my first contribution to the platform. I will analyze the structure of code and implement a pixel perfect modal styling as seen in the Figma sample.

jedstroke commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a seasoned fullstack developer with over 6 years of experience working across Fintech, Web3 and growth-scaling industries. I am frontend heavy, and I am proficient in designing adaptable, accessible user intuitive experiences.

How I plan on tackling this issue

I would create a modal context provider which should be a universal & reusable which would have a children prop to pass modal ui(s) per use case.

SudiptaPaul-31 commented 1 day ago

Hey @princeibs I'm applying on this issue

Hi! I'm a full-stack developer with extensive experience in creating dynamic and responsive web applications using technologies like React, Node.js, Express, and MongoDB. I’m eager to contribute to this project and would love to take on this issue.

How I plan on tackling this issue Modal Implementation:

I'll create a modal component using React (or the framework the project uses). This modal will be triggered when the user clicks the "Start over" button. I'll ensure the design closely matches the provided prototype, paying attention to details like spacing, colors, and typography. Animations:

Using CSS animations (or a JavaScript animation library like Framer Motion or GSAP), I'll replicate the modal opening and closing animations as demonstrated in the prototype. This will include smooth transitions, fade-ins/outs, and sliding effects to create an engaging user experience. Modal Interactivity:

The modal will have buttons for restarting or canceling. I'll implement click handlers that will trigger appropriate actions like resetting the game state when the "Restart" button is clicked. I'll ensure the modal is accessible, adding appropriate ARIA roles and handling focus correctly. Testing and Optimization:

After implementing the modal, I’ll test its responsiveness across different devices and browsers to ensure consistent behavior. I’ll also focus on maintaining accessibility and user-friendly functionality. I’m excited to contribute and am confident this solution will enhance the user experience. Looking forward to your response!

onlydustapp[bot] commented 1 day ago

Hi @SudiptaPaul-31! Maintainers during the ODHack # 8.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 1 day ago

Hi @SudiptaPaul-31! Maintainers during the ODHack # 8.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.

Mobarak786 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a mern stack developer worked on projects from scratch.

How I plan on tackling this issue

After click on "start over" button this modal will be appear. There will be 2 button "no" means simply close the model . "Yes" Means close the model and go the home page .

melnikga commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Can I take this? I’ve participated in almost every ODHack, and I already contributed to the StarkLudo project at the last hackathon. I have extensive experience in frontend development. I can handle this task.

How I plan on tackling this issue

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

Benjtalkshow commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Benjamin. I’m a full-stack JavaScript developer with experience in building fun and engaging blockchain games. Since joining OnlyDust, I've made 18 contributions, and I’m willing to bring that experience to create the "Restart Game" modal.

How I plan on tackling this issue

First, I will look closely at the prototype, especially the "Start Over" button, to understand how the animations should work. This is important to make sure the modal matches the game’s style.

Next, I will start building the modal according to the design. I’ll set up the layout and styles to make it look good and work well.

After that, I will add the animations that were shown in the prototype. I want to ensure that when the modal opens and closes, it feels smooth and nice for the player.

Once everything is set up, I will test the modal on different devices to make sure it works perfectly. This will help me catch any issues and ensure that players have a great experience.

Finally, I will write some documentation explaining how the modal works. This will be helpful for anyone who needs to work on it in the future.

GoSTEAN commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience in creating interactive UI components, including modals and animations, using JavaScript frameworks like React and CSS transitions. I’ve worked on similar game projects where smooth UI interactions, such as restart modals, enhance user experience. My familiarity with handling animations and state management ensures I can implement a modal that is both functional and visually appealing.

How I plan on tackling this issue

I would begin by implementing the "Restart game" modal based on the provided design and ensure that it matches the prototype's animations. Using CSS transitions or JavaScript animation libraries, I’d make sure the modal’s opening and closing animations are smooth and responsive. I would also handle the logic for restarting the game, ensuring that once the player clicks "Start over," the game resets correctly, and the modal is dismissed.

sasasamaes commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

JavaScript developer with 5+ years of experience involved in the full software development lifecycle. My experience includes providing IT solutions for enterprises using JavaScript, React, TypeScript, Node.js, and MongoDB. Additionally, I am expanding my knowledge in Web3 technologies, particularly in Cairo and Solidity.

I am also a community leader and sensei at Dev.f, where I mentor and lead a vibrant community of developers and am a Dojo Coding Member.

My areas of interest include Web3, frontend, backend, and full-stack development.

How I plan on tackling this issue

-I analyze the project, figma and its animations: -I create a "restart game" modal -I add restart functionality to the yes button -To the No button, close the modal -I test -I ask for feedback on the issue

abdegenius commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a skilled fullstack developer with a wealth of experience in both frontend and backend JavaScript. With a solid foundation in testing,I have mastered frameworks like Mocha, Chai, and Jest to ensure robust, reliable code in every project. In addition to traditional web development, I have a strong background in blockchain technology, with hands-on experience in Solidity for Ethereum-based smart contracts. Moreover, I have delved into the emerging world of StarkNet, working with Cairo, a cutting-edge language tailored for STARKs, making them a versatile developer capable of bridging both traditional and decentralized web applications.

How I plan on tackling this issue

I will utilize the current existing stack of the project to implement the restart popup feature as design, I will complete the design within the minimal time possible.

JoelVR17 commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

UI: Implement design for "Restart game" modal Hello Starkludo team,

I am Joel Vargas, and I'm member of Dojo Coding. I also come from OnlyDust

I would like to request the assignment of the issue related to ISSUE. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

STEP 1: Create the Modal Component

I will create a Modal component in React using Tailwind CSS to match the style shown in the prototype.
The modal will be triggered by a button click event (onClick), allowing the user to choose between "Yes" or "No" options.
I will ensure that the modal has a semi-transparent background and is centered on the screen using Tailwind's utility classes (fixed, inset-0, flex, items-center, justify-center, etc.).

STEP 2: Add Transition Animations

I will use Tailwind's transition, ease-in-out, and duration-500 classes to add smooth animations when the modal appears and disappears.
Animations will include fading in the modal and zoom effects, as per the provided prototype link.

STEP 3: Add the Buttons with Interactivity

I'll implement two buttons ("YES" and "NO") using Tailwind's button styling classes (e.g., bg-blue-500, hover:bg-blue-700, text-white, rounded-lg).
The buttons will have hover and active states to enhance the user experience, and I will ensure that both buttons are responsive and accessible.

STEP 4: Handle User Interaction

When the user clicks "YES," I will reset the game state using React hooks like useState or useReducer to handle the state changes.
Clicking "NO" will close the modal without performing any additional actions.

STEP 5: Responsive Design

I'll ensure the modal is fully responsive, adjusting the size and layout based on screen size, utilizing Tailwind's responsive classes (e.g., md:, lg:) to optimize for mobile, tablet, and desktop views.

Technical Stack

React: To handle the component logic and state.
SCSS & Tailwind CSS: For the modal styling and ensuring responsiveness.
Hooks: To manage the modal visibility and user actions (e.g., useState for modal state).

Example Code Outline


import { useState } from 'react';

function RestartGameModal() {
  const [showModal, setShowModal] = useState(false);

  const handleRestart = () => {
    setShowModal(false);
    // Logic to reset the game goes here
  };

  return (
    <div>
      <button onClick={() => setShowModal(true)}>Restart Game</button>

      {showModal && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
          <div className="bg-gray-800 text-white p-6 rounded-lg shadow-lg transition ease-in-out duration-500">
            <p>Are you sure you want to start over?</p>
            <p>If you click yes, there's no going back.</p>
            <div className="flex justify-between mt-4">
              <button onClick={() => setShowModal(false)} className="bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg">NO</button>
              <button onClick={handleRestart} className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-lg">YES</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

export default RestartGameModal;

MullerTheScientist commented 1 day 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 experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript.

How I plan on tackling this issue

Step 1: Design Modal Layout Create a wireframe or mockup of the modal: Title: "Restart Game?" Text: "Are you sure you want to restart the game? All progress will be lost." Buttons: "Restart" and "Cancel" Step 2: Style Modal Elements Apply styles to modal elements: Background color and opacity Border radius and shadow Font family, size, and color Button styles (color, hover, active) Step 3: Implement Modal Functionality Write JavaScript code to display and hide the modal: Trigger modal on game restart button click Hide modal on cancel or restart confirmation

LazarusAA commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a solid background in developing interactive UI components, such as modals and animations. Ive worked on game projects before focusing on making cool designs and I believe I can use this past experiences for this issue.

How I plan on tackling this issue

I would design and implement the restart model based on the current Figma design while providing some necessary improvements and adding required animations

DavidOredu commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I would like to apply for the task of implementing the design for "Restart game" modal. My background is in Unity game development. I've have knowledge in game design and UI design in the Unity engine. I could bring my expertise in UI design for the restart game modal and functionality.

suhas-sensei commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Whew, looks like a ton of applications up there. Working as a Meme-Driven Dev back at Gobblchain, im left kind of feeling like https://imgflip.com/i/94quwj

with my previous experiences in personal projects and hackathons, I can whip up some real solutions—probably with a one-liner or two and a laugh along the way. [it's my first ODHack :)]

How I plan on tackling this issue

well, let’s make this "Restart Game" modal pop! I’ll:

Dive into the prototype to catch the vibe and animations.
Build a reusable modal component in React with smooth transitions using CSS or Framer Motion.
Nail the "Yes/No" interaction and ensure it’s responsive across devices.
Trigger the modal logically when the "Start over" action is clicked, making it intuitive for the player.

Kaminar-i commented 1 day ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello i am a frontend dev and blockchain developer please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

can i work on this issue @princeib

Steps to Implement Prototype Review:

Click on the "Start over" button in the prototype to observe the modal's design and animations. Environment Setup:

Ensure you have a TypeScript-based frontend environment set up. This may include frameworks like React, Angular, or Vue.js. Modal Component Structure:

Create a new component for the modal (e.g., RestartGameModal.tsx for React). Use appropriate HTML/CSS to match the design specifications from the prototype. Styling:

Apply styles using CSS/SCSS or styled-components to match the modal design. Ensure to include transitions for smooth animations as indicated in the prototype. Animation Implementation:

Utilize CSS animations or libraries (like Framer Motion for React) to implement the opening and closing animations. Ensure the animations mimic those observed in the prototype. Functionality:

Add functionality to the modal: Confirm and restart the game when the user clicks "Yes." Close the modal without action when the user clicks "No" or outside the modal. Testing:

Test the modal across different screen sizes to ensure responsiveness. Verify that animations work smoothly and the modal behaves as expected. Accessibility:

Ensure the modal is accessible: Include keyboard navigation. Use ARIA roles for screen readers.

sivicstudio / starkludo