configurable min age and message source

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

diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js
index 9c6e122f382f6792bae71f5e7fd99febe4da5900..8a7e4d034b4ff06e27b0fb0175d925e9b00d223c 100644 (file)
--- a/resources/js/components/tracker/Dungeons.js
+++ b/resources/js/components/tracker/Dungeons.js
@@ -7,6 +7,7 @@ import {
        BOSSES,
        getDungeonAcquiredSKs,
        getDungeonRemainingItems,
+       shouldCompactKeysanity,
        shouldShowDungeonItem,
 } from '../../helpers/tracker';
 import { useTracker } from '../../hooks/tracker';
@@ -15,11 +16,12 @@ 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 = Math.max(5, prizeX + 1);
@@ -32,11 +34,15 @@ const Dungeons = ({ columns }) => {
                        } ${row + 0.5})`;
 
                const transforms = {
-                       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)`,
+                       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)`,
@@ -101,22 +107,20 @@ const Dungeons = ({ columns }) => {
                                        <text className="dungeon-tag">{dungeon.id.toUpperCase()}</text>
                                </g>
                                {shouldShowDungeonItem(config, 'Map') ?
-                                       <g transform={layout.transforms.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.transforms.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.transforms.small}>
@@ -132,13 +136,12 @@ const Dungeons = ({ columns }) => {
                                        </g>
                                : null}
                                {shouldShowDungeonItem(config, 'Big') ?
-                                       <g transform={layout.transforms.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.transforms.checks}>
                                        <ToggleIcon
@@ -149,50 +152,45 @@ const Dungeons = ({ columns }) => {
                                        <CountDisplay count={getDungeonRemainingItems(state, dungeon)} />
                                </g>
                                {dungeon.boss ?
-                                       <g transform={layout.transforms.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.transforms.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.transforms.gtBoss1}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.gtBossController('bot')}
-                                                       icons={BOSSES}
-                                                       svg
-                                               />
-                                       </g>
-                                       <g transform={layout.transforms.gtBoss2}>
-                                               <ToggleIcon
-                                                       controller={ToggleIcon.gtBossController('mid')}
-                                                       icons={BOSSES}
-                                                       svg
-                                               />
-                                       </g>
-                                       <g transform={layout.transforms.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>
                )}