Five Torches Deep Random Map Generation (#64)

* add new generator

* add divider

client/src/components/App/App.js

@@ -11,6 +11,7 @@ import Footer from '../Footer/Footer'
 
 //Five Torches Deep
 import FiveTorchesDeepMonsters from '../FiveTorchesDeep/Convert5eMonsters/Convert5eMonsters'
+import FiveTorchesDeepRandomMapGenerator from '../FiveTorchesDeep/RandomMapGenerator/RandomMapGenerator'
 //SODL
 import ShadowoftheDemonLordEncounterBuilder from '../ShadowoftheDemonLord/EncounterBuilder/EncounterBuilder'
 import ShadowoftheDemonLordTravelTool from '../ShadowoftheDemonLord/TravelTool/TravelTool'
@@ -36,6 +37,7 @@ const App = () => {
             <Analytics id={'UA-181637915-1'}>
               <Route path="/" exact component={About} />
               <Route path="/five_torches_deep/5e_monsters" component={FiveTorchesDeepMonsters} />
+              <Route path="/five_torches_deep/random_map_generator" component={FiveTorchesDeepRandomMapGenerator} />
               <Route path="/roll_20_character_sheets" component={Roll20CharSheets} />
               <Route path="/shadow_of_the_demon_lord/encounter_builder" component={ShadowoftheDemonLordEncounterBuilder} />
               <Route path="/shadow_of_the_demon_lord/rewards_generator" component={ShadowoftheDemonLordRewardsCalculator} />

client/src/components/FiveTorchesDeep/RandomMapGenerator/Box/Box.tsx

@@ -0,0 +1,21 @@
+import React, { useState } from 'react'
+import Roll from "roll"
+
+import maps from '../../data/maps'
+
+const Box = ({ name }: {name: string }) => {
+  const [ number, setNumber ] = useState(new Roll().roll(`1d6`).result)
+  const { color, description } = maps.find((element) =>  element.number === number) || maps[0]
+  const styles = `Map-box Map-box-color-${color}`
+
+  const handleClick = () => setNumber(new Roll().roll(`1d6`).result)
+
+  return (
+    <div className={styles} onClick={handleClick}>
+      <label>{name}</label>
+      <p>{description}</p>
+    </div>
+  )
+}
+
+export default Box

client/src/components/FiveTorchesDeep/RandomMapGenerator/RandomMapGenerator.scss

@@ -0,0 +1,54 @@
+.RandomMapGeneator {
+  .Map {
+    display: grid;
+    justify-content: center;
+    grid-template-rows: repeat(3, 200px);
+    grid-template-columns: repeat(3, 200px);
+
+    &-box {
+      align-content: center;
+      background-color: white;
+      border: 3px solid black;
+      display: grid;
+      padding: 3px 5px;
+
+      &:hover,
+      &:focus {
+        cursor: pointer;
+        transform: translate(-2px, -2px);
+      }
+
+      &:active {
+        transform: translate(2px, 2px);
+      }
+
+      label {
+        font-weight: bold;
+      }
+
+      &-color-white {
+        background-color: var(--white);
+      }
+
+      &-color-blue {
+        background-color: var(--blue);
+      }
+
+      &-color-green {
+        background-color: var(--green);
+      }
+
+      &-color-yellow {
+        background-color: var(--yellow);
+      }
+
+      &-color-orange {
+        background-color: var(--orange);
+      }
+
+      &-color-red {
+        background-color: var(--red);
+      }
+    }
+  }
+}

client/src/components/FiveTorchesDeep/RandomMapGenerator/RandomMapGenerator.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from 'react'
+import { Button } from "react-bootstrap"
+
+import Box from "./Box/Box"
+
+import './RandomMapGenerator.scss'
+
+const RandomMapGenerator = () => {
+  const [ refresh, setRefresh ] = useState(false)
+
+  const handleClick = () => setRefresh(!refresh)
+
+  return (
+    <div className='RandomMapGeneator'>
+      <div key={`map-${refresh}`} className='Map'>
+        <Box name='Northwest'  />
+        <Box name='North'  />
+        <Box name='Northeast'  />
+
+        <Box name='West'  />
+        <Box name='Center'  />
+        <Box name='East'  />
+
+        <Box name='Southwest'  />
+        <Box name='South'  />
+        <Box name='Southeast'  />
+      </div>
+      <div className='mt-3'>
+        <Button onClick={handleClick}>Generator New Map</Button>
+      </div>
+    </div>
+  )
+}
+
+export default RandomMapGenerator

client/src/components/FiveTorchesDeep/data/maps.js

@@ -0,0 +1,32 @@
+export default [
+  {
+    number: 1,
+    color: "white",
+    description: "open path, entrance, or clearing"
+  },
+  {
+    number: 2,
+    color: "blue",
+    description: "alternative path (water, ascent)"
+  },
+  {
+    number: 3,
+    color: "green",
+    description: "a key destination (treasure)"
+  },
+  {
+    number: 4,
+    color: "yellow",
+    description: "passive threat, hazards, terrain"
+  },
+  {
+    number: 5,
+    color: "orange",
+    description: "danger, enemy convergences"
+  },
+  {
+    number: 6,
+    color: "red",
+    description: "blocked or locked, can't travel by any normal means (dorr, wall, etc)"
+  }
+]

client/src/components/FiveTorchesDeep/types/ftdTypes.ts

@@ -59,4 +59,10 @@ export interface ftdWeapon {
   name:string, 
   category:string | undefined, 
   range:string | undefined
+}
+
+export interface map {
+  number: number,
+  color: string,
+  description: string
 }

client/src/components/Navigation/NavigationBar/NavigationBar.js

@@ -24,6 +24,8 @@ const NavigationBar = () => {
 					<NavDropdown className='text-white font-weight-bold mr-5 rpg-tools' title="RPG Tools" id="basic-nav-dropdown-rpg-tools">
 						<label>Five Torches Deep</label>
 						<NavDropdown.Item href="/five_torches_deep/5e_monsters">5th Edition Monsters</NavDropdown.Item>
+						<NavDropdown.Item href="/five_torches_deep/random_map_generator">Random Map Generator</NavDropdown.Item>
+						<NavDropdown.Divider />
 						<label>Shadow of the Demon Lord</label>
 						<NavDropdown.Item href="/shadow_of_the_demon_lord/encounter_builder">Encounter Builder</NavDropdown.Item>
 						<NavDropdown.Item href="/shadow_of_the_demon_lord/rewards_generator">Rewards Generator</NavDropdown.Item>