Update UI arrangement on mobile screen

princeibs commented 2 months ago

Currently, on mobile screens, the order of the UI is Ludo board > Heading > Control. Update the order to be Heading > Ludo board > Control on mobile screens.

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.

ShantelPeters commented 2 months ago

Hi @princeibs i can work on this

onlydustapp[bot] commented 2 months ago

Hi @ShantelPeters! 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.

Mystic-Nayy commented 2 months ago

Hi @princeibs i can work on thid

onlydustapp[bot] commented 2 months 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.

thesledge04 commented 2 months ago

hi

martinvibes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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. , 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

How I plan on tackling this issue Understanding the Problem Based on the provided description, the current UI layout for a Ludo board game on mobile devices is not optimal. The desired order is to prioritize the heading, followed by the Ludo board, and then the controls. Proposed Solution I will:

Analyze the Existing UI: • Examine the current structure of the UI, including the placement of elements, their sizes, and the overall layout. • Identify the specific components that need to be rearranged. Prioritize Elements: • Ensure that the heading is the most prominent element, as it provides the context for the game. • Place the Ludo board directly below the heading, making it the primary focus of the screen. • Position the controls at the bottom of the UI, allowing for easy accessibility and avoiding interference with gameplay. Adjust the Layout: • Modify the CSS or layout code to reposition the elements according to the desired order. • Consider using a responsive design framework to ensure the layout adapts well to different screen sizes. Test and Iterate: • Thoroughly test the updated UI on various mobile devices to verify that the order is correct and the layout is visually appealing. • Gather feedback from users to identify any potential issues or areas for improvement. • Make necessary adjustments to refine the UI based on the feedback. By following these steps, I can effectively address the UI issue and create a more intuitive and user-friendly experience for mobile players of the Ludo board game.

onlydustapp[bot] commented 2 months 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.

NueloSE commented 2 months ago

@princeibs can i contribute to this

Ayoazeez26 commented 2 months ago

Hi @princeibs can I work on this?

onlydustapp[bot] commented 2 months ago

Hi @Ayoazeez26! 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 2 months ago

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

onlydustapp[bot] commented 2 months 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.

PoulavBhowmick03 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a software engineer at Invisible Studios with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet community🇷.

How I plan on tackling this issue

To update the order of the UI on mobile screens so that it becomes Heading > Ludo board > Control, I will use CSS media queries to rearrange the elements based on the screen size Here's an alternative approach to addressing the UI layout issue for the Ludo board game on mobile devices:

Evaluate Current Layout

Review existing UI structure Identify key components (heading, board, controls) Note current positioning and sizing

Establish New Hierarchy Top: Heading (for context) Middle: Ludo board (main focus) Bottom: Controls (easily accessible)

Implement Changes Restructure HTML for logical flow Update CSS for proper element positioning Ensure responsiveness across device sizes

Validate and Refine Conduct cross-device testing Collect user feedback Iterate based on findings

Ugo-X commented 2 months 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

Understanding the Problem Based on the provided description, the current UI layout for a Ludo board game on mobile devices is not optimal. The desired order is to prioritize the heading, followed by the Ludo board, and then the controls. Proposed Solution I will:

Analyze the Existing UI: • Examine the current structure of the UI, including the placement of elements, their sizes, and the overall layout. • Identify the specific components that need to be rearranged.
Prioritize Elements: • Ensure that the heading is the most prominent element, as it provides the context for the game. • Place the Ludo board directly below the heading, making it the primary focus of the screen. • Position the controls at the bottom of the UI, allowing for easy accessibility and avoiding interference with gameplay.
Adjust the Layout: • Modify the CSS or layout code to reposition the elements according to the desired order. • Consider using a responsive design framework to ensure the layout adapts well to different screen sizes.
Test and Iterate: • Thoroughly test the updated UI on various mobile devices to verify that the order is correct and the layout is visually appealing. • Gather feedback from users to identify any potential issues or areas for improvement. • Make necessary adjustments to refine the UI based on the feedback. By following these steps, I can effectively address the UI issue and create a more intuitive and user-friendly experience for mobile players of the Ludo board game.

DioChuks commented 2 months 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.

Advanced Frontend Techniques: Component Design: With experience in React.js, i can create reusable, modular components that improve code maintainability and consistency across projects.

How I plan on tackling this issue

Firstly, i will identify the current structure; Inspect the Current Layout: Review the code to understand how the UI elements (Heading, Ludo board, Control) are currently structured in the HTML/CSS or React component. Check the Mobile Responsiveness: Determine how the layout is currently adapted for mobile screens, whether through CSS media queries, flexbox, grid, or any conditional rendering logic in the JavaScript/TypeScript code.

Secondly, i will reorder the elements based on the approach such as: HTML/CSS Approach:

If the layout is controlled by CSS (using flexbox or grid), i can simply reorder the elements using the order property in CSS. Use media queries to ensure this order only applies on mobile screens:

React Component Approach:

If the order is managed within a React component, i can adjust the rendering order conditionally based on screen size. Utilize a state management approach or a library like react-responsive to detect mobile screens.

