look at the lil guy go

Snail-IDE · Mar 10, 2024 · 9480ead · 9480ead · nmsderp · Mar 10, 2024
1 parent 1fa0587
commit 9480ead
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 204 deletions.
diff --git a/src/components/loader/bottom-block.svg b/src/components/loader/bottom-block.svg
diff --git a/src/components/loader/loader.css b/src/components/loader/loader.css
@@ -36,131 +36,43 @@
 .block-animation img {
     display: block;
     position: relative;
-    height: 30%;
     margin-top: -4px;
+    animation-name: bouncing;
+    animation-fill-mode: forwards;
+    animation-iteration-count: infinite;
+    animation-duration: 1s;
+    animation-delay: 0s;
 }
 
-.top-block {
-    animation: top-slide-in 1.5s ease infinite;
-}
-
-.middle-block {
-    animation: middle-slide-in 1.5s ease infinite;
-}
-
-.bottom-block {
-    animation: bottom-slide-in 1.5s ease infinite;
-}
-
-[dir="rtl"] .top-block {
-    animation: top-slide-in-rtl 1.5s ease infinite;
-}
-
-[dir="rtl"] .middle-block {
-    animation: middle-slide-in-rtl 1.5s ease infinite;
-}
-
-[dir="rtl"] .bottom-block {
-    animation: bottom-slide-in-rtl 1.5s ease infinite;
-}
-
-@keyframes top-slide-in {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-
-  33% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes middle-slide-in {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-
-  33% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-
-  66% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes bottom-slide-in {
-  0% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-
-  66% {
-    transform: translateY(50px);
-    opacity: 0;
-  }
-
-  100% {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes top-slide-in-rtl {
-  0% {
-    transform: translateY(50px) scaleX(-1);
-    opacity: 0;
-  }
-
-  33% {
-    transform: translateY(0px) scaleX(-1);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(0px) scaleX(-1);
-    opacity: 1;
-  }
-}
-
-@keyframes middle-slide-in-rtl {
-  0% {
-    transform: translateY(50px) scaleX(-1);
-    opacity: 0;
-  }
-
-  33% {
-    transform: translateY(50px) scaleX(-1);
-    opacity: 0;
-  }
-
-  66% {
-    transform: translateY(0px) scaleX(-1);
-    opacity: 1;
-  }
-  100% {
-    transform: translateY(0px) scaleX(-1);
-    opacity: 1;
-  }
-}
-
-@keyframes bottom-slide-in-rtl {
+@keyframes bouncing {
   0% {
-    transform: translateY(50px) scaleX(-1);
-    opacity: 0;
+      left: 0;
+      top: 0;
+      transform: rotate(0deg);
+      animation-timing-function: ease-out;
+  }
+  25% {
+      left: 10px;
+      top: -50px;
+      transform: rotate(10deg);
+      animation-timing-function: ease-in;
+  }
+  50% {
+      left: 0;
+      top: 0;
+      transform: rotate(0deg);
+      animation-timing-function: ease-out;
+  }
+  75% {
+      left: -10px;
+      top: -50px;
+      transform: rotate(-10deg);
+      animation-timing-function: ease-in;
   }
-
-  66% {
-    transform: translateY(50px) scaleX(-1);
-    opacity: 0;
-  }
-
   100% {
-    transform: translateY(0px) scaleX(-1);
-    opacity: 1;
+      left: 0;
+      top: 0;
+      transform: rotate(0deg);
   }
 }
 

diff --git a/src/components/loader/loader.jsx b/src/components/loader/loader.jsx
@@ -7,9 +7,7 @@ import styles from './loader.css';
 import PropTypes from 'prop-types';
 import bindAll from 'lodash.bindall';
 import { tip } from '../../lib/randomUnhelpfulTip';
-import topBlock from './top-block.svg';
-import middleBlock from './middle-block.svg';
-import bottomBlock from './bottom-block.svg';
+import snail from './snail.svg'
 
 import * as progressMonitor from './tw-progress-monitor';
 
@@ -136,18 +134,7 @@ class LoaderComponent extends React.Component {
             >
                 <div className={styles.container}>
                     <div className={styles.blockAnimation}>
-                        <img
-                            className={styles.topBlock}
-                            src={topBlock}
-                        />
-                        <img
-                            className={styles.middleBlock}
-                            src={middleBlock}
-                        />
-                        <img
-                            className={styles.bottomBlock}
-                            src={bottomBlock}
-                        />
+                        <img src={snail} />
                     </div>
                     <div className={styles.title}>
                         {mainMessages[this.props.messageId]}

diff --git a/src/components/loader/middle-block.svg b/src/components/loader/middle-block.svg
diff --git a/src/components/loader/snail.svg b/src/components/loader/snail.svg
diff --git a/src/components/loader/top-block.svg b/src/components/loader/top-block.svg
diff --git a/src/lib/randomUnhelpfulTip.js b/src/lib/randomUnhelpfulTip.js
@@ -1,19 +1,19 @@
-export const tip = [
-    'Snail IDE is cool',
-    '@carters3421 on Scratch made the Purple Square Guy Sprite, its basically his mascot!',
-    'Also check out LibreKitten!',
-    'Snail IDE is based off the source code of PenguinMod, which is based off TurboWarp, which is based off Scratch. M O D C E P T I O N.',
-    'Crazy? I was crazy once. They locked me in a room, a rubber room. A rubber room with rats. And rats make me crazy.',
-    "Snail IDE.",
-    "I LOVE PENGUINMOD!!!",
-    "In 2089, literally nothing will happen.",
-    "Did you know? You can post your projects outside of the Snail IDE community.",
-    "number 15 burger king foot lettuce",
-    "thepython555 the goat",
-    "Snails",
-    "penguinmod:menguinpod, snail-ide:ide-snail",
-    "If the creator of Snail IDE (Mr_rudy) enjoys your project, he will give you the COOL badge.",
-    "The first project to be uploaded that still exists is SnailGPT by Mr_rudy, keep in mind this lasted through over 3 server changes",
-    "Snail IDE Noticed ScratchDaPony :)",
-    "@redspacecat is remaking Geometry Dash in Snail IDE, with level sharing!"
-];
+export const tip = [
+    'Snail IDE is cool',
+    '@carters3421 on Scratch made the Purple Square Guy Sprite, its basically his mascot!',
+    'Also check out LibreKitten!',
+    'Snail IDE is based off the source code of PenguinMod, which is based off TurboWarp, which is based off Scratch. M O D C E P T I O N.',
+    'Crazy? I was crazy once. They locked me in a room, a rubber room. A rubber room with rats. And rats make me crazy.',
+    "Snail IDE.",
+    "I LOVE PENGUINMOD!!!",
+    "In 2089, literally nothing will happen.",
+    "Did you know? You can post your projects outside of the Snail IDE community.",
+    "number 15 burger king foot lettuce",
+    "thepython555 the goat",
+    "Snails",
+    "penguinmod:menguinpod, snail-ide:ide-snail",
+    "If the creator of Snail IDE (Mr_rudy) enjoys your project, he will give you the COOL badge.",
+    "The first project to be uploaded that still exists is SnailGPT by Mr_rudy, keep in mind this lasted through over 3 server changes",
+    "Snail IDE Noticed ScratchDaPony :)",
+    "@redspacecat is remaking Geometry Dash in Snail IDE, with level sharing!"
+];