From 919da6c953f42df2f5ae566113ee25271736183b Mon Sep 17 00:00:00 2001
From: Harley White <acamaeda@gmail.com>
Date: Tue, 11 May 2021 22:29:05 -0400
Subject: [PATCH] Added non-whole numbers to mainDisplay

---
 changelog.md               | 3 +++
 docs/custom-tab-layouts.md | 2 +-
 js/Demo/demoLayers.js      | 2 +-
 js/components.js           | 4 ++--
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/changelog.md b/changelog.md
index e9fc24f..009d923 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,8 @@
 # The Modding Tree changelog:
 
+- Added grids! Description not ready
+- Added the ability to display non-whole numbers in main-display.
+
 # v2.5.4 - 5/10/21
 - Added a setting to always use single-tab mode.
 - Added directMult, which multiplies prestige gain after exponents and softcaps. It actually multiplies gain for static layers.
diff --git a/docs/custom-tab-layouts.md b/docs/custom-tab-layouts.md
index 44d041a..ededc59 100644
--- a/docs/custom-tab-layouts.md
+++ b/docs/custom-tab-layouts.md
@@ -35,7 +35,7 @@ These are the existing components, but you can create more in [components.js](/j
 
 - column: Display a list of components vertically. The argument is an array of components in the tab layout format. This is useful to display columns within a row.
 
-- main-display: The text that displays the main currency for the layer and its effects.
+- main-display: The text that displays the main currency for the layer and its effects. The argument is the amount of precision to use, allowing it to display non-whole numbers.
 
 - 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).
 
diff --git a/js/Demo/demoLayers.js b/js/Demo/demoLayers.js
index 5ed7a6e..599ac83 100644
--- a/js/Demo/demoLayers.js
+++ b/js/Demo/demoLayers.js
@@ -544,7 +544,7 @@ addLayer("a", {
                 player[this.layer].grid[id]++
             },
             getTitle(data, id) {
-                return "#" + id
+                return "Gridable #" + id
             },
             getDisplay(data, id) {
                 return data 
diff --git a/js/components.js b/js/components.js
index f65224d..a60f9de 100644
--- a/js/components.js
+++ b/js/components.js
@@ -217,9 +217,9 @@ function loadVue() {
 
 	// Displays the main resource for the layer
 	Vue.component('main-display', {
-		props: ['layer'],
+		props: ['layer', 'data'],
 		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="layers[layer].effectDescription">, <span v-html="run(layers[layer].effectDescription, layers[layer])"></span></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}">{{data ? format(player[layer].points, data) : formatWhole(player[layer].points)}}</h2> {{tmp[layer].resource}}<span v-if="layers[layer].effectDescription">, <span v-html="run(layers[layer].effectDescription, layers[layer])"></span></span><br><br></div>
 		`
 	})