basic auto tracking

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

diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
new file mode 100644 (file)
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;