Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 🥚 woozy mode behavior

Browse Source
This commit is contained in:
ThatOneCalculator 2023-07-25 19:22:06 -07:00
parent 65e7b2841c
commit 07b9948d68
No known key found for this signature in database
GPG Key ID: 8703CACD01000000
2 changed files with 30 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

156
packages/client/src/pages/about.vue
View File

@ -261,29 +261,18 @@ definePageMetadata(
})),
);
async function sleep(seconds) {
return new Promise((resolve) => setTimeout(resolve, seconds * 1000));
}
onMounted(() => {
if (defaultStore.state.woozyMode) {
instanceIcon.src = "/static-assets/woozy.png";
instanceIcon!.src = "/static-assets/woozy.png";
}
});
function easterEgg() {
iconClicks++;
instanceIconAnimation = "noAnimation";
console.log(instanceIconAnimation);
sleep(0.1);
const normalizedCount = (iconClicks % 3) + 1;
instanceIconAnimation = `shake${normalizedCount}`;
if (iconClicks % 3 === 0) {
defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
sleep(0.4);
instanceIconAnimation = "noAnimation";
instanceIconAnimation = "doSpinY";
console.log(instanceIconAnimation);
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
if (instanceIcon) {
if (iconClicks % 6 === 0) {
instanceIcon.src =
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
@ -292,6 +281,7 @@ function easterEgg() {
}
}
}
}
let swiperRef = null;
@ -310,123 +300,6 @@ function syncSlide(index) {
</script>
<style lang="scss" scoped>
@keyframes iconShake1 {
0% {
transform: translate(2px, 0px) rotate(-1deg);
}
10% {
transform: translate(2px, -3px) rotate(5deg);
}
20% {
transform: translate(-1px, -3px) rotate(3deg);
}
30% {
transform: translate(-2px, 0px) rotate(-1deg);
}
40% {
transform: translate(-2px, -1px) rotate(4deg);
}
50% {
transform: translate(-1px, -1px) rotate(1deg);
}
60% {
transform: translate(-2px, 0px) rotate(-8deg);
}
70% {
transform: translate(1px, 2px) rotate(-2deg);
}
80% {
transform: translate(-1px, 2px) rotate(4deg);
}
90% {
transform: translate(-1px, 1px) rotate(11deg);
}
100% {
transform: translate(-3px, -3px) rotate(-5deg);
}
}
@keyframes iconShake2 {
0% {
transform: translate(-1px, 5px) rotate(33deg);
}
10% {
transform: translate(-2px, 7px) rotate(20deg);
}
20% {
transform: translate(8px, 5px) rotate(31deg);
}
30% {
transform: translate(-2px, 5px) rotate(3deg);
}
40% {
transform: translate(4px, 6px) rotate(16deg);
}
50% {
transform: translate(8px, -3px) rotate(19deg);
}
60% {
transform: translate(7px, -2px) rotate(0deg);
}
70% {
transform: translate(4px, 4px) rotate(8deg);
}
80% {
transform: translate(7px, -3px) rotate(13deg);
}
90% {
transform: translate(6px, 7px) rotate(4deg);
}
100% {
transform: translate(4px, -2px) rotate(-2deg);
}
}
@keyframes iconShake3 {
0% {
transform: translate(12px, -2px) rotate(57deg);
}
10% {
transform: translate(10px, 2px) rotate(12deg);
}
20% {
transform: translate(10px, 4px) rotate(3deg);
}
30% {
transform: translate(17px, 11px) rotate(15deg);
}
40% {
transform: translate(12px, 20px) rotate(-11deg);
}
50% {
transform: translate(5px, 12px) rotate(43deg);
}
60% {
transform: translate(16px, 8px) rotate(-4deg);
}
70% {
transform: translate(14px, 11px) rotate(22deg);
}
80% {
transform: translate(9px, 19px) rotate(-3deg);
}
90% {
transform: translate(0px, 12px) rotate(-3deg);
}
100% {
transform: translate(17px, 3px) rotate(57deg);
}
}
@keyframes spinY {
0% {
transform: perspective(128px) rotateY(0deg);
}
100% {
transform: perspective(128px) rotateY(360deg);
}
}
.fwhjspax {
text-align: center;
border-radius: 10px;
@ -441,26 +314,7 @@ function syncSlide(index) {
display: block;
margin: 16px auto 0 auto;
height: 64px;
&.noAnimation {
animation: none;
}
&.shake1 {
animation: iconShake1 0.1s 1;
}
&.shake2 {
animation: iconShake2 0.2s 1;
}
&.shake3 {
animation: iconShake3 0.3s 1;
}
&.doSpinY {
animation: spinY 0.9s 1;
}
transition: spinY 1s;
}
> .name {

20
packages/client/src/style.scss
View File

@ -824,6 +824,15 @@ hr {
}
}
@keyframes spinY {
0% {
transform: perspective(128px) rotateY(0deg);
}
100% {
transform: perspective(128px) rotateY(360deg);
}
}
.ph-xxs {
font-size: 0.5em;
}
@ -948,4 +957,15 @@ hr {
opacity: 0;
}
}
@keyframes spinY {
0% {
opacity: 1;
}
50% {
opacity: 0.2;
}
100% {
opacity: 1;
}
}
}