more new ui stuff

2024-11-10 06:02:13 +00:00 · 2019-05-07 23:31:40 +03:00 · 2019-05-07 23:31:40 +03:00 · e55269489c
commit e55269489c
parent c41030e79c
15 changed files with 377 additions and 55 deletions
--- a/index.html
+++ b/index.html
@ -16,7 +16,7 @@
    <link rel="stylesheet" type="text/css" href="stylesheets/tooltips.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/vis.css">
    <link rel="stylesheet" type="text/css" href="stylesheets/tln.css">
-    <link rel="stylesheet" type="text/css" href="stylesheets/new-ui-styles.css">
+    <link id="new-ui" rel="stylesheet" type="text/css" href="stylesheets/new-ui-styles.css">
    <script>
        (function(i, s, o, g, r, a, m) {
            i['GoogleAnalyticsObject'] = r;
@ -39,8 +39,8 @@
 <div id="snow" style="display: none; "></div>
 <body>
 <div id="ui" style="height: 100%; width: 100%">
-    <new-ui></new-ui>
-    <div id="container" class="container" style="display:none; flex-direction: column; min-height: 100%; padding: 9px 15px; box-sizing: border-box;">
+    <new-ui v-show="newUI"></new-ui>
+    <div v-show="!newUI" id="container" class="container" style="display:none; flex-direction: column; min-height: 100%; padding: 9px 15px; box-sizing: border-box;">
        <div id='game' style="flex: 0 0 auto">
            <div id='news'>.</div>
        </div>
@ -625,6 +625,7 @@
 <script type="text/javascript" src="javascripts/components/modals/cloud/modal-cloud-save-conflict.js"></script>

 <script type="text/javascript" src="javascripts/components/new-ui/sidebar.js"></script>
+<script type="text/javascript" src="javascripts/components/new-ui/tab-button.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-dimensions-tab.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-dimension-row.js"></script>
 <script type="text/javascript" src="javascripts/components/new-ui/dimensions-tab/new-tickspeed-row.js"></script>
--- a/javascripts/components/new-ui.js
+++ b/javascripts/components/new-ui.js
@ -8,11 +8,9 @@ Vue.component('new-ui', {
  `<div id="page">
    <sidebar></sidebar>
    <div class="game-container">
-      <div class="quote">I'm gay lol -Boo</div>
-      <game-tab v-show="$viewModel.tabs.current && $viewModel.tabs.current !== 'reality-tab' && $viewModel.tabs.current !== 'dimensions-tab'" style="flex: 1 0">
-        <component :is="$viewModel.tabs.current"></component>
-      </game-tab>
-      <new-dimensions-tab v-if="$viewModel.tabs.current == 'dimensions-tab'"></new-dimensions-tab>
+      <div class="quote"><div id="news">.</div></div>
+      <component :is="$viewModel.page"></component>
    </div>
+    <div id="notification-container" class="l-notification-container"></div>
  </div>`
 })
--- a/javascripts/components/new-ui/dimensions-tab/new-dimension-row.js
+++ b/javascripts/components/new-ui/dimensions-tab/new-dimension-row.js
@ -52,7 +52,7 @@ Vue.component('new-dimension-row', {
      this.isAffordable = dimension.isAffordable;
      this.isAffordableUntil10 = dimension.isAffordableUntil10;
      this.remainingUntil10 = dimension.remainingUntil10
-      this.howManyCanBuy = until_10_setting ? dimension.howManyCanBuy : 1
+      this.howManyCanBuy = until_10_setting ? dimension.howManyCanBuy : Math.min(dimension.howManyCanBuy, 1)
    },
    buy() {
      if (until_10_setting) { // TODO: Buy Until is on
--- a/javascripts/components/new-ui/dimensions-tab/new-dimensions-tab.js
+++ b/javascripts/components/new-ui/dimensions-tab/new-dimensions-tab.js
@ -1,13 +1,28 @@
 Vue.component('new-dimensions-tab', {
  data() {
    return {
-      until_10_setting: true
+      until_10_setting: true,
+      isSacrificeUnlocked: false,
+      isSacrificeAffordable: false,
+      sacrificeBoost: new Decimal(0),
+      options: player.options
    }
  },
+  computed: {
+    sacrificeBoostDisplay() {
+      return this.shortenRateOfChange(this.sacrificeBoost);
+    },
+    sacrificeTooltip() {
+      return `Boosts 8th Dimension by ${this.sacrificeBoostDisplay}x`;
+    },
+  },
  methods: {
    maxAll() {
      maxAll();
    },
+    sacrifice() {
+      sacrificeBtnClick();
+    },
    toggleUntil10() {
      until_10_setting = !until_10_setting
    },
@ -16,12 +31,24 @@ Vue.component('new-dimensions-tab', {
    },
    update() {
      this.until_10_setting = until_10_setting
+      const isSacrificeUnlocked = Sacrifice.isUnlocked && player.resets > 4;
+      this.isSacrificeUnlocked = isSacrificeUnlocked;
+      if (!isSacrificeUnlocked) return;
+      this.isSacrificeAffordable = Sacrifice.isAffordable;
+      this.sacrificeBoost.copyFrom(Sacrifice.nextBoost);
    }
  },
  template:
  `<div>
  <div class="modes-container">
    <button class="storebtn" @click="toggleUntil10" style="width: 100px; height: 30px; padding: 0;">{{ getUntil10Display() }}</button>
+    <primary-button
+        v-show="isSacrificeUnlocked"
+        v-tooltip="sacrificeTooltip"
+        :enabled="isSacrificeAffordable"
+        class="storebtn sacrifice-btn"
+        @click="sacrifice"
+      >Dimensional Sacrifice ({{sacrificeBoostDisplay}}x)</primary-button>
    <button class="storebtn" @click="maxAll" style="width: 100px; height: 30px; padding: 0;">Max All (M)</button>
  </div>
  <new-tickspeed-row></new-tickspeed-row>
--- a/javascripts/components/new-ui/dimensions-tab/new-tickspeed-row.js
+++ b/javascripts/components/new-ui/dimensions-tab/new-tickspeed-row.js
@ -76,7 +76,7 @@ Vue.component('new-tickspeed-row', {
    }
  },
  template:
-  `<div class="tickspeed-container">
+  `<div class="tickspeed-container" v-show="isVisible">
      <div class="tickspeed-labels">
        <span>{{ tickspeedDisplay }}</span>
        <span>{{ multiplierDisplay }}</span>
--- a/javascripts/components/new-ui/sidebar-resources/sidebar-ep.js
+++ b/javascripts/components/new-ui/sidebar-resources/sidebar-ep.js
@ -5,6 +5,9 @@ Vue.component('sidebar-ep', {
      gained: new Decimal(0)
    }
  },
+  props: {
+    cond: Boolean
+  },
  methods: {
    update() {
      this.ep = player.eternityPoints
@ -12,10 +15,12 @@ Vue.component('sidebar-ep', {
  },
  template:`
  <div class="resource">
-    <h2 id="ep">{{ shorten(ep, 2, 0) }}</h2>
-    <div class="resource-information">
-      <span class="resource-name">Eternity Points</span>
-      <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+    <div v-if="cond">
+      <h2 id="ep">{{ shorten(ep, 2, 0) }}</h2>
+      <div class="resource-information">
+        <span class="resource-name">Eternity Points</span>
+        <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+      </div>
    </div>
  </div>`
 })
--- a/javascripts/components/new-ui/sidebar-resources/sidebar-ip.js
+++ b/javascripts/components/new-ui/sidebar-resources/sidebar-ip.js
@ -5,6 +5,9 @@ Vue.component('sidebar-ip', {
      gained: new Decimal(0)
    }
  },
+  props: {
+    cond: Boolean
+  },
  methods: {
    update() {
      this.ip = player.infinityPoints
@ -12,10 +15,12 @@ Vue.component('sidebar-ip', {
  },
  template:`
  <div class="resource">
-    <h2 id="ip">{{ shorten(ip, 2, 0) }}</h2>
-    <div class="resource-information">
-      <span class="resource-name">Infinity Points</span>
-      <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+    <div v-if="cond">
+      <h2 id="ip">{{ shorten(ip, 2, 0) }}</h2>
+      <div class="resource-information">
+        <span class="resource-name">Infinity Points</span>
+        <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+      </div>
    </div>
  </div>`
 })
--- a/javascripts/components/new-ui/sidebar-resources/sidebar-rm.js
+++ b/javascripts/components/new-ui/sidebar-resources/sidebar-rm.js
@ -5,6 +5,9 @@ Vue.component('sidebar-rm', {
      gained: new Decimal(0)
    }
  },
+  props: {
+    cond: Boolean
+  },
  methods: {
    update() {
      this.rm = player.reality.realityMachines
@ -12,10 +15,12 @@ Vue.component('sidebar-rm', {
  },
  template:`
  <div class="resource">
-    <h2 id="rm">{{ shorten(rm, 2, 0) }}</h2>
-    <div class="resource-information">
-      <span class="resource-name">Reality Machines</span>
-      <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+    <div v-if="cond">
+      <h2 id="rm">{{ shorten(rm, 2, 0) }}</h2>
+      <div class="resource-information">
+        <span class="resource-name">Reality Machines</span>
+        <span class="resource-per-second"> +{{ shorten(gained) }}</span>
+      </div>
    </div>
  </div>`
 })
--- a/javascripts/components/new-ui/sidebar.js
+++ b/javascripts/components/new-ui/sidebar.js
@ -1,32 +1,213 @@
+const MAIN_TAB_BUTTONS = [
+  {
+    id: "dimensions",
+    label: "Dimensions",
+    class: "",
+    component: "new-dimensions-tab",
+    condition: () => true,
+    subtabs: [
+      {
+        label: "Ω",
+        component: player.options.newUI ? "new-dimensions-tab" : "normal-dim-tab",
+        condition: () => true
+      },
+      {
+        label: "∞",
+        component: "infinity-dim-tab",
+        condition: () => player.eternities > 0 || player.infDimensionsUnlocked.includes(true),
+      },
+      {
+        label: "Δ",
+        component: "time-dim-tab",
+        condition: () => player.eternities > 0
+      }
+    ]
+  },
+  {
+    id: "challenges",
+    label: "Challenges",
+    class: "",
+    component: "normal-challenges-tab",
+    condition: () => player.infinitied.gt(0),
+    subtabs: [
+      {
+        label: "Ω",
+        component: "normal-challenges-tab",
+        condition: () => player.infinitied.gt(0)
+      },
+      {
+        label: "∞",
+        component: "infinity-challenges-tab",
+        condition: () => (player.challenge.eternity.unlocked !== 0 ||
+        Object.keys(player.eternityChalls).length > 0) ||
+        player.money.gte(new Decimal("1e2000")) ||
+        player.postChallUnlocked > 0,
+      },
+      {
+        label: "Δ",
+        component: "eternity-challenges-tab",
+        condition: () => player.challenge.eternity.unlocked !== 0 ||
+        Object.keys(player.eternityChalls).length > 0
+      }
+    ]
+  },
+  {
+    id: "infinity",
+    label: "Infinity",
+    class: "infinity",
+    component: "infinity-upgrades-tab",
+    condition: () => player.infinitied.gt(0),
+    subtabs: [
+      {
+        label: "U",
+        component: "infinity-upgrades-tab",
+        condition: () => player.infinitied.gt(0)
+      },
+      {
+        label: "A",
+        component: "autobuyers-tab",
+        condition: () => player.infinitied.gt(0)
+      },
+      {
+        label: "B",
+        component: "break-infinity-tab",
+        condition: () => player.infinitied.gt(0)
+      },
+      {
+        label: "R",
+        component: "replicanti-tab",
+        condition: () => player.infinitied.gt(0)
+      }
+    ]
+  },
+  {
+    id: "eternity",
+    label: "Eternity",
+    class: "eternity",
+    component: "eternity-upgrades-tab",
+    condition: () => player.eternities > 0,
+  },
+  {
+    id: "reality",
+    label: "Reality",
+    class: "reality",
+    component: "reality-upgrades-tab",
+    condition: () => player.realities > 0,
+  },
+  {
+    id: "celestials",
+    label: "Celestials",
+    class: "celestials",
+    component: "teresa-tab",
+    condition: () => RealityUpgrades && RealityUpgrades.allBought, // Because RealityUpgrades is defined later
+  },
+  {
+    id: "achievements",
+    label: "Achievements",
+    class: "",
+    component: "normal-achievements-tab",
+    condition: () => player.achievements.size > 0,
+    subtabs: [
+      {
+        label: "A",
+        component: "normal-achievements-tab",
+        condition: () => true
+      },
+      {
+        label: "SA",
+        component: "secret-achievements-tab",
+        condition: () => true
+      }
+    ]
+  },
+  {
+    id: "statistics",
+    label: "Statistics",
+    class: "",
+    component: "statistics-tab",
+    condition: () => player.achievements.size > 1,
+    subtabs: [
+      {
+        label: "S",
+        component: "statistics-tab",
+        condition: () => true
+      },
+      {
+        label: "C",
+        component: "challenge-records-tab",
+        condition: () => player.infinitied.gt(0)
+      },
+      {
+        label: "∞",
+        component: "past-infinities-tab",
+        condition: () => player.infinitied.gt(0),
+      },
+      {
+        label: "Δ",
+        component: "past-eternities-tab",
+        condition: () => player.eternities > 0
+      },
+      {
+        label: "R",
+        component: "past-realities-tab",
+        condition: () => player.realities > 0
+      }
+    ]
+  },
+  {
+    id: "options",
+    label: "Options",
+    class: "",
+    component: "options-tab",
+    condition: () => true,
+  },
+  {
+    id: "shop",
+    label: "Shop",
+    class: "shop",
+    component: "achievements-tab",
+    condition: () => true,
+  }
+]
+
+
+
 Vue.component('sidebar', {
+  data() {
+    return {
+      ipVisible: false,
+      epVisible: false,
+      rmVisible: false
+    }
+  },
  methods: {
    switchTo(tab) {
      showTab(tab)
+    },
+    update() {
+      this.ipVisible = player.infinitied.gt(0)
+      this.epVisible = player.eternities > 0
+      this.rmVisible = player.realities > 0
+    }
+  },
+  computed: {
+    tabs() {
+      return MAIN_TAB_BUTTONS
    }
  },
  template:
  `<div class="sidebar">
    <div class="resource-container">
      <sidebar-am></sidebar-am>
-      <sidebar-ip></sidebar-ip>
-      <sidebar-ep></sidebar-ep>
-      <sidebar-rm></sidebar-rm>
+      <sidebar-ip :cond="ipVisible"></sidebar-ip>
+      <sidebar-ep :cond="epVisible"></sidebar-ep>
+      <sidebar-rm :cond="rmVisible"></sidebar-rm>
    </div>
    <div class="tab-buttons">
-      <div class="tab-button active" @click="switchTo('dimensions')"><h3>Dimensions</h3></div>
-      <div class="tab-button" @click="switchTo('achievements')"><h3>Achievements</h3></div>
-      <div class="tab-button" @click="switchTo('options')"><h3>Options</h3></div>
-      <div class="tab-button" @click="switchTo('challenges')"><h3>Challenges</h3></div>
-      <div class="tab-button infinity" @click="switchTo('infinity')"><h3>Infinity</h3></div>
-      <div class="tab-button eternity" @click="switchTo('eternity')"><h3>Eternity</h3></div>
-      <div class="tab-button" @click="switchTo('reality')"><h3>Reality</h3></div>
-      <div class="tab-button" @click="switchTo('celestials')"><h3>Celestials</h3></div>
-      <div class="tab-button shop" @click="switchTo('shop')"><h3>Shop</h3></div>
-      <div class="subtabs">
-        <div class="subtab active">Ω</div>
-        <div class="subtab">∞</div>
-        <div class="subtab">Δ</div>
-      </div>
+      <tab-button 
+        v-for="tab in tabs"
+        :key="tab.id"
+        :tab="tab"></tab-button>
    </div>
  </div>`
 })
--- a/javascripts/components/new-ui/tab-button.js
+++ b/javascripts/components/new-ui/tab-button.js
@ -0,0 +1,38 @@
+Vue.component('tab-button', {
+  data() {
+    return {
+      visible: false,
+      subtabVisibilities: []
+    }
+  },
+  props: {
+    tab: Object
+  },
+  methods: {
+    changeTab(tab) {
+      this.$viewModel.page = tab
+    },
+    update() {
+      this.visible = this.tab.condition()
+      if (this.tab.subtabs) this.subtabVisibilities = this.tab.subtabs.map(x => x.condition())
+    }
+  },
+  template:
+  `<div class="tab-button" :class="tab.class">
+    <div 
+      @click="changeTab(tab.component)"
+      v-if="visible"
+      class="tab-button-inner">
+      <h3>{{ tab.label }}</h3>
+    </div>
+    <div v-else class="tab-button-inner"><h3>???</h3></div>
+    <div class="subtabs" v-if="visible && subtabVisibilities.filter(x => x).length > 1">
+      <div v-for="(subtab, index) in tab.subtabs">
+        <div 
+          v-if="subtabVisibilities[index]"
+          class="subtab"
+          @click="changeTab(subtab.component)">{{ subtab.label }}</div>
+      </div>
+    </div>
+  </div>`
+})
--- a/javascripts/core/app/ui.init.js
+++ b/javascripts/core/app/ui.init.js
@ -1,5 +1,6 @@
 "use strict";

+
 let ui = {
  view: {
    modal: {
@ -48,6 +49,8 @@ let ui = {
    scrollWindow: 0,
    draggingUIID: -1,
    currentContextMenu: null,
+    page: player.options.newUI ? "new-dimensions-tab" : "normal-dim-tab",
+    newUI: player.options.newUI
  },
  notationName: "",
 };
--- a/javascripts/core/app/ui.js
+++ b/javascripts/core/app/ui.js
@ -146,6 +146,9 @@ ui = new Vue({
    },
    scrollWindow() {
      return this.view.scrollWindow;
+    },
+    newUI() {
+      return this.view.newUI;
    }
  },
  methods: {
@ -155,7 +158,7 @@ ui = new Vue({
        window.scrollBy(0, this.view.scrollWindow * (now - t) / 2);
        setTimeout(() => this.scroll(now), 20);
      }
-    },
+    }
  },
  watch: {
    currentGlyphTooltip(newVal) {
--- a/javascripts/core/player.js
+++ b/javascripts/core/player.js
@ -461,6 +461,7 @@ let player = {
    theme: "Normal",
    commas: true,
    updateRate: 50,
+    newUI: true,
    chart: {
      updateRate: 1000,
      duration: 10,
--- a/stylesheets/new-ui-styles.css
+++ b/stylesheets/new-ui-styles.css
@ -39,11 +39,11 @@ body {
 }

 .sidebar {
-  width: 250px;
+  min-width: 200px;
 }

 .resource {
-  height: 58px;
+  height: 60px;
  display: flex;
  flex-direction: column;
  background-color: var(--color-dark);
@ -86,21 +86,35 @@ body {
 #ip { color: #B67F33 }
 #ep { color: #B341E0 }

-.tab-buttons {
-  position: relative;
-}
-
 .tab-button {
-  height: 52px;
-  display: flex;
-  flex-direction: column;
+  height: 46px;
  background-color: var(--color-dark);
  border-right: 1px solid var(--color-accent-2);
  border-bottom: 1px solid var(--color-accent-2);
-  justify-content: center;
-  align-items: center;
  color: white;
  font-size: 1.6em;
+  position: relative;
+  transition-duration: 0.12s;
+}
+
+.tab-button-inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.tab-button:hover {
+  background-color: rgb(74, 70, 84);
+}
+
+.tab-button:hover .subtabs {
+  opacity: 1;
+  pointer-events: all;
+  transition-delay: 0s;
 }

 .tab-button h3 {
@ -124,12 +138,25 @@ body {
  color: #B341E0;
 }

+.tab-button.reality h3 {
+  color: #0b600e;
+}
+
+.tab-button.celestials {
+  background-color: #5151ec;
+}
+
+.tab-button.celestials h3 {
+  color: #d0d0d0;
+}
+
 .tab-button.shop {
  background-color: #bba11b;
 }

 .game-container {
-  width: 100%
+  width: 100%;
+  overflow-x: hidden;
 }

 .quote {
@ -141,11 +168,19 @@ body {
  padding: 8px 0;
 }

+.quote > #news {
+  color: white;
+}
+
 .subtabs {
+  opacity: 0;
+  pointer-events: none;
  position: absolute;
-  top: -1;
-  right: -52px;
+  top: -1px;
+  right: -53px;
  margin-right: 1px;
+  transition-delay: 0.3s;
+  transition-duration: 0.12s;
 }

 .subtab {
@ -159,6 +194,12 @@ body {
  align-items: center;
  color: white;
  font-size: 1.6em;
+  cursor: pointer;
+  transition-duration: 0.12s;
+}
+
+.subtab:hover {
+  background-color: rgb(74, 70, 84);
 }

 .subtab:not(:first-child) {
@ -220,6 +261,7 @@ body {
  position: relative;
  width: 175px;
  height: 47px;
+  cursor: pointer;
 }

 .storebtn:hover {
@ -228,6 +270,7 @@ body {

 .storebtn-unavailable {
  background: rgba(160, 42, 42, 0.534) !important;
+  cursor: default;
 }

 .button-content {
@ -328,4 +371,10 @@ body {
  background-position: center;
  background-size: cover;
  z-index: 0;
+}
+
+.sacrifice-btn {
+  width: 350px;
+  height: 30px;
+  padding: 0;
 }
--- a/theme-preview.html
+++ b/theme-preview.html
@ -801,6 +801,7 @@
    }
  }
  let current = "Normal";
+  let newUI = true;
  const savedTheme = localStorage.getItem("theme");
  if (savedTheme) {
    setTheme(savedTheme);
@ -825,6 +826,11 @@
    document.getElementById(theme).disabled = false;
  }

+  function toggleNewUI() {
+    document.getElementById("new-ui").disabled = newUI
+    newUI = !newUI
+  }
+
  Array.prototype.nextSiblingIndex = function(current) {
    const currentIndex = this.indexOf(current);
    if (currentIndex === -1)