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

Add reality glyph animation

Browse Source
This commit is contained in:
SpectralFlame 2019-09-10 01:20:45 -05:00
parent 303f8779e8
commit d918ba7d74
2 changed files with 54 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
javascripts/components/reality/glyphs/glyph-component.js
View File

@ -259,6 +259,7 @@ Vue.component("glyph-component", {
isTouched: false,
sacrificeReward: 0,
levelOverride: 0,
isRealityGlyph: false,
};
},
computed: {
@ -295,6 +296,7 @@ Vue.component("glyph-component", {
"background-color": this.borderColor,
"box-shadow": `0 0 ${this.glowBlur} ${this.glowSpread} ${this.borderColor}`,
"border-radius": this.circular ? "50%" : "0",
animation: this.isRealityGlyph ? "c-reality-glyph-outer-cycle 10s infinite" : undefined,
};
},
innerStyle() {
@ -307,6 +309,7 @@ Vue.component("glyph-component", {
color: rarityColor,
"text-shadow": `-0.04em 0.04em 0.08em ${rarityColor}`,
"border-radius": this.circular ? "50%" : "0",
animation: this.isRealityGlyph ? "c-reality-glyph-inner-cycle 10s infinite" : undefined,
};
},
mouseEventHandlers() {
@ -335,6 +338,9 @@ Vue.component("glyph-component", {
if (this.$viewModel.draggingUIID === this.componentID) this.$viewModel.draggingUIID = -1;
},
methods: {
update() {
this.isRealityGlyph = this.glyph.type === "reality";
},
hideTooltip() {
this.$viewModel.tabs.reality.currentGlyphTooltip = -1;
},

48
stylesheets/styles.css
View File

@ -6654,6 +6654,54 @@ kbd {
justify-content: center;
}
@keyframes c-reality-glyph-outer-cycle {
0% {
background-color: #b67f33;
box-shadow: #b67f33 0px 0px 1rem 0.2rem;
}
20% {
background-color: #64dd17;
box-shadow: #64dd17 0px 0px 1rem 0.2rem;
}
40% {
background-color: #22aa48;
box-shadow: #22aa48 0px 0px 1rem 0.2rem;
}
60% {
background-color: #03a9f4;
box-shadow: #03a9f4 0px 0px 1rem 0.2rem;
}
80% {
background-color: #b241e3;
box-shadow: #b241e3 0px 0px 1rem 0.2rem;
}
100% {
background-color: #b67f33;
box-shadow: #b67f33 0px 0px 1rem 0.2rem;
}
}
@keyframes c-reality-glyph-inner-cycle {
0% {
box-shadow: #b67f33 0px 0px 1rem calc(0.3rem) inset;
}
20% {
box-shadow: #64dd17 0px 0px 1rem calc(0.3rem) inset;
}
40% {
box-shadow: #22aa48 0px 0px 1rem calc(0.3rem) inset;
}
60% {
box-shadow: #03a9f4 0px 0px 1rem calc(0.3rem) inset;
}
80% {
box-shadow: #b241e3 0px 0px 1rem calc(0.3rem) inset;
}
100% {
box-shadow: #b67f33 0px 0px 1rem calc(0.3rem) inset;
}
}
.l-reality-button-column {
display: flex;
flex-direction: column;