tweaks

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

src/index.css

@@ -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% {
+	45% {
-		transform: rotate(3.92deg);
+		transform: rotate(180deg);
 	}
+  
+  55% {
+    transform: rotate(-180deg);
+  }
 
-	8% {
+  100% {
-		transform: rotate(7.9deg);
+    transform: rotate(0deg);
-	}
+  }
-
-	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);
-	}
 }