More particle work

js/Demo/demoLayers.js

@@ -556,4 +556,4 @@ addLayer("a", {
     }, 
 )
 
-const coolParticle = {}
+const coolParticle = {image:"options_wheel.png"}

js/components.js

@@ -579,6 +579,7 @@ function loadVue() {
 			challengeStyle,
 			challengeButtonText,
 			constructBarStyle,
+			constructParticleStyle,
 			VERSION,
 			LAYERS,
 			hotkeys,

js/technical/particleSystem.js

@@ -1,5 +1,5 @@
 // Variables that must be defined to display popups
-var particles = [];
+var particles = {};
 var particleID = 0;
 var mouseX = 0;
 var mouseY = 0;
@@ -9,23 +9,49 @@ function makeParticles(data, amount=1) {
     for (let x = 0; x < amount; x++) {
         let particle = getNewParticle()
         for (thing in data) {
+
             switch(thing) {
-                case DEFAULT:
+                case 'onClick', 'onHover', 'update': // Functions that should be copied over
-                    particle[thing]=data[thing]
+                    particle[thing] = data[thing]
+                default:
+                    particle[thing]=run(data[thing], data, x)
                     
             }
         }
-	    particles.push(particle)
+        if (data.angle === undefined) {
+            particle.dir = particle.angle
+        }
+        particle.dir = particle.dir + (particle.spread * (x- amount/2 + 0.5))
+
+        particle.xVel = particle.speed * sin(particle.dir)
+        particle.yVel = particle.speed * cos(particle.dir) * -1
+
+	    Vue.set(particles, particle.id, particle)
+
     }
 }
 
+function sin(x) {
+    return Math.sin(x*Math.PI/180)
+}
+
+function cos(x) {
+    return Math.cos(x*Math.PI/180)
+}
 
-//Function to reduce time on active popups
 function updateParticles(diff) {
 	for (p in particles) {
 		particles[p].time -= diff;
 		if (particles[p]["time"] < 0) {
-			particles.splice(p, 1); // Remove popup when time hits 0
+			Vue.delete(particles, p); 
+            
+		}
+        else {
+            if (particles[p].update) run(particles[p].update, particles[p])
+            particles[p].angle += particles[p].rotation
+            particles[p].x += particles[p].xVel
+            particles[p].y += particles[p].yVel
+            particles[p].yVel += particles[p].gravity
         }
 	}
 }
@@ -33,10 +59,21 @@ function updateParticles(diff) {
 function getNewParticle() {
     particleID++
     return {
-        time: 5,
+        time: 2,
         id: particleID,
         x: mouseX,
         y: mouseY,
+        width: 35,
+        height: 35,
+        image: "resources/genericParticle.png",
+        angle: 0,
+        spread: 30,
+        offset: 20,
+        speed: 20,
+        xVel: 0,
+        yVel: 0,
+        rotation: 0,
+        gravity: 4,
     }
 }
 
@@ -44,3 +81,13 @@ function updateMouse(event) {
     mouseX = event.clientX
     mouseY = event.clientY
 }
+
+function constructParticleStyle(particle){
+    return {
+        left: (particle.x  - particle.height/2) + 'px',
+        top: (particle.y - particle.height/2) + 'px',
+        width: particle.width + 'px',
+        height: particle.height + 'px',
+        transform: "rotate(" + particle.angle + "deg)",
+    }
+}

js/technical/systemComponents.js

@@ -191,8 +191,8 @@ var systemComponents = {
 
 	'particle': {
 		props: ['data', 'index'],
-		template: `<div class='particle' v-bind:style="{left: data.x + 'px', top: data.y + 'px'}">ahragagag
+		template: `<img class='particle instant' v-bind:style="constructParticleStyle(data)" v-bind:src="data.image">
-		</div>
+		</img>
 		`
 	},
 

popup.css

@@ -44,13 +44,8 @@
 }
 
 .particle {
-	border: 4px solid;
+	background-color: transparent;
-	border-radius: 7px;
-	width: 50px;
-	min-height: 60px;
-	background-color: #696969;
 	display: block;
-	border-color: rgba(0, 0, 0, 0.25);
 	position:absolute;
 	z-index: 99999
 }