From a4eca826d991bc1b29fb8b8186038ab7e786e0d2 Mon Sep 17 00:00:00 2001
From: Acamaeda <acamaeda@gmail.com>
Date: Sat, 17 Oct 2020 20:23:39 -0400
Subject: [PATCH] 2.1.1

---
 demo.html                  |  5 +----
 docs/custom-tab-layouts.md |  3 +++
 index.html                 |  5 +----
 js/Demo/demoLayers.js      |  2 +-
 js/v.js                    | 13 +++++++++++++
 5 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/demo.html b/demo.html
index d3381aa..1aabc5c 100644
--- a/demo.html
+++ b/demo.html
@@ -153,11 +153,8 @@
 					<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
 					<div v-if="tmp[layer].type !== 'none'">
 						<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>
-						<span v-if="tmp[layer].type=='normal' && tmp[layer].resetGain.lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp[layer].baseAmt)}} {{tmp[layer].baseResource}}</span>
 					</div>
-					<br><br>
-					<span v-if="player[layer].best != undefined">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
-					<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}<br></span>
+					<resource-display v-bind:style="tmp[layer].componentStyles['resource-display']" :layer="layer"></resource-display>
 					<milestones v-bind:style="tmp[layer].componentStyles.milestones" :layer="layer"></milestones>
 					<div v-if="Array.isArray(tmp[layer].midsection)">
 						<column :layer="layer" :data="tmp[layer].midsection"></column>
diff --git a/docs/custom-tab-layouts.md b/docs/custom-tab-layouts.md
index b13df94..5dd0aa0 100644
--- a/docs/custom-tab-layouts.md
+++ b/docs/custom-tab-layouts.md
@@ -38,6 +38,9 @@ These are the existing components, but you can create more in v.js:
 
 - main-display: The text that displays the main currency for the layer and its effects.
 
+- resource-display: The text that displays the currency that this layer is based on, as well as the best and/or total
+                    values for this layer's prestige currency (if they are put in startData for this layer)
+
 - prestige-button: The argument is a string that the prestige button should say before the amount of
                    currency you will gain. It can also be a function that returns updating text.
 
diff --git a/index.html b/index.html
index 34f519e..416116b 100644
--- a/index.html
+++ b/index.html
@@ -153,11 +153,8 @@
 					<main-display v-bind:style="tmp[layer].componentStyles['main-display']" :layer="layer"></main-display>
 					<div v-if="tmp[layer].type !== 'none'">
 						<prestige-button v-bind:style="tmp[layer].componentStyles['prestige-button']" :layer="layer"></prestige-button>
-						<span v-if="tmp[layer].type=='normal' && tmp[layer].resetGain.lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp[layer].baseAmt)}} {{tmp[layer].baseResource}}</span>
 					</div>
-					<br><br>
-					<span v-if="player[layer].best != undefined">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
-					<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}<br></span>
+					<resource-display v-bind:style="tmp[layer].componentStyles['resource-display']" :layer="layer"></resource-display>
 					<milestones v-bind:style="tmp[layer].componentStyles.milestones" :layer="layer"></milestones>
 					<div v-if="Array.isArray(tmp[layer].midsection)">
 						<column :layer="layer" :data="tmp[layer].midsection"></column>
diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js
index 28e5901..931af7c 100644
--- a/js/Demo/demoLayers.js
+++ b/js/Demo/demoLayers.js
@@ -279,7 +279,7 @@ addLayer("c", {
                 buttonStyle() {return  {'color': 'orange'}},
                 content:
                     ["main-display",
-                    "prestige-button",
+                    "prestige-button", "resource-display",
                     ["blank", "5px"], // Height
                     ["raw-html", function() {return "<button onclick='console.log(`yeet`)'>'HI'</button>"}],
                     ["display-text",
diff --git a/js/v.js b/js/v.js
index 0ce8f96..9364667 100644
--- a/js/v.js
+++ b/js/v.js
@@ -194,6 +194,19 @@ function loadVue() {
 		`
 	})
 
+	// Displays the base resource for the layer, as well as the best and total values for the layer's currency, if tracked
+	Vue.component('resource-display', {
+		props: ['layer'],
+		template: `
+		<div style="margin-top: -13px">
+			<span v-if="tmp[layer].type=='normal' && tmp[layer].resetGain.lt(100) && player[layer].points.lt(1e3)"><br>You have {{formatWhole(tmp[layer].baseAmount)}} {{tmp[layer].baseResource}}</span>
+			<br><br>
+			<span v-if="player[layer].best != undefined">Your best {{tmp[layer].resource}} is {{formatWhole(player[layer].best)}}<br></span>
+			<span v-if="player[layer].total != undefined">You have made a total of {{formatWhole(player[layer].total)}} {{tmp[layer].resource}}<br></span>
+		</div>
+		`
+	})
+
 	// data = button size, in px
 	Vue.component('buyables', {
 		props: ['layer', 'data'],