Add mouse in/out events to stage for sharing blocks

src/components/stage-selector/stage-selector.css

@@ -80,3 +80,35 @@ $header-height: calc($stage-menu-height - 2px);
     position: absolute;
     bottom: 0.75rem;
 }
+
+.raised, .raised .header {
+    background-color: #8cbcff;
+    transition: all 0.25s ease;
+}
+
+.raised:hover {
+    animation-name: wiggle;
+    animation-duration: 500ms;
+    animation-iteration-count: 1;
+    animation-timing-function: ease-in-out;
+    background-color: #8cbcff;
+    transform: scale(1.05);
+}
+
+@keyframes wiggle {
+    0% {transform: rotate(2deg) scale(1.05);}
+    25% {transform: rotate(-2deg) scale(1.05);}
+    50% {transform: rotate(4deg) scale(1.05);}
+    75% {transform: rotate(-1deg) scale(1.05);}
+    100% {transform: rotate(0deg) scale(1.05);}
+}
+
+.receivedBlocks {
+    animation: glowing 250ms;
+}
+
+@keyframes glowing {
+    10% { box-shadow: 0 0 10px #7fff1e; }
+    90% { box-shadow: 0 0 10px #7fff1e; }
+    100% { box-shadow: none; }
+}

src/components/stage-selector/stage-selector.jsx

@@ -42,10 +42,14 @@ const StageSelector = props => {
         fileInputRef,
         intl,
         selected,
+        raised,
+        receivedBlocks,
         url,
         onBackdropFileUploadClick,
         onBackdropFileUpload,
         onClick,
+        onMouseEnter,
+        onMouseLeave,
         onNewBackdropClick,
         onSurpriseBackdropClick,
         onEmptyBackdropClick,
@@ -54,9 +58,13 @@ const StageSelector = props => {
     return (
         <Box
             className={classNames(styles.stageSelector, {
-                [styles.isSelected]: selected
+                [styles.isSelected]: selected,
+                [styles.raised]: raised,
+                [styles.receivedBlocks]: receivedBlocks
             })}
             onClick={onClick}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
             {...componentProps}
         >
             <div className={styles.header}>
@@ -121,8 +129,12 @@ StageSelector.propTypes = {
     onBackdropFileUploadClick: PropTypes.func,
     onClick: PropTypes.func,
     onEmptyBackdropClick: PropTypes.func,
+    onMouseEnter: PropTypes.func,
+    onMouseLeave: PropTypes.func,
     onNewBackdropClick: PropTypes.func,
     onSurpriseBackdropClick: PropTypes.func,
+    raised: PropTypes.bool.isRequired,
+    receivedBlocks: PropTypes.bool.isRequired,
     selected: PropTypes.bool.isRequired,
     url: PropTypes.string
 };

src/containers/stage-selector.jsx

@@ -5,6 +5,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import {openBackdropLibrary} from '../reducers/modals';
 import {activateTab, COSTUMES_TAB_INDEX} from '../reducers/editor-tab';
+import {setHoveredSprite} from '../reducers/hovered-target';
 
 import StageSelectorComponent from '../components/stage-selector/stage-selector.jsx';
 
@@ -23,6 +24,8 @@ class StageSelector extends React.Component {
             'addBackdropFromLibraryItem',
             'handleFileUploadClick',
             'handleBackdropUpload',
+            'handleMouseEnter',
+            'handleMouseLeave',
             'setFileInput'
         ]);
     }
@@ -65,6 +68,12 @@ class StageSelector extends React.Component {
     handleFileUploadClick () {
         this.fileInput.click();
     }
+    handleMouseEnter () {
+        this.props.dispatchSetHoveredSprite(this.props.id);
+    }
+    handleMouseLeave () {
+        this.props.dispatchSetHoveredSprite(null);
+    }
     setFileInput (input) {
         this.fileInput = input;
     }
@@ -85,6 +94,8 @@ class StageSelector extends React.Component {
                 onBackdropFileUploadClick={this.handleFileUploadClick}
                 onClick={this.handleClick}
                 onEmptyBackdropClick={this.handleEmptyBackdrop}
+                onMouseEnter={this.handleMouseEnter}
+                onMouseLeave={this.handleMouseLeave}
                 onSurpriseBackdropClick={this.handleSurpriseBackdrop}
 
                 {...componentProps}
@@ -98,9 +109,12 @@ StageSelector.propTypes = {
     onSelect: PropTypes.func
 };
 
-const mapStateToProps = (state, {assetId}) => ({
+const mapStateToProps = (state, {assetId, id}) => ({
     url: assetId && state.scratchGui.vm.runtime.storage.get(assetId).encodeDataURI(),
-    vm: state.scratchGui.vm
+    vm: state.scratchGui.vm,
+    receivedBlocks: state.scratchGui.hoveredTarget.receivedBlocks &&
+            state.scratchGui.hoveredTarget.sprite === id,
+    raised: state.scratchGui.blockDrag
 });
 
 const mapDispatchToProps = dispatch => ({
@@ -111,6 +125,9 @@ const mapDispatchToProps = dispatch => ({
     },
     onActivateTab: tabIndex => {
         dispatch(activateTab(tabIndex));
+    },
+    dispatchSetHoveredSprite: spriteId => {
+        dispatch(setHoveredSprite(spriteId));
     }
 });