map list generator almost working

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

@@ -1,18 +1,19 @@
 import React, { useEffect, useState } from 'react'
-import { TextArea, Loader, Checkbox, Form, Header, List, Image, Divider, Icon, Grid, Input, Button } from 'semantic-ui-react'
+import { TextArea, Loader, Checkbox, Form, Header, List, Image, Divider, Icon, Grid, Input, Button, Label } from 'semantic-ui-react'
 import { useQuery } from 'react-apollo-hooks'
 import { maplists } from '../../graphql/queries/maplists'
 import szIcon from '../img/modeIcons/sz.png'
 import tcIcon from '../img/modeIcons/tc.png'
 import rmIcon from '../img/modeIcons/rm.png'
 import cbIcon from '../img/modeIcons/cb.png'
-//<TextArea rows={30} style={{"resize": "none"}} readOnly value="jooooooooooooooo"/>
+
 const MapListGenerator = ({ setMenuSelection }) => {
   const { data, error, loading } = useQuery(maplists)
   const [ maps, setMaps ] = useState([])
   const [ boxValue, setBoxValue ] = useState(0)
   const [ mapValues, setMapValues ] = useState([])
   const [ amountToGenerate, setAmountToGenerate ] = useState(12)
+  const [ generatedMaps, setGeneratedMaps ] = useState([])
 
   useEffect(() => {
     if (loading) {
@@ -42,8 +43,40 @@ const MapListGenerator = ({ setMenuSelection }) => {
     return <div style={{"color": "red"}}>{error.message}</div>
   }
 
-  const generateMapPoolString = (mapPoolObject, amount) => {
-    const allMaps = [...mapPoolObject.sz, ...mapPoolObject.tc, ...mapPoolObject.rm, ...mapPoolObject.cb]
+  function shuffle(a) {
+    for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a
+  }
+
+  const generateMapPool = () => {
+    const szMaps = maps[boxValue].sz.filter((m, i) => mapValues[boxValue].sz[i])
+    const tcMaps = maps[boxValue].tc.filter((m, i) => mapValues[boxValue].tc[i])
+    const rmMaps = maps[boxValue].rm.filter((m, i) => mapValues[boxValue].rm[i])
+    const cbMaps = maps[boxValue].cb.filter((m, i) => mapValues[boxValue].cb[i])
+    let mapsWithModes = [...szMaps.map(m => `Splat Zones on ${m}`),
+    ...tcMaps.map(m => `Tower Control on ${m}`), ...rmMaps.map(m => `Rainmaker on ${m}`),
+    ...cbMaps.map(m => `Clam Blitz on ${m}`)]
+    const toSetAsState = []
+    let usedMaps = []
+    shuffle(mapsWithModes)
+    console.log(mapsWithModes)
+
+    for (let i = amountToGenerate; i > 0; i--) {
+      if (mapsWithModes.length > 0) {
+        const modeMap = mapsWithModes.pop()
+        toSetAsState.push(`${toSetAsState.length+1}) ${modeMap}`)
+        usedMaps.push(modeMap)
+      } else {
+        shuffle(usedMaps)
+        mapsWithModes = [...usedMaps]
+        usedMaps = []
+      }
+    }
+
+    setGeneratedMaps(toSetAsState)
   }
 
   return (
@@ -159,7 +192,13 @@ const MapListGenerator = ({ setMenuSelection }) => {
           </Grid.Column>
         </Grid>
       </div>
-      <div>
+      <div style={{"paddingTop": "5px"}}>
+        <Divider horizontal>
+          <Header as='h4'>
+            <Icon name='clipboard list' />
+            Choose the amount & generate!
+          </Header>
+        </Divider>
         <Input 
           type='number' 
           placeholder='Choose amount' 
@@ -168,6 +207,22 @@ const MapListGenerator = ({ setMenuSelection }) => {
           onChange={(e) => setAmountToGenerate(e.target.value)}
           error={amountToGenerate < 1 || amountToGenerate > 100}
         />
+        {(amountToGenerate < 1 || amountToGenerate > 100) ? <Label basic color='red' pointing='left'>
+          Amount of maps to generate has to be between 1 and 100
+        </Label> : null}
+      </div>
+      <div style={{"paddingTop": "10px"}}>
+        <Button disabled={amountToGenerate < 1 || amountToGenerate > 100} onClick={generateMapPool}>Go!</Button>
+      </div>
+      <div>
+        {generatedMaps.length !== 0 ? 
+          <TextArea 
+            rows={generatedMaps.length + 5} 
+            style={{"resize": "none", "width": "275px"}} 
+            readOnly 
+            value={generatedMaps.join("\n")} /> : 
+          null
+        }
       </div>
     </div>
   )