Lastly, i will test the changes: Cross-Device Testing: Test the updated UI on different devices and screen sizes to ensure that the new order is correctly applied on mobile devices and that it doesn’t affect the desktop layout. Responsive Design: Ensure that the layout remains responsive and that elements do not overlap or break when resized.

Mario-Araya commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have extensive knowledge and experience in frontend development, particularly with TypeScript, JavaScript, React, and Next.js. This background allows me to create dynamic, high-performance web applications with modern technologies. My expertise in TypeScript ensures type safety and helps prevent bugs during development, while my proficiency in React and Next.js enables me to build scalable and efficient user interfaces. I can leverage this experience to contribute to projects that require robust frontend solutions, create seamless user experiences, and implement best practices in code quality and maintainability.

How I plan on tackling this issue

To update the UI order on mobile screens from "Ludo board > Heading > Control" to "Heading > Ludo board > Control," you can use CSS media queries and Flexbox or Grid layout techniques. First, apply a media query to target mobile screens. Within this media query, adjust the CSS properties for the container element to use flex-direction: column if you're using Flexbox, or adjust grid placements if using CSS Grid. Assign specific order values to each component so that the "Heading" appears first, followed by the "Ludo board," and finally the "Control" section. This will ensure the correct visual order on mobile devices while maintaining the desired layout across different screen sizes.

martinvibes commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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. 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

How I plan on tackling this issue Understanding the Problem Based on the provided description, the current UI layout for a Ludo board game on mobile devices is not optimal. The desired order is to prioritize the heading, followed by the Ludo board, and then the controls. Proposed Solution I will:

Analyze the Existing UI: • Examine the current structure of the UI, including the placement of elements, their sizes, and the overall layout. • Identify the specific components that need to be rearranged. Prioritize Elements: • Ensure that the heading is the most prominent element, as it provides the context for the game. • Place the Ludo board directly below the heading, making it the primary focus of the screen. • Position the controls at the bottom of the UI, allowing for easy accessibility and avoiding interference with gameplay. Adjust the Layout: • Modify the CSS or layout code to reposition the elements according to the desired order. • Consider using a responsive design framework to ensure the layout adapts well to different screen sizes. Test and Iterate: • Thoroughly test the updated UI on various mobile devices to verify that the order is correct and the layout is visually appealing. • Gather feedback from users to identify any potential issues or areas for improvement. • Make necessary adjustments to refine the UI based on the feedback. By following these steps, I can effectively address the UI issue and create a more intuitive and user-friendly experience for mobile players of the Ludo board game.

ScottyDavies commented 2 months 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, i have worked on similar projects in the past. this will be my first time contributing and i am ready to work

How I plan on tackling this issue

I would approach this issue with following steps

Understand the Requirement: The current order is Ludo board > Heading > Control. The updated order should be Heading > Ludo board > Control. Key Elements: The HTML structure of the UI elements. The CSS media queries and layout styles. Solution Design: HTML Structure: Ensure the HTML elements are in the order Heading, Ludo board, Control. CSS Media Queries: Apply different layout styles based on screen size (desktop vs. mobile). For mobile screens, update the order of the elements using CSS flexbox or grid. Implement the Solution: Update the HTML structure to match the required order. Add media queries to the CSS to target mobile screens. Implement the layout styles to reorder the elements for mobile screens. Test and Refine: Test the solution on various mobile devices to ensure the order is updated correctly. Refine the implementation based on feedback or identified issues. Document and Review: Document the code and the approach, highlighting the key design decisions. Review the solution to identify any areas for improvement or optimization.

Benjtalkshow commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

@princeibs

I’m available to work on the "Update UI arrangement on mobile screen #13" 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

The current mobile UI order places the Ludo board above the Heading and Control. This arrangement can affect the user experience by disrupting the logical flow of information and controls on the screen.

How I plan on tackling this issue

UI Rearrangement

Update Layout: I will update the UI order on mobile screens to follow a more intuitive layout: Heading > Ludo board > Control.
Enhance Usability: I will ensure that the new arrangement improves usability and overall user experience, making it easier for users to navigate and interact with the app.

Testing and Validation

Conduct Testing: I will conduct thorough testing to ensure that the new arrangement works seamlessly across different mobile devices and screen sizes.
Gather Feedback: I will gather feedback to confirm that the updated layout improves the user experience as intended.

By applying these changes, I aim to enhance the user interface, making it more intuitive and user-friendly on mobile devices.

josephchimebuka commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @princeibs 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

To solve this, I will update the layout so that on mobile screens, the UI order is changed to display the Heading first, followed by the Ludo board, and then the Control section.

melnikga commented 2 months 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 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have a solid background in front-end development, with a strong focus on responsive web design. Throughout my career, I've worked extensively with HTML, CSS, and JavaScript to create user interfaces that adapt seamlessly across different devices, including mobile screens.

In past projects, I’ve often had to adjust the layout of components to ensure an optimal user experience on smaller screens. This has included tasks like reordering elements based on screen size, which can be easily managed using modern CSS techniques like Flexbox and Grid, or by applying media queries.

