X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;f=resources%2Fjs%2Fcomponents%2Ftracker%2FDungeons.js;fp=resources%2Fjs%2Fcomponents%2Ftracker%2FDungeons.js;h=07b66389dd0b7f7e5830c09edcca060af7dd8c53;hb=b5a50d74cf042fa7fc874d8184dc37ae20bb74dd;hp=0000000000000000000000000000000000000000;hpb=b833b712555c4db00ada3d1fe3b2cee4774dc3e0;p=alttp.git

diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
new file mode 100644
index 0000000..07b6638
--- /dev/null
+++ b/resources/js/components/tracker/Dungeons.js
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import CountDisplay from './CountDisplay';
+import ToggleIcon from './ToggleIcon';
+import { useTracker } from '../../hooks/tracker';
+
+const Dungeons = () => {
+	const { dungeons, state } = useTracker();
+
+	return <div className="dungeons">
+		{dungeons.map(dungeon =>
+			<div className={`dungeon dungeon-${dungeon.id}`} key={dungeon.id}>
+				<span className="dungeon-tag">{dungeon.id.toUpperCase()}</span>
+				<ToggleIcon
+					controller={ToggleIcon.dungeonController(dungeon)}
+					icons={['map']}
+				/>
+				<ToggleIcon
+					controller={ToggleIcon.dungeonController(dungeon)}
+					icons={['compass']}
+				/>
+				<span className="dungeon-smalls">
+					<ToggleIcon
+						controller={ToggleIcon.dungeonCountController(dungeon, dungeon.sk)}
+						icons={['small-key']}
+					/>
+					<CountDisplay count={state[`${dungeon.id}-small-key`] || 0} />
+				</span>
+				<ToggleIcon
+					controller={ToggleIcon.dungeonController(dungeon)}
+					icons={['big-key']}
+				/>
+				<span className="dungeon-checks">
+					<ToggleIcon
+						controller={ToggleIcon.dungeonCheckController(dungeon, dungeon.items)}
+						icons={['open-chest', 'chest']}
+					/>
+					<CountDisplay count={dungeon.items - (state[`${dungeon.id}-checks`] || 0)} />
+				</span>
+				{dungeon.boss ?
+					<ToggleIcon
+						controller={ToggleIcon.dungeonBossController(dungeon)}
+						icons={dungeon.bosses}
+					/>
+				: null}
+				{dungeon.prize ?
+					<ToggleIcon
+						controller={ToggleIcon.dungeonPrizeController(dungeon)}
+						icons={[
+							'crystal',
+							'red-crystal',
+							'green-pendant',
+							'red-pendant',
+						]}
+					/>
+				: null}
+			</div>
+		)}
+	</div>;
+};
+
+export default Dungeons;