Expand board to fit 50% of screen size

[princeibs]

First half of the screen is dedicated to the Ludo board but currently the board only occupies a small potion of it. Your task is to expand the board to fill the remaining space left in the first half of the screen. The increased size should also respond to 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]

Can I please work on this This would be my first time contributing to this ecosystem @princeibs

[onlydustapp[bot]]

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.

[thesledge04]

hi

[petersdt]

@princeibs can i contribute to this

[CollinsC1O]

Hello @princeibs can I jumb on this

[Supa-mega]

hi @princeibs can i take up this challenge

[onlydustapp[bot]]

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]

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

[onlydustapp[bot]]

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.

[Ayoazeez26]

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

Make sure I make the board fill half of the screen and make sure it is mobile responsive

[PoulavBhowmick03]

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

1. Structure the JSX:

Organize your JSX structure so that the Ludo board is within a container that will take up half of the screen height.

2. Tailwind CSS Classes Explanation: h-screen: Ensures the container takes the full height of the viewport. flex-1: Makes the header and Ludo board container share the first half of the screen equally. h-1/2: The control section will take up the remaining 50% of the screen. flex justify-center items-center: Centers the Ludo board both vertically and horizontally. max-h-full max-w-full: Ensures the Ludo board expands to fill the available space without overflowing.

3. Make the Ludo Board Responsive:

Adjust the sizing on mobile screens using Tailwind’s responsive utilities.

[Joy-Adah]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi my name is Joy and I am a frontend developer.

How I plan on tackling this issue

I would approach this by ensuring I expand the board to fill the space left in the first half of the screen. I will also ensure that the increased size is responsive to mobile screens

[Ugo-X]

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 approach the task of expanding the Ludo board to fill the available space in the first half of the screen, while ensuring responsiveness on mobile devices, as follows:

1. Analyze Current Layout: a. I will examine the existing structure of the screen and the Ludo board component. b. I will identify the constraints and available space in the first half of the screen.

2. Implement Responsive Sizing: a. I will use CSS flexbox or grid to create a responsive container for the board. b. I will set the board's dimensions to dynamically adjust based on the container's size. c. I will use viewport units (vw, vh) or percentage values to ensure the board scales appropriately.

3. Adjust Board Component: a. I will modify the Ludo board component to accept dynamic sizing props if necessary. b. I will ensure all board elements (squares, paths, home areas) scale proportionally.

4. Implement Media Queries: a. I will create media queries to handle different screen sizes, particularly for mobile devices. b. I will adjust the board's layout and sizing for optimal display on smaller screens.

5. Preserve Aspect Ratio: a. I will implement a mechanism to maintain the board's square aspect ratio regardless of screen dimensions. b. I will use CSS techniques like padding-bottom with percentage values to achieve this.

6. Optimize for Touch Interactions: a. I will ensure that all interactive elements on the board are appropriately sized for touch inputs on mobile devices. b. I will implement touch-friendly controls if they don't already exist.

7. Test Responsiveness: a. I will test the resized board on various devices and screen sizes. b. I will use browser developer tools to simulate different screen dimensions and orientations.

8. Performance Optimization: a. I will ensure that the resizing doesn't negatively impact the game's performance. b. I will optimize any animations or transitions affected by the size change.

9. Update Surrounding Elements: a. I will adjust any elements around the board to accommodate its new size. b. I will ensure that other game components remain accessible and usable with the enlarged board.

10. Documentation and Comments: a. I will update any relevant documentation about the game's layout and responsiveness. b. I will add inline comments to explain complex responsive behavior in the code.

11. Final Review and Testing: a. I will conduct a final review of the changes across multiple devices and browsers. b. I will ensure that the game remains playable and visually appealing at all screen sizes.

This approach ensures that the Ludo board will expand to fill the available space in the first half of the screen while maintaining responsiveness across different devices, including mobile screens. The implementation will focus on creating a flexible, scalable layout that preserves the game's playability and visual integrity across all screen sizes.

[ScottyDavies]

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 Ludo board should occupy the first half of the screen. The board size should be expanded to fill the available space. The expanded board should be responsive to mobile screen sizes. Key Elements: The HTML structure of the Ludo board. The CSS layout and responsive design. Solution Design: HTML Structure: Ensure the Ludo board is a distinct HTML element (e.g., a div or a custom component). CSS Layout: Use CSS to divide the screen into two equal halves. Set the Ludo board element to occupy the first half of the screen. Adjust the board size to fill the available space in the first half. Responsive Design: Implement media queries to adjust the layout and board size for mobile screens. Ensure the board continues to fill the first half of the screen on smaller screens. Implement the Solution: Update the HTML structure to have a dedicated Ludo board element. Add CSS styles to divide the screen and size the Ludo board accordingly. Implement media queries to handle responsive design for mobile screens. Test and Refine: Test the solution on various screen sizes, including mobile devices. 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]

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 "Expand board to fit 50% of screen size #12" 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, the Ludo board only occupies a small portion of the screen, even though the first half of the screen is dedicated to it. The objective is to expand the board to fully utilize the available space, ensuring an improved visual experience for players.

