X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FMap.js;h=520ad938ab2faaafb61fd3774626af442104aa5b;hb=3603709307e0777958cd18134ad4178cef410d14;hp=d8e76364fb864a0f09def8cd0e1423a24ad30f83;hpb=f145023c506cecad618e465a034933e1a5962637;p=alttp.git
diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index d8e7636..520ad93 100644
--- a/resources/js/components/tracker/Map.js
+++ b/resources/js/components/tracker/Map.js
@@ -2,6 +2,14 @@ import PropTypes from 'prop-types';
import React from 'react';
import { useTranslation } from 'react-i18next';
+import {
+ clearAll,
+ decrement,
+ hasDungeonBoss,
+ increment,
+ toggleBoolean,
+ unclearAll,
+} from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
const LW_DUNGEONS = [
@@ -314,7 +322,7 @@ const LW_LOCATIONS = [
'saha',
],
x: 0.815,
- y: 0.42,
+ y: 0.465,
},
{
id: 'saha-hut',
@@ -324,7 +332,7 @@ const LW_LOCATIONS = [
'saha-right',
],
x: 0.815,
- y: 0.465,
+ y: 0.42,
},
{
id: 'sick-kid',
@@ -601,20 +609,41 @@ const DW_LOCATIONS = [
},
];
-const Location = ({ l, size }) => {
+const Location = ({ number, l, size }) => {
const { t } = useTranslation();
const classNames = ['location', `status-${l.status}`];
if (size) {
classNames.push(`size-${size}`);
}
+ if (l.handlePrimary) {
+ classNames.push('clickable');
+ }
- return
+ return {
+ l.handlePrimary();
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ onContextMenu={(e) => {
+ l.handleSecondary();
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ transform={`translate(${l.x} ${l.y})`}
+ >
{t(`tracker.location.${l.id}`)}
- ;
+
+ {number && l.cleared < l.total ?
+ {Math.max(0, l.total - l.cleared)}
+ : null}
+ ;
};
Location.propTypes = {
+ number: PropTypes.bool,
l: PropTypes.shape({
id: PropTypes.string,
x: PropTypes.number,
@@ -622,12 +651,14 @@ Location.propTypes = {
cleared: PropTypes.number,
total: PropTypes.number,
status: PropTypes.string,
+ handlePrimary: PropTypes.func,
+ handleSecondary: PropTypes.func,
}),
size: PropTypes.string,
};
const Map = () => {
- const { dungeons, state } = useTracker();
+ const { dungeons, setState, state } = useTracker();
const mapDungeon = React.useCallback(dungeon => {
const definition = dungeons.find(d => d.id === dungeon.id);
@@ -636,7 +667,7 @@ const Map = () => {
let status = 'available';
if (cleared === total) {
if (['ct', 'gt'].includes(dungeon.id)) {
- if (state[`${dungeon.id}-boss-defeated`]) {
+ if (hasDungeonBoss(state, dungeon)) {
status = 'cleared';
}
} else {
@@ -648,8 +679,41 @@ const Map = () => {
status,
cleared,
total,
+ handlePrimary: () => {
+ if (['ct', 'gt'].includes(dungeon.id) && cleared === total) {
+ if (hasDungeonBoss(state, dungeon)) {
+ // reset
+ setState(s => ({
+ ...s,
+ [`${dungeon.id}-checks`]: 0,
+ [`${dungeon.id}-boss-defeated`]: false,
+ }));
+ } else {
+ setState(toggleBoolean(`${dungeon.id}-boss-defeated`));
+ }
+ } else {
+ setState(increment(`${dungeon.id}-checks`, total));
+ }
+ },
+ handleSecondary: () => {
+ if (['ct', 'gt'].includes(dungeon.id) &&
+ (hasDungeonBoss(state, dungeon) || !cleared)
+ ) {
+ if (hasDungeonBoss(state, dungeon)) {
+ setState(toggleBoolean(`${dungeon.id}-boss-defeated`));
+ } else {
+ setState(s => ({
+ ...s,
+ [`${dungeon.id}-checks`]: total,
+ [`${dungeon.id}-boss-defeated`]: true,
+ }));
+ }
+ } else {
+ setState(decrement(`${dungeon.id}-checks`, total));
+ }
+ },
};
- }, [dungeons, state]);
+ }, [dungeons, setState, state]);
const mapLocation = React.useCallback(loc => {
const cleared = loc.checks.reduce((acc, cur) => state[cur] ? acc + 1 : acc, 0);
@@ -663,8 +727,22 @@ const Map = () => {
cleared,
total,
status,
+ handlePrimary: () => {
+ if (cleared < total) {
+ setState(clearAll(loc.checks));
+ } else {
+ setState(unclearAll(loc.checks));
+ }
+ },
+ handleSecondary: () => {
+ if (cleared < total) {
+ setState(clearAll(loc.checks));
+ } else {
+ setState(unclearAll(loc.checks));
+ }
+ },
};
- }, [state]);
+ }, [setState, state]);
const lwDungeons = React.useMemo(() => LW_DUNGEONS.map(mapDungeon), [mapDungeon]);
const lwLocations = React.useMemo(() => LW_LOCATIONS.map(mapLocation), [mapLocation]);
@@ -679,6 +757,10 @@ const Map = () => {
width="2"
height="1"
viewBox="0 0 2 1"
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
>
@@ -716,7 +798,7 @@ const Map = () => {
)}
{lwDungeons.map(l =>
-
+
)}
@@ -756,7 +838,7 @@ const Map = () => {
)}
{dwDungeons.map(l =>
-
+
)}