better dungeon cleared check

[alttp.git] / resources / js / components / tracker / Map.js

diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index 311263116a4c197f7af63378ecac1d793b2f6f1a..b2685f873d6776814e00db66ff2cc6c225d51b03 100644 (file)
--- a/resources/js/components/tracker/Map.js
+++ b/resources/js/components/tracker/Map.js
@@ -2,6 +2,15 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
+import {
+       clearAll,
+       decrement,
+       hasDungeonBoss,
+       increment,
+       isDungeonCleared,
+       toggleBoolean,
+       unclearAll,
+} from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
 const LW_DUNGEONS = [
@@ -608,8 +617,24 @@ const Location = ({ number, l, size }) => {
        if (size) {
                classNames.push(`size-${size}`);
        }
+       if (l.handlePrimary) {
+               classNames.push('clickable');
+       }
 
-       return <g className={classNames.join(' ')} transform={`translate(${l.x} ${l.y})`}>
+       return <g
+               className={classNames.join(' ')}
+               onClick={(e) => {
+                       l.handlePrimary();
+                       e.preventDefault();
+                       e.stopPropagation();
+               }}
+               onContextMenu={(e) => {
+                       l.handleSecondary();
+                       e.preventDefault();
+                       e.stopPropagation();
+               }}
+               transform={`translate(${l.x} ${l.y})`}
+       >
                <title>{t(`tracker.location.${l.id}`)}</title>
                <rect className="box" x="0" y="0" />
                {number && l.cleared < l.total ?
@@ -627,34 +652,82 @@ Location.propTypes = {
                cleared: PropTypes.number,
                total: PropTypes.number,
                status: PropTypes.string,
+               handlePrimary: PropTypes.func,
+               handleSecondary: PropTypes.func,
        }),
        size: PropTypes.string,
 };
 
+const makeBackground = (src, level) => {
+       const amount = Math.pow(2, Math.max(0, level - 8));
+       const size = 1 / amount;
+       const tiles = [];
+       for (let y = 0; y < amount; ++y) {
+               for (let x = 0; x < amount; ++x) {
+                       tiles.push(<image
+                               key={`${x}-${y}`}
+                               x={x * size}
+                               y={y * size}
+                               width={size * 1.002}
+                               height={size * 1.002}
+                               href={`/media/alttp/map/${src}/${level}/${x}_${y}.png`}
+                       />);
+               }
+       }
+       return tiles;
+};
+
 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);
                const cleared = state[`${dungeon.id}-checks`] || 0;
                const total = definition.items;
                let status = 'available';
-               if (cleared === total) {
-                       if (['ct', 'gt'].includes(dungeon.id)) {
-                               if (state[`${dungeon.id}-boss-defeated`]) {
-                                       status = 'cleared';
-                               }
-                       } else {
-                               status = 'cleared';
-                       }
+               if (isDungeonCleared(state, definition)) {
+                       status = 'cleared';
                }
                return {
                        ...dungeon,
                        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);
@@ -668,8 +741,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]);
@@ -684,37 +771,14 @@ const Map = () => {
                        width="2"
                        height="1"
                        viewBox="0 0 2 1"
+                       onContextMenu={(e) => {
+                               e.preventDefault();
+                               e.stopPropagation();
+                       }}
                >
                        <g className="light-world">
                                <g className="background">
-                                       <image
-                                               x="0"
-                                               y="0"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/lw_files/9/0_0.png"
-                                       />
-                                       <image
-                                               x="0.5"
-                                               y="0"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/lw_files/9/1_0.png"
-                                       />
-                                       <image
-                                               x="0"
-                                               y="0.5"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/lw_files/9/0_1.png"
-                                       />
-                                       <image
-                                               x="0.5"
-                                               y="0.5"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/lw_files/9/1_1.png"
-                                       />
+                                       {makeBackground('lw_files', 10)}
                                </g>
                                <g className="locations">
                                        {lwLocations.map(l =>
@@ -727,34 +791,7 @@ const Map = () => {
                        </g>
                        <g className="dark-world" transform="translate(1 0)">
                                <g className="background">
-                                       <image
-                                               x="0"
-                                               y="0"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/dw_files/9/0_0.png"
-                                       />
-                                       <image
-                                               x="0.5"
-                                               y="0"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/dw_files/9/1_0.png"
-                                       />
-                                       <image
-                                               x="0"
-                                               y="0.5"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/dw_files/9/0_1.png"
-                                       />
-                                       <image
-                                               x="0.5"
-                                               y="0.5"
-                                               width="0.5"
-                                               height="0.5"
-                                               href="/media/alttp/map/dw_files/9/1_1.png"
-                                       />
+                                       {makeBackground('dw_files', 10)}
                                </g>
                                <g className="locations">
                                        {dwLocations.map(l =>