+ 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 <svg
+ xmlns="http://www.w3.org/2000/svg"
+ className="dungeons"
+ width={layout.width}
+ height={layout.height}
+ viewBox={layout.viewBox}
+ onContextMenu={(e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ }}
+ >