From ac561c8fdecfbe279cc7146563c3b4cacaa37dc8 Mon Sep 17 00:00:00 2001
From: WaitingIdly <25394029+WaitingIdly@users.noreply.github.com>
Date: Tue, 17 May 2022 05:19:00 -0700
Subject: [PATCH] all keyframes should start with `a-`
---
.stylelintrc.json | 4 +-
javascripts/core/app/options.js | 2 +-
javascripts/core/big_crunch.js | 2 +-
javascripts/core/devtools.js | 6 +--
javascripts/core/dilation.js | 4 +-
javascripts/core/eternity.js | 2 +-
javascripts/core/reality.js | 4 +-
javascripts/core/secret-formula/news.js | 32 +++++++--------
public/stylesheets/styles.css | 40 +++++++++----------
public/stylesheets/theme-S1.css | 7 ++--
public/stylesheets/theme-S3.css | 4 +-
src/components/SaveTimer.vue | 2 +-
.../tabs/celestial-pelle/PelleTab.vue | 4 +-
13 files changed, 55 insertions(+), 58 deletions(-)
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 2ab809c30..29bcec7e5 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -46,9 +46,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": [
diff --git a/javascripts/core/app/options.js b/javascripts/core/app/options.js
index 8ceb639c8..c433d5d31 100644
--- a/javascripts/core/app/options.js
+++ b/javascripts/core/app/options.js
@@ -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;
diff --git a/javascripts/core/big_crunch.js b/javascripts/core/big_crunch.js
index 063572e1c..9a65e91e8 100644
--- a/javascripts/core/big_crunch.js
+++ b/javascripts/core/big_crunch.js
@@ -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);
diff --git a/javascripts/core/devtools.js b/javascripts/core/devtools.js
index 8ac429cbd..3d05cf553 100644
--- a/javascripts/core/devtools.js
+++ b/javascripts/core/devtools.js
@@ -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 = "";
};
diff --git a/javascripts/core/dilation.js b/javascripts/core/dilation.js
index 00e780749..640264410 100644
--- a/javascripts/core/dilation.js
+++ b/javascripts/core/dilation.js
@@ -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);
diff --git a/javascripts/core/eternity.js b/javascripts/core/eternity.js
index 0475eb0cc..7e9b942cd 100644
--- a/javascripts/core/eternity.js
+++ b/javascripts/core/eternity.js
@@ -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);
diff --git a/javascripts/core/reality.js b/javascripts/core/reality.js
index 1e8c8efce..aa7fa7c6f 100644
--- a/javascripts/core/reality.js
+++ b/javascripts/core/reality.js
@@ -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();
diff --git a/javascripts/core/secret-formula/news.js b/javascripts/core/secret-formula/news.js
index e51d6bb06..f4b5311ba 100644
--- a/javascripts/core/secret-formula/news.js
+++ b/javascripts/core/secret-formula/news.js
@@ -915,7 +915,7 @@ GameDatabase.news = [
id: "a174",
text:
`FREE RUNE ARMOR TRIMMING`,
},
{
@@ -992,12 +992,12 @@ GameDatabase.news = [
{
id: "a184",
text:
- `R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
- "Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠
+ `R̵̬̙͋͂̀̋͑̈́̇͠Ê̵͇͎͂̂̍̓̌̐̋̋̀̀̔M̶̨̲̯̘͙̬̥̮̣͚̱̫͛̽̃͌̚͝
+ "Ą̴͍̝͐Į̷̛̲̯̫̘͌́̄̏͌̀̈́͝͝Ṅ̶̛̻̠̠̤̦̞̞͗̎̊̌̊͝͠
Ḁ̷̛͂̈́͗̎̃̓͛́͘ͅW̶̡̖͓̗̦̃̇̌̀͝A̵͇̭͉̓̎̈̿̊́̄̚͜R̶̝͚̲̭͎͇͎͓͖͚͇̀̈́͗̃̏̂̌͝͝Ę̴̡̤͙͈̝̬̰͒͘ ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘ ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
- ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
+ ='animation: a-text-grow 1s infinite'> ̶̺̈́́̆̓͘͘Ồ̸̢̢̮͓̯̗͙͚̬̉͊̿F̶̠̤̱̱̱͊̂̍̔̃͆̆̑̿͘ ̴̨̞̠̮͚̱͉͋̔͗̽̈́́́̅ͅỴ̶̣̙̹͚̲͔̲̼̬̥̀͌̒̾͘͘O̵̪̠̗̝̗̘̜͚̮̊͒͆̃̀̌̒͝ͅU̸͎͗̍̑̎̅̅͝R̵̗͑̽̏̓͆͒̈́͌͘̕
+ ̸̑̽̇̆͊̔̍̊̈́̈́͘ͅS̸̘͐͝U̴̥̭̚͘R̸̖̜͍͒́̋͆̈́̓
R̸̡̛̛̪̝̟̱̣̹̭̟̣̀̈̀̏̉̌͝͠Õ̶͙͈͖̠͇̬͍̟̰U̵̩̫͉̝͔̼͎̦̔̓̽͌͊̏̇̓̀̓̀Ņ̸͍͇̘̙̥̰͉̲͕͈̥̍͛̃̑͝Ḑ̵̤̻̖̱̘̯̝̖̈̌̄̕͝
Ī̶̜̱̈́̑̃̉̄̋̔͐͋͠Ṅ̴͎̞͍̽͊͛̈́̅͛̈̅̚͠Ģ̸̢̾͊S̷̫̼̜̼͇̋͛̎͑͆̅̓̇`,
},
@@ -1014,10 +1014,10 @@ GameDatabase.news = [
{
id: "a186",
text:
- `/(^_^)/ \\(^_^)\\ /(^_^)/ \\(^_^)\\ /(^_^)/ \\(^_^)\\`,
+ `/(^_^)/ \\(^_^)\\ /(^_^)/ \\(^_^)\\ /(^_^)/ \\(^_^)\\`,
},
{
id: "a187",
@@ -1083,7 +1083,7 @@ GameDatabase.news = [
random *= 255;
const color = `hsl(${random}, 90%, 60%)`;
return `Disco Time!`;
+ animation: a-text-grow 0.4s infinite;'>Disco Time!`;
},
},
{
@@ -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: C R O N C H"`;
+ dude." AD Player: "You are like a little baby. Watch this: C R O N C H"`;
},
},
{
@@ -1441,7 +1441,7 @@ GameDatabase.news = [
},
{
id: "a246",
- text: "OoooOOOOooOOO, it's me, the infamous news ghost!",
+ text: "OoooOOOOooOOO, it's me, the infamous news ghost!",
},
(function() {
let isFlipped = false;
@@ -1505,7 +1505,7 @@ GameDatabase.news = [
{
id: "a252",
get text() {
- return `This message is dilated.`;
+ return `This message is dilated.`;
},
},
{
@@ -2256,7 +2256,7 @@ GameDatabase.news = [
{
id: "a352",
get text() {
- return `
+ return `
This news message is antimemetic. You will forget that it exists shortly.`;
}
},
diff --git a/public/stylesheets/styles.css b/public/stylesheets/styles.css
index 1eb4d4f27..c9c366e52 100644
--- a/public/stylesheets/styles.css
+++ b/public/stylesheets/styles.css
@@ -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; }
}
@@ -9345,7 +9343,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; }
@@ -9364,7 +9362,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 {
diff --git a/public/stylesheets/theme-S1.css b/public/stylesheets/theme-S1.css
index 74b170e0a..bb429bf59 100644
--- a/public/stylesheets/theme-S1.css
+++ b/public/stylesheets/theme-S1.css
@@ -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; }
diff --git a/public/stylesheets/theme-S3.css b/public/stylesheets/theme-S3.css
index 7c3569d40..5e114bb11 100644
--- a/public/stylesheets/theme-S3.css
+++ b/public/stylesheets/theme-S3.css
@@ -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); }
diff --git a/src/components/SaveTimer.vue b/src/components/SaveTimer.vue
index 8285d9e02..45289297e 100644
--- a/src/components/SaveTimer.vue
+++ b/src/components/SaveTimer.vue
@@ -63,6 +63,6 @@ export default {
}
.t-s3 .o-save-timer {
- animation: glasses 7s infinite;
+ animation: a-glasses 7s infinite;
}
diff --git a/src/components/tabs/celestial-pelle/PelleTab.vue b/src/components/tabs/celestial-pelle/PelleTab.vue
index cc1affb77..60582ee0b 100644
--- a/src/components/tabs/celestial-pelle/PelleTab.vue
+++ b/src/components/tabs/celestial-pelle/PelleTab.vue
@@ -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 {