netnet face animations

[nbriz]

starting a thread here for the animations w/the new SVG faces. not sure what the best way to approach it is (i'm thinking a combo of CSS animations && a little JS to trigger 'em in the corresponding method of the Menu.js file, which handles all the face stuff), what do u think @sarahrooney?

[nbriz]

leaving a note here for myself: when this is finished i should prolly create a new "face" key in the Convos API, so diff faces can be triggered alongside new text-bubbles.

[nbriz]

little detail: now that the eyes are gonna be SVG files, could be cool to change the page's favicon every time netnet's face changes so that it always matches the current eye

[nbriz]

@sarahrooney animation system ready!

https://user-images.githubusercontent.com/2506806/103044458-368a6980-4546-11eb-8c58-37504bb1a74a.mp4

started working on a general system for the face animations && made a couple examples blink, processing && bounce, the first two being JS animations (swapping the eye chars via setTimeout) && the latter being a CSS animation (just to test that out) which i've defined in the css/styles.css file, the way it's working right now is there's a _runFaceAnimation() method in the www/js/Menu.js class. It gets called everytime the .updateFace() method is called w/an animation key set, for example:

NNW.menu.updateFace({
  leftEye: '◠',
  mouth: '◡',
  rightEye: '◠',
  lookAtCursor: false,
  animation: 'bounce'
})

could also just do:

NNW.menu.updateFace({ animation: 'bounce' })

&& it'll "bounce" whatever the current face happens to be

inside of _runFaceAnimation the first thing that happens is it cancels/removes any current JS or CSS animations && then checks to see if the animation name matches a pre-defined animation, if so it runs it.

seems flexible enough to me. but what do u think? got any ideas? wanna try to make a couple?

[nbriz]

...some of this content should find it's way into the new docs (then we can close this issue)