{"version":3,"file":"Ao8Q9MFR.js","sources":["../../../../src/components/molecules/falling-blocks/m-falling-blocks.vue"],"sourcesContent":["<template>\n  <div class=\"m-falling-blocks\">\n    <div class=\"m-falling-blocks__header global-padding\">\n      <div class=\"m-falling-blocks__header-title\">\n        <AText\n          tag=\"h2\"\n          :size-lg=\"{ size: 50, line: 46.5 }\"\n          :size-sm=\"{ size: 32, line: 30 }\"\n        >\n          БОЛЬШЕ, ЧЕМ МУЗЫКА\n        </AText>\n      </div>\n      <div class=\"m-falling-blocks__header-text\">\n        <AText\n          :size-lg=\"{ size: 18, line: 20 }\"\n          :size-sm=\"{ size: 18, line: 20 }\"\n          font-family=\"vk\"\n          weight=\"regular\"\n          :uppercase=\"false\"\n        >\n          Строим десятки развлекательных зон, чтобы создать незабываемое впечатление для каждого.\n        </AText>\n      </div>\n    </div>\n\n    <div class=\"m-falling-blocks__canvas\" />\n\n    <div\n      v-if=\"tooltip.visible\"\n      class=\"tooltip\"\n      :style=\"tooltipStyle\"\n    >\n      <AText\n        :size-lg=\"{ size: 18, line: 20 }\"\n        :size-sm=\"{ size: 14, line: 18 }\"\n      >\n        {{ tooltip.text }}\n      </AText>\n\n      <svg\n        class=\"tooltip__tail\"\n        :class=\"{'flip' : isTooltipOverViewport}\"\n        width=\"18\"\n        height=\"15\"\n        viewBox=\"0 0 18 15\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path d=\"M0.274847 13.7789C7.36722 7.17562 3.07031 0.0561523 3.07031 0.0561523L17.3919 11.8808C17.3919 11.8808 8.95689 16.7136 0.274847 13.7789Z\" fill=\"#171717\" />\n      </svg>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport Matter from 'matter-js';\nimport AText from '~/components/atoms/text/a-text.vue';\n\nexport interface Shape { width: number, height: number, img: string, url: string, tooltipText: string }\n\ninterface Props {\n  shapes: Shape[],\n}\n\nconst props = defineProps<Props>();\n\nconst device = useDevice();\n\nconst isMobile = computed(() => device.isMobile.value || device.isTablet.value);\n\nlet observer: IntersectionObserver | null = null;\nconst engineRef = ref<Matter.Engine | null>(null);\nconst runnerRef = ref<Matter.Runner | null>(null);\nconst renderRef = ref<Matter.Render | null>(null);\n\nconst tooltip = ref({\n  visible: false,\n  text: '',\n  x: 0,\n  y: 0,\n});\n\nconst currentWidth = computed(() => tooltip.value.visible ? tooltip.value.x : 0);\nconst isTooltipOverViewport = computed(() => tooltip.value.visible && (currentWidth.value + (isMobile.value ? 50 : 150)) > window.innerWidth);\nconst TOOLTIP_WIDTH = 270;\n\nconst tooltipStyle = computed(() => {\n  const factor = isMobile.value ? -50 : TOOLTIP_WIDTH / 2;\n\n  let left = tooltip.value.x;\n  if (tooltip.value.x + TOOLTIP_WIDTH > window.innerWidth) {\n    left = window.innerWidth - TOOLTIP_WIDTH;\n  }\n\n  return {\n    top: `${tooltip.value.y}px`,\n    left: isTooltipOverViewport.value ? `${left - factor}px` : `${left}px`,\n  };\n});\n\nconst init = () => {\n  const {\n    Engine,\n    Render,\n    Bodies,\n    World,\n    Runner,\n    Composite,\n    MouseConstraint,\n    Mouse,\n  } = Matter;\n\n  const imageHeight = 220; // Высота изображения\n  const rowSpacing = window.innerWidth / 6; // Расстояние между изображениями в ряду\n\n  const canvasSize = {\n    width: window.innerWidth,\n    height: isMobile.value ? 750 : 1000,\n  };\n\n  // create engine\n  const engine = Engine.create();\n  const world = engine.world;\n\n  // create renderer\n  const render = Render.create({\n    element: document.querySelector('.m-falling-blocks__canvas')!,\n    engine,\n    options: {\n      width: canvasSize.width,\n      height: canvasSize.height,\n      background: 'transparent',\n      wireframes: false,\n      showAngleIndicator: false,\n      pixelRatio: window.devicePixelRatio,\n    },\n  });\n\n  Render.run(render);\n\n  // create runner\n  const runner = Runner.create();\n  Runner.run(runner, engine);\n\n  // safe links\n  engineRef.value = engine;\n  runnerRef.value = runner;\n  renderRef.value = render;\n\n  const wallWidth = isMobile.value ? 10 : 200; // Ширина стен\n\n  // add static walls\n  Composite.add(world, [\n    // Bodies.rectangle(canvasSize.width / 2, -25, canvasSize.width, 50, { isStatic: true }), // Top wall\n    Bodies.rectangle(canvasSize.width / 2, canvasSize.height, canvasSize.width, 50,\n      { isStatic: true, render: { visible: false } }), // Нижняя стена\n\n    Bodies.rectangle(canvasSize.width + wallWidth / 2, canvasSize.height / 2, wallWidth * 2.3, canvasSize.height * 3,\n      { isStatic: true, render: { visible: false } }), // Правая стена\n\n    Bodies.rectangle(-wallWidth / 2, canvasSize.height / 2, wallWidth * 2.3, canvasSize.height * 3,\n      { isStatic: true, render: { visible: false } }), // Левая стена\n  ]);\n\n  // images\n  const images = props.shapes;\n\n  // \"Воздух\" между фигурами\n  images.forEach((image) => {\n    image.width = image.width + 10;\n    image.height = image.height + 10;\n  });\n\n  // Split images into 4 groups of rows\n  const imagesRow1 = images.slice(0, 5);\n  const imagesRow2 = images.slice(5, 9);\n  const imagesRow3 = images.slice(9, 13);\n  const imagesRow4 = images.slice(13);\n\n  // Settings\n  // const rowHeight = 150; // Высота между рядами\n  // const imageWidth = 220; // Ширина изображения\n\n  const clickableBodies = []; // Для хранения объектов с телами и их URL\n\n  const addImageRow = (images: [{ width: number, height: number, img: string, url: string, tooltipText: string }], startY: number) => {\n    images.forEach((image, index) => {\n      const randomOffsetX = (Math.random() - 0.5) * 50; // Случайное смещение по X (-25 до +25)\n      const randomOffsetY = (Math.random() - 0.5) * 20; // Случайное смещение по Y (-10 до +10)\n\n      const x = rowSpacing * (index + 1) + randomOffsetX;\n      const y = startY + randomOffsetY;\n\n      const body = Bodies.rectangle(x, y,\n        isMobile.value ? image.width / 2 : image.width,\n        isMobile.value ? image.height / 2 : image.height, {\n          density: 0.0005,\n          frictionAir: 0.01,\n          restitution: 0.2,\n          friction: 0.03,\n          render: {\n            sprite: {\n              texture: image.img,\n              xScale: isMobile.value ? 0.5 : 1,\n              yScale: isMobile.value ? 0.5 : 1,\n            },\n          },\n        });\n\n      clickableBodies.push({ body, url: image.url, tooltipText: image.tooltipText });\n\n      Composite.add(world, body);\n    });\n  };\n\n  // Add rows\n  addImageRow(imagesRow1, -imageHeight);\n  addImageRow(imagesRow2, -imageHeight * 2);\n  addImageRow(imagesRow3, -imageHeight * 4);\n  addImageRow(imagesRow4, -imageHeight * 6);\n\n  // Add mouse control\n  const canvasElement = render.canvas;\n\n  // Разрешить прокрутку при взаимодействии с canvas\n  canvasElement.addEventListener(\n    'wheel',\n    (event) => {\n      event.stopImmediatePropagation(); // Останавливаем только текущую обработку\n    },\n    { passive: false } // для совместимости с браузерами\n  );\n\n  const mouse = Mouse.create(canvasElement);\n  const mouseConstraint = MouseConstraint.create(engine, {\n    mouse,\n    constraint: {\n      stiffness: 0.2,\n      render: {\n        visible: false,\n      },\n    },\n  });\n\n  // Обработчики событий для мобильных устройств\n  mouseConstraint.mouse.element.removeEventListener('touchmove', mouseConstraint.mouse.mousemove);\n  mouseConstraint.mouse.element.removeEventListener('touchstart', mouseConstraint.mouse.mousedown);\n  mouseConstraint.mouse.element.removeEventListener('touchend', mouseConstraint.mouse.mouseup);\n\n  Composite.add(world, mouseConstraint);\n\n  Matter.Events.on(mouseConstraint, 'mousemove', (event) => {\n    const mousePosition = event.mouse.position;\n    let hovered = false;\n\n    clickableBodies.forEach(({ body, tooltipText }) => {\n      const isHovered =\n        Matter.Bounds.contains(body.bounds, mousePosition) &&\n        Matter.Query.point([body], mousePosition).length > 0;\n\n      if (isHovered) {\n        body.render.sprite.xScale = isMobile.value ? 0.55 : 1.1;\n        body.render.sprite.yScale = isMobile.value ? 0.55 : 1.1;\n\n        // Показываем tooltip\n        tooltip.value = {\n          x: mousePosition.x + 200, // Смещение\n          y: mousePosition.y + 50,\n          text: tooltipText,\n          visible: true, // true что бы включить tooltip\n        };\n\n        hovered = true;\n      }\n      else {\n        body.render.sprite.xScale = isMobile.value ? 0.5 : 1;\n        body.render.sprite.yScale = isMobile.value ? 0.5 : 1;\n      }\n    });\n\n    if (!hovered) {\n      tooltip.value.visible = false;\n    }\n  });\n\n  /**\n   * На случай, если надо будет клики по шейпам\n   * */\n  // // Cобытие клика\n  // Matter.Events.on(mouseConstraint, 'mouseup', (event) => {\n  //   const mousePosition = event.mouse.position;\n  //\n  //   // Проверяем, попадает ли клик по какому-либо из тел\n  //   clickableBodies.forEach(({ body, url }) => {\n  //     if (\n  //       Matter.Bounds.contains(body.bounds, mousePosition) &&\n  //       Matter.Query.point([body], mousePosition).length > 0\n  //     ) {\n  //       window.open(url, '_blank'); // Открываем ссылку в новой вкладке\n  //     }\n  //   });\n  // });\n\n  Render.lookAt(render, {\n    min: { x: 0, y: 0 },\n    max: { x: canvasSize.width, y: canvasSize.height },\n  });\n};\n\nconst cleanupMatter = () => {\n  if (renderRef.value) {\n    Matter.Render.stop(renderRef.value);\n    renderRef.value.canvas.remove();\n    renderRef.value.textures = {};\n  }\n\n  if (runnerRef.value) {\n    Matter.Runner.stop(runnerRef.value);\n  }\n\n  if (engineRef.value) {\n    Matter.World.clear(engineRef.value.world, false);\n    Matter.Engine.clear(engineRef.value);\n  }\n\n  engineRef.value = null;\n  runnerRef.value = null;\n  renderRef.value = null;\n};\n\nconst initObserver = () => {\n  if (observer) return;\n\n  observer = new IntersectionObserver(\n    (entries) => {\n      const entry = entries[0];\n      if (entry.isIntersecting && !engineRef.value) {\n        init();\n      }\n    },\n    { threshold: 0.2 });\n\n  observer.observe(document.querySelector('.m-falling-blocks__canvas')!);\n};\n\nonMounted(() => {\n  initObserver();\n});\n\nonUnmounted(() => {\n  if (observer) {\n    observer.disconnect();\n    observer = null;\n  }\n  cleanupMatter();\n});\n</script>\n\n<style scoped lang=\"postcss\" src=\"./style.css\" />\n"],"names":["TOOLTIP_WIDTH","props","__props","device","useDevice","isMobile","computed","observer","engineRef","ref","runnerRef","renderRef","tooltip","currentWidth","isTooltipOverViewport","tooltipStyle","factor","left","init","Engine","Render","Bodies","World","Runner","Composite","MouseConstraint","Mouse","Matter","rowSpacing","canvasSize","engine","world","render","runner","wallWidth","images","image","imagesRow1","imagesRow2","imagesRow3","imagesRow4","clickableBodies","addImageRow","startY","index","randomOffsetX","randomOffsetY","x","y","body","canvasElement","event","mouse","mouseConstraint","mousePosition","hovered","tooltipText","cleanupMatter","initObserver","entries","onMounted","onUnmounted"],"mappings":"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"}