diff --git a/showcase/package.json b/showcase/package.json
index b258579..5b654c3 100644
--- a/showcase/package.json
+++ b/showcase/package.json
@@ -31,6 +31,7 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
+ "@mojs/player": "^0.43.16",
"@reach/router": "^1.2.1",
"mo-js": "^0.288.2",
"number-to-words": "^1.2.4",
diff --git a/showcase/src/patterns/01.js b/showcase/src/patterns/01.js
index a4a5ae5..d6bd838 100644
--- a/showcase/src/patterns/01.js
+++ b/showcase/src/patterns/01.js
@@ -1,5 +1,6 @@
import React, { Component, useState } from 'react'
import mojs from 'mo-js'
+import MojsPlayer from '@mojs/player'
import { generateRandomNumber } from '../utils/generateRandomNumber'
import styles from './index.css'
@@ -89,6 +90,11 @@ const withClapAnimation = WrappedComponent => {
circleBurst,
triangleBurst
])
+
+ // add the timeline to the player
+ new MojsPlayer({
+ add: this.state.animationTimeline
+ })
}
render () {
diff --git a/showcase/src/public/index.html b/showcase/src/public/index.html
index b1492d3..5733a5c 100644
--- a/showcase/src/public/index.html
+++ b/showcase/src/public/index.html
@@ -12,7 +12,7 @@
href="https://fonts.googleapis.com/css?family=Nunito:400,600&display=swap"
rel="stylesheet"
/>
- Document
+ Advanced React Patterns
diff --git a/showcase/webpack.config.base.js b/showcase/webpack.config.base.js
index 085c1a0..f375cdb 100644
--- a/showcase/webpack.config.base.js
+++ b/showcase/webpack.config.base.js
@@ -5,7 +5,8 @@ module.exports = {
entry: './src/index.js',
output: {
filename: 'app.bundle.js',
- path: path.join(__dirname, 'dist')
+ path: path.join(__dirname, 'dist'),
+ publicPath: '/'
},
module: {
rules: [
diff --git a/showcase/webpack.config.dev.js b/showcase/webpack.config.dev.js
index cc41701..c8f056e 100644
--- a/showcase/webpack.config.dev.js
+++ b/showcase/webpack.config.dev.js
@@ -5,11 +5,12 @@ module.exports = merge(baseConfig, {
mode: 'development',
devServer: {
port: 4646,
- open: 'Google Chrome',
+ open: true,
overlay: {
warnings: true,
errors: true
},
+ historyApiFallback: true,
hot: true
},
devtool: 'source-map'
diff --git a/showcase/yarn.lock b/showcase/yarn.lock
index 871a984..aab087f 100644
--- a/showcase/yarn.lock
+++ b/showcase/yarn.lock
@@ -757,6 +757,14 @@
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
+"@mojs/player@^0.43.16":
+ version "0.43.16"
+ resolved "https://registry.yarnpkg.com/@mojs/player/-/player-0.43.16.tgz#2ef8ceb2990992b8e3e3f1299ce23c29019affb4"
+ integrity sha512-4RB5mKESiD22LtrBo+T9TRi6+ISnQ9gN/GmSSUsJR8febRG8G+Mt9e6IijvO0W+0+qUgabBCnOxuLNGRQvI3Fw==
+ dependencies:
+ classlist-polyfill "^1.0.2"
+ hammerjs "^2.0.6"
+
"@reach/router@^1.2.1":
version "1.2.1"
resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.2.1.tgz#34ae3541a5ac44fa7796e5506a5d7274a162be4e"
@@ -1697,6 +1705,11 @@ class-utils@^0.3.5:
isobject "^3.0.0"
static-extend "^0.1.1"
+classlist-polyfill@^1.0.2:
+ version "1.2.0"
+ resolved "https://registry.yarnpkg.com/classlist-polyfill/-/classlist-polyfill-1.2.0.tgz#935bc2dfd9458a876b279617514638bcaa964a2e"
+ integrity sha1-k1vC39lFiodrJ5YXUUY4vKqWSi4=
+
clean-css@4.2.x:
version "4.2.1"
resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
@@ -3149,6 +3162,11 @@ gud@^1.0.0:
resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
+hammerjs@^2.0.6:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
+ integrity sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=
+
handle-thing@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"