107 lines
2.8 KiB
Vue
107 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { SingleChapterResult } from "@client/types/slightlyDifferentStory";
|
|
import { theme } from "ant-design-vue";
|
|
import { storyMiddleware } from "@client/middleware";
|
|
import forChapter from "~/components/reviews/forChapter.vue";
|
|
import storyInfo from "~/components/story/view/storyInfo.vue";
|
|
import chapterPicker from "~/components/story/view/chapterPicker.vue";
|
|
|
|
const { useToken } = theme;
|
|
const { token } = useToken();
|
|
definePageMeta({
|
|
middleware: [storyMiddleware],
|
|
});
|
|
const rtr = useRoute();
|
|
const { data: story, error } = await useApiFetch<SingleChapterResult>(
|
|
`/story/${rtr.params.id}/${rtr.params.cidx}`,
|
|
);
|
|
provide<SingleChapterResult | null>("story", story.value);
|
|
console.log("storyyy", story.value?.currentChapter);
|
|
console.log(rtr);
|
|
let dark = inject<boolean>("dark");
|
|
useHead({
|
|
title: `"${story.value.title}" by ${story.value.author.username}`,
|
|
});
|
|
</script>
|
|
<template>
|
|
<a-typography-title>
|
|
{{ story?.title }}
|
|
</a-typography-title>
|
|
<story-info />
|
|
<div>
|
|
<a-card
|
|
:style="{
|
|
backgroundColor: dark ? 'rgb(191, 54, 67)' : token.colorError,
|
|
display: 'flow-root',
|
|
color: '#fff',
|
|
}"
|
|
>
|
|
<div>
|
|
<a-typography-title :level="2"> Disclaimer </a-typography-title>
|
|
<a-divider style="background-color: #fff" />
|
|
{{ story.author.profile.disclaimer }}
|
|
</div>
|
|
</a-card>
|
|
<a-typography-title :level="3">
|
|
{{ story.currentChapter.title }}
|
|
</a-typography-title>
|
|
<chapter-picker v-if="story.totalChapters > 1" />
|
|
<div style="display: flow-root">
|
|
<a-divider />
|
|
</div>
|
|
<div v-html="story?.currentChapter.text"></div>
|
|
<a-divider style="background-color: #fff" />
|
|
<a-button-group size="large" v-if="story.totalChapters > 1">
|
|
<a-button
|
|
v-if="parseInt(rtr.params.cidx as string) > 1"
|
|
@click="() => navigateTo(`/story/${rtr.params.id}/1`)"
|
|
>
|
|
First
|
|
</a-button>
|
|
<a-button
|
|
v-if="parseInt(rtr.params.cidx as string) > 1"
|
|
@click="
|
|
() =>
|
|
navigateTo(
|
|
`/story/${rtr.params.id}/${
|
|
parseInt(rtr.params.cidx as string) - 1
|
|
}`,
|
|
)
|
|
"
|
|
>
|
|
Previous
|
|
</a-button>
|
|
<a-button
|
|
v-if="
|
|
parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
|
|
"
|
|
@click="
|
|
() =>
|
|
navigateTo(
|
|
`/story/${rtr.params.id}/${
|
|
parseInt(rtr.params.cidx as string) + 1
|
|
}`,
|
|
)
|
|
"
|
|
>
|
|
Next
|
|
</a-button>
|
|
<a-button
|
|
@click="
|
|
() =>
|
|
navigateTo(`/story/${rtr.params.id}/${story.chapterNames.length}`)
|
|
"
|
|
v-if="
|
|
parseInt(rtr.params.cidx as string) < story.chapterNames.length - 1
|
|
"
|
|
>
|
|
Last
|
|
</a-button>
|
|
</a-button-group>
|
|
<a-typography-title style="text-align: center" :level="2">
|
|
Reviews
|
|
</a-typography-title>
|
|
<for-chapter :endpoint="`/story/${rtr.params.id}/${rtr.params.cidx}`" />
|
|
</div>
|
|
</template>
|