How I plan on tackling this issue

Responsive Board Expansion

• Dimension Adjustment: I will adjust the dimensions of the Ludo board to ensure it fills 50% of the screen as intended.
• Responsive Design: I will implement a responsive design that ensures the board scales appropriately on both desktop and mobile screens.

User Interface Integration

• Visual Clarity: I will ensure that the expanded board maintains its visual clarity and functionality, even with the increased size.
• Layout Optimization: I will optimize the layout to prevent any UI elements from overlapping or becoming misaligned due to the board’s expansion.

Testing and Validation

• Screen Size Testing: I will conduct thorough testing across different screen sizes to ensure the board expansion is consistent and responsive.
• Experience Validation: I will validate that the expanded board enhances the gaming experience without causing any usability issues.

[josephchimebuka]

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

I will expand the Ludo board to fill the entire first half of the screen, making sure it utilizes all available space. I'll adjust the board's layout so that it remains responsive and scales appropriately on mobile screens as well.

[melnikga]

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]

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, particularly in creating responsive and adaptive layouts. Throughout my experience, I’ve worked extensively with CSS, HTML, and JavaScript to build interfaces that adapt seamlessly across different screen sizes, ensuring that elements are both visually appealing and functional.

In previous projects, I’ve often encountered challenges related to optimizing the use of screen space, especially for components like game boards, which need to maintain their functionality while adjusting to different devices. I’m well-versed in using CSS Flexbox, Grid, and media queries to create layouts that dynamically resize elements based on available space.

To expand the Ludo board to fill the remaining space in the first half of the screen, I would leverage my experience with these tools. I’d ensure that the board scales proportionally on all devices, maintaining a consistent and user-friendly experience. My understanding of responsive design principles and best practices would allow me to implement a solution that looks great on both desktop and mobile screens.

How I plan on tackling this issue

1. Structure the HTML: Ensure that the Ludo board and its container are correctly structured in the HTML. The container should be set up to occupy the first half of the screen. html Copy code
   Ludo Board

   Other Content
2. CSS Layout Setup: Use CSS Flexbox or Grid to manage the layout. Flexbox is ideal for simple column layouts and resizing elements dynamically. css Copy code / Ensure the container takes up the full viewport height / .container { display: flex; flex-direction: column; / Stack items vertically / height: 100vh; / Full viewport height / }

