From 5582de9ea9a4e289abd31cb0bcd1dd25b5e4c4e3 Mon Sep 17 00:00:00 2001
From: Trenton Zimmer <66042448+trmazi@users.noreply.github.com>
Date: Sat, 12 Oct 2024 23:50:48 -0400
Subject: [PATCH] Add bats!

---
 index.html                      |   8 ++
 public/assets/bats.png          | Bin 0 -> 2296 bytes
 public/assets/halloween-bats.js | 212 ++++++++++++++++++++++++++++++++
 3 files changed, 220 insertions(+)
 create mode 100644 public/assets/bats.png
 create mode 100644 public/assets/halloween-bats.js

diff --git a/index.html b/index.html
index dd9934f..0b8564d 100644
--- a/index.html
+++ b/index.html
@@ -48,6 +48,14 @@
     </noscript>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
+    <!-- Bats! -->
+    <script src="https://code.jquery.com/jquery.js"></script>
+    <script src="/assets/halloween-bats.js"></script>
+    <script type="text/javascript">
+      window.halloweenBats = $.halloweenBats({
+        image: "/assets/bats.png",
+      });
+    </script>
     <!-- built files will be auto injected -->
     <audio id="audio" src="/assets/sounds/konami.mp3" class="hidden">
   </body>
diff --git a/public/assets/bats.png b/public/assets/bats.png
new file mode 100644
index 0000000000000000000000000000000000000000..27c993d5aed8361eaa7e830483e15c835a07edf3
GIT binary patch
literal 2296
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
I=`KkBAAWnd{r~^~

literal 0
HcmV?d00001

diff --git a/public/assets/halloween-bats.js b/public/assets/halloween-bats.js
new file mode 100644
index 0000000..bfd83e6
--- /dev/null
+++ b/public/assets/halloween-bats.js
@@ -0,0 +1,212 @@
+(function ($) {
+
+	'use strict';
+	var innerWidth,
+		innerHeight;
+
+	function Bat($body, options) {
+		this._options = options;
+
+		this._initialize($body);
+	}
+
+	Bat.prototype._initialize = function ($body) {
+		this._$bat = $('<div class="halloween-bat"/>');
+
+		this._x = this.randomPosition('horizontal');
+		this._y = this.randomPosition('vertical');
+		this._tx = this.randomPosition('horizontal');
+		this._ty = this.randomPosition('vertical');
+		this._dx = -5 + Math.random() * 10;
+		this._dy = -5 + Math.random() * 10;
+		this._positionUpdateTimer = this._getPositionUpdateTime();
+
+		this._frame = Math.random() * this._options.frames;
+		this._frame = Math.round(this._frame);
+		this._$bat.css({
+			position: 'absolute',
+			left: this._x + 'px',
+			top: this._y + 'px',
+			zIndex: this._options.zIndex,
+			width: this._options.width + 'px',
+			height: this._options.height + 'px',
+			backgroundImage: 'url(' + this._options.image + ')',
+			backgroundRepeat: 'no-repeat'
+		});
+
+		$body.append(this._$bat);
+	};
+
+	/**
+	 * @returns {number}
+	 * @private
+	 */
+	Bat.prototype._getPositionUpdateTime = function () {
+		return 0.5 + Math.random();
+	};
+
+	/**
+	 * @param {string} direction
+	 * @returns {number}
+	 */
+	Bat.prototype.randomPosition = function (direction) {
+		var screenLength,
+			imageLength;
+
+		if (direction === 'horizontal') {
+			screenLength = innerWidth;
+			imageLength = this._options.width;
+		}
+		else {
+			screenLength = innerHeight;
+			imageLength = this._options.height;
+		}
+
+		return Math.random() * (screenLength - imageLength);
+	};
+
+	Bat.prototype.move = function (deltaTime) {
+		var left,
+			top,
+			length,
+			dLeft,
+			dTop,
+			ddLeft,
+			ddTop;
+
+		left = this._tx - this._x;
+		top = this._ty - this._y;
+
+		length = Math.sqrt(left * left + top * top);
+		length = Math.max(1, length);
+
+		dLeft = this._options.speed * (left / length);
+		dTop = this._options.speed * (top / length);
+
+		ddLeft = (dLeft - this._dx) / this._options.flickering;
+		ddTop = (dTop - this._dy) / this._options.flickering;
+
+		this._dx += ddLeft * deltaTime * 25;
+		this._dy += ddTop * deltaTime * 25;
+
+		this._x += this._dx * deltaTime * 25;
+		this._y += this._dy * deltaTime * 25;
+
+		this._x = Math.max(0, Math.min(this._x, innerWidth - this._options.width));
+		this._y = Math.max(0, Math.min(this._y, innerHeight - this._options.height));
+
+		this.applyPosition();
+
+		this._positionUpdateTimer -= deltaTime;
+		if (this._positionUpdateTimer < 0) {
+			this._tx = this.randomPosition('horizontal');
+			this._ty = this.randomPosition('vertical');
+
+			this._positionUpdateTimer = this._getPositionUpdateTime();
+		}
+	};
+
+	Bat.prototype.applyPosition = function () {
+		this._$bat.css({
+			left: this._x + 'px',
+			top: this._y + 'px'
+		});
+	};
+
+	Bat.prototype.animate = function (deltaTime) {
+		var frame;
+
+		this._frame += 5 * deltaTime;
+
+		if (this._frame >= this._options.frames) {
+			this._frame -= this._options.frames;
+		}
+
+		frame = Math.floor(this._frame);
+
+		this._$bat.css(
+			'backgroundPosition',
+			'0 ' + (frame * -this._options.height) + 'px'
+		);
+	};
+
+	$.halloweenBats = function (options) {
+		var $window = $(window),
+			$target,
+			plugin,
+			isRunning = false,
+			isActiveWindow = true,
+			bats = [],
+			defaults = {
+				image: 'bats.png', // Path to the image.
+				zIndex: 10000, // The z-index you need.
+				amount: 3, // Bat amount.
+				width: 35, // Image width.
+				height: 20, // Animation frame height.
+				frames: 4, // Amount of animation frames.
+				speed: 20, // Higher value = faster.
+				flickering: 15, // Higher value = slower.
+				target: 'body' // Target element
+			};
+
+		options = $.extend({}, defaults, options);
+
+		$target = $(options.target);
+
+		innerWidth = $target.innerWidth();
+		innerHeight = $target.innerHeight();
+
+		plugin = {
+			isRunning: false,
+			start: function() {
+				var lastTime = Date.now();
+
+				isRunning = true;
+
+				function animate() {
+					var time = Date.now(),
+						deltaTime = (time - lastTime) / 1000;
+
+					lastTime = time;
+
+					if (isActiveWindow) {
+						$.each(bats, function (index, bat) {
+							bat.move(deltaTime);
+							bat.animate(deltaTime);
+						});
+					}
+
+					if (isRunning) {
+						requestAnimationFrame(animate);
+					}
+				}
+
+				animate();
+			},
+			stop: function() {
+				isRunning = false;
+			}
+		};
+
+		while (bats.length < options.amount) {
+			bats.push(new Bat($target, options));
+		}
+
+		plugin.start();
+
+		$window.resize(function () {
+			innerWidth = $target.innerWidth();
+			innerHeight = $target.innerHeight();
+		});
+
+		$window.focus(function() {
+			isActiveWindow = true;
+		});
+
+		$window.blur(function() {
+			isActiveWindow = false;
+		});
+
+		return plugin;
+	};
+}(jQuery));