Implement the actions section of the page

princeibs commented 1 month ago

Description

Action items

Implement the action section of the page
Check out this prototype for the animations.

ShantelPeters commented 1 month ago

@princeibs please I’ll like to work on this issue

Ayoazeez26 commented 1 month ago

Hi can I work on this? On Thu, 26 Sep 2024 at 07:34, Strong Force @.***> wrote:

Description image.png (view on web) https://github.com/user-attachments/assets/fd44394e-7ab1-4dc4-9cff-d9e1bcd4f40a

Action items

Implement the action section of the page

Check out this prototype https://www.figma.com/proto/necXXzodGR1fcithL2lmkY/StarkLudo---Calebux?node-id=136-1784&node-type=canvas&t=eJV2OyT6CpI0IDtI-0&scaling=min-zoom&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=113%3A554 for the animations.

— Reply to this email directly, view it on GitHub https://github.com/sivicstudio/starkludo/issues/73, or unsubscribe https://github.com/notifications/unsubscribe-auth/AKQ7QTTILELONPX7TLJN553ZYOTIBAVCNFSM6AAAAABO4ISJBCVHI2DSMVQWIX3LMV43ASLTON2WKOZSGU2DSNRUGYYDENI . You are receiving this because you are subscribed to this thread.Message ID: @.***>

onlydustapp[bot] commented 1 month ago

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

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

CollinsC1O commented 1 month ago

@princeibs I'm a frontend and also a blockchain developer. I will love to work on this, I'm very ready to work

onlydustapp[bot] commented 1 month 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.

Mystic-Nayy commented 1 month 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?

CollinsC1O commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @princeibs I'm a front-end and also a blockchain developer and I would love to work on this issue

How I plan on tackling this issue

I will properly review the provided Figma design, studying the design and animation for the action section
I will structure the action section by adding the necessary HTML/JSX structure for the action section based on the design
I will use CSS or styled-components to match the visual styles in the Figma design. adhering to all provided style guide for consistency
I will use CSS transition or Javascript libraries to add the animations as per the prototype (implementing Animations)
I will ensure that the section is fully responsive across different screen sizes as specified in the design (testing responsiveness)
I will integrate the section into the existing page and text to make sure that the animations and integrations work smoothly

od-hunter commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please can I be assigned this issue? I am a blockchain Developer, and my experience includes html, css, react, JavaScript,TypeScript and solidity and Cairo.

How I plan on tackling this issue

I'll go through the prototype for the animation and then to implement the action section for the page, I'd:

I'll build the action section as a React component (or any other preferred framework ), breaking down the functionality into smaller, reusable components (e.g., buttons, forms).
I'll set up the necessary state or props to handle interactions (e.g., form inputs, button clicks).
I'll ensure the action section is responsive across different screen sizes and devices using CSS or a framework like Tailwind CSS.
I'll test the action section to ensure it works as intended, including any dynamic features like submission, validation, or interactions.
Lastly, I'll integrate the action section into the page by placing it in the appropriate location and ensuring it interacts correctly with other sections of the page.

Please assign me.

josephchimebuka commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @princeibsI am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/

How I plan on tackling this issue

I will use the figma prototype to implement the actions section of the page. I should complete the project in 2-3 days

Agbeleshe commented 1 month 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 love this to be my first contribution on this platform please. i will create a conditional statement that check the state to which the action be displayed and implement the action. thank you :)

jedstroke commented 1 month 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 implement CSS animations, or I could use an animation library like Framer motion which I feel might just be an overhead—but if there are going to be subsequent animations I will it will come in handy

Otaiki1 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi I am a blockchain developer with 3 years experience. Previously contributed to this project and would love to contribute again.

How I plan on tackling this issue

I would have to create functions that properly align with the action buttons , test my implementation and ensure it works properly

Mobarak786 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a mern stack developer. I have worked on full stack project from scratch so i can implement the frontend using React js, css, javascript. I am new to blockchain but able to write etherium smart contract.

How I plan on tackling this issue

1) There will be a usestate hook to handle the turn means whose turn is this. 2) There will be a Roll button. When the user click on the button it will show us a dice moving animaion for a moment and show us a random number of dice( in picture from 1 to 6). 3) There will be start over button. 4) bellows are some options that will be clickable. 5) the page will be responsive

melnikga commented 1 month 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 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m a Full Stack JavaScript Developer with a passion for creating gamified blockchain projects. Since I started with OnlyDust, I’ve made 18 contributions to different initiatives, which has really helped me sharpen my skills in building engaging and user-friendly experiences. I’m ready to bring this expertise to our current task.

How I plan on tackling this issue

To implement the actions section of the page, I’ll begin by taking a close look at the prototype to understand the animations and interactions we need. I’ll create a new React component specifically for this section, using modern hooks to manage the state effectively. For the animations, I’ll use CSS transitions and keyframes, and if the project allows it, I might even use libraries like Framer Motion to make things a bit more dynamic.

I’ll make sure the actions section is responsive and accessible, keeping in mind ARIA standards and ensuring it’s easy to navigate with a keyboard. After I build the component, I’ll test it on different devices and browsers to make sure everything works smoothly.

GoSTEAN commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience in UI/UX development and game logic implementation, which allows me to handle dynamic elements in games. I’ve worked on projects where game components are conditionally enabled or disabled based on user actions, ensuring smooth gameplay flow. My expertise in using CSS for visual effects (like blurring) and managing state logic will be valuable in implementing this feature efficiently.

