Nixyri/AntimatterDimensionsSourceCode
1
0
Fork 0
mirror of https://github.com/IvarK/AntimatterDimensionsSourceCode.git synced 2024-11-22 04:05:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Address PR comments (hira-light-glyph-tab)

Browse Source
This commit is contained in:
SpectralFlame 2022-05-26 09:26:16 -05:00 committed by cyip92
parent a151c044d1
commit 8b7b4b0edf
9 changed files with 52 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
javascripts/core/celestials/ra/ra.js
View File

@ -418,34 +418,16 @@ export const GlyphAlteration = {
return Math.log10(Math.clampMin(capped / this.boostingThreshold, 1)) / 2;
},
getAdditionColor(type) {
if (Theme.current().isDark()) {
return this.isAdded(type)
? "#CCCCCC"
: undefined;
}
return this.isAdded(type)
? "black"
: undefined;
const color = Theme.current().isDark() ? "#CCCCCC" : "black";
return this.isAdded(type) ? color : undefined;
},
getEmpowermentColor(type) {
if (Theme.current().isDark()) {
return this.isAdded(type)
? "#EEEE30"
: undefined;
}
return this.isEmpowered(type)
? "#C6C610"
: undefined;
const color = Theme.current().isDark() ? "#EEEE30" : "#C6C610";
return this.isEmpowered(type) ? color : undefined;
},
getBoostColor(type) {
if (Theme.current().isDark()) {
return this.isAdded(type)
? "#60DDDD"
: undefined;
}
return this.isBoosted(type)
? "#28BDBD"
: undefined;
const color = Theme.current().isDark() ? "#60DDDD" : "#28BDBD";
return this.isBoosted(type) ? color : undefined;
},
};

61
javascripts/core/constants.js
View File

@ -229,72 +229,43 @@ window.GlyphRarities = [
{
minStrength: 3.5,
name: "Celestial",
color: "#5151ec"
darkColor: "#5151ec",
lightColor: "#5151ec"
}, {
minStrength: 3.25,
name: "Transcendent",
color: "#03ffec"
darkColor: "#03ffec",
lightColor: "#00f5e0"
}, {
minStrength: 3,
name: "Mythical",
color: "#d50000"
darkColor: "#d50000",
lightColor: "#d50000"
}, {
minStrength: 2.75,
name: "Legendary",
color: "#ff9800"
darkColor: "#ff9800",
lightColor: "#ff9800"
}, {
minStrength: 2.5,
name: "Epic",
color: "#9c27b0"
darkColor: "#9c27b0",
lightColor: "#9c27b0"
}, {
minStrength: 2,
name: "Rare",
color: "#2196f3"
darkColor: "#2196f3",
lightColor: "#2196f3"
}, {
minStrength: 1.5,
name: "Uncommon",
color: "#43a047"
darkColor: "#43a047",
lightColor: "#43a047"
}, {
minStrength: 1,
name: "Common",
color: "White"
},
];
// These need to be in descending order for searching over them to work trivially
window.GlyphRaritiesLight = [
{
minStrength: 3.5,
name: "Celestial",
color: "#5151ec"
}, {
minStrength: 3.25,
name: "Transcendent",
color: "#00F5E0"
}, {
minStrength: 3,
name: "Mythical",
color: "#d50000"
}, {
minStrength: 2.75,
name: "Legendary",
color: "#ff9800"
}, {
minStrength: 2.5,
name: "Epic",
color: "#9c27b0"
}, {
minStrength: 2,
name: "Rare",
color: "#2196f3"
}, {
minStrength: 1.5,
name: "Uncommon",
color: "#43a047"
}, {
minStrength: 1,
name: "Common",
color: "Black"
darkColor: "white",
lightColor: "black"
},
];

3
javascripts/core/glyphs/glyph-core.js
View File

