112 lines
5.5 KiB
TypeScript
112 lines
5.5 KiB
TypeScript
'use client'
|
||
|
||
import { useEffect, useRef, useState } from "react";
|
||
import { LandingImage } from "./landing-image";
|
||
|
||
export const NolaGlitch = () => {
|
||
const ascii = useRef<HTMLDivElement>(null);
|
||
|
||
const chars = "asdfghjklzxcvbnmqwertyuiopZXCVBNMASDFGHJKLQWERTYUIOP1234567890";
|
||
const symbols = "10!@#$%^&*~|\;,./?<>:";
|
||
|
||
function randomChar(len: number) {
|
||
let char = "";
|
||
for (let i = 0; i <= len; i++) {
|
||
const cindex = Math.floor(Math.random() * chars.length);
|
||
char += chars[cindex];
|
||
}
|
||
return char;
|
||
}
|
||
|
||
function randomSymbol(len: number = 1) {
|
||
let char = "";
|
||
for (let i = 0; i <= len; i++) {
|
||
const cindex = Math.floor(Math.random() * symbols.length);
|
||
char += symbols[cindex];
|
||
}
|
||
return char;
|
||
}
|
||
|
||
useEffect(() => {
|
||
const art = ascii.current as HTMLDivElement;
|
||
const artasci = art.innerHTML;
|
||
|
||
const interval = setInterval(() => {
|
||
const glitch_probality = Math.floor(Math.random() * 3);
|
||
|
||
if (glitch_probality == 1) {
|
||
art.innerHTML = [...artasci].map(v => {
|
||
const char_probality = Math.floor(Math.random() * 50);
|
||
const delchar_probablity = Math.floor(Math.random() * 40);
|
||
|
||
if (delchar_probablity == 1) {
|
||
return ' ';
|
||
}
|
||
else {
|
||
if (v == "⠀") {
|
||
return char_probality == 1 ? randomSymbol(0) : v;
|
||
}
|
||
else if (v === " ") {
|
||
return char_probality == 1 ? "-" : v;
|
||
}
|
||
}
|
||
|
||
return v;
|
||
}).
|
||
join("");
|
||
}
|
||
else {
|
||
art.innerHTML = artasci;
|
||
}
|
||
}, 60);
|
||
|
||
return () => {
|
||
clearInterval(interval);
|
||
}
|
||
}, []);
|
||
|
||
return (
|
||
<div ref={ascii}>
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⣴⠶⠶⠿⠿⢶⣶⠶⠶⠿⠛⠻⠷⠶⣦⣄⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣠⡾⠛⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠛⠷⣦⣀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠀⠀⠀⣀⣴⠟⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⢷⣄⠀⠀⠀⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠀⠀⣴⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠙⣷⡀⠀⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠀⣾⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⢸⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⣷⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⣿⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⢰⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡇⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⣾⠇⠀⠀⠀⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⢠⡿⠀⠀⠀⠀⠀⣿⠀⠀⠀⠀⢠⣶⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠰⣆⠀⠀⠀⠀⠀⠀⠀⠀⢻⡆⠀⠀⠀<br/>
|
||
⠀⠀⠀⣾⠇⠀⠀⠀⠀⢰⣿⠀⠀⢀⣀⣤⣿⣧⠀⠀⠀⠀⠀⢠⡄⠀⣤⣤⣤⣤⣤⡹⣧⡀⠀⠀⠀⠀⠀⠀⠈⢿⡄⠀⠀<br/>
|
||
⠀⠀⢰⡿⠀⠀⠀⠀⠀⢸⣿⣤⣾⠛⠋⠁⢙⣿⣧⣀⡀⠀⠀⢸⣷⡀⠀⠀⠀⠀⠈⣹⡿⣧⠀⠀⠀⢻⣆⠀⠀⠘⣿⡀⠀<br/>
|
||
⠀⠀⣾⠃⠀⠀⠀⠀⠀⢸⣿⠉⠙⠛⠛⠛⠛⢉⣈⡉⠛⠛⠿⠿⠛⠛⠛⠛⠛⠛⠛⠋⠀⢻⡆⠀⠀⠀⢿⡆⠀⠀⠘⣷⠀<br/>
|
||
⠀⣸⡏⠀⠀⢠⡦⠀⠀⢸⣿⠀⠀⢀⣤⣶⣿⣿⣯⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣠⠄⠘⣷⠀⠀⠀⠈⣿⡀⠀⠀⢹⡇<br/>
|
||
⢠⡿⠀⠀⠀⣼⠇⠀⠀⢸⣿⠀⠾⠛⠁⢿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⢤⣤⠴⠶⠛⠉⠀⠀⣿⡄⠀⠀⠀⢸⡇⠀⠀⠈⣿<br/>
|
||
⢸⡇⠀⠀⠀⣿⠀⠀⠀⠈⣿⠀⠀⠀⠀⠘⠿⠿⠏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡇⠀⠀⠀⠘⣿⠀⠀⢠⡿<br/>
|
||
⠘⣷⠀⠀⠀⣿⠀⠀⠀⠀⢻⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣀⣀⣀⣠⣶⠀⠀⠀⠀⠀⠀⣸⡇⠀⠀⠀⠀⣿⠀⣀⣾⠃<br/>
|
||
⠀⠹⣧⠀⠀⣿⠀⠀⠀⠀⠸⣧⠀⠀⠀⠀⠀⠀⠀⠻⠷⠿⠛⠉⠉⠉⠉⠀⠀⠀⢀⣀⣤⡾⣿⡇⠀⠀⠀⢰⣿⡾⠛⠁⠀<br/>
|
||
⠀⠀⠙⣷⡄⢹⡇⠀⠀⠀⠀⢿⣶⣦⣤⣀⣀⣀⣀⣀⣀⣀⣀⣤⣤⣤⣴⠶⠶⠿⠛⠋⠁⠀⣿⠀⠀⠀⢀⣿⠃⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠈⠻⣾⣿⡀⠀⠀⠀⠘⣷⡀⠉⠉⠉⠛⠛⠛⠋⠉⠉⠉⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡏⠀⣀⣴⠟⠁⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠈⠙⢷⡄⠀⠀⠀⠹⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡿⠿⠛⠋⠁⠀⠀⠀⠀⠀⠀⠀<br/>
|
||
⠀⠀⠀⠀⠀⠀⠀⠈⠛⠷⣦⣤⣤⣽⡧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀<br/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export const NolaGlitchClientOnly = () => {
|
||
const [willTheyLucky, setLucky] = useState(false);
|
||
const probability = 18;
|
||
|
||
useEffect(() => {
|
||
const rand = Math.floor(Math.random() * probability)
|
||
setLucky(rand == 1);
|
||
}, []);
|
||
|
||
if (!willTheyLucky) {
|
||
return <LandingImage />
|
||
}
|
||
|
||
return <div className="text-[6px] xs:text-[9px] leading-[0.53rem] xs:leading-[0.8rem] h-[230px] xs:h-[320px] text-center max-w-[240px] xs:max-w-max mx-auto">
|
||
<NolaGlitch />
|
||
</div>
|
||
} |