[Client] Add particle effect ⭐

src/client/app/common/views/directives/index.ts

@@ -1,5 +1,7 @@
 import Vue from 'vue';
 
 import autocomplete from './autocomplete';
+import particle from './particle';
 
 Vue.directive('autocomplete', autocomplete);
+Vue.directive('particle', particle);

src/client/app/common/views/directives/particle.ts

@@ -0,0 +1,26 @@
+import Particle from '../components/particle.vue';
+
+export default {
+	bind(el, binding, vn) {
+		el.addEventListener('click', () => {
+			const rect = el.getBoundingClientRect();
+
+			const x = rect.left + (el.clientWidth / 2);
+			const y = rect.top + (el.clientHeight / 2);
+
+			const particle = new Particle({
+				parent: vn.context,
+				propsData: {
+					x,
+					y
+				}
+			}).$mount();
+
+			document.body.appendChild(particle.$el);
+		});
+	},
+
+	unbind(el, binding, vn) {
+
+	}
+};