Merge pull request #9 from srt4rulez/develop

v0.2.0
srt4rulez · Jan 5, 2021 · 39dd935 · 39dd935
2 parents a9e416b + c406928
commit 39dd935
Show file tree

Hide file tree

Showing 24 changed files with 325 additions and 75 deletions.
diff --git a/README.md b/README.md
@@ -23,14 +23,19 @@ We use a library called [Leaflet](https://leafletjs.com/) to create an interacti
 Instead of a map of the real world, we load up an image of the Mojave Wasteland. This allows us to zoom, pan and interact 
 with the map. It also allows us to add "markers" that when clicked, opens popups with custom content.
 
-All the markers are stored in [markers.json](./src/Data/markers.json). Each marker has an ID, type, title, description, 
-url (optional), image (optional) and latitude and longitude values. 
+All the markers are stored in [markers.json](./src/Data/markers.json). Each marker has an ID, type, sub type (optional), 
+title, description, url (optional), image (optional) and latitude and longitude values. 
 
 When setting a marker as "found", we update something called [Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 
 in the browser. This is data that is saved in the browser and can survival refreshes. It's specific to the domain. 
 This allows us to save your progress without having to store it in an external database. Your progress is only saved in 
 your current browser though. If you visit the application on another browser, you won't see your previous data.
 
+## Debugging Latitude and Longitude
+
+Open the developer tools in your browser (usually F12), go to the console tab, and type in "window.debug = true" and 
+press enter to enable debug mode. Clicking on the map will now log the latitude and longitude to the console.
+
 ## Development
 
 To work on this repository, install [Docker](https://www.docker.com/) and [Docker Compose](https://docs.docker.com/compose/), 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fallout-new-vegas-interactive-map",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "homepage": ".",
   "dependencies": {

diff --git a/public/assets/skill-book-casotm-camp-searchlight.webp b/public/assets/skill-book-casotm-camp-searchlight.webp
diff --git a/...ops-training-manual-goodsprings-home.webp → ...assets/skill-book-casotm-goodsprings.webp b/...ops-training-manual-goodsprings-home.webp → ...assets/skill-book-casotm-goodsprings.webp
diff --git a/public/assets/skill-book-casotm-ncr-sharecropper-farms.webp b/public/assets/skill-book-casotm-ncr-sharecropper-farms.webp
diff --git a/public/assets/skill-book-casotm-vault-3.webp b/public/assets/skill-book-casotm-vault-3.webp
diff --git a/public/assets/skill-book-wsg-mesquite-mountains-camp-site.webp b/public/assets/skill-book-wsg-mesquite-mountains-camp-site.webp
diff --git a/public/assets/skill-book-wsg-scavenger-platform.webp b/public/assets/skill-book-wsg-scavenger-platform.webp
diff --git a/public/assets/snow-globe-mormon-fort.webp b/public/assets/snow-globe-mormon-fort.webp
diff --git a/public/assets/snow-globe-mt-charleston.webp b/public/assets/snow-globe-mt-charleston.webp
diff --git a/public/assets/snow-globe-test-site.webp b/public/assets/snow-globe-test-site.webp
diff --git a/public/assets/snow-globe-the-strip.webp b/public/assets/snow-globe-the-strip.webp
diff --git a/public/index.html b/public/index.html
@@ -7,39 +7,20 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Contains all skill books, snow globes and unique weapons. Track your progress by marking items as found. Click an item to view more info about its location."
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <link rel="preconnect" href="https://fonts.gstatic.com">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,300&display=swap" rel="stylesheet">
     <title>Fallout: New Vegas - Interactive Map</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/src/Components/App/App.js b/src/Components/App/App.js
@@ -14,9 +14,6 @@ class App extends Component {
 
         // Only used with L.Map API.
         this.markers = {};
-
-        // L.Map instance.
-        this.mojaveWastelandMap = null;
     }
 
     static version = packageJson.version;
@@ -172,22 +169,17 @@ class App extends Component {
      */
     handleMapCreation = (map) => {
 
-        this.mojaveWastelandMap = map;
+        map.on('click', (event) => {
+            // Allow figuring out what lat + lng we are clicking.
+            if (window.debug === true) {
+                console.log(event.latlng);
+            }
+        });
 
     };
 
     handleMarkerTitleClick = (markerData = {}) => () => {
 
-        if (!this.mojaveWastelandMap) {
-            return;
-        }
-
-        // Go to the marker on the map.
-        this.mojaveWastelandMap.panTo([
-            markerData.lat,
-            markerData.lng,
-        ]);
-
         /**
          * @var {L.Marker|null}
          */

diff --git a/src/Components/MarkerListItem/MarkerListItem.js b/src/Components/MarkerListItem/MarkerListItem.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import './MarkerListItem.scss';
+
+const propTypes = {
+    tag: PropTypes.string,
+    className: PropTypes.string,
+    isFound: PropTypes.bool,
+    onMarkCheckboxChange: PropTypes.func,
+    onMarkerTitleClick: PropTypes.func,
+    title: PropTypes.string,
+};
+
+const defaultProps = {
+    tag: 'li',
+    className: '',
+    isFound: false,
+    onMarkCheckboxChange: (event) => {},
+    onMarkerTitleClick: (event) => {},
+    title: '',
+};
+
+const MarkerListItem = (props) => {
+
+    const Tag = props.tag;
+
+    return (
+
+        <Tag
+            className={classNames([
+                'marker-list-item',
+                props.className,
+            ])}
+        >
+
+            <input
+                className={classNames('marker-list-item__found-checkbox')}
+                type="checkbox"
+                checked={props.isFound}
+                onChange={props.onMarkCheckboxChange}
+                title="Mark As Found"
+            />
+
+            <button
+                className={classNames('marker-list-item__button')}
+                onClick={props.onMarkerTitleClick}
+            >
+
+                {props.title}
+
+            </button>
+
+        </Tag>
+
+    );
+
+};
+
+MarkerListItem.propTypes = propTypes;
+MarkerListItem.defaultProps = defaultProps;
+
+export default MarkerListItem;
diff --git a/src/Components/MarkerListItem/MarkerListItem.scss b/src/Components/MarkerListItem/MarkerListItem.scss
@@ -0,0 +1,34 @@
+@import '~bulma/sass/utilities/_all.sass';
+
+%button-reset {
+    // Reset button styles to look more like a link.
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    text-decoration: none;
+    display: inline;
+    margin: 0;
+    padding: 0;
+    color: $link;
+    font-size: 1rem;
+    text-align: left;
+
+    &:hover,
+    &:focus {
+        color: $link-hover;
+    }
+}
+
+.marker-list-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.25rem;
+
+    &__found-checkbox {
+        margin-right: 0.5rem;
+    }
+
+    &__button {
+        @extend %button-reset;
+    }
+}
diff --git a/src/Components/MarkerTypePanel/MarkerTypePanel.js b/src/Components/MarkerTypePanel/MarkerTypePanel.js
@@ -6,7 +6,9 @@ import {
     typeMap,
     typeLabelMap,
     typeColorMap,
+    subTypeSkillBookLabelMap,
 } from 'Data/marker-types';
+import MarkerListItem from 'Components/MarkerListItem/MarkerListItem';
 
 const propTypes = {
     className: PropTypes.string,
@@ -26,8 +28,33 @@ const defaultProps = {
     onMarkerTitleClick: (marker = {}) => (event) => {},
 };
 
+const typesThatHaveSubTypes = [
+    typeMap.SkillBook,
+];
+
 const MarkerTypePanel = (props) => {
 
+    const markers = props.markers;
+
+    const hasSubTypes = typesThatHaveSubTypes.includes(props.type);
+
+    const subTypes = {};
+
+    if (hasSubTypes) {
+        markers.forEach((marker) => {
+            if (subTypes[marker.sub_type]) {
+                // Already a object, just add the new marker to markers.
+                subTypes[marker.sub_type].markers.push(marker);
+            } else {
+                // Create object for sub type
+                subTypes[marker.sub_type] = {
+                    id: marker.sub_type,
+                    markers: [marker],
+                };
+            }
+        });
+    }
+
     return (
 
         <section
@@ -67,36 +94,63 @@ const MarkerTypePanel = (props) => {
                 className={classNames('marker-type-panel__list')}
             >
 
-                {props.markers.map((marker) => {
+                {(hasSubTypes) ? Object.values(subTypes).map((subType) => {
 
                     return (
 
                         <li
-                            key={marker.id}
-                            className={classNames('marker-type-panel__list-item')}
+                            className={classNames('marker-type-panel__sub-type-list-item')}
+                            key={subType.id}
                         >
 
-                            <input
-                                className={classNames('marker-type-panel__item-checkbox')}
-                                type="checkbox"
-                                checked={marker.isFound}
-                                onChange={props.onMarkButtonClick(marker)}
-                                title="Mark As Found"
-                            />
-
-                            <button
-                                className={classNames('marker-type-panel__item-link')}
-                                onClick={props.onMarkerTitleClick(marker)}
+                            <span
+                                className={classNames('marker-type-panel__sub-type-label')}
                             >
 
-                                {marker.title}
+                                {subTypeSkillBookLabelMap[subType.id]}
+
+                            </span>
+
+                            <ul>
+
+                                {subType.markers.map((marker) => {
+
+                                    return (
 
-                            </button>
+                                        <MarkerListItem
+                                            tag="li"
+                                            key={marker.id}
+                                            isFound={marker.isFound}
+                                            onMarkCheckboxChange={props.onMarkButtonClick(marker)}
+                                            onMarkerTitleClick={props.onMarkerTitleClick(marker)}
+                                            title={marker.title}
+                                        />
+
+                                    );
+
+                                })}
+
+                            </ul>
 
                         </li>
 
                     );
 
+                }) : props.markers.map((marker) => {
+
+                    return (
+
+                        <MarkerListItem
+                            tag="li"
+                            key={marker.id}
+                            isFound={marker.isFound}
+                            onMarkCheckboxChange={props.onMarkButtonClick(marker)}
+                            onMarkerTitleClick={props.onMarkerTitleClick(marker)}
+                            title={marker.title}
+                        />
+
+                    );
+
                 })}
 
             </ul>

diff --git a/src/Components/MarkerTypePanel/MarkerTypePanel.scss b/src/Components/MarkerTypePanel/MarkerTypePanel.scss
@@ -38,18 +38,13 @@
         font-weight: 700;
     }
 
-    &__item-checkbox {
-        margin-right: 0.5rem;
-        font-size: 10px;
-    }
-
-    &__list-item {
-        display: flex;
-        align-items: center;
-        margin-bottom: 0.25rem;
+    &__sub-type-list-item {
+        margin-bottom: 1rem;
     }
 
-    &__item-link {
-        @extend %button-reset;
+    &__sub-type-label {
+        display: block;
+        margin-bottom: 0.5rem;
+        font-weight: 700;
     }
 }
diff --git a/src/Components/MojaveWastelandMap/MojaveWastelandMap.js b/src/Components/MojaveWastelandMap/MojaveWastelandMap.js
@@ -90,6 +90,7 @@ const MojaveWastelandMap = (props) => {
                         imgSrc={marker.imgSrc}
                         onMarkButtonClick={props.onMarkButtonClick(marker)}
                         type={marker.type}
+                        subType={marker.sub_type}
                         onAdd={props.onMarkerAdd}
                     />