Improved popups

changelog.md

@@ -1,8 +1,9 @@
 # The Modding Tree changelog:
 
 - Added achievement/milestone popups (thank you to Jacorb for this contribution!)
+    (They have to be enabled with layer features)
 - The changelog tab is back, and can be set in mod.js.
-- Layer nodes and respec buttons are unselected after clicking them so you don't accidentally press them again with "enter".
+- Layer nodes and respec buttons no longer stay focused after clicking them so you don't accidentally press them again with "enter".
 - The victory screen text is configurable.
 - Added an argument to use specific rows in an "upgrades" component.
 - Added the ability to easily make a tab that is a collection of layers in subtabs.

demo.html

@@ -73,7 +73,7 @@
 		<!-- Popups -->
 		<div class="popup-container">
 			<transition-group name="fade">
-				<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type" v-bind:key="popup.id">
+				<div v-for="popup,index in activePopups" class="popup" v-bind:class="popup.type" v-bind:key="popup.id" v-bind:style="popup.color ? {'background-color': popup.color} : {}">
 					<h3>{{popup.title}}</h3><br>
 					<h2 v-html="popup.message"></h2>
 				</div>

docs/achievements.md

@@ -48,3 +48,5 @@ Individual achievement can have these features:
 - goalTooltip: **optional, deprecated**. Appears when the achievement is hovered over and locked, overrides the basic tooltip. This is to display the goal (or a hint). It can also be a function that returns updating text. Can use basic HTML.
 
 - doneTooltip: **optional, deprecated**. Appears when the achievement is hovered over and completed, overrides the basic tooltip. This can display what the player achieved (the goal), and the rewards, if any. It can also be a function that returns updating text. Can use basic HTML.
+
+Enable achievement popups by adding `achievementsPopups: true` to the layer.

docs/layer-features.md

@@ -75,6 +75,8 @@ You can make almost any value dynamic by using a function in its place, includin
 
 - infoboxes: Displays some text in a box that can be shown or hidden. [See here for more info.](infoboxes.md)
 
+- achievementPopups, milestonePopups: **optional**, If true, you get a popup message when you get the achievement/milestone.
+
 ## Prestige formula features
 
 - type: **optional**. Determines which prestige formula you use. Defaults to "none".

docs/milestones.md

@@ -34,3 +34,5 @@ Milestone features:
 - layer: **assigned automagically**. It's the same value as the name of this layer, so you can do `player[this.layer].points` or similar.
 
 - id: **assigned automagically**. It's the "key" which the milestone was stored under, for convenient access. The milestone in the example's id is 0.
+
+Enable milestone popups by adding `milestonePopups: true` to the layer.

js/Demo/demoLayers.js

@@ -365,6 +365,7 @@ addLayer("c", {
             return (player.c.buyables[11] == 1)
         },
         resetDescription: "Melt your points into ",
+        milestonePopups: true
 })
 
 
@@ -488,6 +489,7 @@ addLayer("a", {
         tooltip() { // Optional, tooltip displays when the layer is locked
             return ("Achievements")
         },
+        achievementPopups: true,
         achievements: {
             rows: 2,
             cols: 3,

js/utils.js

@@ -725,8 +725,10 @@ function toNumber(x) {
 
 function updateMilestones(layer){
 	for (id in layers[layer].milestones){
-		if (!(player[layer].milestones.includes(id)) && layers[layer].milestones[id].done())
+		if (!(player[layer].milestones.includes(id)) && layers[layer].milestones[id].done()){
 			player[layer].milestones.push(id)
+			if (tmp[layer].milestonePopups) popup("milestone", tmp[layer].milestones[id].requirementDescription, "Milestone Gotten!", 3, tmp[layer].color);
+		}
 	}
 }
 
@@ -735,7 +737,7 @@ function updateAchievements(layer){
 		if (isPlainObject(layers[layer].achievements[id]) && !(player[layer].achievements.includes(id)) && layers[layer].achievements[id].done()) {
 			player[layer].achievements.push(id)
 			if (layers[layer].achievements[id].onComplete) layers[layer].achievements[id].onComplete()
-			popup("achievement", layers[layer].achievements[id].name, "Achievement Gotten!");
+			if (tmp[layer].achievementPopups) popup("achievement", tmp[layer].achievements[id].name, "Achievement Gotten!", 3, tmp[layer].color);
 		}
 	}
 }
@@ -814,7 +816,7 @@ var activePopups = [];
 var popupID = 0;
 
 // Function to show popups
-function addPopup(type="none",text="This is a test popup.",title="",timer=3, color="") {
+function popup(type="none",text="This is a test popup.",title="",timer=3, color="") {
 	switch(type) {
 		case "achievement":
 			popupTitle = "Achievement Unlocked!";
@@ -833,7 +835,7 @@ function addPopup(type="none",text="This is a test popup.",title="",timer=3, col
 	popupMessage = text;
 	popupTimer = timer; 
 
-	activePopups.push({"time":popupTimer,"type":popupType,"title":popupTitle,"message":(popupMessage+"\n"),"id":popupID})
+	activePopups.push({"time":popupTimer,"type":popupType,"title":popupTitle,"message":(popupMessage+"\n"),"id":popupID, "color":color})
 	popupID++;
 }
 

popup.css

@@ -1,6 +1,6 @@
 .popup {
 	border: 4px solid;
-	border-radius: 5px;
+	border-radius: 7px;
 	width: 300px;
 	min-height: 60px;
 	color: #000000;
@@ -8,6 +8,7 @@
 	margin-top: 30px;
 	padding-top: 15px;
 	padding-bottom: 15px;
+	border-color: rgba(0, 0, 0, 0.25);
 }
 
 
@@ -19,12 +20,10 @@
 }
 
 .achievement-popup {
-	border-color: #51629C;
 	background: #7182BC;
 }
 
-.challenge-popup {
-	border-color: #B1A21C;
+.milestone-popup {
 	background: #D1C23C;
 }