Add rupg hint text, port themes

This commit is contained in:
Andrei Andreev 2019-03-23 20:35:08 +03:00
parent 8c205ee7ac
commit 1086ce2636
6 changed files with 81 additions and 74 deletions

View File

@ -344,28 +344,28 @@
</div>
</div>
<div id="blackhole" class="realitytab" style="display: none;">
<button id="blackholeunlock" class="l-reality-upgrade c-reality-upgrade" onclick="unlockBlackHole()" style="text-shadow: -1px 1px 3px #d5ffd7;" ach-tooltip="The black hole makes the game run significantly faster for a short period of time. Starts at 180x faster for 10 seconds, once per hour.">Unleash the Black Hole<br>Cost: 50 RM</button>
<button id="blackholeunlock" class="l-reality-upgrade-btn c-reality-upgrade-btn" onclick="unlockBlackHole()" style="text-shadow: -1px 1px 3px #d5ffd7;" ach-tooltip="The black hole makes the game run significantly faster for a short period of time. Starts at 180x faster for 10 seconds, once per hour.">Unleash the Black Hole<br>Cost: 50 RM</button>
<div id="blackholecontainer" style="display: none">
<canvas id="blackHoleImage" width="400" height="400" style="border:1px solid #000000;"></canvas>
<h3 id="blackHoleStatus1"></h3>
<h3 id="blackHoleStatus2"></h3>
<h3 id="blackHoleStatus3"></h3>
<div class="blackhole-upgrades" id="bhupg1">
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeinterval1" onclick="upgradeBlackHoleInterval(0)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholepower1" onclick="upgradeBlackHolePower(0)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeduration1" onclick="upgradeBlackHoleDuration(0)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeinterval1" onclick="upgradeBlackHoleInterval(0)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholepower1" onclick="upgradeBlackHolePower(0)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeduration1" onclick="upgradeBlackHoleDuration(0)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
</div>
<div class="blackhole-upgrades" id="bhupg2">
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeinterval2" onclick="upgradeBlackHoleInterval(1)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholepower2" onclick="upgradeBlackHolePower(1)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeduration2" onclick="upgradeBlackHoleDuration(1)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeinterval2" onclick="upgradeBlackHoleInterval(1)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholepower2" onclick="upgradeBlackHolePower(1)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeduration2" onclick="upgradeBlackHoleDuration(1)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
</div>
<div class="blackhole-upgrades" id="bhupg3">
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeinterval3" onclick="upgradeBlackHoleInterval(2)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholepower3" onclick="upgradeBlackHolePower(2)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade c-reality-upgrade" id="blackholeduration3" onclick="upgradeBlackHoleDuration(2)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeinterval3" onclick="upgradeBlackHoleInterval(2)">Speed up the black hole by 25%<br>Current interval: 3600 seconds<br>Cost: 15RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholepower3" onclick="upgradeBlackHolePower(2)">Make the black hole 35% more powerful<br>Current power: 5x <br>Cost: 10RM</button>
<button class="l-reality-upgrade-btn c-reality-upgrade-btn" id="blackholeduration3" onclick="upgradeBlackHoleDuration(2)">Extend the black hole duration by 50%<br>Current duration: 10 seconds<br>Cost: 20RM</button>
</div>
<div><button class="l-reality-upgrade c-reality-upgrade" onclick="pauseBlackHole()" style="height: auto; padding: 16px" id="pauseButton">Pause</button></div>
<div><button class="l-reality-upgrade-btn c-reality-upgrade-btn" onclick="pauseBlackHole()" style="height: auto; padding: 16px" id="pauseButton">Pause</button></div>
</div>
</div>
<div id="perks" class="realitytab" style="display: none;">

View File

