search

RobertBroersma / beanheads

Easily create characters for your projects
https://beanheads.robertbroersma.com
MIT License
1.39k stars 93 forks source link

Strange layering issues #24

Closed fred-boink closed 3 years ago

fred-boink commented 3 years ago
Screen Shot 2021-02-14 at 8 58 45 PM

Not sure what is happening but the layers seem to be broken. For sure this is something I am doing but I am wondering if anyone has seen this and knows what I am doing wrong! Thanks.

RobertBroersma commented 3 years ago

Hi @fred-boink

I'm not entirely sure how it works, but I had this exact same issue when I was developing the big heads website.

I'm guessing you're using Next JS SSG or SSR, which prerenders a random character. Once the client hydrates this prerender, yet another random character is generated. These are not the same and that somehow causes this weird phenomenon! (causing that warning message in your console as well).

Could you try having this page not-prerendered? Or at least the character.

fred-boink commented 3 years ago

I am using Nextjs. Ill try to get it to render only clientside. Thanks for your answer! Ill let you know how it goes.

fred-boink commented 3 years ago

It worked! Thank you. Curious, why foes facialHairMap have 3 Noop?

RobertBroersma commented 3 years ago

@fred-boink Great!

When generating a random character I randomly select an array element from every available part. This means if the options were medium beard, stubble and nothing there would be a 66.7% chance of a random character having a beard. I though this would be a bit much, but I didn't want to implement a whole probability model, so I just added some extra None in there 😅 .

For the same reason I added 5 Noops to the hatMap!