reposition message and cat

CYPIAPT-LNDSE · Feb 2, 2017 · 98451ed · 98451ed
1 parent c3fdc8a
commit 98451ed
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 13 deletions.
diff --git a/src/actions/index.js b/src/actions/index.js
@@ -10,11 +10,11 @@ function setAction(newState, value) {
   };
 }
 
-function initiateConversation() {
+function initiateConversation(value) {
   return {
     type: INITIATE_CONVERSATION,
     status: "message",
-    value: 1
+    value: value
   };
 }
 

diff --git a/src/components/App.js b/src/components/App.js
@@ -8,13 +8,13 @@ import '../styles/App.css';
 
 class App extends Component {
   render() {
-    const { message, callToAction, updateMessage } = this.props;
+    const { message, callToAction, updateMessage, initiateConversation } = this.props;
     return (
       <div className='container'>
         {callToAction && <CallToAction {...callToAction} updateMessage={updateMessage}/>}
         <Menu />
         {message && <Message message={message} updateMessage={updateMessage}/>}
-        <Cat />
+        <Cat initiateConversation={initiateConversation} />
       </div>
     );
   }

diff --git a/src/components/Cat.js b/src/components/Cat.js
@@ -1,8 +1,8 @@
 import React from 'react';
 
-const Cat = () => {
+const Cat = ({ initiateConversation }) => {
   return (
-    <img alt="friendly cat" className="cat" src="./cat.png" />
+    <img onClick={() => initiateConversation(12)} alt="friendly cat" className="cat" src="./cat.png" />
   );
 }
 

diff --git a/src/components/Message.js b/src/components/Message.js
@@ -5,6 +5,7 @@ class Message extends React.Component {
   render() {
     const { message, updateMessage } = this.props;
     return (
+      <div className="message-container">
       <div className="message">
         <p className="question">{message.text}</p>
         {message.responses.map((response, key) =>
@@ -13,6 +14,7 @@ class Message extends React.Component {
                           key={ key } />
         )}
       </div>
+      </div>
     );
   }
 }

diff --git a/src/containers/App.js b/src/containers/App.js
@@ -24,6 +24,9 @@ const mapDispatchToProps = (dispatch) => {
   return {
     updateMessage: ({ action, value }) => {
       dispatch(actions.setAction(action, value));
+    },
+    initiateConversation: (value) => {
+      dispatch(actions.initiateConversation(value));
     }
   }
 }

diff --git a/src/containers/MenuContainer.js b/src/containers/MenuContainer.js
@@ -11,7 +11,7 @@ const mapDispatchToProps = (dispatch) => {
     handleEvent: (label) => {
       switch(label) {
         case 'talk':
-          dispatch(actions.initiateConversation());
+          dispatch(actions.initiateConversation(1));
           break;
         default:
           return;

diff --git a/src/resources/messages.json b/src/resources/messages.json
@@ -73,5 +73,11 @@
       { "text": "That sounds fun!", "action": "message", "value": "6" },
       { "text": "I don't really want to", "action": "message", "value": "8" }
     ]
+  },
+  "12": {
+    "text": "Meeowww",
+    "responses": [
+      { "text": "awww", "action": "idle", "value": null }
+    ]
   }
 }
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -12,16 +12,16 @@ body {
   position: relative;
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2989d8+0,1e5799+62,207cca+62,c1a666+62,70592b+62,b29f62+100 */
   background: #2989d8; /* Old browsers */
-  background: -moz-linear-gradient(top,  #2989d8 0%, #1e5799 62%, #207cca 62%, #c1a666 62%, #70592b 62%, #b29f62 100%); /* FF3.6-15 */
-  background: -webkit-linear-gradient(top,  #2989d8 0%,#1e5799 62%,#207cca 62%,#c1a666 62%,#70592b 62%,#b29f62 100%); /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(to bottom,  #2989d8 0%,#1e5799 62%,#207cca 62%,#c1a666 62%,#70592b 62%,#b29f62 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  background: -moz-linear-gradient(top,  #2989d8 0%, #1e5799 68%, #207cca 68%, #c1a666 68%, #70592b 68%, #b29f62 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(top,  #2989d8 0%,#1e5799 68%,#207cca 68%,#c1a666 68%,#70592b 68%,#b29f62 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to bottom,  #2989d8 0%,#1e5799 68%,#207cca 68%,#c1a666 68%,#70592b 68%,#b29f62 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#b29f62',GradientType=0 ); /* IE6-9 */
   text-align: center;
 }
 
 .cat {
   position: fixed;
-  top: 310px;
+  top: 340px;
   left: 75px;
   width: 200px;
   height: 200px;
@@ -46,7 +46,7 @@ body {
     transform: translate3d(2px, 0, 0);
   }
 
-  30%, 50%, 70% {
+  30%, 50%, 68% {
     transform: translate3d(-4px, 0, 0);
   }
 
@@ -83,13 +83,22 @@ body {
   top: 1px;
 }
 
+.message-container {
+  box-sizing: border-box;
+  width: 320px;
+  height: 300px;
+  position: fixed;
+}
+
 .message {
   display: inline-block;
   border-radius: 10%;
   background-color: white;
   padding: 10px;
-  margin: 60px auto;
   width: 250px;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
 .message .question {