Merge pull request #2602 from IvarK/somewhat-standardize-keyframe-names

This commit is contained in:
Waiting Idly 2022-05-19 06:15:50 -07:00 committed by GitHub
commit ac7a1287b8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 55 additions and 58 deletions

View File

@ -45,9 +45,9 @@
}
],
"keyframes-name-pattern": [
"^([_a-z][a-z0-9]*)([-_]{1,2}[a-z0-9]+)*$",
"^a-([-_]{0,2}[a-z0-9]+)*$",
{
"message": "Expected keyframe name to be kebab-case"
"message": "Keyframe name must begin with `a-` and be kebab-case"
}
],
"selector-id-pattern": [

View File

@ -66,7 +66,7 @@ export function isSecretImport(data) {
export function tryImportSecret(data) {
const index = secretImportIndex(data);
if (index === 0 && document.body.style.animation === "") {
document.body.style.animation = "barrelRoll 5s 1";
document.body.style.animation = "a-barrel-roll 5s 1";
SecretAchievement(15).unlock();
setTimeout(() => document.body.style.animation = "", 5000);
return true;

View File

@ -3,7 +3,7 @@ import { DC } from "./constants";
import { SpeedrunMilestones } from "./speedrun";
export function bigCrunchAnimation() {
document.body.style.animation = "implode 2s 1";
document.body.style.animation = "a-implode 2s 1";
setTimeout(() => {
document.body.style.animation = "";
}, 2000);

View File

@ -93,17 +93,17 @@ dev.tripleEverything = function() {
};
dev.barrelRoll = function() {
document.body.style.animation = "barrelRoll 5s 1";
document.body.style.animation = "a-barrel-roll 5s 1";
setTimeout(() => document.body.style.animation = "", 5000);
};
dev.spin3d = function() {
if (document.body.style.animation === "") document.body.style.animation = "spin3d 3s infinite";
if (document.body.style.animation === "") document.body.style.animation = "a-spin3d 3s infinite";
else document.body.style.animation = "";
};
dev.spin4d = function() {
if (document.body.style.animation === "") document.body.style.animation = "spin4d 3s infinite";
if (document.body.style.animation === "") document.body.style.animation = "a-spin4d 3s infinite";
else document.body.style.animation = "";
};

View File

@ -3,7 +3,7 @@ import { DC } from "./constants";
import { SpeedrunMilestones } from "./speedrun";
export function animateAndDilate() {
document.body.style.animation = "dilate 2s 1 linear";
document.body.style.animation = "a-dilate 2s 1 linear";
setTimeout(() => {
document.body.style.animation = "";
}, 2000);
@ -11,7 +11,7 @@ export function animateAndDilate() {
}
export function animateAndUndilate() {
document.body.style.animation = "undilate 2s 1 linear";
document.body.style.animation = "a-undilate 2s 1 linear";
setTimeout(() => {
document.body.style.animation = "";
}, 2000);

View File

@ -57,7 +57,7 @@ function giveEternityRewards(auto) {
}
export function eternityAnimation() {
document.body.style.animation = "eternify 3s 1";
document.body.style.animation = "a-eternify 3s 1";
setTimeout(() => {
document.body.style.animation = "";
}, 3000);

View File

@ -180,8 +180,8 @@ function triggerManualReality(realityProps) {
export function runRealityAnimation() {
document.getElementById("ui").style.userSelect = "none";
document.getElementById("ui").style.animation = "realize 10s 1";
document.getElementById("realityanimbg").style.animation = "realizebg 10s 1";
document.getElementById("ui").style.animation = "a-realize 10s 1";
document.getElementById("realityanimbg").style.animation = "a-realizebg 10s 1";
document.getElementById("realityanimbg").style.display = "block";
setTimeout(() => {
document.getElementById("realityanimbg").play();

View File

@ -915,7 +915,7 @@ GameDatabase.news = [
id: "a174",
text:
`<span style='font-family: runescape; color: yellow; text-shadow: 0.1rem 0.1rem black; letter-spacing: 0.1rem;
font-size: 2rem; line-height: 0; animation: text-flash 1s steps(1, end) infinite;'
font-size: 2rem; line-height: 0; animation: a-text-flash 1s steps(1, end) infinite;'
>FREE RUNE ARMOR TRIMMING</span>`,
},
{
@ -992,12 +992,12 @@ GameDatabase.news = [
{
id: "a184",
text:
`<span style='animation: text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
"Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: text-shrink 1s infinite'>
`<span style='animation: a-text-grow 1s infinite'>R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
"Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠</span><span style='animation: a-text-shrink 1s infinite'>
Ḁ̷̛͂̈́͗̎̃̓͛́͘ͅW̶̡̖͓̗̦̃̇̌̀͝A̵͇̭͉̓̎̈̿̊́̄̚͜R̶̝͚̲̭͎͇͎͓͖͚͇̀̈́͗̃̏̂̌͝͝Ę̴̡̤͙͈̝̬̰͒͘</span><span style
='animation: text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation:
text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
</span><span style='animation: text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
='animation: a-text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘</span><span style='animation:
a-text-shrink 1s infinite'> ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
</span><span style='animation: a-text-grow 1s infinite'> ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
R̸̡̛̛̪̝̟̱̣̹̭̟̣̀̈̀̏̉̌͝͠Õ̶͙͈͖̠͇̬͍̟̰U̵̩̫͉̝͔̼͎̦̔̓̽͌͊̏̇̓̀̓̀Ņ̸͍͇̘̙̥̰͉̲͕͈̥̍͛̃̑͝Ḑ̵̤̻̖̱̘̯̝̖̈̌̄̕͝
Ī̶̜̱̈́̑̃̉̄̋̔͐͋͠Ṅ̴͎̞͍̽͊͛̈́̅͛̈̅̚͠Ģ̸̢̾͊S̷̫̼̜̼͇̋͛̎͑͆̅̓̇</span>`,
},
@ -1014,10 +1014,10 @@ GameDatabase.news = [
{
id: "a186",
text:
`<span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: text-grow 1s infinite
'>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span style='animation:
text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: text-shrink 1s infinite'>/(^_^)/</span> <span
style='animation: text-grow 1s infinite'>\\(^_^)\\</span>`,
`<span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation: a-text-grow 1s infinite
'>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span style='animation:
a-text-grow 1s infinite'>\\(^_^)\\</span> <span style='animation: a-text-shrink 1s infinite'>/(^_^)/</span> <span
style='animation: a-text-grow 1s infinite'>\\(^_^)\\</span>`,
},
{
id: "a187",
@ -1083,7 +1083,7 @@ GameDatabase.news = [
random *= 255;
const color = `hsl(${random}, 90%, 60%)`;
return `<span style='color: ${color}; text-shadow: 0 0 0.5rem ${color};
animation: text-grow 0.4s infinite;'>Disco Time!</span>`;
animation: a-text-grow 0.4s infinite;'>Disco Time!</span>`;
},
},
{
@ -1352,8 +1352,8 @@ GameDatabase.news = [
id: "a238",
get text() {
return `AD Player: "How many orders of magnitude are you on?" Normal person: "Like, maybe 5 or 6 right now, my
dude." AD Player: "You are like a little baby. Watch this: <span style='animation: text-crunch ${newsAnimSpd(22)}s
1; font-size: 0;'>C R O N C H</span>"`;
dude." AD Player: "You are like a little baby. Watch this: <span style='animation: a-text-crunch
${newsAnimSpd(22)}s 1; font-size: 0;'>C R O N C H</span>"`;
},
},
{
@ -1441,7 +1441,7 @@ GameDatabase.news = [
},
{
id: "a246",
text: "<span style='animation: fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>",
text: "<span style='animation: a-fade-out 3s infinite'>OoooOOOOooOOO, it's me, the infamous news ghost!</span>",
},
(function() {
let isFlipped = false;
@ -1505,7 +1505,7 @@ GameDatabase.news = [
{
id: "a252",
get text() {
return `<span style='animation: text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`;
return `<span style='animation: a-text-stretch ${newsAnimSpd(30)}s 1'>This message is dilated.</span>`;
},
},
{
@ -2256,7 +2256,7 @@ GameDatabase.news = [
{
id: "a352",
get text() {
return `<span style='opacity: 0; animation: disappear ${newsAnimSpd(20)}s 1'>
return `<span style='opacity: 0; animation: a-disappear ${newsAnimSpd(20)}s 1'>
This news message is antimemetic. You will forget that it exists shortly.</span>`;
}
},

View File

@ -509,7 +509,6 @@ button:focus {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
animation: weee 4s infinite;
}
.o-time-study-selection-btn {
@ -1130,26 +1129,25 @@ br {
}
}
/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes barrelRoll {
@keyframes a-barrel-roll {
0% { transform: rotateZ(0deg); }
50%,
100% { transform: rotateZ(360deg); }
}
@keyframes spin3d {
@keyframes a-spin3d {
0% { transform: rotate3d(5.2, -2.8, 1.4, 0deg); }
100% { transform: rotate3d(5.2, -2.8, 1.4, 360deg); }
}
@keyframes spin4d {
@keyframes a-spin4d {
0%,
100% { transform: scale(1) rotate3d(5.2, -2.8, 1.4, 0deg); }
50% { transform: scale(0) rotate3d(5.2, -2.8, 1.4, 360deg); }
}
@keyframes float {
@keyframes a-float {
0% {
bottom: 0;
opacity: 0;
@ -1165,7 +1163,7 @@ br {
}
}
@keyframes implode {
@keyframes a-implode {
0%,
100% {
transform: scale(1);
@ -1178,7 +1176,7 @@ br {
}
}
@keyframes eternify {
@keyframes a-eternify {
0% {
opacity: 1;
filter: blur(0);
@ -1220,7 +1218,7 @@ br {
}
}
@keyframes dilate {
@keyframes a-dilate {
0% {
opacity: 1;
transform: scaleX(1);
@ -1242,7 +1240,7 @@ br {
}
}
@keyframes undilate {
@keyframes a-undilate {
0% {
opacity: 1;
transform: scaleX(1);
@ -1264,14 +1262,14 @@ br {
}
}
@keyframes realize {
@keyframes a-realize {
0% { opacity: 1; }
20% { opacity: 0; }
80% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes realizebg {
@keyframes a-realizebg {
0% { opacity: 0; }
20% { opacity: 0; }
30% { opacity: 1; }
@ -1280,41 +1278,41 @@ br {
100% { opacity: 0; }
}
@keyframes text-grow {
@keyframes a-text-grow {
0% { font-size: 1.3rem; }
50% { font-size: 1.8rem; }
100% { font-size: 1.3rem; }
}
@keyframes text-shrink {
@keyframes a-text-shrink {
0% { font-size: 1.8rem; }
50% { font-size: 1.3rem; }
100% { font-size: 1.8rem; }
}
@keyframes text-crunch {
@keyframes a-text-crunch {
0% { font-size: 1.5rem; }
90% { font-size: 1.5rem; }
100% { font-size: 0; }
}
@keyframes text-flash {
@keyframes a-text-flash {
0% { color: yellow; }
50% { color: red; }
}
@keyframes fade-out {
@keyframes a-fade-out {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes disappear {
@keyframes a-disappear {
0% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes text-stretch {
@keyframes a-text-stretch {
0% { letter-spacing: 0; }
100% { letter-spacing: 30rem; }
}
@ -9343,7 +9341,7 @@ input.o-automator-block-input {
font-family: "Font Awesome 6 Free" !important;
}
@keyframes opacity {
@keyframes a-opacity {
0% { opacity: 0; }
50% { opacity: 0.4; }
100% { opacity: 0; }
@ -9362,7 +9360,7 @@ input.o-automator-block-input {
left: 0;
background: gold;
border-radius: var(--var-border-radius, inherit);
animation: opacity 3s infinite;
animation: a-opacity 3s infinite;
}
.o-celestial-nav__hoverable .tooltiptext {

View File

@ -45,18 +45,17 @@ body.t-s1 {
z-index: 0;
opacity: 1;
background-image: url("../images/snow1.png"), url("../images/snow2.png"), url("../images/snow3.png");
animation: snow 10s linear infinite, snowFade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
animation: a-snow 10s linear infinite, a-snow-fade 10s cubic-bezier(0, 0.3, 1, 0.7) infinite;
pointer-events: none;
}
@keyframes snow {
@keyframes a-snow {
0% { background-position: 0 0, 0 0, 0 0; }
50% { background-position: 500px 500px, 100px 200px, -100px 150px; }
100% { background-position: 1000px 1000px, 200px 400px, -200px 300px; }
}
/* stylelint-disable-next-line keyframes-name-pattern */
@keyframes snowFade {
@keyframes a-snow-fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }

View File

@ -9,10 +9,10 @@ body {
.t-s3 .time-theorem-buttons,
.t-s3 .sidebar,
.t-s3 .c-glyph-tooltip {
animation: glasses 7s infinite;
animation: a-glasses 7s infinite;
}
@keyframes glasses {
@keyframes a-glasses {
0% { filter: blur(0); }
10% { filter: blur(3px); }
20% { filter: blur(0); }

View File

@ -63,6 +63,6 @@ export default {
}
.t-s3 .o-save-timer {
animation: glasses 7s infinite;
animation: a-glasses 7s infinite;
}
</style>

View File

@ -186,12 +186,12 @@ export default {
background: black;
}
@keyframes roll {
@keyframes a-roll {
100% { transform: rotateY(360deg); }
}
.pelle-icon {
animation: roll infinite 8s linear;
animation: a-roll infinite 8s linear;
}
.o-celestial-quote-history {