static/scenes/elfmaker/elements/maker-elf.js
/**
   * @param {boolean} force include CSS, for ShadyCSS modes
   */
@param {boolean} force include CSS, for ShadyCSS modes
@param { boolean } force include CSS for ShadyCSS modes
render(force) {
    const svgStyle = (!force && self.ShadyCSS ? '' : this.svgStyle);
    const time = this._offset;
    const setup = {
      shrugFactor: (Math.cos(time) + 1) / 2,
      bodyDegrees: (Math.cos(time) * 0.5) * 10,
      leftArmDegrees: this._degrees(this._leftArm),
      rightArmDegrees: this._degrees(this._rightArm),
    };
    return html`
<style>
:host {
  height: 100%;
  display: inline-block;
}
.shadow {
  height: 100%;
  display: flex;
  justify-content: center;
  will-change: transform;  /* nb. gives about 3x speedup */
  filter: drop-shadow(4px 4px 2px rgba(0, 0, 0, 0.125));
}
svg {
  width: 100%;
  height: 100%;
}
</style>
<div class="shadow" @click="${this.dance}">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-40 -100 400 560">
${defs.baseSvgDefs}
  <style>
${defs.baseSvgStyle}
${svgStyle}
.blink {
  animation: elves-blink 5.234s infinite alternate;
}
.dance {
  transform-origin: center 100%;
  animation: elves-dance 4.8s ease-in-out infinite alternate;
}
@keyframes elves-blink {
  0%   { transform: scaleY(1); }
  98%  { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}
@keyframes elves-dance {
  0%     { transform: translate3d(0, 0, 0) rotateZ(0); }
  6.25%  { transform: translate3d(2.5%, -10%, 0) rotateZ(7.5deg); }
  12.5%  { transform: translate3d(0, 0, 0) rotateZ(7.5deg); }
  18.75% { transform: translate3d(-2.5%, -10%, 0) rotateZ(-7.5deg); }
  25%    { transform: translate3d(0, 0, 0) rotateZ(-7.5deg); }
  31.25% { transform: translate3d(0, -12.5%, 0) rotateZ(0); }
  37.5%  { transform: translate3d(0, -2.5%, 0) rotateZ(0); }
  43.75% { transform: translate3d(0, -12.5%, 0) rotateZ(0); }
  50.0%  { transform: translate3d(0, -2.5%, 0) rotateZ(0); }
  56.25% { transform: translate3d(0, 0%, 0) rotateZ(12.5deg); }
  62.5%  { transform: translate3d(0, 0%, 0) rotateZ(-2.5deg); }
  68.75% { transform: translate3d(0, 0%, 0) rotateZ(2.5deg); }
  75%    { transform: translate3d(0, 0%, 0) rotateZ(-12.5deg); }
  81.25% { transform: translate3d(2.5%, -10%, 0) rotateZ(7.5deg); }
  87.5%  { transform: translate3d(0, 0, 0) rotateZ(7.5deg); }
  93.75% { transform: translate3d(-2.5%, -10%, 0) rotateZ(-7.5deg); }
  100%   { transform: translate3d(0, 0, 0) rotateZ(0); }
}
  </style>
  <g class="${this.elfClass}">
${defs.drawElf(this.categoryChoice, setup)}
  </g>
</svg>
</div>
    `;
  }
render ( force ) { const svgStyle = ( ! force && self . ShadyCSS ? '' : this . svgStyle ) ; const time = this . _offset ; const setup = { shrugFactor : ( Math . cos ( time ) + 1 ) / 2 , bodyDegrees : ( Math . cos ( time ) * 0.5 ) * 10 , leftArmDegrees : this . _degrees ( this . _leftArm ) , rightArmDegrees : this . _degrees ( this . _rightArm ) , } ; return html ` ${ this . dance } ${ defs . baseSvgDefs } ${ defs . baseSvgStyle } ${ svgStyle } ${ this . elfClass } ${ defs . drawElf ( this . categoryChoice , setup ) } ` ; }
@param {boolean} force include CSS, for ShadyCSS modes
@param { boolean } force include CSS for ShadyCSS modes
// only render real styles in Shadow DOM