i miss otachan

src/App.css

@@ -132,7 +132,7 @@
 }
 
 
-.cardchild h1 {
+.cardchild h1:not(:has(.listeningto)) {
     font-size: 3em;
     text-align: center;
 }
@@ -151,8 +151,10 @@
     color: pink;
     text-decoration: underline;
     margin-bottom: 0%;
+    .fadein {
         animation: spawntop 1s;
     }
+}
 
 .cardchild span {
     font-size: 1.5em;
@@ -253,6 +255,7 @@
     cursor: pointer;
     min-width: 15em;
     max-width: 15em;
+    word-wrap: anywhere;
     margin: 1em;
     padding: 1em;
     border-radius: 3%;
@@ -371,7 +374,7 @@
 @keyframes spawntop {
     0% {
         opacity: 0%;
-    transform: translateY(100em);
+        transform: translateY(1em);
     }
 
     100% {

src/App.tsx

@@ -121,7 +121,7 @@ function App() {
         </div>
       </div>
       <AdvancedBr count={2} />
-      <div class='easteregg'>
+      <div class='easteregg' style={{opacity: isAnimating() || animatedwoem() ? "0%" : "100%"}}>
         <div class="musicbutton" onclick={() => { setpopup(!shouldpopup()) }}>
           <p>typa shit ive been on</p><img style={{
             "margin-left": "0.3em",

src/components/api.tsx

@@ -44,8 +44,9 @@ export default function Reviews() {
         <>
             <a style={{
                 display: ishover() ? "inline" : "none"
-            }} href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
-                <p>add your reviews here</p>
+            }}
+               href="https://discord.com/oauth2/authorize?client_id=1208380910525743134&response_type=token&redirect_uri=https%3A%2F%2Fexhq.dev%2Freview%2F&scope=identify">
+                <p class="fadein">add your reviews here</p>
             </a>
             <h1 class="reviewheadertext">Reviews</h1>
             <div
@@ -93,6 +94,7 @@ export const theImager = async (id: string): Promise<string> => (await fetch(`ht
         </div>
     );
 }
+
 export async function sendReview(review: string, token: string): Promise<boolean> {
     try {
         const response = await fetch(`https://backendreview.mono.exhq.dev/sendreview?review=${review}`, {

src/components/cumbrainz.css

@@ -0,0 +1,6 @@
+.listeningto {
+    font-size: smaller;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+}

src/components/cumbrainz.tsx

@@ -0,0 +1,65 @@
+import {createSignal, onMount, Show} from "solid-js";
+import "./cumbrainz.css"
+
+
+interface ListenPayload {
+    payload: {
+        count: number;
+        listens: Listen[];
+        playing_now: boolean;
+        user_id: string;
+    };
+}
+
+interface Listen {
+    playing_now: boolean;
+    track_metadata: TrackMetadata;
+}
+
+interface TrackMetadata {
+    additional_info: AdditionalInfo;
+    artist_name: string;
+    release_name: string;
+    track_name: string;
+}
+
+interface AdditionalInfo {
+    duration: number;
+    music_service_name: string;
+    origin_url: string;
+    submission_client: string;
+    submission_client_version: string;
+}
+
+export function Cumbrainz() {
+    const [musicInfo, setMusicInfo] = createSignal({} as ListenPayload);
+    const [isLoading, setIsLoading] = createSignal(true);
+    onMount(async () => {
+        try {
+            const the = await fetch("https://api.listenbrainz.org/1/user/exhq/playing-now")
+            const thejson = await the.json()
+            setMusicInfo(thejson)
+        } catch (error) {
+            console.error("Error fetching music data from song.link:", error);
+        } finally {
+            setIsLoading(false);
+        }
+    })
+    return <div class="listeningto">
+        <h2 >Listening to</h2>
+        <Show when={isLoading()} fallback={
+            <Show when={musicInfo().payload.listens.length > 0} fallback={<span>nothing</span>}>
+                <Thesong song={musicInfo()} />
+            </Show>
+        }>
+            <span>loading</span>
+        </Show>
+    </div>
+}
+
+function Thesong({song}: { song: ListenPayload }) {
+    return <a
+        href={song.payload.listens[0].track_metadata.additional_info.origin_url.replace(/\?.*/, m => `?v=${new URLSearchParams(m).get('v') ?? ''}`).replace(/(\?v=)$/, '')}>
+        <div> {song.payload.listens[0].track_metadata.artist_name} - {song.payload.listens[0].track_metadata.track_name} </div>
+    </a>
+}

src/components/middlecard.css

@@ -0,0 +1,11 @@
+.middleparent {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+    width: 100%;
+    height: 100%;
+}
+
+.middlechild {
+    text-align: center;
+}

src/components/middlecard.tsx

@@ -1,22 +1,33 @@
+import { Cumbrainz } from "./cumbrainz"
+import "./middlecard.css"
 export interface InfoCardProps {
     bd: boolean
 }
 
 export function InfoCard(props: InfoCardProps) {
-    return props.bd ? <>
-        <h1>hi :3</h1>
-        <span>its my birthday
+    
+    return <div class="middleparent">
+        <div class="middlechild">{
+        props.bd ?
+            <>
+                <span>
+                its my birthday
                     <br />
                 please buy me stuff
                 </span>
-    </> :
-        <>
-            <h1>hi :3</h1>
+            </> : <>
                 <span>silly goober who does silly stuff
                     <br />
                     self proclaimed programmer and progamer
                     <br />
                     shitposts for fun
                 </span>
-        </>
+            </>}</div>
+        <div style={{"background-color": "gray", height: "1px"}}>
+            <br/>
+        </div>
+        <div class="middlechild">
+            <Cumbrainz></Cumbrainz>
+        </div>
+    </div>
 }