X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FMap.js;h=b2685f873d6776814e00db66ff2cc6c225d51b03;hb=4e24f36eb5d6907697c106ca15c2c405728d78a8;hp=311263116a4c197f7af63378ecac1d793b2f6f1a;hpb=6ce22c808bd3025ea252334e516451ddc3b948eb;p=alttp.git

diff --git a/resources/js/components/tracker/Map.js b/resources/js/components/tracker/Map.js
index 3112631..b2685f8 100644
--- 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 =>