81 lines
2.8 KiB
Vue
81 lines
2.8 KiB
Vue
|
<script lang="ts">
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
async setup() {
|
||
|
|
const route = useRoute()
|
||
|
|
const game = route.params.game
|
||
|
|
const res = await fetch(`http://localhost:7000/api/discover/${game}`)
|
||
|
|
|
||
|
|
return {
|
||
|
|
data: await res.json()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
methods: {
|
||
|
|
abbreviate(text: number) {
|
||
|
|
return Intl.NumberFormat('en-US', {
|
||
|
|
//@ts-ignore
|
||
|
|
notation: "compact",
|
||
|
|
maximumFractionDigits: 1
|
||
|
|
}).format(text)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div class="flex flex-col max-w-5xl mx-auto">
|
||
|
|
<div class="flex space-x-4 p-3">
|
||
|
|
<img :src="data.cover" class="self-start rounded-md">
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
|
||
|
|
<div class="inline-flex my-1 space-x-3">
|
||
|
|
<p class="font-bold text-white text-lg">Followers: {{ abbreviate(data.followers) }}</p>
|
||
|
|
<p class="font-bold text-white text-lg">Viewers: {{ abbreviate(data.viewers) }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ul class="mb-5">
|
||
|
|
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
|
||
|
|
<span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{ tag }}</span>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<p class="text-md text-gray-400 overflow-y-auto">{{ data.description }}</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="max-w-[58rem] mx-auto">
|
||
|
|
<ul>
|
||
|
|
<li v-for="stream in data.streams" :key="stream" class="inline-flex m-2 hover:scale-105 transition-transform">
|
||
|
|
<div class="bg-ctp-crust rounded-lg">
|
||
|
|
<a :href="`http://localhost:5173/${stream.streamer.name}`">
|
||
|
|
<img :src="stream.preview" class="rounded-lg rounded-b-none">
|
||
|
|
</a>
|
||
|
|
|
||
|
|
<div class="text-white p-2 inline-flex space-x-2 w-full">
|
||
|
|
|
||
|
|
|
||
|
|
<div class="inline-flex w-full">
|
||
|
|
<div class="inline-flex">
|
||
|
|
<img :src="stream.streamer.pfp" class="rounded-full mr-2">
|
||
|
|
<div>
|
||
|
|
<p class="font-bold w-[22.9rem] truncate">{{ stream.title }}</p>
|
||
|
|
<div class="inline-flex w-full justify-between">
|
||
|
|
<p class="text-gray-300">{{ stream.streamer.name }}</p>
|
||
|
|
<p class="self-end float-right"> <v-icon name="io-person"></v-icon> {{ abbreviate(stream.viewers) }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|