resources/js/components/tracker/Canvas.js

   1 import React from 'react';
   2
   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';
   8
   9 const LAYOUTS = {
  10         defaultHorizontal: {
  11                 width: 100,
  12                 height: 60,
  13                 itemsTransform: 'translate(1 1) scale(22)',
  14                 dungeonColumns: 4,
  15                 dungeonsTransform: 'translate(1 39) scale(98)',
  16                 mapTransform: 'translate(24 0) scale(76)',
  17         },
  18         defaultVertical: {
  19                 width: 100,
  20                 height: 100,
  21                 itemsTransform: 'translate(10 1) scale(30)',
  22                 dungeonColumns: 2,
  23                 dungeonsTransform: 'translate(1 51) scale(48)',
  24                 mapTransform: 'translate(50 0) scale(50)',
  25         },
  26         manyDungeonItemsVertical: {
  27                 width: 80,
  28                 height: 100,
  29                 itemsTransform: 'translate(1 1) scale(27)',
  30                 dungeonColumns: 1,
  31                 dungeonsTransform: 'translate(1 48) scale(24)',
  32                 mapTransform: 'translate(30 0) scale(50)',
  33         },
  34 };
  35
  36 const Canvas = () => {
  37         const { config } = useTracker();
  38
  39         const layout = React.useMemo(() => {
  40                 if (config.mapLayout === 'vertical') {
  41                         let count = 0;
  42                         if (shouldShowDungeonItem(config, 'Map')) {
  43                                 ++count;
  44                         }
  45                         if (shouldShowDungeonItem(config, 'Compass')) {
  46                                 ++count;
  47                         }
  48                         if (shouldShowDungeonItem(config, 'Small')) {
  49                                 ++count;
  50                         }
  51                         if (shouldShowDungeonItem(config, 'Big')) {
  52                                 ++count;
  53                         }
  54                         return count > 2 ? LAYOUTS.manyDungeonItemsVertical : LAYOUTS.defaultVertical;
  55                 } else {
  56                         return LAYOUTS.defaultHorizontal;
  57                 }
  58         }, [config]);
  59
  60         return <svg
  61                 xmlns="http://www.w3.org/2000/svg"
  62                 className="canvas"
  63                 width={layout.width}
  64                 height={layout.height}
  65                 viewBox={`0 0 ${layout.width} ${layout.height}`}
  66                 onContextMenu={(e) => {
  67                         e.preventDefault();
  68                         e.stopPropagation();
  69                 }}
  70         >
  71                 <g className="items" transform={layout.itemsTransform}>
  72                         <Items />
  73                 </g>
  74                 <g className="dungeons" transform={layout.dungeonsTransform}>
  75                         <Dungeons columns={layout.dungeonColumns} />
  76                 </g>
  77                 <g className="tracker-map" transform={layout.mapTransform}>
  78                         <Map />
  79                 </g>
  80         </svg>;
  81 };
  82
  83 export default Canvas;