add psistorm to doit

MemeLabs · Nov 10, 2024 · 0d34d20 · 0d34d20
1 parent 1de8a2c
commit 0d34d20
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 103 deletions.
diff --git a/assets/anim.october.scss b/assets/anim.october.scss
@@ -131,109 +131,7 @@
     70% { transform: translate(0px, 0px); }
 }
 
-@mixin MAGE() {
-    .text > .generify-container:has(+ .generify-container.generify-emote-MAGE[data-modifiers~="mirror"]) {
-        @content;
-    }
-    .text > .generify-container.generify-emote-MAGE:not([data-modifiers~="mirror"]) + .generify-container {
-        @content;
-    }
-}
-
-@include MAGE() {
-    margin-right: 0;
-    margin-left: 0;
-    animation: PsiStorm-flicker-anim 2s 3;
-
-    &::after, &::before {
-        content: "";
-        pointer-events: none;
-        position: absolute;
-        top: 50;
-        left: 50%;
-        margin: -20px -28px;
-        width: 64px;
-        height: 48px;
-    }
-
-    &::before {
-        opacity: 0.8;
-        mix-blend-mode: screen;
-        background-color: #00a;
-        mask-image: url("/assets/emotes/modifiers/psistorm-mask.png");
-        mask-size: 896px 48px;
-        mask-position: 64px 0px;
-        mask-repeat: no-repeat;
-        animation: PsiStorm-mask-anim 2s 3;
-        animation-timing-function: step-start;
-        z-index: 2;
-    }
-
-    &::after {
-        background-image: url("/assets/emotes/modifiers/psistorm.png");
-        background-size: 896px 48px;
-        background-position-x: 64px;
-        background-repeat: no-repeat;
-        animation: PsiStorm-anim 2s 3;
-        animation-timing-function: step-start;
-        z-index: 3;
-        filter: brightness(120%);
-    }
-
-    @at-root .pref-animateforever &, &:hover {
-        animation-iteration-count: infinite;
-    }
-
-    @at-root .pref-animateforever &::before, &:hover::before {
-        animation-iteration-count: infinite;
-    }
-
-    @at-root .pref-animateforever &::after, &:hover::after {
-        animation-iteration-count: infinite;
-    }
-}
-
-@keyframes PsiStorm-flicker-anim {
-    $frames: 28;
-    @for $i from 0 to $frames {
-        #{100 / $frames * $i * 1%} {
-            transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
-            filter: brightness(140 - random(80) * 1%);
-        }
-    }
-    100% {
-        transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
-        filter: brightness(1);
-    }
-}
-
-@keyframes PsiStorm-anim {
-    $frames: 14;
-    $width: 896px;
-    @for $i from 0 to $frames {
-        #{100 / $frames * $i * 1%} {
-            background-position-x: -$width / $frames * $i;
-        }
-    }
-    100% {
-        background-position-x: 0px;
-    }
-}
-
-@keyframes PsiStorm-mask-anim {
-    $frames: 14;
-    $width: 896px;
-    @for $i from 0 to $frames {
-        #{100 / $frames * $i * 1%} {
-            transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
-            mask-position: -$width / $frames * $i 0px;
-        }
-    }
-    100% {
-        transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
-        mask-position: 0px 0px;
-    }
-}
+@include PsiStorm("MAGE");
 
 @include sprite-animation(
     $file-name: COGGERS,

diff --git a/assets/anim.scss b/assets/anim.scss
@@ -1171,3 +1171,112 @@ $spritesDir : '/assets/emotes/emoticons-animated/';
         }
     }
 }
+
+
+@mixin PsiStormMirror($name) {
+    .text > .generify-container:has(+ .generify-container.generify-emote-#{$name}[data-modifiers~="mirror"]) {
+        @content;
+    }
+    .text > .generify-container.generify-emote-#{$name}:not([data-modifiers~="mirror"]) + .generify-container {
+        @content;
+    }
+}
+
+@mixin PsiStorm($name) {
+    @include PsiStormMirror($name) {
+        margin-right: 0;
+        margin-left: 0;
+        animation: PsiStorm-flicker-anim 2s 3;
+
+        &::after, &::before {
+            content: "";
+            pointer-events: none;
+            position: absolute;
+            top: 50;
+            left: 50%;
+            margin: -20px -28px;
+            width: 64px;
+            height: 48px;
+        }
+
+        &::before {
+            opacity: 0.8;
+            mix-blend-mode: screen;
+            background-color: #00a;
+            mask-image: url("/assets/emotes/modifiers/psistorm-mask.png");
+            mask-size: 896px 48px;
+            mask-position: 64px 0px;
+            mask-repeat: no-repeat;
+            animation: PsiStorm-mask-anim 2s 3;
+            animation-timing-function: step-start;
+            z-index: 2;
+        }
+
+        &::after {
+            background-image: url("/assets/emotes/modifiers/psistorm.png");
+            background-size: 896px 48px;
+            background-position-x: 64px;
+            background-repeat: no-repeat;
+            animation: PsiStorm-anim 2s 3;
+            animation-timing-function: step-start;
+            z-index: 3;
+            filter: brightness(120%);
+        }
+
+        @at-root .pref-animateforever &, &:hover {
+            animation-iteration-count: infinite;
+        }
+
+        @at-root .pref-animateforever &::before, &:hover::before {
+            animation-iteration-count: infinite;
+        }
+
+        @at-root .pref-animateforever &::after, &:hover::after {
+            animation-iteration-count: infinite;
+        }
+    }
+}
+
+@keyframes PsiStorm-flicker-anim {
+    $frames: 28;
+    @for $i from 0 to $frames {
+        #{100 / $frames * $i * 1%} {
+            transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
+            filter: brightness(140 - random(80) * 1%);
+        }
+    }
+    100% {
+        transform: translate3d(random(3) * 1px, random(3) * 1px, random(3) * 1px) scale((102 - random(4)) / 100);
+        filter: brightness(1);
+    }
+}
+
+@keyframes PsiStorm-anim {
+    $frames: 14;
+    $width: 896px;
+    @for $i from 0 to $frames {
+        #{100 / $frames * $i * 1%} {
+            background-position-x: -$width / $frames * $i;
+        }
+    }
+    100% {
+        background-position-x: 0px;
+    }
+}
+
+@keyframes PsiStorm-mask-anim {
+    $frames: 14;
+    $width: 896px;
+    @for $i from 0 to $frames {
+        #{100 / $frames * $i * 1%} {
+            transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
+            mask-position: -$width / $frames * $i 0px;
+        }
+    }
+    100% {
+        transform: translate3d(random(20) / 10px, random(20) / 10px, random(20) / 10px);
+        mask-position: 0px 0px;
+    }
+}
+
+@include PsiStorm("DOIT");