add overworld link navigation

mracsys · Apr 14, 2021 · 3702ddb · 3702ddb
1 parent 7b39387
commit 3702ddb
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 11 deletions.
diff --git a/src/GameArea.js b/src/GameArea.js
@@ -6,6 +6,7 @@ import { withStyles } from '@material-ui/core/styles';
 import UnknownEntrance from './UnknownEntrance'
 import LocationCheck from './LocationCheck'
 import { Typography, Box } from '@material-ui/core';
+import Link from '@material-ui/core/Link';
 
 const YellowSwitch = withStyles({
     switchBase: {
@@ -26,11 +27,20 @@ class GameArea extends React.Component {
         Object.filterLocations = (locations, predicate) =>
             Object.keys(locations)
                 .filter( key => predicate(locations[key].visible) );
+        const preventDefault = (event) => event.preventDefault();
         return (
             <Card className={this.props.classes.areaCard}>
+                <Link className={this.props.classes.entranceAnchor} color="inherit" id={this.props.title} onClick={preventDefault}>
+                    {/* Fake text here to make eslint happy.
+                        Can't wrap the actual title with the link because the areaTitle class breaks margin collapse needed
+                        to offset the anchor below the appbar */}
+                    <span className={this.props.classes.entranceAnchorFakeText}>&nbsp;</span>
+                </Link>
                 <div className={this.props.classes.areaHeader} />
                 <Box className={this.props.classes.areaTitle}>
-                    <Typography variant="h6" component="span" className={this.props.classes.areaTitleText}>{this.props.title}</Typography>
+                    <Typography variant="h6" component="span" className={this.props.classes.areaTitleText}>
+                            {this.props.title}
+                    </Typography>
                     {this.props.dungeon ?
                     <React.Fragment>
                         <Typography className={this.props.classes.mqSwitchLabel} component="span">MQ</Typography>

diff --git a/src/LinkedEntrance.js b/src/LinkedEntrance.js
@@ -4,6 +4,7 @@ import { Box } from '@material-ui/core';
 import IconButton from '@material-ui/core/IconButton';
 import ClearIcon from '@material-ui/icons/Clear';
 import SubdirectoryArrowRightIcon from '@material-ui/icons/SubdirectoryArrowRight';
+import Link from '@material-ui/core/Link';
 
 import LocationCheck from './LocationCheck'
 import UnknownEntrance from './UnknownEntrance'
@@ -60,6 +61,7 @@ class LinkedEntrance extends React.Component {
         let interiors = ['interior','specialInterior','grotto','grave','dungeon'];
         let oneWayTypes = ['spawn','warpsong','owldrop'];
         let otherEntrances = [];
+        const preventDefault = (event) => event.preventDefault();
         if (this.props.connector === false) {
             if ((interiors.includes(this.props.allAreas.entrances[reverseLink].type) &&
             (oneWayTypes.includes(oEntrance.type) || this.props.decoupled) &&
@@ -78,16 +80,24 @@ class LinkedEntrance extends React.Component {
                 <div className={this.props.classes.entranceContainer} key={this.props.entrance + "label"}>
                     { this.props.forceVisible ? <SubdirectoryArrowRightIcon /> : null }
                     <Typography variant="body1" component="h1" className={this.props.classes.entranceLabel}>
-                        {this.buildEntranceName(this.props.entrance)}
+                        <Link className={this.props.classes.entranceAnchor} color="inherit" id={this.props.entrance} onClick={preventDefault}>
+                            {this.buildEntranceName(this.props.entrance)}
+                        </Link>
                     </Typography>
-                    <Box className={this.props.classes.entranceLink}>
-                        <Typography variant="body1" component="h2" className={this.props.classes.entranceLink1}>
-                            {this.buildExitName(this.props.entrance)}
-                        </Typography>
-                        <Typography variant="caption" component="h3" className={this.props.classes.entranceLink2}>
-                            {this.buildExitEntranceName(this.props.entrance)}
-                        </Typography>
-                    </Box>
+                    <Link
+                        color="inherit"
+                        href={(((this.props.allAreas.entrances[reverseLink].type === "overworld") || (this.props.allAreas.entrances[reverseLink].isReverse)) ? '#' + this.props.allAreas.entrances[reverseLink].area : null )}
+                        className={(((this.props.allAreas.entrances[reverseLink].type === "overworld") || (this.props.allAreas.entrances[reverseLink].isReverse)) ? null : this.props.classes.falseLinkAnchor )}
+                    >
+                        <Box className={this.props.classes.entranceLink}>
+                            <Typography variant="body1" component="h2" className={this.props.classes.entranceLink1}>
+                                {this.buildExitName(this.props.entrance)}
+                            </Typography>
+                            <Typography variant="caption" component="h3" className={this.props.classes.entranceLink2}>
+                                {this.buildExitEntranceName(this.props.entrance)}
+                            </Typography>
+                        </Box>
+                    </Link>
                     {
                         (oEntrance.shuffled === true) ?
                             <IconButton className={this.props.classes.areaButton} size="small" component="span" onClick={() => this.props.handleUnLink(this.props.entrance)}><ClearIcon /></IconButton> :

diff --git a/src/Tracker.js b/src/Tracker.js
@@ -233,6 +233,33 @@ const useStyles = (theme) => ({
     },
     devLink: {
         padding: theme.spacing(1, 0),
+    },
+    entranceAnchor: {
+        textDecoration: 'none',
+        "&:hover": {
+            textDecoration: 'none',
+            cursor: 'default',
+        },
+        "&:before": {
+            content: '""',
+            display: "block",
+            height: theme.spacing(10),
+            marginTop: -theme.spacing(10)
+        }
+    },
+    entranceAnchorFakeText: {
+        height: 1,
+        width: 1,
+        position: "absolute",
+        overflow: "hidden",
+        top: -10,
+    },
+    falseLinkAnchor: {
+        textDecoration: 'none',
+        "&:hover": {
+            textDecoration: 'none',
+            cursor: 'default',
+        }
     }
 });
 

diff --git a/src/UnlinkedEntrance.js b/src/UnlinkedEntrance.js
@@ -3,6 +3,7 @@ import Typography from '@material-ui/core/Typography';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
 import SubdirectoryArrowRightIcon from '@material-ui/icons/SubdirectoryArrowRight';
+import Link from '@material-ui/core/Link';
 
 
 class UnLinkedEntrance extends React.Component {
@@ -40,10 +41,15 @@ class UnLinkedEntrance extends React.Component {
     render() {
         let entrancePool = this.selectEntrancePool(this.props.entrance);
         let entranceList = this.props.allAreas.entrances;
+        const preventDefault = (event) => event.preventDefault();
         return (
             <div className={this.props.classes.entranceContainer} key={this.props.ekey}>
                 { this.props.forceVisible ? <SubdirectoryArrowRightIcon /> : null }
-                <Typography variant="body1" component="h1" color="error" className={this.props.classes.entranceLabel}>{this.buildEntranceName(this.props.entrance)}</Typography>
+                <Typography variant="body1" component="h1" color="error" className={this.props.classes.entranceLabel}>
+                    <Link className={this.props.classes.entranceAnchor} color="inherit" id={this.props.entrance} onClick={preventDefault}>
+                        {this.buildEntranceName(this.props.entrance)}
+                    </Link>
+                </Typography>
                 <FormControl className={this.props.classes.entranceMenuControl}>
                     <Select className={this.props.classes.entranceMenu} native displayEmpty id={this.props.entrance + "select"} onChange={this.props.handleLink} name={this.props.entrance}>
                         <option aria-label="None" value="">Not Checked</option>