We need someone to create two components for our React application. Attached labeled mockups illustrate the following descriptions.
Character Customization of Pixel Avatars:
This component will have a customization menu and character preview. In the customization menu, the player can switch between different categories (ex: sword, hair etc.) and select different customizations (ex: sword type, hair color and style etc.). In the character preview, they can see what their avatar looks like with the selected item. If applicable, clicking any item should also display its name and description in a field below (ex: swords do have names and descriptions, hair has no additional name/description).
Items can be locked or unlocked. If an item is unlocked, clicking it should equip it. If it is locked, clicking it should not equip it. In addition to name and description, locked items should display cost and level to unlock. The next unlock-able item should have a buy button that is enabled if the player can afford the cost. Clicking this buy button should unlock and equip the item.
We will provide images, names, descriptions, etc. for each item and category.
All component wide data should be stored and handled with redux. The various items/customization categories should be dynamically loaded from a list in the reducer (so we can expand the customizations in the future). Lastly, the customized avatar should be its own component (so we can use it elsewhere in our product). Otherwise, the structure is up to you, but I've attached a diagram with an example of a component structure I think would work well.
The calendar display has two parts/milestones, the calendar and the streak visual. This component should be built to accept the following input: a list of objects, each composed of a datetime value and multiple integer values. The calendar on the left should look as pictured in the mockup, with the color of the dots corresponding to at least one of the integer values collected from the input object. Specifically, the dots should be grey if the integer value is 0 or undefined, and blue for any non-zero value, becoming darker blue the higher the respective value. Hovering over any bubble in either of the calendar or streak parts displays a tooltip with additional information. We're not done fully designing the streak visual, but we'll discuss this milestone further once we're finished.
11 freelances font une offre moyenne de 491 $ pour ce travail
Hi there! I have read what you exactly need and I have great experience with React.js, HTML and Website Design. However I would like to ask you a few questions. I do work smart and do not rest until I get the job done. Plus
Hello I have many experiences in React.js. I'm very interested in your project and will deliver you good result. Let's discuss further via chat. Thanks
Hi, there. I have read your description carefully and I understand what you want. I have rich experience in React. I have developed several sites using it. Character Customization and Calendar Display pages; I can mana Plus
Hello? I read your job posting carefully and understood what you want. I am very interest in this project. I am full stack developer and have rich experience with react.js, website design html, node.js. I can provide y Plus
Hi, Experience is the golden factor in this project where you find in me at least 6+ years of working experience over all the factors in your project. Using Higher-Order Components, I have built character, shop and ca Plus
I've read your project details and thought that I'm a proper person for this work. I would apprise you that I have extensive expertise in front-end and back-end development for dynamic web projects. I am a honest, exce Plus
Hi I am good web developer I have much experience in react. So I can create components you need. Please contact me and discuss more. Thank you.
Hi, Are you looking for a React Expert? I have great experience in React.js including Material UI design and Tailwind CSS. Also I am familiar to Redux state managment. As a full stack developer, not only frontend, but Plus