From c76f6c76f6398a22d9a50fadaa44c3ba253fa5b1 Mon Sep 17 00:00:00 2001
From: IvarK <ivarkera@gmail.com>
Date: Sat, 31 Aug 2019 22:43:24 +0300
Subject: [PATCH] laitela UI changes for momsi

---
 .../celestials/subtabs/laitela-tab.js         | 47 ++++++++++++-------
 stylesheets/styles.css                        | 42 +++++++++++++++--
 2 files changed, 68 insertions(+), 21 deletions(-)

diff --git a/javascripts/components/celestials/subtabs/laitela-tab.js b/javascripts/components/celestials/subtabs/laitela-tab.js
index add1944bb..7cad9e02f 100644
--- a/javascripts/components/celestials/subtabs/laitela-tab.js
+++ b/javascripts/components/celestials/subtabs/laitela-tab.js
@@ -61,22 +61,6 @@ Vue.component("laitela-tab", {
   },
   template:
     `<div class="l-laitela-celestial-tab">
-      <button class="o-laitela-run-button" @click="startRun">
-        <b>Start Lai'tela's Reality</b>
-        <div class="o-laitela-run-button__icon">ᛝ</div>
-        Tickspeed is disabled and all dimension multipliers are decreased based on matter, 
-        currently <b>x^{{ shorten(dimMultNerf, 3, 4) }}</b>
-        <br>
-        Multiply all dark matter dimensions based on highest AM reached, 
-        Currently: <b>{{ shorten(realityReward, 2, 3)}}x</b>
-      </button>
-      <button class="c-laitela-annihilation-button" @click="annihilate()" v-if="showReset">
-        <h2>Annihilation</h2>
-        <p>
-          Resets your dark matter dimensions and Dark Matter, but gain <b>{{ shorten(higgsGain, 2, 0) }}</b> 
-          Higgs {{"Boson" | pluralize(higgsGain)}}
-        </p>
-      </button>
       <div class="o-laitela-matter-amount">You have {{ shorten(matter, 2, 0) }} Dark Matter</div>
       <div v-if="annihilated">You have {{ shorten(higgs, 2, 0)}} Higgs {{"Boson" | pluralize(higgs)}}</div>
       <div v-if="higgs.gt(0)">Which cause you to have a {{ (darkEnergyChance * 100).toFixed(2) }}% chance of generating dark energy each dimension interval</div>
@@ -102,5 +86,36 @@ Vue.component("laitela-tab", {
           </button>
         </div>
       </div>
+      <div class="l-laitela-mechanics-lower">
+        <div class="l-laitela-buttons-container">
+          <button class="o-laitela-run-button" @click="startRun">
+            <b>Start Lai'tela's Reality</b>
+            <div class="o-laitela-run-button__icon">ᛝ</div>
+            Tickspeed is disabled and all dimension multipliers are decreased based on matter, 
+            currently <b>x^{{ shorten(dimMultNerf, 3, 4) }}</b>
+            <br>
+            Multiply all dark matter dimensions based on highest AM reached, 
+            Currently: <b>{{ shorten(realityReward, 2, 3)}}x</b>
+          </button>
+          <button class="c-laitela-annihilation-button" @click="annihilate()" v-if="showReset">
+            <h2>Annihilation</h2>
+            <p>
+              Resets your dark matter dimensions and Dark Matter, but gain <b>{{ shorten(higgsGain, 2, 0) }}</b> 
+              Higgs {{"Boson" | pluralize(higgsGain)}}
+            </p>
+          </button>
+        </div>
+        <div class="l-laitela-dark-energy-upgrades">
+          <button 
+            v-for="upgrade in upgrades" 
+            :key="upgrade.id" 
+            class="o-laitela-shop-button--dark-energy"
+            :class="{'o-laitela-shop-button--available': upgrade.canBeBought }"
+            @click="upgrade.purchase()"> 
+              {{ upgrade.description }} <br/> Costs: <b>{{ shorten(upgrade.cost, 2, 0) }}</b> Higgs Bosons 
+              <br/>Currently: {{ upgrade.formattedEffect }}, Next: {{ upgrade.formattedNextEffect }}
+          </button>
+        </div>
+      </div>
     </div>`
 });
\ No newline at end of file
diff --git a/stylesheets/styles.css b/stylesheets/styles.css
index bd0a00406..b541df3dc 100644
--- a/stylesheets/styles.css
+++ b/stylesheets/styles.css
@@ -6274,7 +6274,7 @@ kbd {
 /* #startregion laitela tab*/
 
 .o-laitela-run-button {
-  width: 25rem;
+  width: 50%;
   padding: 2rem;
   border-radius: .5rem;
   border: .2rem solid black;
@@ -6282,7 +6282,6 @@ kbd {
   font-family: Typewriter;
   font-size: 1.2rem;
   cursor: pointer;
-  margin-bottom: 2rem;
 }
 
 .o-laitela-matter-amount {
@@ -6334,6 +6333,22 @@ kbd {
   justify-content: center;
 }
 
+.l-laitela-mechanics-lower {
+  display: flex;
+  justify-content: center;
+}
+
+.l-laitela-buttons-container {
+  display: flex;
+  width: 52rem;
+}
+
+.l-laitela-dark-energy-upgrades {
+  width: 52rem;
+  display: flex;
+  flex-wrap: wrap;
+}
+
 .o-laitela-shop-button {
   width: 22rem;
   padding: 1rem;
@@ -6343,7 +6358,25 @@ kbd {
   margin-left: 1rem;
   margin-bottom: 2rem;
   font-family: Typewriter;
-  min-height: 15rem;
+  min-height: 17.8rem;
+}
+
+@keyframes darkEnergyGlow {
+  0% { box-shadow: 0px 0px 0px rgb(53, 10, 53); }
+  50% { box-shadow: 0px 0px 5px rgb(53, 10, 53); }
+  100% { box-shadow: 0px 0px 0px rgb(53, 10, 53); }
+}
+
+.o-laitela-shop-button--dark-energy {
+  width: 22rem;
+  padding: 1rem;
+  background: white;
+  border: .2rem solid black;
+  border-radius: .5rem;
+  margin-left: 1rem;
+  margin-bottom: 2rem;
+  font-family: Typewriter;
+  animation: 5s darkEnergyGlow infinite;
 }
 
 .o-laitela-shop-button--available {
@@ -6393,12 +6426,11 @@ kbd {
 
 .c-laitela-annihilation-button {
   padding: 2rem;
-  width: 30rem;
+  width: 50%;
   background: white;
   border: .2rem solid black;
   border-radius: .5rem;
   font-family: Typewriter, serif;
-  margin: 2rem auto;
   cursor: pointer;
   transition-duration: 0.3s;
   display: block