To reorder the UI elements as requested, I would leverage my expertise in CSS to adjust the layout specifically for mobile devices. This would involve using media queries to target mobile screen sizes and then updating the order of elements without disrupting the layout on larger screens. My experience ensures that I can implement this change efficiently while maintaining a clean and consistent user experience across all devices.

How I plan on tackling this issue

I have a solid background in front-end development, with a strong focus on responsive web design. Throughout my career, I've worked extensively with HTML, CSS, and JavaScript to create user interfaces that adapt seamlessly across different devices, including mobile screens.

In past projects, I’ve often had to adjust the layout of components to ensure an optimal user experience on smaller screens. This has included tasks like reordering elements based on screen size, which can be easily managed using modern CSS techniques like Flexbox and Grid, or by applying media queries.

To reorder the UI elements as requested, I would leverage my expertise in CSS to adjust the layout specifically for mobile devices. This would involve using media queries to target mobile screen sizes and then updating the order of elements without disrupting the layout on larger screens. My experience ensures that I can implement this change efficiently while maintaining a clean and consistent user experience across all devices.

Psalmuel01 commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Given my strong background in frontend development and UI/UX design, I am proficient in both CSS and JavaScript frameworks like React and Next.js, which are often used in building responsive UIs. My experience in product design using tools like Figma also helps in understanding how to structure UI components effectively across different devices. Additionally, my experience in Web3 projects and hackathons means I’m used to rapid iteration and problem-solving in a collaborative environment, making me well-suited to tackle this issue efficiently

How I plan on tackling this issue

Understand the current structure

First, I’d review the existing codebase to understand how the current UI elements (Ludo board, Heading, Control) are structured and styled. This would involve identifying the relevant components and how they are rendered on different screen sizes.

Rearrange Component Order

I will modify the structure of the UI to ensure that on mobile devices, the Heading appears first, followed by the Ludo board, and finally the Control section. This will be done by either altering the HTML/JSX structure or using JavaScript to control the order of the elements in the components.

I work efficiently and effectively, so you can expect these updates to be implemented swiftly without compromising on quality. I’m also committed to clear and prompt communication throughout the process, ensuring that you’re always in the loop

ShantelPeters commented 2 months ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a frontend developer with a strong background in responsive design and user interface optimization, I have extensive experience in creating and refining layouts to enhance the user experience across different devices. My expertise lies in understanding how users interact with applications on various screen sizes and ensuring that the UI is intuitive and accessible.

How I plan on tackling this issue

To approach the problem of updating the UI order on mobile screens, I would follow a systematic and efficient process to ensure the changes are implemented correctly and maintain the overall user experience. Here’s how I would approach it:

1. Analyze the Current Layout

Review the Code: Start by examining the current HTML structure and CSS styles to understand how the Ludo board, Heading, and Control elements are currently positioned and styled.
Identify Breakpoints: Determine the breakpoints used for mobile screens to ensure that the changes only apply to mobile devices.

2. Modify the Layout

Rearrange Elements with CSS:
- Flexbox/Grid Layout: Use CSS Flexbox or Grid to reorder the elements. For example, if the elements are wrapped in a container, you can use the flex-direction property to change the order on mobile devices:
```
@media (max-width: 768px) {
   .container {
       display: flex;
       flex-direction: column;
   }
   .heading {
       order: 1;
   }
   .ludo-board {
       order: 2;
   }
   .control {
       order: 3;
   }
}
```
- CSS Grid: If using CSS Grid, you can achieve the same by adjusting the grid-template areas or grid-item positions based on screen size.
HTML Adjustments: If necessary, rearrange the HTML structure, though CSS should suffice for most cases to avoid duplicating content or breaking functionality.

3. Testing

Cross-Device Testing: Test the updated layout across various mobile devices and screen sizes to ensure that the Heading appears first, followed by the Ludo board, and then the Control elements. Use tools like Chrome DevTools, BrowserStack, or real devices for testing.
Usability Testing: Verify that the new layout doesn’t disrupt the user experience or functionality, especially during gameplay.

4. Performance Optimization

Ensure Efficiency: Make sure that the changes don’t introduce any layout shifts or performance bottlenecks, especially on slower mobile devices.
Load Testing: Conduct load tests if necessary, to ensure that the new layout maintains its performance under different conditions.

5. Documentation and Code Review

Document Changes: Clearly document the changes in the codebase, explaining the rationale behind the reordering and any adjustments made.
Peer Review: If working in a team, submit the changes for a code review to ensure that all edge cases are covered and the solution is robust.

6. Deployment

Deploy with Confidence: Once everything is tested and verified, proceed to deploy the changes, ensuring that they are pushed to production without affecting other aspects of the application.

onlydustapp[bot] commented 2 months ago

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

PoulavBhowmick03 commented 2 months ago

Thanks! Getting into it

DIWAKARKASHYAP commented 2 months ago

i want to work on this issue

sivicstudio / starkludo