fix: 🥚 woozy mode behavior
This commit is contained in:
ThatOneCalculator
parent
65e7b2841c
commit
07b9948d68
2 changed files with 30 additions and 156 deletions
|
|
@ -261,34 +261,24 @@ 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);
|
||||
if (iconClicks % 6 === 0) {
|
||||
instanceIcon.src =
|
||||
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
||||
} else {
|
||||
instanceIcon.src = "/static-assets/woozy.png";
|
||||
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
|
||||
if (instanceIcon) {
|
||||
if (iconClicks % 6 === 0) {
|
||||
instanceIcon.src =
|
||||
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
||||
} else {
|
||||
instanceIcon.src = "/static-assets/woozy.png";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue