From 759be4448d897215dda989a09145d624ca40d1f6 Mon Sep 17 00:00:00 2001
From: Harley White <acamaeda@gmail.com>
Date: Mon, 3 May 2021 14:50:13 -0400
Subject: [PATCH] Fixed milestone spacing issues.

---
 changelog.md     | 1 +
 js/components.js | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/changelog.md b/changelog.md
index c6eb71b..4423dfb 100644
--- a/changelog.md
+++ b/changelog.md
@@ -5,6 +5,7 @@
 - Layer nodes will be highlighted even if the player is on the same tab.
 - Added buyable purchaseLimit.
 - Amount is automatically supplied to buyable cost and effect functions.
+- Locked (not yet visible) milestones no longer take up space. Also fixed hidden milestones taking a tiny bit of space.
 - Re-centered respec buttons.
 
 # v2.4.1 - 4/29/21
diff --git a/js/components.js b/js/components.js
index 6f7cb21..d952505 100644
--- a/js/components.js
+++ b/js/components.js
@@ -176,9 +176,9 @@ function loadVue() {
 		template: `
 		<div v-if="tmp[layer].milestones">
 			<table>
-				<tr v-for="id in Object.keys(tmp[layer].milestones)"><div v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)"
+				<tr v-for="id in Object.keys(tmp[layer].milestones)" v-if="tmp[layer].milestones[id]!== undefined && tmp[layer].milestones[id].unlocked && milestoneShown(layer, id)">
 					<milestone :layer = "layer" :data = "id" v-bind:style="tmp[layer].componentStyles.milestone"></milestone>
-				</tr></div>
+				</tr>
 			</table>
 			<br>
 		</div>
@@ -189,7 +189,7 @@ function loadVue() {
 	Vue.component('milestone', {
 		props: ['layer', 'data'],
 		template: `
-		<td v-if="tmp[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data)" v-bind:style="[(!tmp[layer].milestones[data].unlocked) ? {'visibility': 'hidden'} : {}, tmp[layer].milestones[data].style]" v-bind:class="{milestone: !hasMilestone(layer, data), milestoneDone: hasMilestone(layer, data)}">
+		<td v-if="tmp[layer].milestones && tmp[layer].milestones[data]!== undefined && milestoneShown(layer, data) && tmp[layer].milestones[data].unlocked" v-bind:style="[tmp[layer].milestones[data].style]" v-bind:class="{milestone: !hasMilestone(layer, data), milestoneDone: hasMilestone(layer, data)}">
 			<h3 v-html="tmp[layer].milestones[data].requirementDescription"></h3><br>
 			<span v-html="run(layers[layer].milestones[data].effectDescription, layers[layer].milestones[data])"></span><br>
 		<span v-if="(tmp[layer].milestones[data].toggles)&&(hasMilestone(layer, data))" v-for="toggle in tmp[layer].milestones[data].toggles"><toggle :layer= "layer" :data= "toggle" v-bind:style="tmp[layer].componentStyles.toggle"></toggle>&nbsp;</span></td></tr>