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(() => {
|
onMounted(() => {
|
||||||
if (defaultStore.state.woozyMode) {
|
if (defaultStore.state.woozyMode) {
|
||||||
instanceIcon.src = "/static-assets/woozy.png";
|
instanceIcon!.src = "/static-assets/woozy.png";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
function easterEgg() {
|
function easterEgg() {
|
||||||
iconClicks++;
|
iconClicks++;
|
||||||
instanceIconAnimation = "noAnimation";
|
|
||||||
console.log(instanceIconAnimation);
|
|
||||||
sleep(0.1);
|
|
||||||
const normalizedCount = (iconClicks % 3) + 1;
|
|
||||||
instanceIconAnimation = `shake${normalizedCount}`;
|
|
||||||
if (iconClicks % 3 === 0) {
|
if (iconClicks % 3 === 0) {
|
||||||
defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
|
defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
|
||||||
sleep(0.4);
|
defaultStore.set("woozyMode", defaultStore.state.woozyMode);
|
||||||
instanceIconAnimation = "noAnimation";
|
if (instanceIcon) {
|
||||||
instanceIconAnimation = "doSpinY";
|
if (iconClicks % 6 === 0) {
|
||||||
console.log(instanceIconAnimation);
|
instanceIcon.src =
|
||||||
if (iconClicks % 6 === 0) {
|
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
||||||
instanceIcon.src =
|
} else {
|
||||||
instance.iconUrl || instance.faviconUrl || "/favicon.ico";
|
instanceIcon.src = "/static-assets/woozy.png";
|
||||||
} else {
|
}
|
||||||
instanceIcon.src = "/static-assets/woozy.png";
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -310,123 +300,6 @@ function syncSlide(index) {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<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 {
|
.fwhjspax {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
@ -441,26 +314,7 @@ function syncSlide(index) {
|
||||||
display: block;
|
display: block;
|
||||||
margin: 16px auto 0 auto;
|
margin: 16px auto 0 auto;
|
||||||
height: 64px;
|
height: 64px;
|
||||||
|
transition: spinY 1s;
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> .name {
|
> .name {
|
||||||
|
|
|
||||||
|
|
@ -824,6 +824,15 @@ hr {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@keyframes spinY {
|
||||||
|
0% {
|
||||||
|
transform: perspective(128px) rotateY(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: perspective(128px) rotateY(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.ph-xxs {
|
.ph-xxs {
|
||||||
font-size: 0.5em;
|
font-size: 0.5em;
|
||||||
}
|
}
|
||||||
|
|
@ -948,4 +957,15 @@ hr {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@keyframes spinY {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue