Added additional particle features + fixes

docs/!general-info.md

@@ -37,7 +37,7 @@ While reading this documentation, the following key will be used when describing
 
 - [Upgrades](upgrades.md): How to create upgrades for a layer.
 - [Milestones](milestones.md): How to create milestones for a layer.
-- [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings.
+- [Buyables](buyables.md): Create rebuyable upgrades for your layer (with the option to make them respec-able). Can be used to make Enhancers or Space Buildings, for example.
 - [Clickables](clickables.md): A more generalized variant of buyables, for any kind of thing that is sometimes clickable. Between these and Buyables, you can do just about anything.
 - [Achievements](achievements.md): How to create achievements for a layer (or for the whole game).
 
@@ -50,3 +50,4 @@ While reading this documentation, the following key will be used when describing
 - [Grids][grids.md]: Create a group buttons that behave the same, but have their own data. Good for map tiles, an inventory grid, and more!
 - [Infoboxes](infoboxes.md): Boxes containing text that can be shown or hidden.
 - [Trees](trees-and-tree-customization.md): Make your own trees. You can make non-layer button nodes too!
+- [Particle system](particles.md): Can be used to create particles for visual effects, but also interactable things like golden cookies or collectables.

docs/particles.md

@@ -1,3 +1,5 @@
 Don't forget
 - layer
 - style
+- make text particles
+-fade in?

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`);'>'HI'</button>"}],
+                    ["raw-html", function() {return "<button onclick='console.log(`yeet`); makeParticles(textParticle)'>'HI'</button>"}],
                     ["display-text", "Name your points!"],
                     ["text-input", "thingy"],
                     ["display-text",
@@ -560,7 +560,7 @@ const coolParticle = {
     image:"options_wheel.png",
     spread: 20,
     gravity: 2,
-    time: 9999,
+    time: 3,
     rotation (id) {
         return 20 * (id - 1.5) + (Math.random() - 0.5) * 10
     },
@@ -584,3 +584,13 @@ const coolParticle = {
     },
     layer: 'f',
 }
+
+const textParticle = {
+    spread: 20,
+    gravity: 0,
+    time: 3,
+    speed: 0,
+    text: function() { return "<h1 style='color:yellow'>" + format(player.points)},
+    offset: 30,
+    fadeInTime: 1,
+}

js/components.js

@@ -592,6 +592,8 @@ function loadVue() {
 			particles,
 			mouseX,
 			mouseY,
+			shiftDown,
+			ctrlDown,
 		},
 	})
 }

js/technical/particleSystem.js

@@ -32,7 +32,7 @@ function makeParticles(data, amount=1) {
 
         particle.xVel = particle.speed * sin(particle.dir)
         particle.yVel = particle.speed * cos(particle.dir) * -1
-
+        particle.fadeInTimer = particle.fadeInTime
 	    Vue.set(particles, particle.id, particle)
 
     }
@@ -50,6 +50,7 @@ function updateParticles(diff) {
 	for (p in particles) {
         let particle = particles[p]
 		particle.time -= diff;
+        particle.fadeInTimer -= diff;
 		if (particle["time"] < 0) {
 			Vue.delete(particles, p); 
             
@@ -84,6 +85,8 @@ function getNewParticle() {
         rotation: 0,
         gravity: 0,
         fadeTime: 1,
+        fadeInTimer: 0,
+        fadeIn: 0,
     }
 }
 
@@ -92,16 +95,26 @@ function updateMouse(event) {
     mouseY = event.clientY
 }
 
+function getOpacity(particle) {
+    if ((particle.time < particle.fadeTime) && particle.fadeTime)
+        return particle.time / particle.fadeTime
+    if (particle.fadeInTimer > 0) 
+        return 1 - (particle.fadeInTimer / particle.fadeInTime)
+    
+    return 1
+}   
+
 function constructParticleStyle(particle){
+    console.log(getOpacity(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)",
-        opacity: ((particle.time < particle.fadeTime) && particle.fadeTime) ? particle.time / particle.fadeTime : 1,
+        opacity: getOpacity(particle),
         "pointer-events": (particle.onClick || particle.onHover) ? 'auto' : 'none',
-
+        "background-image": "url(" + particle.image + ")",
     }
 }
 
@@ -109,7 +122,6 @@ function clearParticles(check) {
     if (!check) check = true
 
     for (p in particles) {
-        console.log(run(check, particles[p], particles[p]))
         if (run(check, particles[p], particles[p])){
             Vue.delete(particles, p)
         }

js/technical/systemComponents.js

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

popup.css

@@ -47,5 +47,6 @@
 	background-color: transparent;
 	display: block;
 	position:absolute;
-	z-index: 99999
+	z-index: 99999;
+	background-size:contain;
 }