ash/ive.gay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

tweaks

Browse source
This commit is contained in:
ashastral 2022-12-21 14:41:41 -08:00
parent 40ea62a000
commit fcb696f01c
2 changed files with 42 additions and 78 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
src/app.tsx
View file

@ -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>
)

81
src/index.css
View file

@ -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,71 +162,15 @@ textarea:focus {
transform: rotate(0deg);
}
4% {
transform: rotate(3.92deg);
45% {
transform: rotate(180deg);
}
55% {
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);
}
100% {
transform: rotate(0deg);
}
100% {
transform: rotate(0deg);
}
}