added chat view and ecstatica mood selector

client/src/app/components/index.js

@@ -1,4 +1,8 @@
 /* PLOP_INJECT_IMPORT */
+import ChatCard from './ChatCard';
+import ChatView from './ChatView';
+import MoodSelector from './MoodSelector';
+import MoodCard from './MoodCard';
 import Progress from './Progress';
 import Uploader from './Uploader';
 import Dropzone from './Dropzone';
@@ -27,6 +31,10 @@ import PageLoader from './molecules/PageLoader';
 
 export {
   /* PLOP_INJECT_EXPORT */
+	ChatCard,
+	ChatView,
+	MoodSelector,
+	MoodCard,
 	Progress,
 	Uploader,
 	Dropzone,

client/src/app/components/molecules/ChatCard/ChatCard.component.scss

@@ -0,0 +1,17 @@
+.c-ChatCard {
+    border: 1px solid rgb(221, 152, 23);
+    border-radius: 10px;
+    margin-bottom: 20px;
+    padding: 8px;
+    width: 65%;
+    display: flex;
+
+    &.rightFloater {
+        align-self: flex-end;
+        justify-content: flex-end;
+    }
+
+    p {
+        margin: unset;
+    }
+}

client/src/app/components/molecules/ChatCard/ChatCard.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ChatCard = ({chat}) => {
+
+  const classes = ['c-ChatCard', chat.isUser ? 'rightFloater' : ''].join(' ')
+  return (
+    <div className={classes}>
+      <p>{chat.text}</p>
+    </div>
+  );
+};
+
+ChatCard.defaultProps = {
+
+};
+
+ChatCard.propTypes = {
+
+};
+
+export default ChatCard;

client/src/app/components/molecules/ChatCard/ChatCard.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ChatCard from './ChatCard';
+
+describe('ChatCard', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/ChatCard/index.js

@@ -0,0 +1,3 @@
+import ChatCard from './ChatCard';
+
+export default ChatCard;

client/src/app/components/molecules/ChatView/ChatView.component.scss

@@ -0,0 +1,35 @@
+.c-ChatView {
+    margin: 0 20px;
+    border-radius: 0 0 10px 10px;
+    padding: 0px;
+    background: #fff7c7;
+    width: 50%;
+    margin-left: 80px;
+
+    .c-display {
+        max-height: 0;
+        overflow: hidden;
+        transition: all .5s ease-in-out;
+        background: #fff7c7;
+        border-radius: 0 0 5px 5px;
+        font-size: 12px;
+        line-height: 14px;
+        font-weight: 700;
+        font-family: 'Courier New', Courier, monospace;
+    }
+
+    .show {
+        max-height: 200px;
+        padding-top: 15px;
+        overflow: auto;
+    }
+
+    &.pad {
+        padding: 0 15px 15px;
+    }
+
+    .flex {
+        display: flex;
+        flex-wrap: wrap;
+    }
+}

client/src/app/components/molecules/ChatView/ChatView.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {createPropsSelector} from 'reselect-immutable-helpers';
+import {getChatViewStatus} from './../../../pages/Home/selectors'
+import ChatCard from './../ChatCard'
+
+const ChatView = props => {
+
+  const classes1 = ['c-ChatView', props.chatView ? 'pad' : ''].join(' ')
+  const classes2 = ['c-display flex', props.chatView ? 'show' : ''].join(' ')
+
+  const chats = [
+    {
+      isUser: false,
+      text: "Do something"
+    },
+    {
+      isUser: true,
+      text: "Do something else"
+    },
+    {
+      isUser: true,
+      text: "Try againg"
+    },
+    {
+      isUser: false,
+      text: "Got response from server"
+    },
+    {
+      isUser: true,
+      text: "13 images found"
+    },
+    {
+      isUser: false,
+      text: "Find colorful images"
+    }
+  ]
+
+  const chatCards = chats && chats.map(chat => {
+    return <ChatCard chat={chat} />
+  })
+  return (
+    <div className={classes1}>
+      <div className={classes2}>
+        {chatCards}
+      </div>
+    </div>
+  );
+};
+
+ChatView.propTypes = {
+  chatView: PropTypes.bool
+};
+
+const mapStateToProps = createPropsSelector({
+  chatView: getChatViewStatus
+})
+
+export default connect(
+  mapStateToProps,
+  null
+)(ChatView)

client/src/app/components/molecules/ChatView/ChatView.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import ChatView from './ChatView';
+
+describe('ChatView', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/ChatView/index.js

@@ -0,0 +1,3 @@
+import ChatView from './ChatView';
+
+export default ChatView;

client/src/app/components/molecules/PrincipalContent/ImageContainer/Image/Image.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux'
 
 import {updateBackground} from './../../../../../pages/Home/actions'
-import { makeStyles } from '@material-ui/core/styles';
+import {makeStyles} from '@material-ui/core/styles';
 import Card from '@material-ui/core/Card';
 import CardHeader from '@material-ui/core/CardHeader'
 import CardActionArea from '@material-ui/core/CardActionArea';

client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.component.scss

@@ -284,7 +284,7 @@
 	}
 	
 	.form-control {
-		padding: .6rem 1em;
+		padding: .6rem 3em 0.6em 1em;
 	}
 	
 	.container-fluid {
@@ -295,8 +295,21 @@
 		flex-direction: column;
 	}
 	
+	.c-iFieldContainer {
+		width: 50%;
+		border: 1px solid #ced4da;
+		border-radius: .25rem;
+		background: white;
+	}
+
 	#command.form-control {
-		width: 45%;
+		width: 85%;
+		margin-right: 15px;
+		display: inline-block;
+		border: unset;
+		&:active, &:focus {
+			box-shadow: none;
+		}
 	}
 	
 	#faux {

client/src/app/components/molecules/common/CommandPrompt/CommandPrompt.js

@@ -1,5 +1,8 @@
 import React from 'react';
+import {connect} from 'react-redux'
+import PropTypes from 'prop-types'
 import $ from 'jquery'
+import {toggleChatView} from './../../../../pages/Home/actions'
 import CommandAndUserTools from './CommandAndUserTools/CommandAndUserTools';
 import {Link} from 'react-router-dom';
 
@@ -7,9 +10,13 @@ class CommandPrompt extends React.Component {
 
   constructor(props) {
     super(props)
+    this.state = {
+      chatView: false
+    }
     this.registerMouseAndKeyboardHandlers = this.registerMouseAndKeyboardHandlers.bind(this)
     this.showContextMenu = this.showContextMenu.bind(this)
     this.initiateDomOpsOnEnter = this.initiateDomOpsOnEnter.bind(this)
+    this.toggleChatView = this.toggleChatView.bind(this)
     this.timerId = 0
   }
 
@@ -71,7 +78,7 @@ class CommandPrompt extends React.Component {
     commandField.toggleClass('loading')
     // this.domOpsService.hideNonCards();
     let commandVal = commandField.val();
-    console.log(commandVal)
+    // console.log(commandVal)
     if(!commandVal) {
       // this.domOpsService.showEmptyCommandMessage(this.emptyCommandMessage);
     } else {
@@ -84,6 +91,13 @@ class CommandPrompt extends React.Component {
     }
   }
 
+  toggleChatView() {
+    this.setState({
+      chatView: !this.state.chatView
+    })
+    this.props.dispatchShowChatView(!this.state.chatView)
+  }
+
   render() {
     return (
       <div id="header" className="c-CommandPrompt headerprompt" onDragEnd={this.showContextMenu}>
@@ -99,9 +113,12 @@ class CommandPrompt extends React.Component {
         </div>
         <nav className="navbar navbar-expand-lg navbar-light">
           <div className="container-fluid">
-            <input type="text" className="form-control" placeholder="What you need..."
-              name="command" id="command" onKeyUp={(event) => this.initiateDomOpsOnEnter(event, this.executeCommand, 2000)}
-              onClick={this.showContextMenu} />
+            <div className="c-iFieldContainer">
+              <input type="text" className="form-control" placeholder="What you need..."
+                name="command" id="command" onKeyUp={(event) => this.initiateDomOpsOnEnter(event, this.executeCommand, 2000)}
+                onClick={this.showContextMenu} />
+              <button className="btn btn-primary" onClick={this.toggleChatView}>{this.state.chatView ? 'Hide Chat' : 'Show Chat'}</button>
+            </div>
             <div className="dropdown-menu" aria-labelledby="dropdownMenuButton" id="inputSelectionContextMenu">
               <Link to="#" className="dropdown-item" onClick={this.executeCommand}>Fire</Link>
               <Link to="#" className="dropdown-item" onClick={this.resetCommand}>Clear</Link>
@@ -116,4 +133,15 @@ class CommandPrompt extends React.Component {
   }
 }
 
-export default CommandPrompt;
+CommandPrompt.props = {
+  dispatchShowChatView: PropTypes.func
+}
+
+const mapDispatchToProps = {
+  dispatchShowChatView: (chatView) => toggleChatView(chatView)
+}
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(CommandPrompt)

client/src/app/components/molecules/ecstatica/creator/MoodCard/MoodCard.component.scss

@@ -0,0 +1,121 @@
+.c-MoodCard {
+  cursor: pointer;
+  transition: color 1s ease-in-out;
+  height: 300px;
+  width: 285px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  &.padder {
+    margin: 45px;
+  }
+
+  &:not(:active):hover {
+    -webkit-animation: highlight 1.5s linear infinite;
+    -moz-animation: highlight 1.5s linear infinite;
+    -ms-animation: highlight 1.5s linear infinite;
+    -o-animation: highlight 1.5s linear infinite;
+    animation: highlight 1.5s linear infinite;
+  }
+
+  &:active {
+    -ms-transform: scale(2);
+    -moz-transform: scale(2);
+    -webkit-transform: scale(2);
+    -o-transform: scale(2);
+    transform: scale(2);
+    animation: growandfade 2s;
+  }
+
+  @-webkit-keyframes growandfade {
+    to {
+      -webkit-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  @keyframes growandfade {
+    to {
+      -ms-transform: scale(2);
+      -moz-transform: scale(2);
+      -webkit-transform: scale(2);
+      -o-transform: scale(2);
+      transform: scale(2);
+    }
+  }
+
+  @-webkit-keyframes highlight {
+    0% {
+      -webkit-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    50% {
+      -webkit-transform: scale(0.9);
+      -o-transform: scale(0.9);
+      transform: scale(0.9);
+    }
+    100% {
+      -webkit-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+  @keyframes highlight {
+    0% {
+      -ms-transform: scale(1);
+      -moz-transform: scale(1);
+      -webkit-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+    50% {
+      -ms-transform: scale(0.9);
+      -moz-transform: scale(0.9);
+      -webkit-transform: scale(0.9);
+      -o-transform: scale(0.9);
+      transform: scale(0.9);
+    }
+    100% {
+      -ms-transform: scale(1);
+      -moz-transform: scale(1);
+      -webkit-transform: scale(1);
+      -o-transform: scale(1);
+      transform: scale(1);
+    }
+  }
+
+  .c-mood-image {
+    max-height: 100%;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    filter: blur(3px);
+    background-size: 100% 100%;
+    position: absolute;
+    z-index: -20;
+  }
+
+  .c-mood-text {
+    color: #eee;
+    font-size: 25px;
+    letter-spacing: 2px;
+    line-height: 30px;
+    text-transform: capitalize;
+    font-family: 'McLaren', cursive;
+    background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
+    font-weight: bold;
+    border: 3px solid #f1f1f1;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 70%;
+    padding: 15px;
+    text-align: center;
+  }
+}

client/src/app/components/molecules/ecstatica/creator/MoodCard/MoodCard.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MoodSelector from '../MoodSelector/MoodSelector';
+
+const MoodCard = ({mood}) => {
+  return (
+    <div className='c-MoodCard padder col-3'>
+      <div className="c-mood-image" style={{backgroundImage: `url(${mood.src})`}} />
+      <p className="c-mood-text">{mood.text}</p>
+    </div>
+  );
+};
+
+MoodCard.defaultProps = {
+
+};
+
+MoodCard.propTypes = {
+  mood: PropTypes.object
+};
+
+export default MoodCard;

client/src/app/components/molecules/ecstatica/creator/MoodCard/MoodCard.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import MoodCard from './MoodCard';
+
+describe('MoodCard', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/ecstatica/creator/MoodCard/index.js

@@ -0,0 +1,3 @@
+import MoodCard from './MoodCard';
+
+export default MoodCard;

client/src/app/components/molecules/ecstatica/creator/MoodSelector/MoodSelector.component.scss

@@ -0,0 +1,5 @@
+.c-MoodSelector {
+  .selector-row {
+      justify-content: center;
+  }
+}

client/src/app/components/molecules/ecstatica/creator/MoodSelector/MoodSelector.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import MoodCard from '../MoodCard/MoodCard';
+
+const MoodSelector = props => {
+
+  const moodData = [
+    {src: './../../../../../../../images/happy.jpg', text: "Happy!"},
+    {src: './../../../../../../../images/sad.jpg', text: "Sad!"},
+    {src: './../../../../../../../images/love.png', text: "In love!"},
+    {src: './../../../../../../../images/disappointed.png', text: "Feeling low!"},
+    {src: './../../../../../../../images/angry.png', text: "Angry!"},
+    {src: './../../../../../../../images/sleepy.png', text: "Sleepy!"},
+    {src: './../../../../../../../images/naughty.png', text: "Feeling naughty!"},
+    {src: './../../../../../../../images/bored.png', text: "Bored!"},
+    {src: './../../../../../../../images/excited.png', text: "Excited!"},
+    {src: './../../../../../../../images/scared.png', text: "Scared!"},
+    // {src: './../../../../../../../images/bored.png', text: "I'm feeling bored!"},
+    // {src: './../../../../../../../images/bored.png', text: "I'm feeling bored!"},
+  ]
+  const moodCards = moodData && moodData.map((mood) => {
+    return <MoodCard mood={mood} />
+  })
+
+  return (
+    <div className='c-MoodSelector container'>
+      <div className='row selector-row'>
+        {moodCards}
+      </div>
+    </div>
+  );
+};
+
+MoodSelector.defaultProps = {
+
+};
+
+MoodSelector.propTypes = {
+
+};
+
+export default MoodSelector;

client/src/app/components/molecules/ecstatica/creator/MoodSelector/MoodSelector.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import MoodSelector from './MoodSelector';
+
+describe('MoodSelector', () => {
+   it('renders without error', () => {
+
+   });
+});

client/src/app/components/molecules/ecstatica/creator/MoodSelector/index.js

@@ -0,0 +1,3 @@
+import MoodSelector from './MoodSelector';
+
+export default MoodSelector;

client/src/app/pages/Home/Home.jsx

@@ -10,6 +10,7 @@ import Sidebar from '../../components/molecules/SideBar'
 import CommandPrompt from '../../components/molecules/common/CommandPrompt'
 import PrincipalContent from '../../components/molecules/PrincipalContent/PrincipalContent';
 import Uploader from '../../components/molecules/common/Uploader/Uploader';
+import ChatView from '../../components/molecules/ChatView/ChatView';
 
 class Home extends React.Component {
     constructor(props) {
@@ -28,6 +29,7 @@ class Home extends React.Component {
                 <div className="c-background" style={{backgroundImage: `url(${this.props.backgroundImage})`}} />
                 <Sidebar />
                 <CommandPrompt />
+                <ChatView />
                 <PrincipalContent />
                 <Uploader />
             </div>

client/src/app/pages/Home/actions.js

@@ -7,6 +7,7 @@ export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
 export const UPDATE_BACKGROUND = 'UPDATE_BACKGROUND'
 export const UPDATE_MODAL_STATE = 'UPDATE_MODAL_STATE'
 export const UPDATE_UPLOAD_MODAL_STATE = 'UPDATE_UPLOAD_MODAL_STATE'
+export const TOGGLE_CHAT_VIEW = 'TOGGLE_CHAT_VIEW'
 
 export const updateHomeDataState = (payload) => ({type: HOME_DATA_STATE_RECEIVED, payload})
 const ds = new DataService()
@@ -63,4 +64,11 @@ export const updateUploadModalState = (uploadModalState) => {
     }
 }
 
+export const toggleChatView = (chatView) => {
+    return {
+        type: TOGGLE_CHAT_VIEW,
+        payload: {chatView}
+    }
+}
+
     

client/src/app/pages/Home/reducer.js

@@ -7,7 +7,8 @@ import {
     UPDATE_FORM_VALUES,
     UPDATE_BACKGROUND,
     UPDATE_MODAL_STATE,
-    UPDATE_UPLOAD_MODAL_STATE
+    UPDATE_UPLOAD_MODAL_STATE,
+    TOGGLE_CHAT_VIEW
 } from './actions'
 
 const initialState = Immutable.Map({
@@ -24,6 +25,7 @@ const reducer = (state = initialState, action) => {
         case UPDATE_BACKGROUND:
         case UPDATE_MODAL_STATE:
         case UPDATE_UPLOAD_MODAL_STATE:
+        case TOGGLE_CHAT_VIEW:
             return state.mergeDeep(action.payload)
         default:
             return state

client/src/app/pages/Home/selectors.js

@@ -16,3 +16,4 @@ export const getUploadModalState = createGetSelector(getHome, 'uploadModalOpened
 export const getFormValues = createGetSelector(getHome, 'formValues')
 export const getFormErrors = createGetSelector(getHome, 'formErrors')
 export const getImages = createGetSelector(getHome, 'images')
+export const getChatViewStatus = createGetSelector(getHome, 'chatView')

client/src/app/pages/ecstatica/Creator/Creator.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import StepProgressBar from '../../../components/molecules/common/StepProgressBar/StepProgressBar';
 import ImageContainer from '../../../components/molecules/PrincipalContent/ImageContainer';
+import MoodSelector from '../../../components/molecules/ecstatica/creator/MoodSelector/MoodSelector';
 
 const Creator = props => {
   return (
     <div className='c-Creator'>
       <StepProgressBar />
       <ImageContainer />
+      <MoodSelector />
     </div>
   );
 };

client/src/app/styles/_components.scss

@@ -17,4 +17,8 @@
 @import '../components/molecules/PrincipalContent/ImageContainer/ImageContainer.component';
 @import '../components/molecules/PrincipalContent/ImageContainer/Image/Image.component';
 @import '../components/molecules/PrincipalContent/ImageContainer/Image/ImageHeader/ImageHeader.component';
+@import '../components/molecules/ecstatica/creator/MoodCard/MoodCard.component';
+@import '../components/molecules/ecstatica/creator/MoodSelector/MoodSelector.component';
+@import '../components/molecules/ChatView/ChatView.component';
+@import '../components/molecules/ChatCard/ChatCard.component';
 // @import '../preloader/preload';

client/src/app/styles/base/_typography.scss

@@ -7,6 +7,7 @@
 @import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
 @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
 @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css?family=McLaren&display=swap" rel="stylesheet');
 
 h1,
 h2,