@ -679,8 +679,7 @@ export function calculateGlyph(glyph) {
}
export function getRarity(x) {
const rarities = Theme.current().isDark() ? GlyphRarities : GlyphRaritiesLight;
return rarities.find(e => x >= e.minStrength);
return GlyphRarities.find(e => x >= e.minStrength);
}
export function getAdjustedGlyphLevel(glyph, realityGlyphBoost = Glyphs.levelBoost) {

27
public/stylesheets/glyphs.css
View File

@ -1,9 +1,9 @@
:root {
--color-background: white;
--color-gray-d51-l240: rgb(240, 240, 240);
--color-gray-d85-l214: rgb(214, 214, 214);
--color-gray-d180-l50: #505050;
--color-gray-d173-l68: #444;
--color-glyph-sac-text-input: rgb(240, 240, 240);
--color-glyph-sac-text-input--focused: rgb(214, 214, 214);
--color-glyph-sac-text-tooltip: #505050;
--color-glyph-equipping: #444;
--color-background-dark-green-gray: rgb(219, 230, 219);
--color-text-light-blue-gray: #3b3b46;
--color-glyph-selection: #a1a112;
@ -14,10 +14,10 @@
:root .s-base--dark {
--color-background: black;
--color-gray-d51-l240: #333;
--color-gray-d85-l214: #555;
--color-gray-d180-l50: #b4b4b4;
--color-gray-d173-l68: rgb(173, 173, 173);
--color-glyph-sac-text-input: #333;
--color-glyph-sac-text-input--focused: #555;
--color-glyph-sac-text-tooltip: #b4b4b4;
--color-glyph-equipping: rgb(173, 173, 173);
--color-background-dark-green-gray: #131;
--color-text-light-blue-gray: #d4d4ff;
--color-glyph-selection: #B4B420;
@ -308,7 +308,7 @@
height: 1.7rem;
text-align: center;
font-size: 1.2rem;
background-color: var(--color-gray-d51-l240);
background-color: var(--color-glyph-sac-text-input);
color: var(--color-reality);
border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem;
@ -336,7 +336,7 @@
height: 1.5rem;
text-align: center;
font-size: 1.2rem;
background-color: var(--color-gray-d51-l240);
background-color: var(--color-glyph-sac-text-input);
color: var(--color-reality);
border-radius: var(--var-border-radius, 0.2rem);
border: solid 0.1rem;
@ -361,7 +361,7 @@
.c-auto-sac-type-tab__input:focus {
font-weight: bold;
background-color: var(--color-gray-d85-l214);
background-color: var(--color-glyph-sac-text-input--focused);
box-shadow: 0 0 0.4rem 0.1rem var(--color-reality);
}
@ -571,7 +571,6 @@
color: var(--color-text);
font-size: 1.2rem;
font-weight: normal;
color: #ffffff;
text-shadow: none;
border-radius: var(--var-border-radius, 0.6rem);
padding: 0 0.6rem;
@ -607,7 +606,7 @@
}
.c-glyph-tooltip__sacrifice {
color: var(--color-gray-d180-l50);
color: var(--color-glyph-sac-text-tooltip);
font-size: 1rem;
font-weight: normal;
color: #b4b4b4;
@ -684,7 +683,7 @@
}
.c-equipped-glyphs__empty--dragover {
box-shadow: 0 0 0.5rem 0.25rem var(--color-gray-d173-l68);
box-shadow: 0 0 0.5rem 0.25rem var(--color-glyph-equipping);
}
.l-equipped-glyphs__buttons {

5
public/stylesheets/styles.css
View File

@ -785,7 +785,7 @@ button:focus {
.c-reality-button--locked {
color: #181818;
background-color: var(--color-gray-d85-l214);
background-color: var(--color-glyph-sac-text-input--focused);
border-color: var(--color-bad);
}
@ -1422,6 +1422,7 @@ br {
.infotooltip .infotooltiptext {
visibility: hidden;
white-space: nowrap;
background-color: var(--color-background);
color: var(--color-text);
text-align: left;
@ -8563,7 +8564,7 @@ kbd {
}
.s-base--dark .l-glyph-levels-and-weights__adjust-outline::after {
border: var(--var-border-width, 0.2rem) solid var(--color-reality-light);
border-color: var(--color-reality-light);
}
.l-glyph-levels-and-weights__factor {

9
src/components/GlyphComponent.vue
View File

@ -150,9 +150,9 @@ export default {
return Theme.current().isDark() ? "white" : "black";
},
innerStyle() {
const rarityColor = this.isRealityGlyph
? this.realityGlyphColor()
: this.glyph.color || getRarity(this.glyph.strength).color;
const info = getRarity(this.glyph.strength);
const baseColor = Theme.current().isDark() ? info.darkColor : info.lightColor;
const rarityColor = this.isRealityGlyph ? this.realityGlyphColor() : this.glyph.color || baseColor;
return {
width: `calc(${this.size} - 0.2rem)`,
height: `calc(${this.size} - 0.2rem)`,
@ -436,7 +436,8 @@ export default {
glyphColor() {
if (this.isCursedGlyph) return "black";
if (this.isRealityGlyph) return this.realityGlyphColor();
return `${this.glyph.color || getRarity(this.glyph.strength).color}`;
const info = getRarity(this.glyph.strength);
return `${this.glyph.color || (Theme.current().isDark() ? info.darkColor : info.lightColor)}`;
},
// Note that the dot bigger for one of the mutually-exclusive effect pair (IDs of the only case are hardcoded)
glyphEffectIcon(id) {

6
src/components/GlyphTooltip.vue
View File

@ -97,7 +97,7 @@ export default {
return Theme.current().isDark() ? "white" : "black";
},
descriptionStyle() {
let color = this.rarityInfo.color;
let color = Theme.current().isDark() ? this.rarityInfo.darkColor : this.rarityInfo.lightColor;
if (this.type === "cursed") color = this.cursedColor;
if (this.type === "companion") color = GlyphTypes[this.type].color;
return {
@ -172,7 +172,7 @@ export default {
const isCursed = this.type === "cursed";
const isReality = this.type === "reality";
let color = this.rarityInfo.color;
let color = Theme.current().isDark() ? this.rarityInfo.darkColor : this.rarityInfo.lightColor;
if (isCursed) color = this.cursedColor;
if (this.type === "companion") color = GlyphTypes[this.type].color;
return {
@ -228,7 +228,7 @@ export default {
GlyphSacrificeHandler.removeGlyph(Glyphs.findById(this.id), false);
},
getFontColor() {
return Theme.current().isDark() ? "#ccc" : "black";
return Theme.current().isDark() ? "#cccccc" : "black";
},
sacrificeText() {
if (this.type === "companion" || this.type === "cursed") return "";

5
src/components/modals/GlyphShowcasePanelEntry.vue
View File

@ -85,7 +85,10 @@ export default {
rarityStyle() {
let color;
if (this.glyph.type === "companion") color = GlyphTypes[this.type].color;
else color = getRarity(this.glyph.strength).color;
else {
const info = getRarity(this.glyph.strength);
color = Theme.current().isDark() ? info.darkColor : info.lightColor;
}
return {
"color": `${color}`,
"font-weight": "bold"

3
src/components/tabs/glyphs/sidebar/GlyphFilterPanel.vue
View File

@ -164,8 +164,7 @@ export default {
},
bumpRarity(type) {
// Note: As the minimum of an empty array is zero, this wraps around to 0% again if clicked at 100% rarity
const rarities = Theme.current().isDark() ? GlyphRarities : GlyphRaritiesLight;
const newRarity = rarities
const newRarity = GlyphRarities
.map(r => strengthToRarity(r.minStrength))
.filter(s => s > this.rarityThresholds[type])
.min();