tweaks
This commit is contained in:
ashastral
parent
40ea62a000
commit
fcb696f01c
2 changed files with 42 additions and 78 deletions
39
src/app.tsx
39
src/app.tsx
|
|
@ -77,13 +77,22 @@ type SymbolData = {
|
|||
};
|
||||
|
||||
function SymbolBurst() {
|
||||
const pds = new PoissonDiskSampling({
|
||||
const getPoissonDiskSampler = () => new PoissonDiskSampling({
|
||||
shape: [window.innerHeight, window.innerWidth],
|
||||
minDistance: (window.innerWidth + window.innerHeight) / 20,
|
||||
maxDistance: (window.innerWidth + window.innerHeight) / 5,
|
||||
tries: 10,
|
||||
});
|
||||
|
||||
const pds = getPoissonDiskSampler();
|
||||
|
||||
const handleResizeEvent = (event: any) => getPoissonDiskSampler();
|
||||
|
||||
useEffect(() => {
|
||||
addEventListener('resize', handleResizeEvent);
|
||||
return () => removeEventListener('resize', handleResizeEvent);
|
||||
}, []);
|
||||
|
||||
const symbolData = useMemo(() => {
|
||||
const symbolData: SymbolData[] = [];
|
||||
const points = pds.fill();
|
||||
|
|
@ -94,11 +103,11 @@ function SymbolBurst() {
|
|||
positionPx: [point[0], point[1]],
|
||||
sizeEm: 1 + Math.random() * 2,
|
||||
zIndex: 2 * Math.floor(2 * Math.random()),
|
||||
innerAnimationDelaySec: -Math.random() * 15,
|
||||
innerAnimationDelaySec: -Math.random() * 30,
|
||||
});
|
||||
}
|
||||
return symbolData;
|
||||
}, []);
|
||||
}, [window.innerWidth, window.innerHeight]);
|
||||
|
||||
return (
|
||||
<div class="symbol-burst">
|
||||
|
|
@ -110,7 +119,7 @@ function SymbolBurst() {
|
|||
fontSize: `${s.sizeEm}em`,
|
||||
zIndex: s.zIndex,
|
||||
}}>
|
||||
<span style={{ animationDelay: `${s.innerAnimationDelaySec}s` }}>{s.symbol}</span>
|
||||
<span class={s.symbol} style={{ animationDelay: `${s.innerAnimationDelaySec}s` }}>{s.symbol}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
|
@ -119,7 +128,7 @@ function SymbolBurst() {
|
|||
|
||||
export function App() {
|
||||
const [hash, setHash] = useHash();
|
||||
const [title, setTitle] = useState(hash ? decodeURIComponent(hash.substring(1)) : "i`ve\ngay");
|
||||
const [title, setTitle] = useState(hash ? atob(decodeURIComponent(hash.substring(1))) : "i've gay");
|
||||
const [titleHeight, setTitleHeight] = useState(window.innerHeight * 0.8);
|
||||
const [titleRowHeight, setTitleRowHeight] = useState(titleHeight / 2);
|
||||
const [titleHeightCalculations, setTitleHeightCalculations] = useState(0);
|
||||
|
|
@ -129,7 +138,10 @@ export function App() {
|
|||
setFontSizePx((Math.min(window.innerWidth, window.innerHeight) * 0.5) / (titleHeight / titleRowHeight));
|
||||
}, [titleHeight, titleRowHeight, window.innerHeight]);
|
||||
|
||||
const handleResizeEvent = (event: any) => calculateFontSize();
|
||||
const handleResizeEvent = (event: any) => {
|
||||
handleHeightChange(titleHeight, { rowHeight: titleRowHeight });
|
||||
calculateFontSize();
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
addEventListener('resize', handleResizeEvent);
|
||||
|
|
@ -138,7 +150,7 @@ export function App() {
|
|||
|
||||
// Update hash when the title changes
|
||||
useEffect(() => {
|
||||
setHash(encodeURIComponent(title.trimEnd()));
|
||||
setHash(encodeURIComponent(btoa(title.trimEnd())));
|
||||
}, [title]);
|
||||
|
||||
const handleTitleChange = (event: any) => {
|
||||
|
|
@ -148,9 +160,14 @@ export function App() {
|
|||
const handleHeightChange = useCallback((height: number, { rowHeight }: { rowHeight: number }) => {
|
||||
setTitleHeight(height);
|
||||
setTitleRowHeight(rowHeight);
|
||||
if (titleHeightCalculations >= 10) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Good height
|
||||
if (Math.abs(height / window.innerHeight - 0.8) < 0.05) return;
|
||||
// Acceptable height
|
||||
if (titleHeightCalculations >= 5 && height / window.innerHeight < 0.85) return;
|
||||
// Don't loop forever
|
||||
if (titleHeightCalculations >= 10) return;
|
||||
|
||||
setTitleHeightCalculations((n) => n + 1);
|
||||
calculateFontSize();
|
||||
}, [titleHeightCalculations]);
|
||||
|
|
@ -170,7 +187,7 @@ export function App() {
|
|||
/>
|
||||
<SymbolBurst />
|
||||
<p>
|
||||
Type to change · <a href="https://www.teepublic.com/t-shirt/1810231-ive-gay">Shirt</a> · <a href="https://diverse.direct/c-h-s/chsep-0003/">E.P.</a> · <a href="https://meow.garden/">Website</a>
|
||||
Click to edit · <a href="https://www.teepublic.com/t-shirt/1810231-ive-gay">Shirt</a> · <a href="https://diverse.direct/c-h-s/chsep-0003/">E.P.</a> · <a href="https://meow.garden/">Made by Ash</a>
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ p {
|
|||
bottom: 2em;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
textarea:focus {
|
||||
|
|
@ -125,6 +126,7 @@ textarea:focus {
|
|||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-size: calc(.8vw + .8vh);
|
||||
overflow: hidden;
|
||||
animation-name: symbol-burst-container;
|
||||
|
|
@ -149,9 +151,10 @@ textarea:focus {
|
|||
}
|
||||
|
||||
|
||||
.symbol-burst .symbol span {
|
||||
.symbol-burst .symbol span:not(.●) {
|
||||
display: inline-block;
|
||||
animation: symbol-inner 15s infinite;
|
||||
animation: symbol-inner 30s infinite;
|
||||
animation-timing-function: ease;
|
||||
}
|
||||
|
||||
@keyframes symbol-inner {
|
||||
|
|
@ -159,68 +162,12 @@ textarea:focus {
|
|||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
4% {
|
||||
transform: rotate(3.92deg);
|
||||
45% {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
8% {
|
||||
transform: rotate(7.9deg);
|
||||
}
|
||||
|
||||
18% {
|
||||
transform: rotate(18.52deg);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: rotate(20.39deg);
|
||||
}
|
||||
|
||||
28% {
|
||||
transform: rotate(25.65deg);
|
||||
}
|
||||
|
||||
30% {
|
||||
transform: rotate(27.61deg);
|
||||
}
|
||||
|
||||
38% {
|
||||
transform: rotate(47.27deg);
|
||||
}
|
||||
|
||||
40% {
|
||||
transform: rotate(51.75deg);
|
||||
}
|
||||
|
||||
60% {
|
||||
transform: rotate(-51.75deg);
|
||||
}
|
||||
|
||||
62% {
|
||||
transform: rotate(-47.27deg);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: rotate(-27.61deg);
|
||||
}
|
||||
|
||||
72% {
|
||||
transform: rotate(-25.65deg);
|
||||
}
|
||||
|
||||
80% {
|
||||
transform: rotate(-20.39deg);
|
||||
}
|
||||
|
||||
82% {
|
||||
transform: rotate(-18.52deg);
|
||||
}
|
||||
|
||||
90% {
|
||||
transform: rotate(-9.97deg);
|
||||
}
|
||||
|
||||
92% {
|
||||
transform: rotate(-7.9deg);
|
||||
55% {
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
|
|
|
|||
Loading…
Reference in a new issue