From: Daniel Karbach Date: Wed, 3 Apr 2024 13:07:26 +0000 (+0200) Subject: svg dungeon tracker X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;ds=inline;h=60fd718e3b558eaea02a8d64bd6aac74be91f782;p=alttp.git svg dungeon tracker --- diff --git a/resources/js/components/tracker/CountDisplay.js b/resources/js/components/tracker/CountDisplay.js index 8282422..ba41b9f 100644 --- a/resources/js/components/tracker/CountDisplay.js +++ b/resources/js/components/tracker/CountDisplay.js @@ -12,9 +12,9 @@ const CountDisplay = ({ className, count, full }) => { if (full && count >= full) { classNames.push('is-full'); } - return + return {count} - ; + ; }; CountDisplay.propTypes = { diff --git a/resources/js/components/tracker/Dungeons.js b/resources/js/components/tracker/Dungeons.js index b997e75..4890bbb 100644 --- a/resources/js/components/tracker/Dungeons.js +++ b/resources/js/components/tracker/Dungeons.js @@ -3,6 +3,7 @@ import React from 'react'; import CountDisplay from './CountDisplay'; import ToggleIcon from './ToggleIcon'; import { + BOSSES, getDungeonAcquiredSKs, getDungeonRemainingItems, shouldShowDungeonItem, @@ -12,67 +13,168 @@ import { useTracker } from '../../hooks/tracker'; const Dungeons = () => { 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 = prizeX + 1; + const width = (4 * dungeonWidth) + 2; + const height = 4; + const viewBox = `0 0 ${width} ${height}`; + 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)`, + }, + }; + }, [config, dungeons]); + + return { + e.preventDefault(); + e.stopPropagation(); + }} + > {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 ? - + + + : null} -
+ {dungeon.id === 'gt' && config.bossShuffle ? <> + + + + + + + + + + : null} + )} -
; + ; }; export default Dungeons; diff --git a/resources/js/components/tracker/ToggleIcon.js b/resources/js/components/tracker/ToggleIcon.js index 6de9f63..98ae932 100644 --- a/resources/js/components/tracker/ToggleIcon.js +++ b/resources/js/components/tracker/ToggleIcon.js @@ -8,6 +8,7 @@ import { getDungeonBoss, getDungeonRemainingItems, getDungeonPrize, + getGTBoss, hasDungeonBoss, hasDungeonPrize, highestActive, @@ -201,6 +202,13 @@ ToggleIcon.dungeonPrizeController = (dungeon) => ({ handleSecondary: previousString(`${dungeon.id}-prize`), }); +ToggleIcon.gtBossController = (which) => ({ + getActive: (state) => getGTBoss(state, which), + getDefault: (state) => getGTBoss(state, which), + handlePrimary: nextString(`gt-${which}-boss`), + handleSecondary: previousString(`gt-${which}-boss`), +}); + ToggleIcon.medallionController = { getActive: highestActive, getDefault: firstIcon, diff --git a/resources/js/components/tracker/index.js b/resources/js/components/tracker/index.js index 31fb964..7b16b40 100644 --- a/resources/js/components/tracker/index.js +++ b/resources/js/components/tracker/index.js @@ -13,12 +13,14 @@ const Tracker = () => { - +
+ +
; }; diff --git a/resources/sass/tracker.scss b/resources/sass/tracker.scss index 01704b7..ca20b63 100644 --- a/resources/sass/tracker.scss +++ b/resources/sass/tracker.scss @@ -4,61 +4,32 @@ vertical-align: middle; } } - .count-display, - .med-display { - background: black; - font-weight: bold; - text-align: center; - } - .dungeon { - display: flex; - flex-direction: row; - align-items: stretch; - justify-content: flex-start; - gap: 1ex; - > * { - width: 2em; - height: 2em; - } - .dungeon-smalls .count-display, + .dungeons { + width: 100%; + height: auto; + .count-display, .dungeon-tag { - background: black; - font-family: monospace; - font-size: 115%; + font-size: 0.5px; font-weight: bold; - text-align: center; - } - .dungeon-checks, - .dungeon-smalls { - position: relative; - .count-display { - pointer-events: none; - position: absolute; - top: .3ex; - left: .3ex; - bottom: .3ex; - right: .3ex; - &.is-zero { - display: none; - } - &.is-full { - color: green; - } + fill: white; + stroke: black; + stroke-width: 0.25px; + stroke-linejoin: round; + paint-order: stroke fill; + dominant-baseline: middle; + text-anchor: middle; + pointer-events: none; + user-select: none; + &.is-zero { + display: none; + } + &.is-full { + fill: green; } } - } - .dungeons { - padding: 1ex; - } - .dungeon-ep, - .dungeon-pd { - margin-top: 1ex; - } - .equipment { - display: grid; - grid-template-columns: 3em 3em 3em 3em 3em; - gap: 1ex; - padding: 1ex; + .count-display { + font-size: 0.65px; + } } .items { width: 100%;