X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftracker%2FDungeons.js;h=c6ed5c2fe7991a41c1d6fbeebfbe8c9bd5ac224d;hb=9a4e2305bb37cb8c62e3ad332f4a2bf45f720a18;hp=07b66389dd0b7f7e5830c09edcca060af7dd8c53;hpb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;p=alttp.git
diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
index 07b6638..c6ed5c2 100644
--- a/resources/js/components/tracker/Dungeons.js
+++ b/resources/js/components/tracker/Dungeons.js
@@ -1,46 +1,156 @@
+import PropTypes from 'prop-types';
import React from 'react';
import CountDisplay from './CountDisplay';
import ToggleIcon from './ToggleIcon';
+import {
+ BOSSES,
+ getDungeonAcquiredSKs,
+ getDungeonRemainingItems,
+ shouldShowDungeonItem,
+} from '../../helpers/tracker';
import { useTracker } from '../../hooks/tracker';
-const Dungeons = () => {
- const { dungeons, state } = useTracker();
+const Dungeons = ({ columns }) => {
+ const { config, dungeons, state } = useTracker();
- return
+ const layout = React.useMemo(() => {
+ 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 bossX = countX + 1;
+ const prizeX = bossX + 1;
+ const dungeonWidth = Math.max(5, prizeX + 1);
+ const width = (columns * dungeonWidth) + Math.max(0, columns - 1);
+ const height = 4;
+
+ 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: `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: 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,
+ transforms,
+ };
+ }, [config, dungeons]);
+
+ return <>
{dungeons.map(dungeon =>
-
- {dungeon.id.toUpperCase()}
-
-
-
-
-
-
-
-
-
+
+ {dungeon.id.toUpperCase()}
+
+ {shouldShowDungeonItem(config, 'Map') ?
+
+ : null}
+ {shouldShowDungeonItem(config, 'Compass') ?
+
+ : null}
+ {shouldShowDungeonItem(config, 'Small') ?
+
+
+
+
+ : null}
+ {shouldShowDungeonItem(config, 'Big') ?
+
+ : null}
+
+
-
-
+
+
{dungeon.boss ?
: null}
{dungeon.prize ?
@@ -52,11 +162,41 @@ const Dungeons = () => {
'green-pendant',
'red-pendant',
]}
+ svg
+ transform={layout.transforms.prize}
/>
: null}
-
+ {dungeon.id === 'gt' && config.bossShuffle ? <>
+
+
+
+ > : null}
+
)}
-
;
+ >;
+};
+
+Dungeons.propTypes = {
+ columns: PropTypes.number,
+};
+
+Dungeons.defaultProps = {
+ columns: 4,
};
export default Dungeons;