Merge pull request #1759 from IvarK/omsi_sidebar

Fix sidebar issues

index.html

@@ -449,7 +449,7 @@
 <script type="text/javascript" src="javascripts/components/new-ui/time-dimensions-tab/new-time-dimension-row.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/time-dimensions-tab/new-time-dimensions-tab.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-galaxy-row.js"></script>
-<script type="text/javascript" src="javascripts/components/new-ui/sidebar-resources/sidebar-rm.js"></script>
+<script type="text/javascript" src="javascripts/components/new-ui/sidebar-resources/sidebar-currency.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/new-ui.js"></script>
 
 <script type="text/javascript" src="javascripts/components/common/news-ticker.js"></script>

javascripts/components/game-ui.js

@@ -33,5 +33,6 @@ Vue.component("game-ui", {
       </div>
       <div id="notification-container" class="l-notification-container" />
       <tt-shop v-if="view.subtab === 'studies'" class="l-time-studies-tab__tt-shop" />
+      <sidebar v-if="view.newUI" />
     </div>`
 });

javascripts/components/new-ui/new-ui.js

@@ -96,7 +96,6 @@ Vue.component("new-ui", {
   template: `
     <div id="page">
       <link rel="stylesheet" type="text/css" href="stylesheets/new-ui-styles.css">
-      <sidebar />
       <div class="game-container" :style="topMargin">
         <news-ticker v-if="news" />
         <div v-if="bigCrunch" class="l-new-ui-big-crunch__container">

javascripts/components/new-ui/sidebar-resources/sidebar-currency.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Vue.component("sidebar-currency", {
+  data() {
+    return {
+      AM: new Decimal(0),
+      IP: new Decimal(0),
+      EP: new Decimal(0),
+      RM: new Decimal(0),
+      IM: 0,
+      showIP: false,
+      showEP: false,
+      showRM: false,
+    };
+  },
+  methods: {
+    update() {
+      this.AM.copyFrom(Currency.antimatter.value);
+      this.IP.copyFrom(Currency.infinityPoints.value);
+      this.EP.copyFrom(Currency.eternityPoints.value);
+      this.RM.copyFrom(Currency.realityMachines);
+      this.IM = Currency.imaginaryMachines.value;
+      this.showIP = PlayerProgress.infinityUnlocked();
+      this.showEP = PlayerProgress.eternityUnlocked();
+      this.showRM = PlayerProgress.realityUnlocked();
+    }
+  },
+  template: `
+    <div class="resource">
+      <template v-if="showRM">
+        <template v-if="IM === 0">
+          <h2 class="o-sidebar-currency--reality">{{ format(RM, 2) }}</h2>
+          <div class="resource-information">
+            <span class="resource-name">Reality {{ "Machine" | pluralize(RM) }}</span>
+          </div>
+        </template>
+        <template v-else>
+          <h3 class="o-sidebar-currency--reality">
+            {{ format(RM, 2) }}<br> + {{ format(IM, 2) }}i
+          </h3>
+          <div class="resource-information">
+            <span class="resource-name">Machines</span>
+          </div>
+        </template>
+      </template>
+      <template v-else-if="showEP">
+        <h2 class="o-sidebar-currency--eternity">
+          {{ format(EP, 2) }}
+        </h2>
+        <div class="resource-information">
+          <span class="resource-name">Eternity {{ "Point" | pluralize(EP) }}</span>
+        </div>
+      </template>
+      <template v-else-if="showIP">
+        <h2 class="o-sidebar-currency--infinity">
+          {{ format(IP, 2) }}
+        </h2>
+        <div class="resource-information">
+          <span class="resource-name">Infinity {{ "Point" | pluralize(IP) }}</span>
+        </div>
+      </template>
+      <template v-else>
+        <h2 class="o-sidebar-currency--antimatter">
+          {{ format(AM, 2, 1) }}
+        </h2>
+        <div class="resource-information">
+          <span class="resource-name">Antimatter</span>
+        </div>
+      </template>
+    </div>`
+});

javascripts/components/new-ui/sidebar-resources/sidebar-rm.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Vue.component("sidebar-rm", {
-  data() {
-    return {
-      rm: new Decimal(0),
-      im: 0,
-    };
-  },
-  methods: {
-    update() {
-      this.rm.copyFrom(Currency.realityMachines);
-      this.im = Currency.imaginaryMachines.value;
-    }
-  },
-  template: `
-    <div class="resource">
-      <div v-if="im === 0">
-        <h2 class="o-sidebar-reality-button">{{ format(rm, 2) }}</h2>
-        <div class="resource-information">
-          <span class="resource-name">Reality {{ "Machine" | pluralize(rm) }}</span>
-        </div>
-      </div>
-      <div v-else>
-        <h3 class="o-sidebar-reality-button">
-          {{ format(rm, 2) }}<br> + {{ format(im, 2) }}i
-        </h3>
-        <div class="resource-information">
-          <span class="resource-name">Machines</span>
-        </div>
-      </div>
-    </div>`
-});

javascripts/components/new-ui/sidebar.js

@@ -3,13 +3,11 @@
 Vue.component("sidebar", {
   data() {
     return {
-      RMVisible: false,
       newsEnabled: false
     };
   },
   methods: {
     update() {
-      this.RMVisible = PlayerProgress.realityUnlocked();
       this.newsEnabled = player.options.news.enabled;
     }
   },
@@ -29,7 +27,7 @@ Vue.component("sidebar", {
   },
   template: `
     <div class="sidebar">
-      <sidebar-rm v-if="RMVisible" />
+      <sidebar-currency />
       <tab-button
         v-for="tab in tabs"
         :key="tab.name"

javascripts/components/new-ui/tab-button.js

@@ -31,15 +31,13 @@ Vue.component("tab-button", {
     }
   },
   template: `
-    <div v-if="!isHidden" :class="[classObject, tab.config.UIClass]">
+    <div v-if="!isHidden && isAvailable" :class="[classObject, tab.config.UIClass]">
       <div
-        v-if="isAvailable"
         class="l-tab-btn-inner"
         @click="tab.show(true)"
       >
         {{ tab.name }} <i v-if="hasNotification" class="fas fa-exclamation"></i>
       </div>
-      <div v-else class="l-tab-btn-inner">???</div>
       <div class="subtabs" v-if="showSubtabs">
         <div
           v-for="(subtab, index) in tab.subtabs"

stylesheets/new-ui-styles.css

@@ -46,8 +46,8 @@ body.t-s9 {
   display: flex;
   flex-direction: column;
   width: 12rem;
-  margin-top: 3.9rem;
   position: fixed;
+  left: 0;
   z-index: 5;
 }
 
@@ -63,6 +63,8 @@ body.t-s9 {
   width: 12rem;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   background-color: var(--color-base);
   border-right: 0.1rem solid var(--color-accent);
   border-bottom: 0.1rem solid var(--color-accent);
@@ -71,10 +73,8 @@ body.t-s9 {
 
 .resource h2 {
   margin: 0;
-  color: var(--color-accent);
   font-size: 1.7em;
   z-index: 1;
-  text-align: left;
 }
 
 .t-dark .resource h2,
@@ -100,10 +100,34 @@ body.t-s9 {
   font-size: 0.8em;
 }
 
-.t-dark #antimatter {animation: a-game-header__antimatter--glow 25s infinite;}
+.o-sidebar-currency--antimatter {
-.o-sidebar-infinity-button  { color: var(--color-infinity) }
+  color: black;
-.o-sidebar-eternity-button  { color: var(--color-eternity) }
+}
-.resource .o-sidebar-reality-button { color: var(--color-reality) }
+
+.t-normal .o-sidebar-currency--antimatter {
+  color: var(--color-accent);
+}
+
+.t-dark .o-sidebar-currency--antimatter,
+.t-s6 .o-sidebar-currency--antimatter {
+  animation: a-game-header__antimatter--glow 25s infinite;
+}
+
+.t-dark-metro .o-sidebar-currency--antimatter {
+  color: #e0e0e0;
+}
+
+.o-sidebar-currency--infinity  {
+  color: var(--color-infinity)
+}
+
+.o-sidebar-currency--eternity  {
+  color: var(--color-eternity)
+}
+
+.o-sidebar-currency--reality {
+  color: var(--color-reality)
+}
 
 .resource-infinity-canreset,
 .resource-eternity-canreset {
@@ -133,6 +157,10 @@ body.t-s9 {
   transition-delay: 0.2s;
 }
 
+.o-tab-btn:hover {
+  z-index: 1;
+}
+
 .sidebar > .o-tab-btn {
   border-left: none;
 }
@@ -156,8 +184,8 @@ body.t-s9 {
 .o-tab-btn::after {
   content: '';
   position: absolute;
-  left: 100%;
+  left: calc(100% + 0.1rem);
-  top: -2%;
+  top: calc(0% + -0.1rem);
   width: 0;
   height: 0;
   border-bottom: 2.3rem solid transparent;
@@ -169,7 +197,7 @@ body.t-s9 {
 }
 
 .o-tab-btn--subtabs:hover::after {
-  border-left-width: 2.3rem;
+  border-left-width: 2.2rem;
 }
 
 .o-tab-btn--infinity::after {
@@ -232,11 +260,10 @@ body.t-s9 {
 }
 
 .c-news-ticker {
-  width: calc(100% + 12rem);
+  width: 100%;
   border-bottom: 0.1rem solid var(--color-accent);
   padding: 0.8rem 0;
   height: 3.9rem;
-  margin-left: -12rem;
 }
 
 .c-news-line {
@@ -251,8 +278,7 @@ body.t-s9 {
   top: -0.6rem;
   left: 12rem;
   z-index: 4;
-  transition-duration: 0.15s;
+  transition: pointer-events 0s linear 0s, all 0.15s linear 0.2s;
-  transition-delay: 0.2s;
   padding: 0.5rem;
   padding-left: 0;
 }
@@ -829,7 +855,7 @@ body.t-s9 {
   color: var(--color-eternity);
 }
 
-.c-game-header__antimatter {
+.t-normal .c-game-header__antimatter {
   color: var(--color-accent);
 }
 

stylesheets/theme-Inverted Metro.css

@@ -7,6 +7,7 @@ body.t-inverted-metro {
 .t-inverted-metro .l-notification-container,
 .t-inverted-metro .c-modal,
 .t-inverted-metro #TTbuttons,
+.t-inverted-metro .sidebar,
 .t-inverted-metro .c-glyph-tooltip {
   filter: invert(100%);
 }

stylesheets/theme-Inverted.css

@@ -7,6 +7,7 @@ body.t-inverted {
 .t-inverted .l-notification-container,
 .t-inverted .c-modal,
 .t-inverted #TTbuttons,
+.t-inverted .sidebar,
 .t-inverted .c-glyph-tooltip {
   filter: invert(100%);
 }

stylesheets/theme-S2.css

@@ -18,6 +18,7 @@ body {
 .t-s2 .l-notification-container,
 .t-s2 .c-modal,
 .t-s2 #TTbuttons,
+.t-s2 .sidebar,
 .t-s2 .c-glyph-tooltip {
     filter: sepia(100%) hue-rotate(180deg) saturate(250%);
 }

stylesheets/theme-S3.css

@@ -7,6 +7,7 @@ body {
 .t-s3 .l-notification-container,
 .t-s3 .c-modal,
 .t-s3 #TTbuttons,
+.t-s3 .sidebar,
 .t-s3 .c-glyph-tooltip {
     animation: glasses 7s infinite;
 }

stylesheets/theme-S5.css

@@ -15,6 +15,7 @@ body.t-s5 {
 .t-s5 #page,
 .t-s5 .l-notification-container,
 .t-s5 .c-modal,
-.t-s5 #TTbuttons {
+.t-s5 #TTbuttons,
+.t-s5 .sidebar {
   filter: sepia(100%) hue-rotate(0deg) saturate(100%);
 }