Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-09-20 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

improve new ui sidebar

Browse Source
This commit is contained in:
Omsi 2021-08-15 17:29:37 -07:00
parent efbb77b82f
commit 6fbcde430d
13 changed files with 100 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -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>

1
javascripts/components/game-ui.js
View File

@ -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>`
});

1
javascripts/components/new-ui/new-ui.js
View File

@ -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">

71
javascripts/components/new-ui/sidebar-resources/sidebar-currency.js Normal file
View File

@ -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">
<div 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>
</div>
<div 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>
</div>
</template>
<div 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>
</div>
<div 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>
</div>
<template v-else>
<h2 class="o-sidebar-currency--antimatter">
{{ format(AM, 2) }}
</h2>
<div class="resource-information">
<span class="resource-name">Antimatter</span>
</div>
</template>
</div>`
});

33
javascripts/components/new-ui/sidebar-resources/sidebar-rm.js
View File

@ -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>`
});

4
javascripts/components/new-ui/sidebar.js
View File

@ -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"

4
javascripts/components/new-ui/tab-button.js
View File

@ -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"

30
stylesheets/new-ui-styles.css
View File

@ -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,19 @@ body.t-s9 {
font-size: 0.8em;
}
.t-dark #antimatter {animation: a-game-header__antimatter--glow 25s infinite;}
.o-sidebar-infinity-button { color: var(--color-infinity) }
.o-sidebar-eternity-button { color: var(--color-eternity) }
.resource .o-sidebar-reality-button { color: var(--color-reality) }
.o-sidebar-currency--antimatter {color: black;}
.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 {
@ -232,11 +241,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;
height: 3.9rem;;
}
.c-news-line {
@ -829,7 +837,7 @@ body.t-s9 {
color: var(--color-eternity);
}
.c-game-header__antimatter {
.t-normal .c-game-header__antimatter {
color: var(--color-accent);
}

1
stylesheets/theme-Inverted Metro.css
View File

@ -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%);
}

1
stylesheets/theme-Inverted.css
View File

@ -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%);
}

1
stylesheets/theme-S2.css
View File

@ -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%);
}

1
stylesheets/theme-S3.css
View File

@ -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;
}

3
stylesheets/theme-S5.css
View File

@ -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%);
}