weaponselector component

frontend-react/src/components/common/WpnImage.js

@@ -4,9 +4,15 @@ import english_internal from "../../utils/english_internal.json"
 import { wpnSmall, wpnMedium } from "../../assets/imageImports"
 import { Image } from "semantic-ui-react"
 
-const WpnImage = ({ weapon, size = "MEDIUM", style = {} }) => {
+const WpnImage = ({ weapon, size = "MEDIUM", onClick = null, style = {} }) => {
   const dictToUse = size === "MEDIUM" ? wpnMedium : wpnSmall
-  return <Image style={style} src={dictToUse[english_internal[weapon]]} />
+  return (
+    <Image
+      style={style}
+      src={dictToUse[english_internal[weapon]]}
+      onClick={onClick}
+    />
+  )
 }
 
 export default WpnImage

frontend-react/src/components/plans/MapPlanner.js

@@ -40,6 +40,7 @@ import warehouse from "../../assets/plannerMaps/warehouse-sz.png"
 import world from "../../assets/plannerMaps/world-sz.png"
 import { wpnMedium } from "../../assets/imageImports"
 import ToolsSelector from "./ToolsSelector"
+import WeaponSelector from "./WeaponSelector"
 
 const MapPlanner = () => {
   let sketch = null
@@ -72,7 +73,6 @@ const MapPlanner = () => {
   const fileInput = useRef(null)
   const [tool, setTool] = useState(Tools.Pencil)
   const [color, setColor] = useState("#f44336")
-  const [weapon, setWeapon] = useState("")
   const [canUndo, setCanUndo] = useState(false)
   const [canRedo, setCanRedo] = useState(false)
   const [text, setText] = useState("")
@@ -93,39 +93,6 @@ const MapPlanner = () => {
     sketch.setBackgroundFromDataUrl(reef)
   }, [sketch])
 
-  const tools = [
-    {
-      key: 1,
-      text: "Pencil",
-      value: Tools.Pencil,
-      icon: "pencil",
-    },
-    {
-      key: 2,
-      text: "Line",
-      value: Tools.Line,
-      icon: "window minimize outline",
-    },
-    {
-      key: 3,
-      text: "Rectangle",
-      value: Tools.Rectangle,
-      icon: "square outline",
-    },
-    {
-      key: 4,
-      text: "Circle",
-      value: Tools.Circle,
-      icon: "circle outline",
-    },
-    {
-      key: 5,
-      text: "Select",
-      value: Tools.Select,
-      icon: "object group outline",
-    },
-  ]
-
   const maps = [
     { key: "The Reef", text: "The Reef", value: reef },
     {
@@ -201,7 +168,7 @@ const MapPlanner = () => {
     },
   ]
 
-  const addImageToSketch = () => {
+  const addImageToSketch = weapon => {
     sketch.addImg(wpnMedium[weaponDict[weapon]])
     setTool(Tools.Select)
   }
@@ -288,6 +255,7 @@ const MapPlanner = () => {
   return (
     <>
       <ToolsSelector tool={tool} setTool={setTool} />
+      <WeaponSelector addWeaponImage={weapon => addImageToSketch(weapon)} />
       {containerWidth < 1127 && (
         <Message negative>
           Unfortunately this tool isn't designed for narrow screens but you can
@@ -382,16 +350,6 @@ const MapPlanner = () => {
               Please note that changing the map also clears all the drawings
             </Label>
           </Grid.Column>
-          <Grid.Column>
-            <h3>Choose a weapon to add</h3>
-            <WeaponDropdown
-              value={weapon}
-              onChange={(e, { value }) => setWeapon(value)}
-            />
-            <div style={{ paddingTop: "7px" }}>
-              <Button icon="plus" circular onClick={() => addImageToSketch()} />
-            </div>
-          </Grid.Column>
           <Grid.Column></Grid.Column>
         </Grid>
       </div>

frontend-react/src/components/plans/WeaponSelector.js

@@ -0,0 +1,58 @@
+import React, { useState } from "react"
+import Draggable from "react-draggable"
+import { weapons } from "../../utils/lists"
+import WpnImage from "../common/WpnImage"
+
+const WeaponSelector = ({ addWeaponImage }) => {
+  const [activeDrags, setActiveDrags] = useState(0)
+
+  const onStart = () => {
+    setActiveDrags(activeDrags + 1)
+  }
+
+  const onStop = () => {
+    setActiveDrags(activeDrags - 1)
+  }
+
+  return (
+    <Draggable handle="strong" onStart={onStart} onStop={onStop}>
+      <div
+        style={{
+          position: "fixed",
+          zIndex: "999",
+          background: "white",
+          borderRadius: "7px",
+          boxShadow: "7px 14px 13px 2px rgba(0,0,0,0.24)",
+          textAlign: "center",
+          width: "119px",
+        }}
+      >
+        <strong style={{ cursor: "move" }}>
+          <div
+            style={{
+              fontSize: "17px",
+              background: "#ffcccb",
+              borderRadius: "7px 7px 0 0",
+              padding: "0.3em",
+            }}
+          >
+            Weapons
+          </div>
+        </strong>
+        <div style={{ overflowY: "scroll", height: "290px" }}>
+          {weapons.map(wpn => (
+            <WpnImage
+              key={wpn}
+              size="small"
+              weapon={wpn}
+              style={{ display: "inline", cursor: "pointer", margin: "0.1em" }}
+              onClick={() => addWeaponImage(wpn)}
+            />
+          ))}
+        </div>
+      </div>
+    </Draggable>
+  )
+}
+
+export default WeaponSelector