Web: As a user, I want to build an Avatar, so I can show off my bad self.

[owocki]

User Story

As a user, I want to build an Avatar, so I can show off my bad self.

Why Is this Needed?

To make profiles on Gitcoin unique and peronsable... without being creepy

Description

In the new FTUX flow ( https://github.com/gitcoinco/web/issues/441 ) please add a page that is an avatar builder. This avatar builder will allow a user to select facial features (hats, glasses, earrings, beards, beard alt, mustaches, skin color, head shape, ears torso, mouth, head, nose, eyes, hair, hair color, and build an avatar

Grid

Library of Components

Final result

Please disregard the 3 icons overlaying the avatar.

Avatar builder specifications

Current Behavior

Users Github Profile image is Used

Expected Behavior

• The avatar builder should show a live preview of the avatar as it's being assembled.
• The avatar builder should save and automatically sync to user's Gitcoin profile.
• The avatar builder should allow the user to save their avatar to their gitcoin profile

Definition of Done

• All functionality exists and works as outlined in mockup and guidelines.
• Visual designs leverage Gitcoin UI Kit styling (fonts, colors, etc) found in the Gitcoin Creative Repo.
• Characteristics List On the left show as square dots until user has made a selection of corresponding characteristic on the right, once selected, dot turns into a checkmark.
• Avatar Work Area Please follow interaction hover and click states as shown in the visual guide
• Color bars will need to be reflective of the section the user is in. For instance skin tone colors will be different than accessory colors.
• A user will only be able to select one option from the following sections:
  Face, Eyes, Nose, Mouth, Ears, Hair, Facial Hair, Clothing, and Background.
• A user may select multiple options from the following sections: Accessories.
• Once user completes the avatar, a light confirmation should display at the upper right hand corner of the avatar builder (placeholder is shown in the mockup).

Assets

• Avatar Builder Sketch File
• Avatar Art Assets
• [Gitcoin UI Kit ]((https://github.com/gitcoinco/creative/tree/master/Product/00_UI_Kit)

Additional Information

Other Avatar Projects

• http://www.hexatar.com/
• https://github.com/alizohaib/avatar-maker

Reviewers

@pixelantdesign @owocki

[gitcoinbot]

__This issue now has a funding of 0.65 ETH (239.97 USD @ $369.18/ETH) attached to it.__

• If you would like to work on this issue you can claim it here.
• If you've completed this issue and want to claim the bounty you can do so here
• Questions? Get help on the Gitcoin Slack
• $2962.31 more Funded OSS Work Available at: https://gitcoin.co/explorer

[vs77bb]

Love this.... The real question, will @thelostone-mc finally get an avatar that looks like him? 🤔

[rickyplouis]

Sounds like a fun project that I would like to take on @owocki

[PixelantDesign]

Please let us know if you have any questions @rickyplouis!

[owocki]

@rickyplouis glad to have you. 🙌

let us know your plan of attack soon pls!

[rickyplouis]

@owocki Finished getting the environment setup locally with docker and integrated github. I'm still looking through the codebase and trying to determine where it would be best to build out the avatar builder page. I was thinking of making it accessible by the user clicking on "change avatar" or something like that on the View Profile Page. Then once the on-boarding process is complete this page can be added into it later. Let me know what you think.

[owocki]

@rickyplouis we are building an onboarding flow ( https://github.com/gitcoinco/web/issues/441 ) where this will eventually live.

for now, lets keep the link to the page as lightweight as possible. maybe just put it as a link in the top nav

[rickyplouis]

@owocki got it. I was also wondering if Gitcoin had a style guide or contribution guidelines that I should follow as I proceed?

[owocki]

style guide => https://github.com/gitcoinco/creative/tree/master/Brand
contribution guidelines => https://github.com/gitcoinco/web/blob/master/docs/CONTRIBUTING.md

[rickyplouis]

@owocki awww thank you. I think I have everything I need to succeed. I'll get started right away. Give me a week or two.

[owocki]

@rickyplouis the team is checking in on this project right now.. how is it going?

[owocki]

I just removed ricky from the bounty. If anyone else wants it, please say hi and let us know what your plan of attack is.

[Smona]

I have no experience with django specifically, but this seems like a really cool project and I'm happy to give it a shot.

I'm setting up my local environment at the moment and finding the relevant files, and I've only seen reference to jquery in terms of frontend frameworks. Is any modern framework being used for the frontend? If not, would the team be amenable to selecting one (Vue, React, Preact, etc) to make available for its developers?

I can definitely implement this in jQuery, but it seems to be approaching the scope of interactivity where a framework could improve productivity. I'll keep getting set up and start creating the template in the meantime.

[gitcoinbot]

Issue Status: 1. Open 2. Expired

---

__Work has been started__.

These users each claimed they can complete the work by 2 months ago. Please review their questions below:

1. Smona has started work.

[owocki]

its using jquery right now.. if you had your druthers what would it use?

[Smona]

I personally have extensive experience with Vue and love it. Vue is
currently on track to become the most used frontend framework iirc. If
download size is the highest priority, I've heard preact is the lightest,
and easy to work with if one knows react (which would also be a good
choice).

I don't want to be the person to entirely make the decision since I'm just
now getting involved. I think it's best if a project just sticks to one
framework, so the decision would affect future work on the frontend. Like I
said if the team wants to stick with jquery i can still tackle this, but if
the product owners think it's a worthwhile investment, my vote is for Vue.js

On Fri, Apr 20, 2018 at 6:34 PM Kevin Owocki [e-mail]
wrote:

its using jquery right now.. if you had your druthers what would it use?

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/gitcoinco/web/issues/813#issuecomment-383247766, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AGw0x4fEihgqd-YgFVtGZ3Q-d09pxxsiks5tqnCKgaJpZM4TJKWu
.

[Smona]

I've been making good progress on this:

Some questions & concerns:

• I can't find existing classes for the 'submit' and 'later' buttons matching the style in the mockup. Did I miss them, or should I write them?
• How will avatar configuration be persisted? As a configuration that's rendered on page load, or as an image?
• There are 4 kinds of color: background, skin, hair, and clothes. So far I've given these colors their own sections with square selectors:
  but I imagine we could also display a persistent color picker as in the mockup and switch it between selecting these color categories depending on the open section. Thoughts?
• The positioning of the hair layer is incorrect; it's too far down.
• One of the hair colors was a duplicate so i removed it. Style 5 is missing color #8C3B28.
• More of a suggestion, but I'm a fantasy hair gal and it would be cool to have hair options like blue, purple, etc 👽
• Are the hover, selected, and remove-hover states in the mockup exclusive to the accessories page? The way I see it, you should be able to remove your hair, but not your face. And an 'add' hover state wouldn't make a lot of sense if you can only select one option in a section.

Based on progress so far, I think I could knock out the rest of this in a couple days ✨

[thelostone-mc]

@Smona

So I'm working on the ftux and I believe your work would go as one of the steps on the flow ( I'll leave an blank step for that )
PR : https://github.com/gitcoinco/web/pull/889

If you get the time, I'd like your feedback to see if anything needs to be changed !
If you need an extra pair oemf eyes to help review your code, just link the PR and I'd be happy to help :)

[PixelantDesign]

@Smona It’s looking great!

@thelostone-mc could you help with the button classes?

On hair positioning, feel free to adjust to where it makes sense.

In terms of configuration, I’m thinking image but might be better for @owocki or @mbeacom to answer that question.

I agree on the hair color, we can definitely expand the palette to include more cool colors.

I also agree on being able to select new hair and face shape but not completely remove.

Hope this helps!

[Smona]

@PixelantDesign good to hear :).

I feel it would make more sense to store avatar configuration as a collection of svg asset paths. These could be injected into an avatar element on the site and potentially cached. That solution seems to be the most efficient and simple.

I'll see what I can do for fixing the svgs. Should changes and new svgs be PR'd into https://github.com/gitcoinco/creative?

It also appears that the hatlong directory got messed up, it just contains one of the hairstyles. Not sure what happened there.

[owocki]

from emerson stone:

Kevin, let us know if you’ve run into any issues while testing the full set of avatar components we provided - just want to make sure that any new changes and instructions are reflected in the guide.

@Smona i'll add you to an email thread with nina (from emerson stone -- our design agency) in case you want to see any changes here

How will avatar configuration be persisted? As a configuration that's rendered on page load, or as an image?

it'd be great to be able to store a json blob of the avatar configuration off of the Profile object. @mbeacom let me know if you strongly disagree.

it would also be nice to be able to reference the image itself with <img src=''> tags.. are you assembling the avatar on the frontend or backend right now? theres a bunch of views in dashboard/embed.pythat spit out images right now.. perhaps we could build another view that reads in the json blob for a given avatar and spits out their profile image.

I'll see what I can do for fixing the svgs. Should changes and new svgs be PR'd into https://github.com/gitcoinco/creative?

sorry im new to the thread and not getting the context by looking above. what needs fixing here?

[Smona]

@owocki some of the svg layers weren't lining up correctly. I've imported the existing svgs into sketch projects that made it easy to adjust all color variations of a layer in the same way or add new colors. They also export the resulting svgs with the correct filenames I've used in the implementation.

I imagine having these sketch files in the creative repo would make future updates to Avatar assets much easier.

I'm assembling the Avatar on the frontend by changing the src attributes of layered img tags. It would be trivial to send off a json object containing the static svg URLs.

I'm not sure how one would go about converting all the layers into a single img on the back end.

[owocki]

@Smona -- it looks like @PixelantDesign added those assets to the creative repo here. feel free to PR back if anythings missing or changed!

I'm assembling the Avatar on the frontend by changing the src attributes of layered img tags. It would be trivial to send off a json object containing the static svg URLs.

great! can you please plan to do so!?

I'm not sure how one would go about converting all the layers into a single img on the back end.

got it.. hmm...

i wonder if we could do this with https://github.com/astraw/svg_stack or https://github.com/btel/svg_utils

it'd be nice to only have to implement the avatar builder once (on the frontend in javascript OR in the backend) but if you are far along on the current implementation path i dont feel strongly you should change course. carry on!

[PixelantDesign]

Hi @smona, here are some hex colors for the additional hair..

4D22D2

8E2ABE

3596EC

0ECF7C

[Smona]

@PixelantDesign thanks!

Couple questions:

Is the background color picker only displayed in the accessories section?

Should hair be a required option? Seems like bald should be a choice.

[PixelantDesign]

Hi @Smona

The background is a separate option from the accessories (not nested under).

You are right that bald should be an option. At this point some of the head shapes are flat on top so we will need to fix that.

Could we set it up in a way so that hair isnt required?

[mbeacom]

@Smona Thanks for picking this up!

Would you mind raising a pull request against the branch you're working out of?
Feel free to let us know if you have any questions or need any assistance!

[Smona]

@PixelantDesign yes, I'll make it optional for now. So in the background section, are background options displayed in the color picker (square options section empty) or in the square options section (color picker empty)?

@mbeacom will do after my next commit!

@owocki honestly, this implementation makes sense to me. The client handles logic for selecting image layers (speeds up avatar builder), and the server handles assembling the individual svg layers.

[PixelantDesign]

Hi @smona. I’m not sure I understand your question. Feel free to hit me up on slack!

[Smona]

Progress update: all that's left to do for the frontend is add state styles for options and color picker. ETA tomorrow or the day after 🔨

[Smona]

The frontend is finished! @thelostone-mc and I are going to link up soon and complete this issue 🙂

[PixelantDesign]

Can’t wait to see it!

[gitcoinbot]

@Smona Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] auto removal (6 days)

[thelostone-mc]

@Smona could you leave a comment here telling gitcoin you are working on it ? ^_^

[Smona]

@gitcoinbot I'm working on it!!

[PixelantDesign]

Hi Smona - thanks! sorry about the gitcoin bot.

[Smona]

Super close to finishing this. Basically the only question I need answered is how to reference a user object to save and load avatar configuration. I tried using email and handle fields but they didn't seem to work @owocki @mbeacom

[owocki]

Basically the only question I need answered is how to reference a user object to save and load avatar configuration. I tried using email and handle fields but they didn't seem to work @owocki @mbeacom

@mbeacom can you help @Smona with this? I'm assuming we'll need to add this information to the Profile model and possibly provide an API endpoint for CRUDing it

[mbeacom]

@Smona Thanks for the update! Reaching out to you on slack!

[gitcoinbot]

@Smona Hello from Gitcoin Core - are you still working on this issue? Please submit a WIP PR or comment back within the next 3 days or you will be removed from this ticket and it will be returned to an ‘Open’ status. Please let us know if you have questions!

• [x] warning (3 days)
• [ ] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[Smona]

@gitcoinbot oi

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@Smona due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] warning (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

@Smona due to inactivity, we have escalated this issue to Gitcoin's moderation team. Let us know if you believe this has been done in error!

• [x] warning (3 days)
• [x] escalation to mods (6 days)

Funders only: Snooze warnings for 1 day | 3 days | 5 days | 10 days | 100 days

[gitcoinbot]

⚡️ A tip worth 0.65 ETH (286.98 USD @ $441.51/ETH) has been granted to @Smona for this issue. ⚡️

The sender had the following public comments:

thanks for your work on this. i love my avatar!

Nice work @Smona! To redeem your tip, login to Gitcoin at https://gitcoin.co/explorer and select 'Claim Tip' from dropdown menu in the top right, or check your email for a link to the tip redemption page.

• $19462.83 in Funded OSS Work Available at: https://gitcoin.co/explorer
• Incentivize contributions to your repo: Send a Tip or Fund a PR
• No Email? Get help on the Gitcoin Slack

[gitcoinbot]

Issue Status: 1. Open 2. Expired

---

__The funding of 0.65 ETH (286.98 USD @ $441.51/ETH) attached to this issue has been cancelled by the bounty submitter__

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $19,864.34 more funded OSS Work available on the Gitcoin Issue Explorer