Mostly work on achievement style stuff

changelog.md

@@ -1,22 +1,25 @@
 # The Modding Tree changelog:
 
+## v2.3: Cooler and Newer - 12/
 - 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 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.
+- Fixed the comma appearing in the main display when there was no effectDescription
 - Added the ability to easily make a tab that is a collection of layers in subtabs.
 - Improved spacing for embedding layers with subtabs into subtabs.
 
-### v2.2.8 12/03/20
+
+### v2.2.8 - 12/03/20
 - Double-clicking a layer node brings you to the main subtab for that layer.
 - Attempted to fix challenges visually updating a different way.
 - Added a softcap function for use in formulas.
 - Added displayRow feature, which lets layers be shown somewhere separate from where they are in the reset order (e.g. side layers)
 - Fixed autoupgrade issue.
 
-### v2.2.7 11/30/20
+### v2.2.7 - 11/30/20
 - Added autoUpgrade feature.
 - resource-display now shows resource gain per second if passiveGain is active.
 - Fixed formatting issues on some large numbers.
@@ -24,13 +27,13 @@
 - Made hard resetting more effective.
 - Removed Herobrine from getStartClickables.
 
-### v2.2.6 11/30/20
+### v2.2.6 - 11/30/20
 - Added goalDescription for challenges and made the new "canComplete" system the standard.
 - Another attempt to fix challenges not visually updating.
 - Fixed side layers not appearing.
 - Fixed getStartClickables again.
 
-### v2.2.5 11/29/20
+### v2.2.5 - 11/29/20
 - Added features for overriding the displays and costs/goals of upgrades and challenges to make them fully custom.
 - best, total, and unlocked are always automatically added to layerData (but best and total will only display if you add them yourself).
 - Fixed getStartClickables.

js/Demo/demoLayers.js

@@ -365,7 +365,6 @@ addLayer("c", {
             return (player.c.buyables[11] == 1)
         },
         resetDescription: "Melt your points into ",
-        milestonePopups: true
 })
 
 
@@ -496,7 +495,6 @@ addLayer("a", {
             11: {
                 name: "Get me!",
                 done() {return true}, // This one is a freebie
-                tooltip: "",
                 goalTooltip: "How did this happen?", // Shows when achievement is not completed
                 doneTooltip: "You did it!", // Showed when the achievement is completed
             },

js/Demo/demoMod.js

@@ -11,8 +11,8 @@ let modInfo = {
 
 // Set your version in num and name
 let VERSION = {
-	num: "2.2.9",
-	name: "Uprooted",
+	num: "2.3",
+	name: "Cooler and Newer",
 }
 
 let changelog = `<h1>Changelog:</h1><br>

js/components.js

@@ -212,7 +212,7 @@ function loadVue() {
 	Vue.component('main-display', {
 		props: ['layer'],
 		template: `
-		<div><span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': tmp[layer].color, 'text-shadow': '0px 0px 10px' + tmp[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{tmp[layer].resource}}, <span v-if="tmp[layer].effectDescription" v-html="tmp[layer].effectDescription"></span><br><br></div>
+		<div><span v-if="player[layer].points.lt('1e1000')">You have </span><h2 v-bind:style="{'color': tmp[layer].color, 'text-shadow': '0px 0px 10px' + tmp[layer].color}">{{formatWhole(player[layer].points)}}</h2> {{tmp[layer].resource}}<span v-if="tmp[layer].effectDescription">, <span v-html="tmp[layer].effectDescription"></span></span><br><br></div>
 		`
 	})
 
@@ -367,8 +367,8 @@ function loadVue() {
 				(tmp[layer].achievements[data].tooltip == '') ? false : hasAchievement(layer, data) ? (tmp[layer].achievements[data].doneTooltip ? tmp[layer].achievements[data].doneTooltip : (tmp[layer].achievements[data].tooltip ? tmp[layer].achievements[data].tooltip : 'You did it!'))
 				: (tmp[layer].achievements[data].goalTooltip ? tmp[layer].achievements[data].goalTooltip : (tmp[layer].achievements[data].tooltip ? tmp[layer].achievements[data].tooltip : 'LOCKED'))
 			"
-
-			v-bind:style="[(!tmp[layer].achievements[data].unlocked) ? {'visibility': 'hidden'} : {}, tmp[layer].achievements[data].style,]">
+			
+			v-bind:style="tmp[layer].achievements[data].computedStyle">
 			<span v-if= "tmp[layer].achievements[data].name"><br><h3 v-html="tmp[layer].achievements[data].name"></h3><br></span>
 		</div>
 		`

js/game.js

@@ -4,8 +4,8 @@ var gameEnded = false;
 
 // Don't change this
 const TMT_VERSION = {
-	tmtNum: "2.2.9",
-	tmtName: "Uprooted"
+	tmtNum: "2.3",
+	tmtName: "Cooler and Newer"
 }
 
 function getResetGain(layer, useType = null) {

js/technical/temp.js

@@ -77,6 +77,7 @@ function updateTemp() {
 		tmp[layer].prestigeNotify = prestigeNotify(layer)
 		tmp[layer].prestigeButtonText = prestigeButtonText(layer)
 		constructBarStyles(layer)
+		constructAchievementStyles(layer)
 		updateChallengeDisplay(layer)
 
 	}
@@ -148,6 +149,20 @@ function updateClickableTemp(layer)
 	updateTempData(layers[layer].clickables, tmp[layer].clickables)
 }
 
+function constructAchievementStyles(layer){
+	for (id in tmp[layer].achievements) {
+		ach = tmp[layer].achievements[id]
+		if (isPlainObject(ach)) {
+			let style = []
+			if (ach.image){ 
+				style.push({'background-image': ach.image})
+			} 
+			if (!ach.unlocked) style.push({'visibility': 'hidden'})
+			style.push(ach.style)
+			Vue.set(ach, 'computedStyle', style)
+		}
+	}
+}
 
 var DIR_MARGINS = ["margin-bottom", "margin-top", "margin-right", "margin-left"]
 

js/utils.js

@@ -727,7 +727,7 @@ function updateMilestones(layer){
 	for (id in layers[layer].milestones){
 		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);
+			if (tmp[layer].milestonePopups) doPopup("milestone", tmp[layer].milestones[id].requirementDescription, "Milestone Gotten!", 3, tmp[layer].color);
 		}
 	}
 }
@@ -737,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()
-			if (tmp[layer].achievementPopups) popup("achievement", tmp[layer].achievements[id].name, "Achievement Gotten!", 3, tmp[layer].color);
+			if (tmp[layer].achievementPopups) doPopup("achievement", tmp[layer].achievements[id].name, "Achievement Gotten!", 3, tmp[layer].color);
 		}
 	}
 }
@@ -816,7 +816,7 @@ var activePopups = [];
 var popupID = 0;
 
 // Function to show popups
-function popup(type="none",text="This is a test popup.",title="",timer=3, color="") {
+function doPopup(type="none",text="This is a test popup.",title="",timer=3, color="") {
 	switch(type) {
 		case "achievement":
 			popupTitle = "Achievement Unlocked!";

style.css

@@ -545,7 +545,7 @@ ul {
 
 [tooltip] {
 	position: relative;
-	z-index: 999999 !important
+	z-index: 99999999 !important
 }
 
 [tooltip]:before,
@@ -598,7 +598,6 @@ ul {
 [tooltip]:hover:before,
 [tooltip]:hover:after {
 	visibility: visible;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 	filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
 	opacity: 1;
 	white-space: pre-wrap;