From 66dc5e46717275df49f59fa2c0dfb391c26d4029 Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Wed, 9 Dec 2020 01:36:27 -0500
Subject: [PATCH] More achievement customization

---
 changelog.md          | 5 +++--
 docs/achievements.md  | 4 ++++
 js/Demo/demoLayers.js | 2 ++
 js/components.js      | 2 +-
 js/technical/temp.js  | 2 +-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/changelog.md b/changelog.md
index b30d525..bee96e7 100644
--- a/changelog.md
+++ b/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.
diff --git a/docs/achievements.md b/docs/achievements.md
index f1bf115..52b2dda 100644
--- a/docs/achievements.md
+++ b/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.
diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js
index 3003d6f..e7253a5 100644
--- a/js/Demo/demoLayers.js
+++ b/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",
diff --git a/js/components.js b/js/components.js
index 3059075..0762bd4 100644
--- a/js/components.js
+++ b/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>
 		`
 	})
diff --git a/js/technical/temp.js b/js/technical/temp.js
index 814dc60..631ec7c 100644
--- a/js/technical/temp.js
+++ b/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)