From 042a9b7e84a09af9887471cd0a8f5e72840966be Mon Sep 17 00:00:00 2001
From: CBernard23 <clbernard2016@icloud.com>
Date: Thu, 24 Oct 2019 18:50:20 -0500
Subject: [PATCH] heros are draggable

---
 src/components/HeroButton.jsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/HeroButton.jsx b/src/components/HeroButton.jsx
index 29a5cb1..f26dcb1 100644
--- a/src/components/HeroButton.jsx
+++ b/src/components/HeroButton.jsx
@@ -1,15 +1,21 @@
 import React from 'react';
 import '../styles/HeroButton.css';
+import Draggable from 'react-draggable';
 
 const HeroButton = ({hero, roster, clickAction, hoverAction, hoverExitAction}) => {
+
   let selected_class = roster.findIndex((roster_hero) => hero.id === roster_hero.id) !== -1 ? 'selected' : 'unselected';
   return (
-    <div className={'hero-button'} onClick={clickAction} onMouseOver={hoverAction} onMouseLeave={hoverExitAction} >
-      <div className={'clipping-mask ' + selected_class}>
-        <div className={'hero-image'} style={{backgroundImage: "url('assets/" + hero.portrait + "')"}}></div>
+
+    <Draggable>
+      <div className={'hero-button'} onClick={clickAction} onMouseOver={hoverAction} onMouseLeave={hoverExitAction} >
+        <div className={'clipping-mask ' + selected_class}>
+          <div className={'hero-image'} style={{backgroundImage: "url('assets/" + hero.portrait + "')"}}></div>
+        </div>
+        <span className={'hero-portrait-label'}>{hero.name}</span>
       </div>
-      <span className={'hero-portrait-label'}>{hero.name}</span>
-    </div>
+    </Draggable>
+
   );
 };