Merge 7ab4ef5 into 0168cda

cofacts · Nov 11, 2018 · 1a76924 · 1a76924
2 parents 0168cda + 7ab4ef5
commit 1a76924
Show file tree

Hide file tree

Showing 4 changed files with 1,484 additions and 0 deletions.
diff --git a/components/gathering/PockyGatheringAnimation/AnimateEatPocky.js b/components/gathering/PockyGatheringAnimation/AnimateEatPocky.js
@@ -0,0 +1,24 @@
+import data from './animationData';
+
+export default class AnimateEatPocky {
+  constructor(domRef) {
+    this.anim = window.lottie.loadAnimation({
+      container: domRef,
+      renderer: 'svg',
+      loop: false,
+      autoplay: false,
+      animationData: data,
+    });
+    this.anim.addEventListener('complete', () => {
+      this.isAnimating = false;
+    });
+    this.isAnimating = false;
+  }
+
+  play() {
+    if (!this.isAnimating) {
+      this.isAnimating = true;
+      this.anim.goToAndPlay(0, true);
+    }
+  }
+}
diff --git a/components/gathering/PockyGatheringAnimation/PockyGatheringAnimation.js b/components/gathering/PockyGatheringAnimation/PockyGatheringAnimation.js
@@ -0,0 +1,57 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import Head from 'next/head';
+
+import AnimateEatPocky from './AnimateEatPocky';
+
+const lottieCDN =
+  'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.1/lottie.min.js';
+
+export default class PockyGatheringAnimation extends PureComponent {
+  static propTypes = {
+    number: PropTypes.number,
+  };
+
+  componentDidMount() {
+    // can't get global lottie after onload, don't know why...
+    var lottie_script = document.createElement('script');
+    lottie_script.onload = this._init;
+    lottie_script.src = lottieCDN;
+    document.head.appendChild(lottie_script);
+  }
+
+  componentDidUpdate = prevProps => {
+    const isInit = prevProps.number > 1000 || this.props.number > 1000;
+    if (
+      this.animEatPocky &&
+      !isInit &&
+      prevProps.number !== this.props.number
+    ) {
+      this.animEatPocky.play('lottie-pocky');
+    }
+  };
+
+  _init = () => {
+    this.animEatPocky = new AnimateEatPocky(this.refContainer);
+  };
+
+  render() {
+    return (
+      <div id="lottie-pocky" ref={container => (this.refContainer = container)}>
+        <Head>
+          <script src={lottieCDN} />
+        </Head>
+        <style jsx>{`
+          #lottie-pocky {
+            position: absolute;
+            z-index: 1;
+            right: 0;
+            left: 0;
+            top: 0;
+            bottom: 0;
+          }
+        `}</style>
+      </div>
+    );
+  }
+}
diff --git a/components/gathering/PockyGatheringAnimation/animationData.js b/components/gathering/PockyGatheringAnimation/animationData.js
diff --git a/pages/instant.js b/pages/instant.js
@@ -3,6 +3,7 @@ import Head from 'next/head';
 import gql from '../util/gql';
 import style from '../components/App/App.css';
 import querystring from 'querystring';
+import PockyGatheringAnimation from '../components/gathering/PockyGatheringAnimation/PockyGatheringAnimation';
 
 const POLLING_INTERVAL = 5000;
 
@@ -344,6 +345,7 @@ export default class InstantWrapper extends React.Component {
         ) : (
           <Instant number={number} total={current} />
         )}
+        <PockyGatheringAnimation number={number} />
         <Loading show={isBootstrapping} />
       </div>
     );