@ -60,7 +60,7 @@ Vue.component("glyph-inventory", {
@clicked="clickGlyph(col, $event)"/>
</div>
</div>
<button class="l-glyph-inventory__sort c-reality-upgrade"
<button class="l-glyph-inventory__sort c-reality-upgrade-btn"
ach-tooltip="Sort by type and level * rarity"
@click="sort">
Sort

View File

@ -32,9 +32,10 @@ Vue.component("reality-upgrade-button", {
template: `
<button
:class="classObject"
class="l-reality-upgrade c-reality-upgrade"
class="l-reality-upgrade-btn c-reality-upgrade-btn"
@click="upgrade.purchase()"
>
<hint-text class="l-hint-text--reality-upgrade">RUPG {{config.id}}</hint-text>
<description-display :config="config"/>
<b v-if="!isUnlocked">Requires: {{config.requirement}}</b>
<template v-else>

View File

@ -1945,6 +1945,10 @@ screen and (max-width: 480px) {
top: -1.85rem;
}
.l-hint-text--reality-upgrade {
top: -2rem;
}
/*#endregion hint-text*/
/*#region Header*/
@ -5477,6 +5481,7 @@ screen and (max-width: 480px) {
.l-reality-upgrade-grid {
display: flex;
flex-direction: column;
margin-top: 1.2rem;
}
.l-reality-upgrade-grid__row {
@ -5489,16 +5494,17 @@ screen and (max-width: 480px) {
flex: 1 1 0;
}
.l-reality-upgrade {
.l-reality-upgrade-btn {
height: 10rem;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
position: relative;
}
.c-reality-upgrade {
.c-reality-upgrade-btn {
background-color: black;
border: .2rem solid #0b600e;
border-radius: .5rem;
@ -5510,7 +5516,7 @@ screen and (max-width: 480px) {
font-family: Typewriter, serif;
}
.c-reality-upgrade:hover {
.c-reality-upgrade-btn:hover {
color: black;
background-color: #d5ffd7;
}
@ -5544,4 +5550,62 @@ screen and (max-width: 480px) {
.c-reality-upgrade--locked:hover {
background-color: #a53939;
color: #d5ffd7;
}
.t-dark.c-reality-upgrade-btn {
background-color: black !important;
}
.t-dark.c-reality-upgrade-btn:hover {
color: black !important;
background-color: #d5ffd7 !important;
}
.t-dark.c-reality-upgrade--unavailable {
color: #d5ffd7 !important;
background-color: #656565 !important;
}
.t-dark.c-reality-upgrade--unavailable:hover {
color: #d5ffd7 !important;
background-color: #656565 !important;
}
.t-dark.c-reality-upgrade--bought {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}
.t-dark.c-reality-upgrade--bought:hover {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}
.t-dark.c-reality-upgrade--locked {
color: #d5ffd7 !important;
background-color: #a53939 !important;
}
.t-dark.c-reality-upgrade--locked:hover {
color: #d5ffd7 !important;
background-color: #a53939 !important;
}
.t-s6.c-reality-upgrade-btn:hover {
background-color: #d5ffd7 !important;
}
.t-s6.c-reality-upgrade--unavailable:hover {
background-color: #656565 !important;
color: #d5ffd7 !important;
}
.t-s6.c-reality-upgrade--bought {
background-color: #0b600e !important;
border-color: #094E0B !important;
}
.t-s6.c-reality-upgrade--bought:hover {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}

View File

@ -153,45 +153,6 @@ input {
color: #757575 !important;
}
.c-reality-upgrade {
background-color: black !important;
}
.c-reality-upgrade:hover {
color: black !important;
background-color: #d5ffd7 !important;
}
.rUpgUn {
color: #d5ffd7 !important;
background-color: #656565 !important;
}
.rUpgUn:hover {
color: #d5ffd7 !important;
background-color: #656565 !important;
}
.rUpgBought {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}
.rUpgBought:hover {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}
.rUpgReqNotMet {
color: #d5ffd7 !important;
background-color: rgb(165, 57, 57) !important;
}
.rUpgReqNotMet:hover {
color: #d5ffd7 !important;
background-color: rgb(165, 57, 57) !important;
}
.automatorinstruction.command {
background-color: black !important;
}

View File

@ -179,25 +179,6 @@ input {
text-shadow: 0px 0px 7px #0b600e;
}
.c-reality-upgrade:hover {
background-color: #d5ffd7 !important;
}
.rUpgUn:hover {
background-color: #656565 !important;
color: #d5ffd7 !important;
}
.rUpgBought {
background-color: #0b600e !important;
border-color: #094E0B !important;
}
.rUpgBought:hover {
color: #d5ffd7 !important;
background-color: #0b600e !important;
}
.automatorinstruction.command {
background-color: black !important;
}