{"version":3,"sources":["webpack:///./src/components/playground/BounceImage.vue","webpack:///./src/components/playground/BounceImage.vue?be15","webpack:///./src/components/playground/BounceImage.vue?8c9e"],"names":["ref","randRange","min","max","Math","floor","random","flip","randSign","num","minSpeed","maxSpeed","props","shouldFade","type","Boolean","default","setup","root","el","item","img","Image","fading","opacity","rotationRate","rotation","x","y","width","height","xspeed","yspeed","value","offsetWidth","offsetHeight","canvas","ctx","getContext","onload","start","src","onResize","setAttribute","toString","checkHitBox","hit","draw","requestAnimationFrame","clearRect","filter","globalAlpha","setTransform","rotate","drawImage","window","addEventListener","render"],"mappings":"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","file":"js/bounce.ae908112.js","sourcesContent":["<template>\n  <div ref=\"root\">\n    <canvas ref=\"el\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { ref, onMounted, defineComponent } from 'vue';\n\nconst randRange = (min: number, max: number) =>\n  min >= max ? min : Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst flip = () => Math.random() < 0.5;\nconst randSign = (num: number) => (flip() ? num * 1 : num * -1);\n\nconst minSpeed = 2;\nconst maxSpeed = 15;\n\nexport default defineComponent({\n  props: {\n    shouldFade: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const root = ref<HTMLElement | null>(null);\n    const el = ref<HTMLCanvasElement | null>(null);\n\n    const item = {\n      img: new Image(),\n      fading: true,\n      opacity: 3,\n      // rotationRate: 0.1,\n      rotationRate: 0,\n      rotation: 0,\n      x: 0,\n      y: 0,\n      width: 285,\n      height: 100,\n      xspeed: randSign(randRange(minSpeed, maxSpeed)),\n      yspeed: randSign(randRange(minSpeed, maxSpeed)),\n    };\n    onMounted(() => {\n      if (!root.value || !el.value) return;\n      let width = root.value.offsetWidth;\n      let height = root.value.offsetHeight;\n      item.x = randRange(0, width - item.width);\n      item.y = randRange(0, height - item.height);\n      const canvas = el.value;\n      const ctx = canvas.getContext('2d');\n\n      function onResize() {\n        if (!root.value) return;\n        height = root.value.offsetHeight;\n        width = root.value.offsetWidth;\n        canvas.setAttribute('width', width.toString());\n        canvas.setAttribute('height', height.toString());\n      }\n\n      function checkHitBox() {\n        let hit = false;\n        if (item.x + item.width >= width) {\n          item.xspeed = -randRange(minSpeed, maxSpeed);\n          item.yspeed *= flip() ? -1 : 1;\n          hit = true;\n        } else if (item.x <= 0) {\n          item.xspeed = randRange(minSpeed, maxSpeed);\n          item.yspeed *= flip() ? -1 : 1;\n          hit = true;\n        }\n        if (item.y + item.height >= height) {\n          item.yspeed = -randRange(minSpeed, maxSpeed);\n          item.xspeed *= flip() ? -1 : 1;\n          hit = true;\n        } else if (item.y <= 0) {\n          item.yspeed = randRange(minSpeed, maxSpeed);\n          item.xspeed *= flip() ? -1 : 1;\n          hit = true;\n        }\n        if (hit) {\n          item.rotationRate *= flip() ? -1 : 1;\n        }\n      }\n\n      function draw() {\n        requestAnimationFrame(draw);\n        if (!ctx) return;\n        ctx.clearRect(0, 0, width, height);\n        ctx.filter = `hue-rotate(${item.rotation * 10}deg)`;\n        ctx.globalAlpha = item.opacity;\n        ctx.setTransform(\n          1,\n          0,\n          0,\n          1,\n          item.x + item.width / 2,\n          item.y + item.height / 2\n        );\n\n        ctx.rotate(item.rotation);\n        ctx.drawImage(\n          item.img,\n          -item.width / 2,\n          -item.height / 2,\n          item.width,\n          item.height\n        );\n        ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default transform\n\n        item.x += item.xspeed;\n        item.y += item.yspeed;\n        item.rotation += item.rotationRate;\n        if (props.shouldFade) {\n          if (item.fading) {\n            item.opacity -= 0.01;\n            if (item.opacity <= -0.5) item.fading = false;\n          } else {\n            item.opacity += 0.01;\n            if (item.opacity >= 3) item.fading = true;\n          }\n        }\n\n        checkHitBox();\n      }\n\n      function start() {\n        if (ctx) {\n          window.addEventListener('resize', onResize);\n          onResize();\n          draw();\n        }\n      }\n\n      item.img.onload = () => {\n        start();\n      };\n      item.img.src = 'basedmax.svg';\n    });\n    return { root, el };\n  },\n});\n</script>\n","\nimport { ref, onMounted, defineComponent } from 'vue';\n\nconst randRange = (min: number, max: number) =>\n  min >= max ? min : Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst flip = () => Math.random() < 0.5;\nconst randSign = (num: number) => (flip() ? num * 1 : num * -1);\n\nconst minSpeed = 2;\nconst maxSpeed = 15;\n\nexport default defineComponent({\n  props: {\n    shouldFade: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  setup(props) {\n    const root = ref<HTMLElement | null>(null);\n    const el = ref<HTMLCanvasElement | null>(null);\n\n    const item = {\n      img: new Image(),\n      fading: true,\n      opacity: 3,\n      // rotationRate: 0.1,\n      rotationRate: 0,\n      rotation: 0,\n      x: 0,\n      y: 0,\n      width: 285,\n      height: 100,\n      xspeed: randSign(randRange(minSpeed, maxSpeed)),\n      yspeed: randSign(randRange(minSpeed, maxSpeed)),\n    };\n    onMounted(() => {\n      if (!root.value || !el.value) return;\n      let width = root.value.offsetWidth;\n      let height = root.value.offsetHeight;\n      item.x = randRange(0, width - item.width);\n      item.y = randRange(0, height - item.height);\n      const canvas = el.value;\n      const ctx = canvas.getContext('2d');\n\n      function onResize() {\n        if (!root.value) return;\n        height = root.value.offsetHeight;\n        width = root.value.offsetWidth;\n        canvas.setAttribute('width', width.toString());\n        canvas.setAttribute('height', height.toString());\n      }\n\n      function checkHitBox() {\n        let hit = false;\n        if (item.x + item.width >= width) {\n          item.xspeed = -randRange(minSpeed, maxSpeed);\n          item.yspeed *= flip() ? -1 : 1;\n          hit = true;\n        } else if (item.x <= 0) {\n          item.xspeed = randRange(minSpeed, maxSpeed);\n          item.yspeed *= flip() ? -1 : 1;\n          hit = true;\n        }\n        if (item.y + item.height >= height) {\n          item.yspeed = -randRange(minSpeed, maxSpeed);\n          item.xspeed *= flip() ? -1 : 1;\n          hit = true;\n        } else if (item.y <= 0) {\n          item.yspeed = randRange(minSpeed, maxSpeed);\n          item.xspeed *= flip() ? -1 : 1;\n          hit = true;\n        }\n        if (hit) {\n          item.rotationRate *= flip() ? -1 : 1;\n        }\n      }\n\n      function draw() {\n        requestAnimationFrame(draw);\n        if (!ctx) return;\n        ctx.clearRect(0, 0, width, height);\n        ctx.filter = `hue-rotate(${item.rotation * 10}deg)`;\n        ctx.globalAlpha = item.opacity;\n        ctx.setTransform(\n          1,\n          0,\n          0,\n          1,\n          item.x + item.width / 2,\n          item.y + item.height / 2\n        );\n\n        ctx.rotate(item.rotation);\n        ctx.drawImage(\n          item.img,\n          -item.width / 2,\n          -item.height / 2,\n          item.width,\n          item.height\n        );\n        ctx.setTransform(1, 0, 0, 1, 0, 0); // restore default transform\n\n        item.x += item.xspeed;\n        item.y += item.yspeed;\n        item.rotation += item.rotationRate;\n        if (props.shouldFade) {\n          if (item.fading) {\n            item.opacity -= 0.01;\n            if (item.opacity <= -0.5) item.fading = false;\n          } else {\n            item.opacity += 0.01;\n            if (item.opacity >= 3) item.fading = true;\n          }\n        }\n\n        checkHitBox();\n      }\n\n      function start() {\n        if (ctx) {\n          window.addEventListener('resize', onResize);\n          onResize();\n          draw();\n        }\n      }\n\n      item.img.onload = () => {\n        start();\n      };\n      item.img.src = 'basedmax.svg';\n    });\n    return { root, el };\n  },\n});\n","import { render } from \"./BounceImage.vue?vue&type=template&id=25b5db27&bindings={}\"\nimport script from \"./BounceImage.vue?vue&type=script&lang=ts\"\nexport * from \"./BounceImage.vue?vue&type=script&lang=ts\"\nscript.render = render\n\nexport default script"],"sourceRoot":""}