1 import React from 'react';
3 import Dungeons from './Dungeons';
4 import Items from './Items';
5 import Map from './Map';
6 import { shouldShowDungeonItem } from '../../helpers/tracker';
7 import { useTracker } from '../../hooks/tracker';
13 itemsTransform: 'translate(1 1) scale(22)',
15 dungeonsTransform: 'translate(1 39) scale(98)',
16 mapTransform: 'translate(24 0) scale(76)',
21 itemsTransform: 'translate(10 1) scale(30)',
23 dungeonsTransform: 'translate(1 51) scale(48)',
24 mapTransform: 'translate(50 0) scale(50)',
26 manyDungeonItemsVertical: {
29 itemsTransform: 'translate(1 1) scale(27)',
31 dungeonsTransform: 'translate(1 48) scale(24)',
32 mapTransform: 'translate(30 0) scale(50)',
36 const Canvas = () => {
37 const { config } = useTracker();
39 const layout = React.useMemo(() => {
40 if (config.mapLayout === 'vertical') {
42 if (shouldShowDungeonItem(config, 'Map')) {
45 if (shouldShowDungeonItem(config, 'Compass')) {
48 if (shouldShowDungeonItem(config, 'Small')) {
51 if (shouldShowDungeonItem(config, 'Big')) {
54 return count > 2 ? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
56 return LAYOUTS.defaultHorizontal;
61 xmlns="http://www.w3.org/2000/svg"
64 height={layout.height}
65 viewBox={`0 0 ${layout.width} ${layout.height}`}
66 onContextMenu={(e) => {
71 <g className="items" transform={layout.itemsTransform}>
74 <g className="dungeons" transform={layout.dungeonsTransform}>
75 <Dungeons columns={layout.dungeonColumns} />
77 <g className="tracker-map" transform={layout.mapTransform}>
83 export default Canvas;