How I plan on tackling this issue

I would begin by disabling interactions with the Ludo board until the number of players is selected. This can be achieved by adding conditional logic to check if the number of players has been chosen and applying a blur effect via CSS to visually indicate the disabled state. I would also add a clear and prominent indication for the user to select the number of players, following the design guide provided. Finally, I’d test to ensure that the board becomes active and responsive only after a valid player selection is made.

abdegenius commented 1 month 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

Using the current tech stack of the project, i will replica the design and add all the animation properties as outline in the given reference file

Rayan9064 commented 1 month 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.

JoelVR17 commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

UI: StarkLudo Game Action Section

Hello TEAM team,

I am Joel Vargas, a member of Dojo Coding, and I also come from OnlyDust. I have experience in building interactive user interfaces using React, SCSS, and Tailwind CSS. I’ve worked on creating responsive UI components and adding animations for a smooth user experience, such as handling game UI elements dynamically in Web3 projects.

I would like to request the assignment of the issue related to the Action Section of the StarkLudo Game. Below is my approach for implementing this feature.

How I plan on tackling this issue

Implementation Plan

STEP 1: Create the Action Section Layout

I will create the layout for the action section using React components and Tailwind CSS. The layout will include a centered dice, a button for rolling the dice, and action buttons at the bottom for additional functionality (e.g., profile, leaderboard, etc.).
The dice will be an image component, and I will ensure that it’s responsive and scales properly across different screen sizes using Tailwind’s utility classes like w-full, md:w-1/2, lg:w-1/3.

STEP 2: Add Rolling Dice Functionality

I will implement the logic for rolling the dice, which will randomize the number on the dice. This will be done using React’s useState to store the dice value and Math.random() to simulate a dice roll.
The "ROLL" button will trigger this action, and the button will be styled using Tailwind (bg-blue-500, hover:bg-blue-700, text-white, rounded-full, px-4, py-2).

STEP 3: Add Animations

I will add a rolling animation for the dice using CSS animations or Tailwind’s animate-spin utility. This will enhance the user experience by adding a visual cue when the dice is rolling.
Additional animations will be added to the buttons, making them interactive on hover using Tailwind’s transition, transform, and scale utilities to create smooth hover effects.

STEP 4: Integrate Action Buttons

The icons at the bottom (profile, leaderboard, etc.) will be integrated as clickable buttons using Tailwind CSS for styling. These buttons will have hover effects (hover:bg-opacity-50) and clear iconography using SVGs or icon libraries like Lucide.
Each button will have its respective action, such as navigating to different sections of the game.

STEP 5: Implement Responsiveness

I will ensure that the entire section, including the dice and buttons, is fully responsive using Tailwind’s responsive classes (sm:, md:, lg:). This will ensure that the UI scales and remains functional on mobile, tablet, and desktop.

Technical Stack

React: To manage the component logic and UI state.
SCSS & Tailwind CSS: For styling the dice, buttons, and ensuring the layout is fully responsive.
React Hooks: To handle the dice rolling logic and button interactivity.

Example Code Outline


import { useState } from 'react';

function StarkLudoAction() {
  const [diceValue, setDiceValue] = useState(1);

  const rollDice = () => {
    const randomValue = Math.floor(Math.random() * 6) + 1;
    setDiceValue(randomValue);
  };

  return (
    <div className="flex flex-col items-center justify-center">
      <h2 className="text-yellow-500 mb-4">YELLOW, your move. ROLL!</h2>
      <img 
        src={`/images/dice-${diceValue}.png`} 
        alt={`Dice showing ${diceValue}`} 
        className="w-24 h-24 mb-4"
      />
      <button onClick={rollDice} className="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded-full">
        ROLL
      </button>
      <div className="flex justify-between mt-6 space-x-4">
        <button className="bg-gray-700 hover:bg-opacity-50 text-white p-4 rounded-full">
          <IconUser />
        </button>
        <button className="bg-gray-700 hover:bg-opacity-50 text-white p-4 rounded-full">
          <IconLeaderboard />
        </button>
        <button className="bg-gray-700 hover:bg-opacity-50 text-white p-4 rounded-full">
          <IconGroup />
        </button>
        <button className="bg-gray-700 hover:bg-opacity-50 text-white p-4 rounded-full">
          <IconSettings />
        </button>
      </div>
      <a href="#" className="text-red-500 mt-4">Start Over</a>
    </div>
  );
}

export default StarkLudoAction;

MullerTheScientist commented 1 month 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: i will Define Action Buttons Determine the actions required (e.g., edit, delete, run) Design button styles and layout Step 2: I will Write HTML Structure Create a container for the actions section Add buttons with corresponding labels and icons (if needed)

LazarusAA commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a blockchain developer with experience on front end, Ive worked with a few game projects before which makes me confident that I can bring this design to live. I have most experience with react, css, html, JavaScript, TypeScript, solidity and Cairo.

How I plan on tackling this issue

I will create the action section as a React component, breaking it into reusable elements like buttons and forms. I’ll set up state or props for interactions and ensure responsiveness using CSS or Tailwind CSS. After testing its functionality, including submission and validation, I’ll integrate it into the page

Thanks for the consideration Lazarus

Kaminar-i commented 1 month ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello please can i work on this issue :) and would love to be a contributor

How I plan on tackling this issue

this would be my first time contributing to this repo

sivicstudio / starkludo