Add sound and adapt animation

.gitignore

@@ -35,3 +35,5 @@ jspm_packages
 
 # Optional REPL history
 .node_repl_history
+
+.DS_Store

package.json

@@ -3,13 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.7.0"
+    "react-scripts": "^0.9.5"
   },
   "dependencies": {
-    "normalize.css": "^5.0.0",
-    "react": "^15.4.1",
-    "react-dom": "^15.4.1",
-    "styled-components": "^1.1.1"
+    "normalize.css": "^6.0.0",
+    "react": "^15.5.4",
+    "react-dom": "^15.5.4",
+    "react-router-dom": "^4.1.1",
+    "react-sound": "^0.5.2",
+    "styled-components": "^1.4.5"
   },
   "scripts": {
     "start": "react-scripts start",

src/components/App/index.js

@@ -1,10 +1,16 @@
 import React from 'react';
+import Sound from 'react-sound';
 import {Wrapper, Group, BlueText, RedText} from './styles';
 import Logo from '../Logo';
+import {sound} from '../../constants';
+import {getSoundPath} from '../../helpers';
 
-
-const App = () => (
+const App = ({match: {params: {id}}}) => console.log(id) || (
   <Wrapper>
+    <Sound
+      url={getSoundPath(id || sound)}
+      playStatus={Sound.status.PLAYING}
+    />
     <Group>
       <BlueText>React</BlueText>
       <Logo width={320} height={320} />

src/components/App/styles.js

@@ -1,5 +1,5 @@
 import styled, {keyframes} from 'styled-components';
-import constants from '../../constants';
+import {animationDelay, animationDuration, animationEasing} from '../../constants';
 
 export const Wrapper = styled.div`
   align-items: center;
@@ -28,7 +28,7 @@ const redTextEnter = keyframes`
   }
 `;
 export const RedText = styled(Text)`
-  animation: ${redTextEnter} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${redTextEnter} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
   color: #ff6363;
 `;
 
@@ -40,6 +40,6 @@ const blueTextEnter = keyframes`
   }
 `;
 export const BlueText = styled(Text)`
-  animation: ${blueTextEnter} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${blueTextEnter} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
   color: #607096;
 `;

src/components/Logo/styles.js

@@ -1,5 +1,5 @@
 import styled, {keyframes} from 'styled-components';
-import constants from '../../constants';
+import {animationDelay, animationDuration, animationEasing} from '../../constants';
 
 const blazonEnter = keyframes`
   from, 50% {
@@ -8,7 +8,7 @@ const blazonEnter = keyframes`
   }
 `;
 export const Blazon = styled.path`
-  animation: ${blazonEnter} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${blazonEnter} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
   fill: #ff6363;
   transform-origin: center;
 `;
@@ -34,7 +34,7 @@ const Ellipsis = styled.path`
 `;
 
 export const Ellipsis1 = styled(Ellipsis)`
-  animation: ${ellipsisEnter1} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${ellipsisEnter1} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
 `;
 const ellipsisEnter2 = keyframes`
   from, 5% {
@@ -49,7 +49,7 @@ const ellipsisEnter2 = keyframes`
 `;
 
 export const Ellipsis2 = styled(Ellipsis)`
-  animation: ${ellipsisEnter2} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${ellipsisEnter2} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
 `;
 
 const ellipsisEnter3 = keyframes`
@@ -64,5 +64,5 @@ const ellipsisEnter3 = keyframes`
   }
 `;
 export const Ellipsis3 = styled(Ellipsis)`
-  animation: ${ellipsisEnter3} ${constants.animationDuration} ${constants.animationEasing} forwards;
+  animation: ${ellipsisEnter3} ${animationDuration} ${animationEasing} ${animationDelay} forwards;
 `;

src/config.json

@@ -0,0 +1,7 @@
+{
+  "delay": 0,
+  "duration": 4000,
+  "timingFn": "ease-in-out",
+  "loop": false,
+  "sound": "b"
+}

src/constants.js

@@ -1,6 +1,6 @@
-const constants = {
-  animationDuration: '1.75s',
-  animationEasing: 'ease-in-out',
-};
+import {delay, duration} from './config.json';
 
-export default constants;
+export * from './config.json';
+export const animationDelay = `${delay / 1000}s`;
+export const animationDuration = `${duration / 1000}s`;
+export const animationEasing = 'ease-in-out';

src/helpers.js

@@ -0,0 +1 @@
+export const getSoundPath = sound => `sounds/${sound}.mp3`;

src/index.js

@@ -1,10 +1,19 @@
 import 'normalize.css';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import {
+  BrowserRouter as Router,
+  Route,
+} from 'react-router-dom';
 import App from './components/App';
 import './index.css';
 
 ReactDOM.render(
-  <App />,
+  <Router>
+    <span>
+      <Route exact path="/" component={App} />
+      <Route path="/:id" component={App} />
+    </span>
+  </Router>,
   document.getElementById('root')
 );