mirror of
https://github.com/Drop-OSS/drop.git
synced 2025-11-17 18:21:10 +10:00
Rearchitecture for v0.4.0 (#197)
* feat: database redist support * feat: rearchitecture of database schemas, migration reset, and #180 * feat: import redists * fix: giantbomb logging bug * feat: partial user platform support + statusMessage -> message * feat: add user platform filters to store view * fix: sanitize svg uploads ... copilot suggested this I feel dirty. * feat: beginnings of platform & redist management * feat: add server side redist patching * fix: update drop-base commit * feat: import of custom platforms & file extensions * fix: redelete platform * fix: remove platform * feat: uninstall commands, new R UI * checkpoint: before migrating to nuxt v4 * update to nuxt 4 * fix: fixes for Nuxt v4 update * fix: remaining type issues * feat: initial feedback to import other kinds of versions * working commit * fix: lint * feat: redist import
This commit is contained in:
DecDuck
GitHub
68
app/pages/library/collection/[id]/index.vue
Normal file
68
app/pages/library/collection/[id]/index.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<div class="max-w-2xl">
|
||||
<div class="flex items-center gap-x-3 mb-4">
|
||||
<NuxtLink
|
||||
to="/library"
|
||||
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("library.back") }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ collection?.name }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("library.gameCount", collection?.entries?.length || 0) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Games grid -->
|
||||
<div
|
||||
class="mt-4 flex flex-row gap-4 flex-wrap justify-center sm:justify-start"
|
||||
>
|
||||
<GamePanel
|
||||
v-for="entry in collection?.entries"
|
||||
:key="entry.gameId"
|
||||
:game="entry.game"
|
||||
:href="`/library/game/${entry.game.id}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ArrowLeftIcon } from "@heroicons/vue/20/solid";
|
||||
|
||||
const route = useRoute();
|
||||
const collections = await useCollections();
|
||||
const { t } = useI18n();
|
||||
const collection = computed(() =>
|
||||
collections.value.find((e) => e.id == route.params.id),
|
||||
);
|
||||
if (collection.value === undefined) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
message: t("library.collection.notFound"),
|
||||
fatal: true,
|
||||
});
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: collection.value?.name || t("library.collection.title"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
</style>
|
||||
200
app/pages/library/game/[id]/index.vue
Normal file
200
app/pages/library/game/[id]/index.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<template>
|
||||
<div
|
||||
class="mx-auto w-full relative flex flex-col justify-center pt-72 overflow-hidden"
|
||||
>
|
||||
<!-- Banner background with gradient overlays -->
|
||||
<div class="absolute inset-0 z-0 rounded-xl overflow-hidden">
|
||||
<img
|
||||
:src="useObject(game.mBannerObjectId)"
|
||||
class="w-full h-[24rem] object-cover blur-sm scale-105"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-t from-zinc-900 to-transparent opacity-90"
|
||||
/>
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-r from-zinc-900/95 via-zinc-900/80 to-transparent opacity-90"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10">
|
||||
<div class="px-4 sm:px-8pb-4">
|
||||
<div class="flex items-center gap-x-3 mb-4">
|
||||
<NuxtLink
|
||||
to="/library"
|
||||
class="transition text-sm/6 font-semibold text-zinc-400 hover:text-zinc-100 inline-flex gap-x-2 items-center duration-200 hover:scale-105"
|
||||
>
|
||||
<ArrowLeftIcon class="h-4 w-4" aria-hidden="true" />
|
||||
{{ $t("library.back") }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Game title and description -->
|
||||
<h1
|
||||
class="text-3xl sm:text-5xl text-zinc-100 font-bold font-display drop-shadow-lg"
|
||||
>
|
||||
{{ game.mName }}
|
||||
</h1>
|
||||
<p class="mt-4 mb-8 text-sm sm:text-lg text-zinc-400 max-w-3xl">
|
||||
{{ game.mShortDescription }}
|
||||
</p>
|
||||
|
||||
<div class="flex items-stretch flex-col lg:flex-row gap-3">
|
||||
<button
|
||||
type="button"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-blue-600 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-blue-500 hover:scale-105 hover:shadow-blue-500/25 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
|
||||
>
|
||||
{{ $t("library.launcherOpen") }}
|
||||
<ArrowTopRightOnSquareIcon
|
||||
class="-mr-0.5 h-5 w-5"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</button>
|
||||
<div class="relative z-50">
|
||||
<AddLibraryButton class="font-bold" :game-id="game.id" />
|
||||
</div>
|
||||
<NuxtLink
|
||||
:to="`/store/${game.id}`"
|
||||
class="inline-flex items-center justify-center gap-x-2 rounded-md bg-zinc-800 px-3.5 py-2.5 text-base font-semibold font-display text-white shadow-sm transition-all duration-200 hover:bg-zinc-700 hover:scale-105 hover:shadow-lg active:scale-95 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-600"
|
||||
>
|
||||
{{ $t("store.viewInStore") }}
|
||||
<ArrowUpRightIcon class="-mr-0.5 h-5 w-5" aria-hidden="true" />
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content -->
|
||||
<div class="w-full bg-zinc-900 px-4 sm:px-8 py-3 sm:py-6">
|
||||
<div class="mt-8 flex flex-col gap-5 sm:gap-10">
|
||||
<div class="col-start-1 lg:col-start-2 space-y-6">
|
||||
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||
<h2 class="text-xl font-display font-semibold text-zinc-100 mb-4">
|
||||
{{ $t("store.images") }}
|
||||
</h2>
|
||||
<div class="relative">
|
||||
<VueCarousel :items-to-show="1" :wrap-around="true">
|
||||
<VueSlide
|
||||
v-for="image in game.mImageCarouselObjectIds"
|
||||
:key="image"
|
||||
>
|
||||
<img
|
||||
class="w-fit h-48 lg:h-96 rounded"
|
||||
:src="useObject(image)"
|
||||
/>
|
||||
</VueSlide>
|
||||
<VueSlide v-if="game.mImageCarouselObjectIds.length == 0">
|
||||
<div
|
||||
class="h-48 lg:h-96 aspect-[1/2] flex items-center justify-center text-zinc-700 font-bold font-display"
|
||||
>
|
||||
{{ $t("store.noImages") }}
|
||||
</div>
|
||||
</VueSlide>
|
||||
|
||||
<template #addons>
|
||||
<VueNavigation />
|
||||
<CarouselPagination class="py-2 px-12" />
|
||||
</template>
|
||||
</VueCarousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="bg-zinc-800/50 rounded-xl p-6 backdrop-blur-sm">
|
||||
<div
|
||||
class="prose prose-invert prose-blue overflow-y-auto custom-scrollbar max-w-none"
|
||||
v-html="descriptionHTML"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ArrowTopRightOnSquareIcon,
|
||||
ArrowUpRightIcon,
|
||||
} from "@heroicons/vue/20/solid";
|
||||
import { micromark } from "micromark";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.params.id.toString();
|
||||
|
||||
const { game: rawGame } = await $dropFetch(`/api/v1/games/${id}`);
|
||||
const game = computed(() => {
|
||||
if (!rawGame) {
|
||||
throw createError({ statusCode: 404, message: t("library.notFound") });
|
||||
}
|
||||
return rawGame;
|
||||
});
|
||||
|
||||
// Convert markdown to HTML
|
||||
const descriptionHTML = computed(() =>
|
||||
micromark(game.value.mDescription ?? ""),
|
||||
);
|
||||
|
||||
// const currentImageIndex = ref(0);
|
||||
|
||||
// function nextImage() {
|
||||
// if (!game.value?.mImageCarousel) return;
|
||||
// currentImageIndex.value =
|
||||
// (currentImageIndex.value + 1) % game.value.mImageCarousel.length;
|
||||
// }
|
||||
|
||||
// function previousImage() {
|
||||
// if (!game.value?.mImageCarousel) return;
|
||||
// currentImageIndex.value =
|
||||
// (currentImageIndex.value - 1 + game.value.mImageCarousel.length) %
|
||||
// game.value.mImageCarousel.length;
|
||||
// }
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgb(82 82 91) transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background-color: rgb(82 82 91);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
:deep(.relative) {
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
:deep(.dropdown-content) {
|
||||
z-index: 20;
|
||||
}
|
||||
</style>
|
||||
165
app/pages/library/index.vue
Normal file
165
app/pages/library/index.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-col gap-y-8">
|
||||
<div class="max-w-2xl">
|
||||
<h2 class="text-2xl font-bold font-display text-zinc-100">
|
||||
{{ $t("userHeader.links.library") }}
|
||||
</h2>
|
||||
<p class="mt-2 text-zinc-400">
|
||||
{{ $t("library.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Collections grid -->
|
||||
<TransitionGroup
|
||||
name="collection-list"
|
||||
tag="div"
|
||||
class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"
|
||||
>
|
||||
<!-- Collection buttons (wrap each in a div for grid layout) -->
|
||||
<div
|
||||
v-for="collection in collections"
|
||||
:key="collection.id"
|
||||
class="flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105 focus:scale-105"
|
||||
>
|
||||
<NuxtLink
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 focus:bg-zinc-800 focus:outline-none"
|
||||
:href="`/library/collection/${collection.id}`"
|
||||
>
|
||||
<h3 class="text-lg font-semibold text-zinc-100">
|
||||
{{ collection.name }}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-zinc-400">
|
||||
{{ $t("library.gameCount", [collection.entries.length]) }}
|
||||
</p>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Delete button (only show for non-default collections) -->
|
||||
<button
|
||||
class="group px-3 ml-[2px] bg-zinc-800/50 hover:bg-zinc-800 group focus:bg-zinc-800 focus:outline-none"
|
||||
@click="() => (currentlyDeleting = collection)"
|
||||
>
|
||||
<TrashIcon
|
||||
class="transition-all size-5 text-zinc-400 group-hover:text-red-400 group-hover:rotate-[8deg]"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Create new collection button (also wrap in div) -->
|
||||
<div>
|
||||
<button
|
||||
class="group flex flex-row rounded-lg overflow-hidden transition-all duration-200 text-left w-full hover:scale-105"
|
||||
@click="collectionCreateOpen = true"
|
||||
>
|
||||
<div
|
||||
class="grow p-4 bg-zinc-800/50 hover:bg-zinc-800 border-2 border-dashed border-zinc-700"
|
||||
>
|
||||
<div class="flex items-center gap-3">
|
||||
<PlusIcon
|
||||
class="h-5 w-5 text-zinc-400 group-hover:text-zinc-300 transition-all duration-300 group-hover:rotate-90"
|
||||
/>
|
||||
<h3
|
||||
class="text-lg font-semibold text-zinc-400 group-hover:text-zinc-300"
|
||||
>
|
||||
{{ $t("library.collection.create") }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-zinc-500 group-hover:text-zinc-400">
|
||||
{{ $t("library.collection.subheader") }}
|
||||
</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
|
||||
<!-- game library grid -->
|
||||
<div>
|
||||
<h1 class="text-zinc-100 text-xl font-bold font-display">
|
||||
{{ $t("library.addGames") }}
|
||||
</h1>
|
||||
<div class="mt-4 flex flex-row flex-wrap justify-left gap-4">
|
||||
<GamePanel
|
||||
v-for="game in games"
|
||||
:key="game.id"
|
||||
:game="game"
|
||||
:href="`/library/game/${game?.id}`"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ModalCreateCollection v-model="collectionCreateOpen" />
|
||||
<ModalDeleteCollection v-model="currentlyDeleting" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { TrashIcon, PlusIcon } from "@heroicons/vue/20/solid";
|
||||
import type { CollectionModel } from "~~/prisma/client/models";
|
||||
|
||||
const collections = await useCollections();
|
||||
const collectionCreateOpen = ref(false);
|
||||
|
||||
const currentlyDeleting = ref<CollectionModel | undefined>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const library = await useLibrary();
|
||||
const games = library.value.entries.map((e) => e.game);
|
||||
|
||||
useHead({
|
||||
title: t("userHeader.links.library"),
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Fade transition for main content */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(30px);
|
||||
}
|
||||
|
||||
/* List transition animations */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.list-enter-from,
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-30px);
|
||||
}
|
||||
|
||||
.list-move {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
/* Collection list transitions */
|
||||
.collection-list-enter-active,
|
||||
.collection-list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.collection-list-enter-from,
|
||||
.collection-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Hide scrollbar for Chrome, Safari and Opera */
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hide scrollbar for IE, Edge and Firefox */
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none; /* IE and Edge */
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user