/ First half dedicated to Ludo board / .ludo-board { flex: 1; / Take up remaining space in the first half / background-color: #f0f0f0; / Optional: Add background color for visibility / }

/ Ensure the other content takes the remaining space / .other-content { flex: 1; / Take up remaining space in the second half / }

3. Adjust for Mobile Screens: Use media queries to ensure the Ludo board expands appropriately on mobile screens. Adjust the flex properties or sizes as needed. css Copy code @media (max-width: 768px) { .container { flex-direction: column; / Stack items vertically on mobile / }

   .ludo-board { / Ensure it scales proportionally on mobile / flex: 1; / Fill remaining space in the first half / width: 100%; / Full width of its container / height: auto; / Adjust height based on width / }

   .other-content { / Adjust other content as necessary / width: 100%; / Full width of its container / height: auto; / Adjust height as necessary / } }

4. Ensure Proportional Scaling: To ensure that the Ludo board scales proportionally within its space, you might need to set specific height or width properties based on the container size or use aspect ratio techniques. css Copy code .ludo-board { position: relative; width: 100%; height: 0; padding-bottom: 100%; / Maintain aspect ratio (square) / background-color: #f0f0f0; }

.ludo-board > .inner-board { position: absolute; top: 0; left: 0; width: 100%; height: 100%; / Add content styling here / }

5. Testing: After applying these styles, test the layout on various screen sizes and orientations to ensure that the Ludo board fills the space correctly and maintains a good user experience across different devices.

[LukePereyra]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Make responsive

How I plan on tackling this issue

With css

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a frontend developer with extensive experience in responsive design and UI layout optimization, I am well-equipped to tackle the task of expanding the Ludo board to fill the first half of the screen and ensuring that it responds appropriately to different screen sizes, including mobile.

Background and Relevant Skills: Responsive Design Expertise: I have a strong background in creating responsive designs that adapt seamlessly to various screen sizes. Whether it’s using CSS Flexbox, Grid, or media queries, I ensure that layouts are fluid and provide a consistent user experience across all devices.

Layout Management: My experience includes optimizing screen real estate by managing and adjusting layouts to ensure that important elements, like the Ludo board in this case, occupy the right amount of space. I have successfully handled similar tasks where UI components needed to be resized or repositioned to enhance visibility and usability.

CSS and JavaScript Proficiency: With a deep understanding of CSS for layout adjustments and JavaScript for any dynamic behavior, I can effectively expand the Ludo board to fill the designated space. My approach involves not just expanding the board but also ensuring that the content within remains proportionate and visually appealing.

How I Would Leverage My Background: Analyzing the Current Layout: I would start by reviewing the current layout structure to understand how the Ludo board is being rendered and what constraints are limiting its size.

Implementing the Expansion: Using CSS techniques like Flexbox or Grid, I would adjust the layout to allow the Ludo board to expand fully into the available space. I would ensure that this change is fluid and responds to different screen sizes by incorporating media queries or using a responsive design framework.

Testing Across Devices: To ensure that the expanded board looks good on all screen sizes, especially mobile, I would conduct thorough testing across different devices.

How I plan on tackling this issue

To address the problem of expanding the Ludo board to fill the remaining space in the first half of the screen while ensuring it remains responsive on mobile devices, I would approach the task in the following steps:

1. Analyze the Current Layout

• Inspect the HTML/CSS Structure: Start by examining the existing layout to understand how the Ludo board is positioned and what constraints are currently limiting its size. This might involve identifying the container elements and any CSS properties like width, height, margin, or padding that are affecting the board's size.
• Check Responsive Breakpoints: Identify any media queries or responsive design rules that apply to the current layout, especially those affecting the Ludo board on different screen sizes.

2. Modify the Layout for the Ludo Board

• Adjust CSS Properties:

  • Container Flexibility: Ensure the container that holds the Ludo board is set to take up 50% of the screen height, using CSS properties like height: 50vh; or flex: 1; if using Flexbox.

  • Board Sizing: Update the Ludo board’s CSS to expand and fill the available space within the container. This could involve setting the board’s width and height to 100% of the container, or using object-fit: cover; to ensure it scales appropriately.

    .ludo-container {
       height: 50vh;
       display: flex;
       justify-content: center;
       align-items: center;
    }
    
    .ludo-board {
       width: 100%;
       height: 100%;
       object-fit: cover;
    }

  • Aspect Ratio Maintenance: If the Ludo board has a fixed aspect ratio, I would use the aspect-ratio CSS property or a padding-top hack to maintain that ratio while filling the available space.

3. Implement Responsive Design

• Media Queries: Use media queries to ensure the Ludo board’s size adjusts appropriately across different screen sizes. For example, on smaller screens, the board might need to scale down to avoid overflowing or becoming too large relative to other UI elements.

   @media (max-width: 768px) {
       .ludo-container {
           height: 40vh;
       }
  
       .ludo-board {
           width: 90%;
           height: auto;
       }
   }

4. Testing and Validation

• Cross-Device Testing: Test the layout across various devices and screen sizes, including desktops, tablets, and mobile phones. Ensure that the Ludo board fills the intended space and maintains its functionality and visual integrity.
• Performance Check: Verify that the expanded Ludo board does not negatively impact performance, especially on lower-end devices. This might include optimizing images or using lazy loading techniques.

5. Refinement and Optimization

• Fine-Tuning: Make any necessary adjustments based on testing feedback, such as tweaking padding, margins, or size properties to improve the layout’s appearance and usability.
• Accessibility Considerations: Ensure that the board remains accessible, with appropriate contrast, readability, and touch-friendly controls for mobile users.

6. Documentation and Deployment

• Document Changes: Clearly document the modifications made to the layout and CSS, explaining how the Ludo board now responds to different screen sizes.
• Deploy Changes: Once fully tested and validated, deploy the changes to production, ensuring that the updates do not interfere with other parts of the application

[jsandinoDev]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'am a software developer with more than 5 years of experience as a full stack. I also have experience with react and typescript so this issues should be easy for me

How I plan on tackling this issue

To solve the problem of expanding the Ludo board to fill the first half of the screen while making it responsive for mobile screens, follow these steps:

1. Use Flexbox or Grid Layout: Set up the parent container of the Ludo board and the other half of the screen using Flexbox or CSS Grid. This will help in dividing the screen into two equal halves and make it easier to adjust the board's size.
2. Make the Ludo Board Responsive: To make the Ludo board responsive, use CSS media queries to adjust the size based on screen width. Set the width and height of the board relative to the parent container or the viewport.
3. Ensure Proper Aspect Ratio: If the Ludo board needs to maintain a specific aspect ratio, you can use padding or a CSS trick like setting padding-top to maintain the aspect ratio of the board.
4. Adjust Based on Screen Size: Use CSS media queries to ensure that the board adjusts appropriately across different devices, especially mobile screens.
5. Testing: Test the layout across different screen sizes using Chrome DevTools or other responsive design testing tools to ensure the board scales correctly and maintains usability. This approach will help you expand the Ludo board to occupy the required space and ensure it is responsive to different screen sizes, especially mobile devices.

[onlydustapp[bot]]

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