init: frontend

src/App.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts"></script>
+
+<style scoped>
+.wrapped {
+  display: flex;
+}
+</style>
+
+<template>
+  <router-view></router-view>
+</template>

src/components/general-xd.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const header = 'bio'
+const border_color = ref('#656565')
+const background_color = ref('#353535')
+const primary_color = ref('#FFFFFF')
+</script>
+
+<style scoped>
+.wrapper {
+  width: 300px;
+  height: 75px;
+  border: 3px solid v-bind(border_color);
+  padding: 10px;
+  margin: 10px;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+h1 {
+  color: v-bind(border_color);
+  margin-top: -22px;
+  margin-left: -5px;
+  background-color: v-bind(background_color);
+  width: fit-content;
+  padding: 0 5px;
+  font-size: medium;
+  min-height: 1.4em;
+}
+
+p {
+  color: v-bind(primary_color);
+  margin: 0;
+  margin-top: -10px;
+}
+</style>
+
+<template>
+  <div class="wrapper">
+    <h1>{{ header }}</h1>
+    <div class="content">
+      <p>snusxd</p>
+      <p>:steamhappy:</p>
+    </div>
+  </div>
+</template>

src/components/now-playing.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import axios from 'axios'
+import { onMounted, onUnmounted, ref } from 'vue'
+import { ChangeTitle } from '@/utils/change-title'
+
+// api
+const lastfmapi = import.meta.env.VITE_LASTFM_API
+const lastfmusername = 'snsxd'
+
+const header = ref('silence...')
+const artist = ref('artist')
+const track = ref('track')
+const labelurl = ref('public/default-cover.png')
+
+// colors
+const border_color = ref('#656565')
+const background_color = ref('#353535')
+const primary_color = ref('#656565') // #FFFFFF
+
+async function checkNowPlaying(api: string, username: string) {
+  try {
+    const response = await axios.get(
+      `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${api}&format=json&limit=1`,
+    )
+    return response.data.recenttracks.track
+  } catch (error) {
+    console.error('Error fetching data:', error)
+  }
+}
+
+let timerId: ReturnType<typeof setTimeout>
+
+onMounted(() => {
+  const updateSong = async () => {
+    const trackData = await checkNowPlaying(lastfmapi, lastfmusername)
+    console.log(trackData)
+    if (trackData) {
+      if (trackData.length > 1) {
+        if (header.value !== 'now playing') {
+          await ChangeTitle(header, header.value, 'now playing')
+          primary_color.value = '#FFFFFF'
+        }
+        if (artist.value != trackData[0].artist['#text'])
+          ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
+        if (track.value != trackData[0].name) {
+          labelurl.value = `http://localhost:3000/cover/${trackData[0].artist['#text'].replace('/', '')}/${trackData[0].album['#text']}/${trackData[0].album.mbid ? trackData[0].album.mbid : '0'}`
+          console.log(labelurl.value)
+          ChangeTitle(track, track.value, trackData[0].name)
+        }
+      } else {
+        if (header.value !== 'silence...') ChangeTitle(header, header.value, 'silence...')
+        primary_color.value = '#656565'
+        labelurl.value = `http://localhost:3000/cover/0/0/0`
+        if (artist.value != trackData[0].artist['#text'])
+          ChangeTitle(artist, artist.value, trackData[0].artist['#text'])
+        if (track.value != trackData[0].name) ChangeTitle(track, track.value, trackData[0].name)
+      }
+    }
+    timerId = setTimeout(updateSong, 10000)
+  }
+
+  updateSong()
+})
+
+onUnmounted(() => {
+  if (timerId) clearTimeout(timerId)
+})
+</script>
+
+<style scoped>
+.wrapper {
+  background-color: v-bind(background_color);
+  box-shadow: 0 0 0 10px v-bind(background_color);
+  width: 350px;
+  height: 75px;
+  border: 3px solid v-bind(border_color);
+  padding: 10px;
+  margin: 10px;
+}
+
+.cover_name {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+  margin-top: -10px;
+}
+
+.name {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 10px;
+}
+
+h1 {
+  color: v-bind(border_color);
+  margin-top: -22px;
+  margin-left: -5px;
+  background-color: v-bind(background_color);
+  width: fit-content;
+  padding: 0 5px;
+  font-size: medium;
+  min-height: 1.4em;
+}
+
+p {
+  color: v-bind(primary_color);
+  margin: 0;
+}
+.track {
+  font-weight: bolder;
+}
+img {
+  width: 75px;
+  height: auto;
+}
+
+.wave-text {
+  background: linear-gradient(
+    90deg,
+    v-bind(border_color),
+    v-bind(primary_color),
+    v-bind(border_color)
+  );
+  background-size: 200% auto;
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  animation: wave-animation 2s linear infinite;
+}
+
+@keyframes wave-animation {
+  0% {
+    background-position: 0% center;
+  }
+  100% {
+    background-position: -200% center;
+  }
+}
+</style>
+
+<template>
+  <div class="wrapper">
+    <h1>
+      <span :class="{ 'wave-text': header === 'now playing' }">{{ header }}</span>
+    </h1>
+
+    <div class="cover_name">
+      <img :src="labelurl" />
+      <div class="name">
+        <p class="track">{{ track }}</p>
+        <p>{{ artist }}</p>
+      </div>
+    </div>
+  </div>
+</template>

src/global.css

@@ -0,0 +1,11 @@
+body {
+  background-color: #353535;
+  font-family: 'Iosevka', sans-serif;
+}
+
+@font-face {
+  font-family: 'Iosevka';
+  src: url('public/fonts/sgr_iosevka_regular.woff2') format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}

src/main.ts

@@ -0,0 +1,28 @@
+import { createApp, h } from 'vue'
+import { createWebHistory, createRouter } from 'vue-router'
+
+import App from './App.vue'
+import NowPlaying from './components/now-playing.vue'
+import GeneralXd from './components/general-xd.vue'
+import './global.css'
+
+const Home = {
+  render() {
+    return h('div', { class: 'wrapped', style: 'display: flex;' }, [h(GeneralXd), h(NowPlaying)])
+  },
+}
+
+const routes = [
+  { path: '/', component: Home },
+  { path: '/nowplay', component: NowPlaying },
+]
+
+export const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+const app = createApp(App)
+
+app.use(router)
+app.mount('#app')

src/utils/change-title.ts

@@ -0,0 +1,19 @@
+import type { Ref } from 'vue'
+
+const sleep = (ms: number) => new Promise((res) => setTimeout(res, ms))
+
+export async function ChangeTitle(refvar: Ref, old_string: string, new_string: string) {
+  const old_array = old_string.split(' ')
+  const new_array = new_string.split(' ')
+
+  for (let i = old_array.length; i >= 0; i -= 1) {
+    refvar.value = old_array.slice(0, i).join(' ')
+    await sleep(100)
+  }
+
+  for (let i = 0; i < new_array.length; i++) {
+    refvar.value = new_array.slice(0, i + 1).join(' ')
+    await sleep(100)
+  }
+  // refvar.value = new_string
+}