diff --git a/package.json b/package.json
index 37de300..2c92415 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"dependencies": {
"firebase": "^4.8.1",
"firebase-tools": "^3.16.0",
+ "mo-js": "^0.288.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17",
diff --git a/src/App.js b/src/App.js
index 77ab48c..6d9f9b7 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,24 +1,24 @@
import React, {Component} from 'react';
-import logo from './logo.svg';
import './components/App.css';
import firebase from 'firebase'
import YoutubePlayer from './components/youtube-player'
import config from './config'
+import ClapAdapter from "./components/clap/clap";
require("firebase/firestore");
var wtfApp = firebase.initializeApp(config);
-// You can retrieve services via the defaultApp variable...
-var defaultStorage = wtfApp.storage();
-var defaultDatabase = wtfApp.database();
-
-// ... or you can use the equivalent shorthand notation
-defaultStorage = firebase.storage();
-defaultDatabase = firebase.database();
-
-// Initialize Cloud Firestore through Firebase
-var db = firebase.firestore();
+// // You can retrieve services via the defaultApp variable...
+// var defaultStorage = wtfApp.storage();
+// var defaultDatabase = wtfApp.database();
+//
+// // ... or you can use the equivalent shorthand notation
+// defaultStorage = firebase.storage();
+// defaultDatabase = firebase.database();
+//
+// // Initialize Cloud Firestore through Firebase
+// var db = firebase.firestore();
class App extends Component {
@@ -26,6 +26,7 @@ class App extends Component {
super(props);
this.state = {
data: [],
+ video: {},
index: 0,
wtfCount: 0,
videoMode: false
@@ -78,13 +79,15 @@ class App extends Component {
const index = this.state.index;
const length = this.state.data.length;
let randomIndex = Math.floor(Math.random() * length);
-
- this.setState({videoMode: true, index: randomIndex})
+ //this.state.data[randomIndex].wtfCount
+ this.setState({videoMode: true, index: randomIndex, wtfCount: 11})
}
openingContent = () => {
return (
- WHAT THE FUCK DID I JUST WATCH
+
+
WHAT THE FUCK DID I JUST WATCH
+
)
}
@@ -99,6 +102,8 @@ class App extends Component {
}
+ {this.state.videoMode && }
);
diff --git a/src/components/clap/clap.js b/src/components/clap/clap.js
new file mode 100644
index 0000000..b0b5073
--- /dev/null
+++ b/src/components/clap/clap.js
@@ -0,0 +1,138 @@
+/**
+ * @author Doğuşcan Namal
+ * @version 21.12.2017
+ */
+import React, {Component} from 'react';
+import mojs from 'mo-js';
+import "./clap.scss"
+
+class ClapAdapter extends Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ count: 0,
+ countTotal: props.wtfCount,//this._generateRandomNumber(500,10000),
+ isClicked: false,
+ }
+ this._handleClick = this._handleClick.bind(this);
+ }
+
+ componentDidMount() {
+ const tlDuration = 300
+ const triangleBurst = new mojs.Burst({
+ parent: '#clap',
+ radius: {50:95},
+ count: 5,
+ angle: 30,
+ children: {
+ shape: 'polygon',
+ radius: {6: 0},
+ scale: 1,
+ stroke: 'rgba(211,84,0 ,0.5)',
+ strokeWidth: 2,
+ angle: 210,
+ delay: 30,
+ speed: 0.2,
+ easing: mojs.easing.bezier(0.1, 1, 0.3 ,1),
+ duration: tlDuration
+ }
+ })
+ const circleBurst = new mojs.Burst({
+ parent: '#clap',
+ radius: {50:75},
+ angle: 25,
+ duration: tlDuration,
+ children: {
+ shape: 'circle',
+ fill: 'rgba(149,165,166 ,0.5)',
+ delay: 30,
+ speed: 0.2,
+ radius: {3: 0},
+ easing: mojs.easing.bezier(0.1, 1, 0.3, 1),
+ }
+ })
+ const countAnimation = new mojs.Html({
+ el: '#clap--count',
+ isShowStart: false,
+ isShowEnd: true,
+ y: {0: -30},
+ opacity: {0:1},
+ duration: tlDuration
+ }).then({
+ opacity: {1:0},
+ y: -80,
+ delay: tlDuration/2
+ })
+ const countTotalAnimation = new mojs.Html({
+ el: '#clap--count-total',
+ isShowStart: false,
+ isShowEnd: true,
+ opacity: {0:1},
+ delay: 3*(tlDuration)/2,
+ duration: tlDuration,
+ y: {0: -3}
+ })
+ const scaleButton = new mojs.Html({
+ el: '#clap',
+ duration: tlDuration,
+ scale: {1.3: 1},
+ easing: mojs.easing.out
+ })
+ const clap = document.getElementById('clap')
+ clap.style.transform = "scale(1, 1)"
+ this._animationTimeline = new mojs.Timeline()
+ this._animationTimeline.add([
+ countAnimation,
+ countTotalAnimation,
+ scaleButton,
+ circleBurst,
+ triangleBurst
+ ])
+ }
+ _generateRandomNumber (min, max) {
+ return Math.floor(Math.random()*(max-min+1)+min)
+ }
+
+ componentWillReceiveProps(nextProps){
+ if(this.props !== this.nextProps){
+ this.setState({countTotal:nextProps.wtfCount});
+ }
+ }
+
+ _handleClick () {
+ this._animationTimeline.replay()
+ this.setState(function(prevState, nextState) {
+ return {
+ count: Math.min(prevState.count + 1, 50),
+ countTotal: prevState.countTotal + 1,
+ isClicked: true
+ }
+ })
+ this.props.onWtfButtonClick();
+ }
+
+ render() {
+ const {count, countTotal, isClicked} = this.state;
+ return getAppContent(count, countTotal, isClicked, this._handleClick)
+ }
+}
+
+function getAppContent(count, countTotal, isClicked, handleClick) {
+ return
+