198 lines
7.8 KiB
Vue
198 lines
7.8 KiB
Vue
<script setup lang="ts">
|
|
import Badge from '~/components/ui/badge/Badge.vue';
|
|
import HoverableImage from '~/components/ui/hoverable-image/HoverableImage.vue';
|
|
import Tabs from '~/components/ui/tabs/Tabs.vue';
|
|
import TabsContent from '~/components/ui/tabs/TabsContent.vue';
|
|
import TabsList from '~/components/ui/tabs/TabsList.vue';
|
|
import TabsTrigger from '~/components/ui/tabs/TabsTrigger.vue';
|
|
|
|
const data = {
|
|
title: " .hack//G.U. Trilogy",
|
|
poster: "example/hackguposter.jpg",
|
|
description: `Based on the CyberConnect2 HIT GAME, now will be released in a CG Movie!
|
|
|
|
The Movie will be placed in the storyline of each .hack//G.U. games trilogy. The story follows Haseo, a player in the online MMORPG called The World:R2 at first depicted as a PKK (Player Killer Killer) known as the "Terror of Death", a former member of the disbanded Twilight Brigade guild. Haseo encounters Azure Kite (believing him to be Tri-Edge and blaming him for what happened to Shino) but is hopelessly outmatched. Azure Kite easily defeats Haseo and Data Drains him, reducing his level from 133 to 1 and leaving him without any items, weapons, or member addresses. He is left with a mystery on his hands as to the nature of the Data Drain and why Azure Kite is in possession of such a skill.
|
|
|
|
Eventually Haseo gains the "Avatar" of Skeith. Acquiring the ability to call Skeith and wield his abilities, such as Data Drain. With Skeith as his strength, Haseo begins the quest for a way to save Shino.
|
|
|
|
He is seen seeking out a PK (Player Killer) known as Tri-Edge, whose victims supposedly are unable to return to The World after he PKs them. Haseo's friend, Shino, was attacked six months prior to the events of the game by Tri-Edge, and the player herself, Shino Nanao, was left in a coma.
|
|
|
|
(Source: AniDB)
|
|
`,
|
|
format: "Movie",
|
|
episodes: 1,
|
|
duration: "1 hour, 33 mins",
|
|
status: "Finished",
|
|
release: "Mar 25, 2008",
|
|
season: "Spring 2008",
|
|
average: 67,
|
|
mean: 67,
|
|
popularity: 5481,
|
|
favorites: 36,
|
|
producers: ["Bandai Visual", "CyberConnect2", "Hanabee Entartainment", "Funimation"],
|
|
source: "Video Game",
|
|
genres: ["Action", "Fantasy", "Sci-Fi"],
|
|
romaji: ".hack//G.U. Trilogy",
|
|
native: ".hack//G.U. Trilogy",
|
|
relations: [
|
|
{
|
|
url: "/example/relation1.png",
|
|
type: "Prequel",
|
|
},
|
|
{
|
|
url: "/example/relation2.jpg",
|
|
type: "Sequel",
|
|
},
|
|
{
|
|
url: "/example/relation3.jpg",
|
|
type: "Alternative",
|
|
},
|
|
{
|
|
url: "/example/relation4.jpg",
|
|
type: "Alternative",
|
|
},
|
|
{
|
|
url: "/example/relation5.jpg",
|
|
type: "Side Story",
|
|
},
|
|
{
|
|
url: "/example/relation6.jpg",
|
|
type: "Summary",
|
|
},
|
|
]
|
|
}
|
|
</script>
|
|
<template>
|
|
<div
|
|
class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 bg-muted p-4 sm:p-6 md:p-8 lg:p-12 xl:min-h-3/4 xl:max-h-3/4">
|
|
<div class="flex flex-col items-center lg:items-start gap-4 lg:gap-6 lg:w-auto lg:min-w-72 xl:min-w-96 ">
|
|
<div class="max-w-xs lg:max-w-sm xl:max-w-md">
|
|
<NuxtImg :src="data.poster" class="w-full object-cover aspect-3/4 rounded-lg shadow-lg"
|
|
sizes="sm:100vw md:50vw lg:448px xl:512px" />
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-1 gap-2 w-full">
|
|
<Button class="w-full">
|
|
Watch Now
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<div class="space-y-4 xl:h-full">
|
|
<h3 class="text-xl md:text-2xl xl:text-3xl font-bold tracking-tight">
|
|
{{ data.title }}
|
|
</h3>
|
|
<div class="xl:h-full overflow-scroll">
|
|
<p
|
|
class="text-base lg:text-lg text-muted-foreground leading-relaxed md:leading-loose whitespace-pre-line transition-colors hover:text-foreground">
|
|
{{ data.description }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col lg:flex-row gap-4 lg:gap-8 xl:gap-16 p-4 sm:p-6 md:p-8 lg:p-12">
|
|
<div class="bg-muted text-muted-foreground text-xl space-y-4 min-w-96 p-8">
|
|
<div>
|
|
<p class="font-bold">Format</p>
|
|
{{ data.format }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Episodes</p>
|
|
{{ data.episodes }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Duration</p>
|
|
{{ data.duration }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Status</p>
|
|
<Badge>{{ data.status }}</Badge>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Release</p>
|
|
{{ data.release }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Season</p>
|
|
{{ data.season }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Genres</p>
|
|
<Badge v-for="genre in data.genres" class="mx-2">{{ genre }}</Badge>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Average Score</p>
|
|
{{ data.average }}%
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Mean Score</p>
|
|
{{ data.mean }}%
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Popularity</p>
|
|
{{ data.popularity }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Favorites</p>
|
|
{{ data.favorites }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Producers</p>
|
|
<p v-for="producer in data.producers">{{ producer }}</p>
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Source</p>
|
|
{{ data.source }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Romaji</p>
|
|
{{ data.romaji }}
|
|
</div>
|
|
<div>
|
|
<p class="font-bold">Native</p>
|
|
{{ data.native }}
|
|
</div>
|
|
</div>
|
|
<Tabs default-value="overview" class="w-full h-fit">
|
|
<TabsList class="w-full flex-1 mb-4">
|
|
<TabsTrigger value="overview">
|
|
Overview
|
|
</TabsTrigger>
|
|
<TabsTrigger value="characters">
|
|
Characters
|
|
</TabsTrigger>
|
|
<TabsTrigger value="staff">
|
|
Staff
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="overview">
|
|
<span class="text-xl font-semibold">Relations</span>
|
|
<HoverableImage src="/example/jigokuraku.jpg" alt="Description" title="Image Title" size="md"
|
|
variant="default">
|
|
<TooltipContent side="right" align="center" :side-offset="8" class="max-w-sm z-50"
|
|
tooltipColor="muted" :includeArrow="false">
|
|
<div class="space-y-2">
|
|
<h4 class="font-semibold text-sm">
|
|
{{ data.title }}
|
|
</h4>
|
|
|
|
<div class="text-xs text-muted-foreground">
|
|
<slot>
|
|
<p>Hover over the image for more details</p>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
</TooltipContent>
|
|
</HoverableImage>
|
|
</TabsContent>
|
|
<TabsContent value="characters">
|
|
|
|
</TabsContent>
|
|
<TabsContent value="staff">
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
</template>
|