More achievement customization

changelog.md

@@ -1,11 +1,12 @@
 # The Modding Tree changelog:
 
-## v2.3: Cooler and Newer - 12/
+## v2.3: Cooler and Newer - 12/09/20
 - 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".
+- Layer nodes and respec buttons will not be clicked by pressing "enter".
 - The victory screen text is configurable.
+- Added image and textStyle features to achievements.
 - 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.

docs/achievements.md

@@ -39,8 +39,12 @@ Individual achievement can have these features:
 
 - onComplete() - **optional**. this function will be called when the achievement is completed.
 
+- image: **optional**, puts the image from the given URL (relative or absolute) in the achievement
+
 - style: **optional**. Applies CSS to this achievement, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
 
+- textStyle: **optional**. Applies CSS to the text, in the form of an object where the keys are CSS attributes, and the values are the values for those attributes (both as strings).
+
 - 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 achievement was stored under, for convenient access. The achievement in the example's id is 11.

js/Demo/demoLayers.js

@@ -493,6 +493,7 @@ addLayer("a", {
             rows: 2,
             cols: 3,
             11: {
+                image: "discord.png",
                 name: "Get me!",
                 done() {return true}, // This one is a freebie
                 goalTooltip: "How did this happen?", // Shows when achievement is not completed
@@ -503,6 +504,7 @@ addLayer("a", {
                 done() {return false},
                 goalTooltip: "Mwahahaha!", // Shows when achievement is not completed
                 doneTooltip: "HOW????", // Showed when the achievement is completed
+                textStyle: {'color': '#04e050'},
             },
             13: {
                 name: "EIEIO",

js/components.js

@@ -369,7 +369,7 @@ function loadVue() {
 			"
 			
 			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>
+			<span v-if= "tmp[layer].achievements[data].name"><br><h3 v-bind:style="tmp[layer].achievements[data].textStyle" v-html="tmp[layer].achievements[data].name"></h3><br></span>
 		</div>
 		`
 	})

js/technical/temp.js

@@ -155,7 +155,7 @@ function constructAchievementStyles(layer){
 		if (isPlainObject(ach)) {
 			let style = []
 			if (ach.image){ 
-				style.push({'background-image': ach.image})
+				style.push({'background-image': 'url("' + ach.image + '")'})
 			} 
 			if (!ach.unlocked) style.push({'visibility': 'hidden'})
 			style.push(ach.style)