Mostly done with particle code

js/Demo/demoLayers.js

@@ -300,7 +300,7 @@ addLayer("c", {
                     ["main-display",
                     "prestige-button", "resource-display",
                     ["blank", "5px"], // Height
-                    ["raw-html", function() {return "<button onclick='console.log(`yeet`); makeParticles(coolParticle, 2)'>'HI'</button>"}],
+                    ["raw-html", function() {return "<button onclick='console.log(`yeet`);'>'HI'</button>"}],
                     ["display-text", "Name your points!"],
                     ["text-input", "thingy"],
                     ["display-text",
@@ -456,6 +456,7 @@ addLayer("f", {
                         player[this.layer].clickables[this.id] = "Maybe that's a bit too far..."
                         break;                        
                     case "Maybe that's a bit too far...":
+                        makeParticles(coolParticle, 4)
                         player[this.layer].clickables[this.id] = "Borkened..."
                         break;
                     default:
@@ -544,7 +545,6 @@ addLayer("a", {
             },
             onClick(data, id) { // Don't forget onHold
                 player[this.layer].grid[id]++
-
             },
             getTitle(data, id) {
                 return "Gridable #" + id
@@ -556,4 +556,27 @@ addLayer("a", {
     },
 )
 
-const coolParticle = {image:"options_wheel.png"}
+const coolParticle = {
+    image:"options_wheel.png",
+    spread: 20,
+    gravity: 2,
+    time: 9999,
+    rotation (id) {
+        return 20 * (id - 1.5) + (Math.random() - 0.5) * 10
+    },
+    dir() {
+        return (Math.random() - 0.5) * 10
+    },
+    speed() {
+        return (Math.random() + 1.2) * 8 
+    },
+    onClick() {
+        console.log("yay")
+    },
+    onHover() {
+        console.log("aaa")
+    },
+    update() {
+        //this.width += 1
+    }
+}

js/technical/particleSystem.js

@@ -11,8 +11,11 @@ function makeParticles(data, amount=1) {
         for (thing in data) {
 
             switch(thing) {
-                case 'onClick', 'onHover', 'update': // Functions that should be copied over
+                case 'onClick': // Functions that should be copied over
+                case 'onHover':
+                case 'update':
                     particle[thing] = data[thing]
+                    break;
                 default:
                     particle[thing]=run(data[thing], data, x)
                     
@@ -23,6 +26,9 @@ function makeParticles(data, amount=1) {
         }
         particle.dir = particle.dir + (particle.spread * (x- amount/2 + 0.5))
 
+        particle.x += particle.offset * sin(particle.dir)
+        particle.y += particle.offset * cos(particle.dir) * -1
+
         particle.xVel = particle.speed * sin(particle.dir)
         particle.yVel = particle.speed * cos(particle.dir) * -1
 
@@ -41,17 +47,19 @@ function cos(x) {
 
 function updateParticles(diff) {
 	for (p in particles) {
-		particles[p].time -= diff;
-		if (particles[p]["time"] < 0) {
+        let particle = particles[p]
+		particle.time -= diff;
+		if (particle["time"] < 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
+            if (particle.update) run(particle.update, particle)
+            particle.angle += particle.rotation
+            particle.x += particle.xVel
+            particle.y += particle.yVel
+            particle.yVel += particle.gravity
+
         }
 	}
 }
@@ -59,7 +67,7 @@ function updateParticles(diff) {
 function getNewParticle() {
     particleID++
     return {
-        time: 2,
+        time: 3,
         id: particleID,
         x: mouseX,
         y: mouseY,
@@ -68,12 +76,13 @@ function getNewParticle() {
         image: "resources/genericParticle.png",
         angle: 0,
         spread: 30,
-        offset: 20,
-        speed: 20,
+        offset: 10,
+        speed: 15,
         xVel: 0,
         yVel: 0,
         rotation: 0,
-        gravity: 4,
+        gravity: 0,
+        fadeTime: 1,
     }
 }
 
@@ -89,5 +98,8 @@ function constructParticleStyle(particle){
         width: particle.width + 'px',
         height: particle.height + 'px',
         transform: "rotate(" + particle.angle + "deg)",
+        opacity: ((particle.time < particle.fadeTime) && particle.fadeTime) ? particle.time / particle.fadeTime : 1,
+        "pointer-events": (particle.onClick || particle.onHover) ? 'auto' : 'none',
+
     }
 }

js/technical/systemComponents.js

@@ -191,7 +191,7 @@ var systemComponents = {
 
 	'particle': {
 		props: ['data', 'index'],
-		template: `<img class='particle instant' v-bind:style="constructParticleStyle(data)" v-bind:src="data.image">
+		template: `<img class='particle instant' v-bind:style="constructParticleStyle(data)" v-bind:src="data.image" v-on:click="run(data.onClick, data)"  v-on:mouseenter="run(data.onHover, data)">
 		</img>
 		`
 	},

style.css

@@ -705,7 +705,7 @@ button > * {
 	border-bottom: 0.7em solid transparent;
 	border-left: 0.3em solid transparent;
 	font-size: 10px;
-	overflow:auto
+	overflow:auto;
 }
 
 .star {