Added Marked feature

changelog.md

@@ -1,6 +1,7 @@
 # The Modding Tree changelog:
 
 - Added grids! Description not ready
+- Added "marked" feature to add a mark to a node. Can be an image instead of a star.
 - Added the ability to display non-whole numbers in main-display.
 
 # v2.5.4 - 5/10/21

docs/layer-features.md

@@ -142,6 +142,8 @@ You can make almost any value dynamic by using a function in its place, includin
 - tooltip() / tooltipLocked(): **optional**. Functions that return text, which is the tooltip for the node when the layer is unlocked or locked, respectively. By default the tooltips behave the same as in the original Prestige Tree.
     If the value is "", the tooltip will be disabled.
 
+- marked: **optional** Adds a mark to the corner of the node. If it's "true" it will be a star, but it can also be an image URL.
+
 ## Other features
 
 - doReset(resettingLayer): **optional**. Is triggered when a layer on a row greater than or equal to this one does a reset. The default behavior is to reset everything on the row, but only if it was triggered by a layer in a higher row. `doReset` is always called for side layers, but for these the default behavior is to reset nothing.

js/Demo/demoLayers.js

@@ -6,6 +6,7 @@ addLayer("c", {
         name: "Candies", // This is optional, only used in a few places, If absent it just uses the layer id.
         symbol: "C", // This appears on the layer's node. Default is the id with the first letter capitalized
         position: 0, // Horizontal position within a row. By default it uses the layer id and sorts in alphabetical order
+        marked: "discord.png",
         startData() { return {
             unlocked: true,
 			points: new Decimal(0),
@@ -426,6 +427,7 @@ addLayer("f", {
     canReset() {
         return tmp[this.layer].baseAmount.gte(tmp[this.layer].nextAt)
     },
+
     // This is also non minimal, a Clickable!
     clickables: {
 

js/components.js

@@ -524,7 +524,7 @@ function loadVue() {
 	})
 
 	// SYSTEM COMPONENTS
-
+	Vue.component('node-mark', systemComponents['node-mark'])
 	Vue.component('tab-buttons', systemComponents['tab-buttons'])
 	Vue.component('tree-node', systemComponents['tree-node'])
 	Vue.component('layer-tab', systemComponents['layer-tab'])

js/technical/systemComponents.js

@@ -50,6 +50,7 @@ var systemComponents = {
 				tmp[layer].canClick ? (tmp[layer].tooltip ? tmp[layer].tooltip : 'I am a button!')
 				: (tmp[layer].tooltipLocked ? tmp[layer].tooltipLocked : 'I am a button!')
 			)"></tooltip>
+			<node-mark :layer='layer' :data='layers[layer].marked'></node-mark></span>
 		</button>
 		`
 	},
@@ -177,5 +178,16 @@ var systemComponents = {
 		props: ['text'],
 		template: `<div class="tooltip" v-html="text"></div>
 		`
+	},
+
+	'node-mark': {
+		props: ['layer', 'data'],
+		template: `<div v-if='data'>
+			<div v-if='data === true' class='star' style='position: absolute; left: -10px; top: -10px;'></div>
+			<img v-else class='mark' style='position: absolute; left: -25px; top: -10px;' v-bind:src="data"></div>
+		</div>
+		`
 	}
-}
+
+}
+

style.css

@@ -691,3 +691,51 @@ button > * {
 #treeTab td button {
     margin: 0 10px;
 }
+
+.mark {
+	position: relative;
+	display: inline-block;
+	width: 30px;
+	height: 30px;
+	z-index: 10000;
+	margin-left: 0.9em;
+	margin-right: 0.9em;
+	margin-bottom: 1.2em;
+	border-right: 0.3em solid transparent;
+	border-bottom: 0.7em solid transparent;
+	border-left: 0.3em solid transparent;
+	font-size: 10px;
+	overflow:auto
+}
+
+.star {
+	position: relative;
+	display: inline-block;
+	width: 0;
+	height: 0;
+	z-index: 10000;
+	margin-left: 0.9em;
+	margin-right: 0.9em;
+	margin-bottom: 1.2em;
+	border-right: 0.3em solid transparent;
+	border-bottom: 0.7em solid #ffcc00;
+	border-left: 0.3em solid transparent;
+	font-size: 10px;
+}
+
+.star:before, .star:after {
+	content: "";
+    width: 0;
+    height: 0;
+    position: absolute;
+    top: .6em;
+    left: -1em;
+	border-right: 1em solid transparent;
+    border-bottom: 0.7em solid #ffcc00;
+    border-left: 1em solid transparent;
+	transform: rotate(-35deg);
+}
+
+.star:after {
+	transform: rotate(35deg);
+}