tracker layout

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

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
new file mode 100644 (file)
index 0000000..392f2a7
--- /dev/null
+++ b/resources/js/components/tracker/Canvas.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import Dungeons from './Dungeons';
+import Items from './Items';
+import Map from './Map';
+import { shouldShowDungeonItem } from '../../helpers/tracker';
+import { useTracker } from '../../hooks/tracker';
+
+const LAYOUTS = {
+       defaultHorizontal: {
+               width: 100,
+               height: 60,
+               itemsTransform: 'translate(1 1) scale(22)',
+               dungeonColumns: 4,
+               dungeonsTransform: 'translate(1 39) scale(98)',
+               mapTransform: 'translate(24 0) scale(76)',
+       },
+       defaultVertical: {
+               width: 100,
+               height: 100,
+               itemsTransform: 'translate(10 1) scale(30)',
+               dungeonColumns: 2,
+               dungeonsTransform: 'translate(1 51) scale(48)',
+               mapTransform: 'translate(50 0) scale(50)',
+       },
+       manyDungeonItemsVertical: {
+               width: 80,
+               height: 100,
+               itemsTransform: 'translate(1 1) scale(27)',
+               dungeonColumns: 1,
+               dungeonsTransform: 'translate(1 48) scale(24)',
+               mapTransform: 'translate(30 0) scale(50)',
+       },
+};
+
+const Canvas = () => {
+       const { config } = useTracker();
+
+       const layout = React.useMemo(() => {
+               if (config.mapLayout === 'vertical') {
+                       let count = 0;
+                       if (shouldShowDungeonItem(config, 'Map')) {
+                               ++count;
+                       }
+                       if (shouldShowDungeonItem(config, 'Compass')) {
+                               ++count;
+                       }
+                       if (shouldShowDungeonItem(config, 'Small')) {
+                               ++count;
+                       }
+                       if (shouldShowDungeonItem(config, 'Big')) {
+                               ++count;
+                       }
+                       return count > 2 ? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
+               } else {
+                       return LAYOUTS.defaultHorizontal;
+               }
+       }, [config]);
+
+       return <svg
+               xmlns="http://www.w3.org/2000/svg"
+               className="canvas"
+               width={layout.width}
+               height={layout.height}
+               viewBox={`0 0 ${layout.width} ${layout.height}`}
+               onContextMenu={(e) => {
+                       e.preventDefault();
+                       e.stopPropagation();
+               }}
+       >
+               <g className="items" transform={layout.itemsTransform}>
+                       <Items />
+               </g>
+               <g className="dungeons" transform={layout.dungeonsTransform}>
+                       <Dungeons columns={layout.dungeonColumns} />
+               </g>
+               <g className="tracker-map" transform={layout.mapTransform}>
+                       <Map />
+               </g>
+       </svg>;
+};
+
+export default Canvas;