moates / onlyBans

1 stars 0 forks source link

Shirley's work on spell animation #53

Closed moates closed 1 year ago

moates commented 1 year ago

to fix

@shrlyhe I'm still seeing emoji compatibility issues! i think i commented elsewhere about how emojis are different based on browser/OS/etc. not all are well-supported.

image

moates commented 1 year ago

to fix

@shrlyhe there is an accessibility setting called "Show motion". If a player has that setting disabled, we should not show them animations. To do this, the quickest way is probably to add a flag around your sections that have animations. Code wil look something like <> [...div with the animation class] <> [div without the animation class <>

noReason-real-story passage has an example. Could you give this a whirl and just lmk if you get stuck?

image

moates commented 1 year ago

font choice on point !!! <3333

moates commented 1 year ago

to fix

the UI bar gets all wonky here hmmmmm. i'm guessing it has something to do with the fact that you're using margin to control movement in the move section. iirc there's a CSS function named something like transform that can control movement and should hopefully avoid messing up the rest of the page?

the screen rotation thing is BADASS but animations definitely should not impact the sidebar, bc people need that to reach the settings! if it takes too long to figure it out i'd vote we just nix it for now. Maybe something simpler would be just rotating a single emoji using rotate? like the crystal ball does a 360 while the text appears?

image

moates commented 1 year ago

small low-priority fix not sure if this is intentional, but in sex-worker-help the "What should you do now?" link appears with the other two chat options. I'd vote that you either just leave on the page the whole time (so someone can skip the chat bubbles if they want) or make it appear at the end of the chat convo

image

moates commented 1 year ago

overall, really cool work & a really strong start! especially impressed since you said you've never worked with CSS animations before. thank you for the help !!!!

let me know if you get stuck on any of these fixes I suggested.

shrlyhe commented 1 year ago

to fix

@shrlyhe there is an accessibility setting called "Show motion". If a player has that setting disabled, we should not show them animations. To do this, the quickest way is probably to add a flag around your sections that have animations. Code wil look something like <> [...div with the animation class] <> [div without the animation class <>

noReason-real-story passage has an example. Could you give this a whirl and just lmk if you get stuck?

image

does this apply to the text getting typed too? ie. <<type 20ms start 0.5s>>? also for the start-spell passage I have a transition set on the body.screen-turns-black....do you know how i can acccess the animation there?

moates commented 1 year ago

to fix @shrlyhe there is an accessibility setting called "Show motion". If a player has that setting disabled, we should not show them animations. To do this, the quickest way is probably to add a flag around your sections that have animations. Code wil look something like <> [...div with the animation class] <> [div without the animation class <> noReason-real-story passage has an example. Could you give this a whirl and just lmk if you get stuck? image

does this apply to the text getting typed too? ie. <<type 20ms start 0.5s>>? also for the start-spell passage I have a transition set on the body.screen-turns-black....do you know how i can acccess the animation there?

Yes, ideally for all text getting typed! But that's lower priority than the disorienting/spinning/movement animations.

The background color transitions are probably okay to keep, especially if they're slow and don't feel like flashing.