X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FDungeons.js;h=8a7e4d034b4ff06e27b0fb0175d925e9b00d223c;hb=4b8475936f9c0f0379d2dee4e1440f4445682715;hp=4890bbbc6afbb433a38c282c0bf33b63cdc2d571;hpb=60fd718e3b558eaea02a8d64bd6aac74be91f782;p=alttp.git

diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
index 4890bbb..8a7e4d0 100644
--- a/resources/js/components/tracker/Dungeons.js
+++ b/resources/js/components/tracker/Dungeons.js
@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import React from 'react';
 
 import CountDisplay from './CountDisplay';
@@ -6,98 +7,123 @@ import {
 	BOSSES,
 	getDungeonAcquiredSKs,
 	getDungeonRemainingItems,
+	shouldCompactKeysanity,
 	shouldShowDungeonItem,
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
 
-const Dungeons = () => {
+const Dungeons = ({ columns }) => {
 	const { config, dungeons, state } = useTracker();
 
 	const layout = React.useMemo(() => {
+		const compact = shouldCompactKeysanity(config);
 		const mapX = 1;
 		const compassX = shouldShowDungeonItem(config, 'Map') ? mapX + 1 : mapX;
 		const smallX = shouldShowDungeonItem(config, 'Compass') ? compassX + 1 : compassX;
 		const bigX =  shouldShowDungeonItem(config, 'Small') ? smallX + 1 : smallX;
-		const countX = shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
+		const countX = compact ? 2 : shouldShowDungeonItem(config, 'Big') ? bigX + 1 : bigX;
 		const bossX = countX + 1;
 		const prizeX = bossX + 1;
-		const dungeonWidth = prizeX + 1;
-		const width = (4 * dungeonWidth) + 2;
+		const dungeonWidth = Math.max(5, prizeX + 1);
+		const width = (columns * dungeonWidth) + Math.max(0, columns - 1);
 		const height = 4;
-		const viewBox = `0 0 ${width} ${height}`;
+
+		const transform = (col, row) =>
+			`scale(${1 / width}) translate(${
+				(col * dungeonWidth) + 0.5 + (col ? col - (columns > 3 ? 1 : 0) : 0)
+			} ${row + 0.5})`;
+
+		const transforms = {
+			tag: null,
+			map: compact
+				? 'translate(0.75 -0.25) scale(0.45)' : `translate(${mapX} 0) scale(0.9)`,
+			compass: compact
+				? 'translate(1.25 -0.25) scale(0.45)' : `translate(${compassX} 0) scale(0.9)`,
+			small: compact
+				? 'translate(0.75 0.25) scale(0.45)' : `translate(${smallX} 0) scale(0.9)`,
+			big: compact
+				? 'translate(1.25 0.25) scale(0.45)' : `translate(${bigX} 0) scale(0.9)`,
+			checks: `translate(${countX} 0) scale(0.9)`,
+			boss: `translate(${bossX} 0)`,
+			prize: `translate(${prizeX} 0)`,
+			hc: transform(0, 0),
+			ct: transform(0, 1),
+			gt: transform(0, 2),
+			gtBoss1: `translate(${bossX - 2} 1)`,
+			gtBoss2: `translate(${bossX - 1} 1)`,
+			gtBoss3: `translate(${bossX} 1)`,
+		};
+
+		if (columns === 1) {
+			transforms.ep = transform(0, 4);
+			transforms.dp = transform(0, 5);
+			transforms.th = transform(0, 6);
+			transforms.pd = transform(0, 8);
+			transforms.sp = transform(0, 9);
+			transforms.sw = transform(0, 10);
+			transforms.tt = transform(0, 11);
+			transforms.ip = transform(0, 12);
+			transforms.mm = transform(0, 13);
+			transforms.tr = transform(0, 14);
+		} else if (columns === 2) {
+			transforms.ep = transform(0, 4);
+			transforms.dp = transform(0, 5);
+			transforms.th = transform(0, 6);
+			transforms.pd = transform(1, 0);
+			transforms.sp = transform(1, 1);
+			transforms.sw = transform(1, 2);
+			transforms.tt = transform(1, 3);
+			transforms.ip = transform(1, 4);
+			transforms.mm = transform(1, 5);
+			transforms.tr = transform(1, 6);
+		} else {
+			transforms.ep = transform(1, 0);
+			transforms.dp = transform(1, 1);
+			transforms.th = transform(1, 2);
+			transforms.pd = transform(2, 0);
+			transforms.sp = transform(2, 1);
+			transforms.sw = transform(2, 2);
+			transforms.tt = transform(2, 3);
+			transforms.ip = transform(3, 0);
+			transforms.mm = transform(3, 1);
+			transforms.tr = transform(3, 2);
+		}
+
 		return {
 			width,
 			height,
-			viewBox,
-			transform: {
-				tag: '',
-				map: `translate(${mapX} 0) scale(0.9)`,
-				compass: `translate(${compassX} 0) scale(0.9)`,
-				small: `translate(${smallX} 0) scale(0.9)`,
-				big: `translate(${bigX} 0) scale(0.9)`,
-				checks: `translate(${countX} 0) scale(0.9)`,
-				boss: `translate(${bossX} 0)`,
-				prize: `translate(${prizeX} 0)`,
-				hc: 'translate(0.5, 0.5)',
-				ct: 'translate(0.5, 1.5)',
-				gt: 'translate(0.5, 2.5)',
-				gtBoss1: `translate(${bossX - 2} 1)`,
-				gtBoss2: `translate(${bossX - 1} 1)`,
-				gtBoss3: `translate(${bossX} 1)`,
-				ep: `translate(${dungeonWidth + 0.5}, 0.5)`,
-				dp: `translate(${dungeonWidth + 0.5}, 1.5)`,
-				th: `translate(${dungeonWidth + 0.5}, 2.5)`,
-				pd: `translate(${(2 * dungeonWidth) + 1.5}, 0.5)`,
-				sp: `translate(${(2 * dungeonWidth) + 1.5}, 1.5)`,
-				sw: `translate(${(2 * dungeonWidth) + 1.5}, 2.5)`,
-				tt: `translate(${(2 * dungeonWidth) + 1.5}, 3.5)`,
-				ip: `translate(${(3 * dungeonWidth) + 2.5}, 0.5)`,
-				mm: `translate(${(3 * dungeonWidth) + 2.5}, 1.5)`,
-				tr: `translate(${(3 * dungeonWidth) + 2.5}, 2.5)`,
-			},
+			transforms,
 		};
 	}, [config, dungeons]);
 
-	return <svg
-		xmlns="http://www.w3.org/2000/svg"
-		className="dungeons"
-		width={layout.width}
-		height={layout.height}
-		viewBox={layout.viewBox}
-		onContextMenu={(e) => {
-			e.preventDefault();
-			e.stopPropagation();
-		}}
-	>
+	return <>
 		{dungeons.map(dungeon =>
 			<g
 				className={`dungeon dungeon-${dungeon.id}`}
 				key={dungeon.id}
-				transform={layout.transform[dungeon.id]}
+				transform={layout.transforms[dungeon.id]}
 			>
-				<g transform={layout.transform.tag}>
+				<g transform={layout.transforms.tag}>
 					<text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
 				</g>
 				{shouldShowDungeonItem(config, 'Map') ?
-					<g transform={layout.transform.map}>
-						<ToggleIcon
-							controller={ToggleIcon.dungeonController(dungeon)}
-							icons={['map']}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.dungeonController(dungeon)}
+						icons={['map']}
+						svg
+						transform={layout.transforms.map}
+					/>
 				: null}
 				{shouldShowDungeonItem(config, 'Compass') ?
-					<g transform={layout.transform.compass}>
-						<ToggleIcon
-							controller={ToggleIcon.dungeonController(dungeon)}
-							icons={['compass']}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.dungeonController(dungeon)}
+						icons={['compass']}
+						svg
+						transform={layout.transforms.compass}
+					/>
 				: null}
 				{shouldShowDungeonItem(config, 'Small') ?
-					<g transform={layout.transform.small}>
+					<g transform={layout.transforms.small}>
 						<ToggleIcon
 							controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
 							icons={['small-key']}
@@ -110,15 +136,14 @@ const Dungeons = () => {
 					</g>
 				: null}
 				{shouldShowDungeonItem(config, 'Big') ?
-					<g transform={layout.transform.big}>
-						<ToggleIcon
-							controller={ToggleIcon.dungeonController(dungeon)}
-							icons={['big-key']}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.dungeonController(dungeon)}
+						icons={['big-key']}
+						svg
+						transform={layout.transforms.big}
+					/>
 				: null}
-				<g transform={layout.transform.checks}>
+				<g transform={layout.transforms.checks}>
 					<ToggleIcon
 						controller={ToggleIcon.dungeonCheckController(dungeon)}
 						icons={['open-chest', 'chest']}
@@ -127,54 +152,57 @@ const Dungeons = () => {
 					<CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
 				</g>
 				{dungeon.boss ?
-					<g transform={layout.transform.boss}>
-						<ToggleIcon
-							controller={ToggleIcon.dungeonBossController(dungeon)}
-							icons={dungeon.bosses}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.dungeonBossController(dungeon)}
+						icons={dungeon.bosses}
+						svg
+						transform={layout.transforms.boss}
+					/>
 				: null}
 				{dungeon.prize ?
-					<g transform={layout.transform.prize}>
-						<ToggleIcon
-							controller={ToggleIcon.dungeonPrizeController(dungeon)}
-							icons={[
-								'crystal',
-								'red-crystal',
-								'green-pendant',
-								'red-pendant',
-							]}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.dungeonPrizeController(dungeon)}
+						icons={[
+							'crystal',
+							'red-crystal',
+							'green-pendant',
+							'red-pendant',
+						]}
+						svg
+						transform={layout.transforms.prize}
+					/>
 				: null}
 				{dungeon.id === 'gt' && config.bossShuffle ? <>
-					<g transform={layout.transform.gtBoss1}>
-						<ToggleIcon
-							controller={ToggleIcon.gtBossController('bot')}
-							icons={BOSSES}
-							svg
-						/>
-					</g>
-					<g transform={layout.transform.gtBoss2}>
-						<ToggleIcon
-							controller={ToggleIcon.gtBossController('mid')}
-							icons={BOSSES}
-							svg
-						/>
-					</g>
-					<g transform={layout.transform.gtBoss3}>
-						<ToggleIcon
-							controller={ToggleIcon.gtBossController('top')}
-							icons={BOSSES}
-							svg
-						/>
-					</g>
+					<ToggleIcon
+						controller={ToggleIcon.gtBossController('bot')}
+						icons={BOSSES}
+						svg
+						transform={layout.transforms.gtBoss1}
+					/>
+					<ToggleIcon
+						controller={ToggleIcon.gtBossController('mid')}
+						icons={BOSSES}
+						svg
+						transform={layout.transforms.gtBoss2}
+					/>
+					<ToggleIcon
+						controller={ToggleIcon.gtBossController('top')}
+						icons={BOSSES}
+						svg
+						transform={layout.transforms.gtBoss3}
+					/>
 				</> : null}
 			</g>
 		)}
-	</svg>;
+	</>;
+};
+
+Dungeons.propTypes = {
+	columns: PropTypes.number,
+};
+
+Dungeons.defaultProps = {
+	columns: 4,
 };
 
 export default Dungeons;