Merge pull request #48 from FAC-Sixteen/feature/touch

FIXED TOUCH! YAY

Author: starsuit

src/components/bin/BinTouch.js

@@ -16,17 +16,33 @@ const collect = (connect, monitor) => {
     return {
         connectDropTarget: connect.dropTarget(),
         isOver: monitor.isOver(),
-        canDrop: monitor.canDrop(),
+        sourceOffset: monitor.getSourceClientOffset(),
     };
 };
 
 const BinTouch = props => {
-    const { connectDropTarget, name, correctBin, wrongBin } = props;
+    const {
+        connectDropTarget,
+        name,
+        correctBin,
+        wrongBin,
+        sourceOffset,
+    } = props;
+
+    const getLayerStyles = () => {
+        return {
+            transform: sourceOffset ? `translate(${-0}px, ${-0}px)` : "",
+        };
+    };
+
+    const transform = getLayerStyles();
 
     return connectDropTarget(
         <div>
             <StyledBin
+                style={transform}
                 src={name === "recyclingBin" ? RecyclingBin : TrashBin}
+                alt={name === "recyclingBin" ? "Recycling Bin" : "Trash Bin"}
                 name={name}
                 correctBin={correctBin}
                 wrongBin={wrongBin}

src/components/game/DragLayer.js

@@ -11,12 +11,22 @@ const collect = monitor => {
 };
 
 const DragPreview = props => {
-    const getLayerStyles = () => {
-        const { sourceOffset } = props;
+    const [dragStart, setDragStart] = React.useState(0);
+    const { sourceOffset } = props;
+
+    React.useEffect(() => {
+        if (dragStart === 0 && sourceOffset !== null) {
+            setDragStart(sourceOffset);
+        } else if (sourceOffset === null) {
+            setDragStart(0);
+        }
+    }, [sourceOffset, dragStart]);
 
+    const getLayerStyles = () => {
         return {
             transform: sourceOffset
-                ? `translate(${sourceOffset.x}px, ${sourceOffset.y}px)`
+                ? `translate(${sourceOffset.x -
+                      dragStart.x}px, ${sourceOffset.y - dragStart.y}px)`
                 : "",
         };
     };