Map planner almost works

react-ui/src/App.js

@@ -64,7 +64,9 @@ const App = () => {
                 <Comps />
               } />
               <Route exact path="/plans" render={() => 
-                <MapPlanner />
+                <MapPlanner 
+                  setMenuSelection={setMenuSelection} 
+                />
               } />
               <Route path="/404" render={() => <NotFound />} />
               <Route path="/admin" render={() => <Admin />} />

react-ui/src/components/Misc/MainMenu.js

@@ -64,37 +64,53 @@ const MainMenu = withRouter(({ history, menuSelection, setMenuSelection }) => {
         active={menuSelection === 'home'} 
         onClick={() => { history.push('/') }} 
       />
-      <Menu.Item 
+      <Dropdown item text='Tools'>
+        <Dropdown.Menu>
+        <Menu.Item 
         name='maplists' 
         active={menuSelection === 'maplists'} 
         onClick={() => { history.push('/maps') }} 
-      />
-      <Menu.Item 
-        name='rotation' 
-        active={menuSelection === 'rotations'} 
-        onClick={() => { 
-          history.push('/rotation')
-          setMenuSelection('rotations')
-        }} 
-      />
-      <Menu.Item 
-        name='builds' 
-        active={menuSelection === 'builds'} 
-        onClick={() => { 
-          history.push('/builds')
-          setMenuSelection('builds')
-        }} 
-      />
-      <Menu.Item
-        name='leaderboards'
-        active={menuSelection === 'leaderboards'}
-        onClick={() => { history.push('/xleaderboard') }}
-      />
-      <Menu.Item
-        name='top 500 search'
-        active={menuSelection === 'search'}
-        onClick={() => { history.push('/xsearch') }}
-      />
+        />
+        <Menu.Item 
+          name='rotation' 
+          active={menuSelection === 'rotations'} 
+          onClick={() => { 
+            history.push('/rotation')
+            setMenuSelection('rotations')
+          }} 
+        />
+        <Menu.Item 
+          name='builds' 
+          active={menuSelection === 'builds'} 
+          onClick={() => { 
+            history.push('/builds')
+            setMenuSelection('builds')
+          }} 
+        />
+        <Menu.Item 
+          name='plan' 
+          active={menuSelection === 'plans'} 
+          onClick={() => { 
+            history.push('/plans')
+            setMenuSelection('plans')
+          }} 
+        />
+        </Dropdown.Menu>
+      </Dropdown>
+      <Dropdown item text='X Rank'>
+          <Dropdown.Menu>
+          <Menu.Item
+            name='leaderboards'
+            active={menuSelection === 'leaderboards'}
+            onClick={() => { history.push('/xleaderboard') }}
+          />
+          <Menu.Item
+            name='top 500 search'
+            active={menuSelection === 'search'}
+            onClick={() => { history.push('/xsearch') }}
+          />
+          </Dropdown.Menu>
+      </Dropdown>
       <Menu.Item
         name='links'
         active={menuSelection === 'links'}

react-ui/src/components/Tools/MapPlanner.js

@@ -1,18 +1,19 @@
 import React, { useState, useEffect } from 'react'
 import { SketchField, Tools } from 'react-sketch'
 import { CirclePicker } from 'react-color'
-import { Dropdown, Button, Icon } from 'semantic-ui-react'
+import { Dropdown, Button, Icon, Input, Grid } from 'semantic-ui-react'
 
 import WeaponForm from '../XSearch/WeaponForm'
 import weaponDict from '../../utils/english_internal.json'
 
-const MapPlanner = () => {
+const MapPlanner = ({ setMenuSelection }) => {
   let sketch = 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('')
   const tools = [
     { key: 1, text: 'Pencil', value: Tools.Pencil, icon: 'pencil' },
     { key: 2, text: 'Line', value: Tools.Line, icon: 'window minimize outline' },
@@ -26,6 +27,17 @@ const MapPlanner = () => {
     setTool(Tools.Select)
   }
 
+  const addTextToSketch = () => {
+    sketch.addText(text, 
+      { 
+        fill: color, 
+        fontFamily: "lato",
+        stroke: '#000000',
+        strokeWidth: 3,
+        paintFirst: "stroke" })
+    setTool(Tools.Select)
+  }
+
   const undo = () => {
     sketch.undo()
     setCanUndo(sketch.canUndo())
@@ -38,9 +50,8 @@ const MapPlanner = () => {
     setCanRedo(sketch.canRedo())
   }
 
-  const download = () => {
-    let image = sketch.toDataURL("image/jpeg")
-    document.write('<img src="' + image + '"/>')
+  const removeSelected = () => {
+    sketch.removeSelected()
   }
 
   const onSketchChange = () => {
@@ -53,58 +64,77 @@ const MapPlanner = () => {
 
   useEffect(() => {
     if (!sketch) return
+    setMenuSelection('plans')
     sketch.setBackgroundFromDataUrl('https://cdn.gamer-network.net/2017/usgamer/splatoon-2-humpback-pump-track.jpg')
   }, [sketch])
 
   return (
     <div>
-      <h2>Make your plans!</h2>
+      <h1>Make your plans!</h1>
       (in the final version you can choose any map as the background)
       <div>
       <SketchField
-              name="sketch"
-              className="canvas-area"
-              ref={c => (sketch = c)}
-              lineColor={color}
-              lineWidth={5}
-              width={1280}
-              height={720}
-              /*width={
-                this.state.controlledSize ? this.state.sketchWidth : null
-              }
-              height={
-                this.state.controlledSize ? this.state.sketchHeight : null
-              }*/
-              /*defaultValue={dataJson}*/
-              /*value={controlledValue}*/
-              /*forceValue*/
-              onChange={onSketchChange}
-              tool={tool}
-            />
+        name="sketch"
+        className="canvas-area"
+        ref={c => (sketch = c)}
+        lineColor={color}
+        lineWidth={5}
+        width={1280}
+        height={720}
+        /*width={
+          this.state.controlledSize ? this.state.sketchWidth : null
+        }
+        height={
+          this.state.controlledSize ? this.state.sketchHeight : null
+        }*/
+        /*defaultValue={dataJson}*/
+        /*value={controlledValue}*/
+        /*forceValue*/
+        onChange={onSketchChange}
+        tool={tool}
+      />
       </div>
       <div style={{"paddingTop": "10px"}}>
         <Button icon disabled={!canUndo} onClick={() => undo()}><Icon name='undo' />Undo</Button>
         <Button icon disabled={!canRedo} onClick={() => redo()}><Icon name='redo' />Redo</Button>
-        <Button icon onClick={() => download()}><Icon name='download' />Download</Button>
+        <Button icon disabled={tool !== Tools.Select} onClick={() => removeSelected()}><Icon name='trash' />Delete selected</Button>
       </div>
       <div style={{"paddingTop": "10px"}}>
-        <h3>Tools</h3>
-        <Dropdown
-          onChange={(e, { value }) => setTool(value)}
-          options={tools}
-          selection
-          value={tool}
-          />
-        <div style={{"paddingTop": "10px"}}>
-          <CirclePicker
-            color={color}
-            onChangeComplete={(newColor) => setColor(newColor.hex)} 
-          />
-        </div>
+        <Grid columns={3}>
+          <Grid.Column>
+            <CirclePicker
+              color={color}
+              onChangeComplete={(newColor) => setColor(newColor.hex)} 
+            />
+          </Grid.Column>
+          <Grid.Column>
+            <h3>Tools</h3>
+            <Dropdown
+              onChange={(e, { value }) => setTool(value)}
+              options={tools}
+              selection
+              value={tool}
+            />
+          </Grid.Column>
+          <Grid.Column>
+            <h3>Add text</h3>
+            <Input 
+              value={text}
+              onChange={e => setText(e.target.value)}
+            />
+            <div style={{ "paddingTop": "7px"}}>
+              <Button 
+                icon='plus' 
+                circular 
+                onClick={() => addTextToSketch()}
+              />
+            </div>
+          </Grid.Column>
+        </Grid>
       </div>
       <h3>Choose a weapon to add</h3>
       <WeaponForm weaponForm={weapon} setWeaponForm={setWeapon} />
-      <div style={{'paddingTop': '10px'}}>
+      <div style={{'paddingTop': '7px'}}>
         <Button 
           icon='plus' 
           circular