diff --git a/src/assets/main.css b/src/assets/main.css index 02cd0a6..f01e873 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,7 +1,17 @@ @import "tailwindcss"; @theme { - --breakpoint-xs: 400px + --breakpoint-xs: 400px; + --animate-scroll-left: scroll-left 10s linear infinite; + + @keyframes scroll-left { + 0% { + transform: translateX(50%); + } + 100% { + transform: translateX(-50%); + } + } } body { @@ -18,9 +28,4 @@ body { background-color:gray; border-radius: var(--radius-lg); } -} - -@keyframes scroll { - 0% { transform: translateX(100%); } - 100% { transform: translateX(-100%); } } \ No newline at end of file diff --git a/src/components/FantasyStatus.tsx b/src/components/FantasyStatus.tsx index 690698d..4d17607 100644 --- a/src/components/FantasyStatus.tsx +++ b/src/components/FantasyStatus.tsx @@ -35,7 +35,7 @@ export default function FantasyStatus() { }, []); return ( -
+
void; }) { return ( - //
- //

- // X - //

- // {children} - //
{children}
diff --git a/src/components/ScrollingText.tsx b/src/components/ScrollingText.tsx deleted file mode 100644 index 96c7dc0..0000000 --- a/src/components/ScrollingText.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import { useEffect, useRef } from "react"; - -const ScrollingText = ({ - speed = 0.5, - size = "37", - text, -}: { - speed?: number; - size?: string; - text: string; -}) => { - const scrollContainerRef = useRef(null); - const contentRef = useRef(null); - - useEffect(() => { - const scrollContainer = scrollContainerRef.current; - const contentElement = contentRef.current; - - if (!scrollContainer || !contentElement) return; - - // Create a clone of the content element - const clone = contentElement.cloneNode(true) as HTMLDivElement; - scrollContainer.appendChild(clone); - - let animationId: number; - let scrollPosition = 0; - - const animate = () => { - if (!scrollContainer || !contentElement) return; - - // Increment scroll position based on speed - scrollPosition += speed; - - // Reset position when first element is scrolled out of view - if (scrollPosition >= contentElement.offsetWidth) { - scrollPosition = 0; - } - - // Apply scroll position - scrollContainer.scrollLeft = scrollPosition; - - animationId = requestAnimationFrame(animate); - }; - - animationId = requestAnimationFrame(animate); - - return () => { - cancelAnimationFrame(animationId); - }; - }, [speed, text]); - - if (text) { - return ( -
-
-    - - {text} - -
-
- ); - } -}; - -export default ScrollingText; diff --git a/src/components/info/MusicComponent.tsx b/src/components/info/MusicComponent.tsx index 8cefd18..aeb41d1 100644 --- a/src/components/info/MusicComponent.tsx +++ b/src/components/info/MusicComponent.tsx @@ -1,5 +1,4 @@ import { useState, useEffect } from "react"; -import ScrollingText from "../ScrollingText"; import type { LastFMMusicObject } from "../../utils/types"; export default function MusicComponent() { @@ -28,13 +27,23 @@ export default function MusicComponent() { if (music) { return ( -
- -
- -

{music.artist}

+
+
+
+ +
+
+
+

{music.title}

+
+
+ +

{music.artist}

+
+
+

powered by last.fm

-
+ ); } else { if (failedFetch) { diff --git a/src/components/modules/CountdownModule.tsx b/src/components/modules/CountdownModule.tsx index fdb0835..fcb1009 100644 --- a/src/components/modules/CountdownModule.tsx +++ b/src/components/modules/CountdownModule.tsx @@ -41,7 +41,7 @@ export default function CountdownModule() { }, []); return ( -
+
{ diff --git a/src/components/modules/InfoModule.tsx b/src/components/modules/InfoModule.tsx index 72a724e..7bc6d95 100644 --- a/src/components/modules/InfoModule.tsx +++ b/src/components/modules/InfoModule.tsx @@ -5,7 +5,7 @@ export default function InfoModule() { return (
-
+
@@ -38,7 +31,7 @@ export default function InfoModule() { , game, code

navigator.clipboard.writeText("alex@vierfrantz.com")} > alex@vierfrantz.com diff --git a/src/components/modules/ScoreModule.tsx b/src/components/modules/ScoreModule.tsx index 87ac7e0..22c0b87 100644 --- a/src/components/modules/ScoreModule.tsx +++ b/src/components/modules/ScoreModule.tsx @@ -38,7 +38,7 @@ export default function ScoreModule({ type }: { type: "sabres" | "bills" }) { }, []); return ( -
+
diff --git a/src/pages/App.tsx b/src/pages/App.tsx index ab78f29..af2c3bd 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -27,8 +27,8 @@ export default function App() { )} -
-
+
+