Drop-OSS/drop
1
0
Fork 0
mirror of https://github.com/Drop-OSS/drop.git synced 2026-01-31 15:37:09 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(ui): game carousel

Browse Source
This commit is contained in:
DecDuck
2024-11-24 09:47:32 +11:00
parent 9cbdcbcdf6
commit ecc819eebc
8 changed files with 101 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/core.scss
View File

@@ -66,4 +66,4 @@ $helvetica: (
}
.carousel__pagination-button--active:hover::after {
background-color: #d4d4d8;
}
}

2
components/CarouselPagination.vue
View File

@@ -5,7 +5,7 @@
@click="() => slideTo(i)"
:class="[
currentSlide == i ? 'bg-zinc-300' : 'bg-zinc-700',
'w-4 h-2 rounded-full',
'cursor-pointer w-4 h-2 rounded-full',
]"
/>
</div>

41
components/GameCarousel.vue Normal file
View File

@@ -0,0 +1,41 @@
<template>
<ClientOnly>
<VueCarousel :itemsToShow="moveAmount" :itemsToScroll="moveAmount / 2">
<VueSlide
class="justify-start"
v-for="(game, gameIdx) in games"
:key="gameIdx"
>
<GamePanel :game="game" />
</VueSlide>
<template #addons>
<VueNavigation />
</template>
</VueCarousel>
</ClientOnly>
</template>
<script setup lang="ts">
import type { Game } from "@prisma/client";
import type { SerializeObject } from "nitropack";
const props = defineProps<{
items: Array<SerializeObject<Game>>;
min?: number;
}>();
const min = computed(() => Math.max(props.min ?? 8, props.items.length));
const games: Ref<Array<SerializeObject<Game> | undefined>> = computed(() =>
Array(min.value)
.fill(0)
.map((_, i) => props.items[i])
);
const moveAmount = ref(1);
const moveFactor = 1.8 / 400;
onMounted(() => {
moveAmount.value = moveFactor * window.innerWidth;
});
</script>

4
components/GamePanel.vue
View File

@@ -2,11 +2,11 @@
<NuxtLink
v-if="game"
:href="`/store/${game.id}`"
class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 hover:scale-105 hover:shadow-xl"
class="rounded overflow-hidden w-48 h-64 group relative transition-all duration-300 text-left transform-3d hover:rotate-y-180"
>
<img :src="useObject(game.mCoverId)" class="w-full h-full object-cover" />
<div
class="absolute inset-0 bg-gradient-to-b from-transparent to-95% to-zinc-800"
class="absolute inset-0 bg-gradient-to-b from-transparent to-95% to-zinc-950"
/>
<div class="absolute bottom-0 left-0 px-2 py-1.5">
<h1 class="text-zinc-100 text-sm font-bold font-display">

2
package.json
View File

@@ -47,7 +47,7 @@
"nitropack": "^2.9.7",
"postcss": "^8.4.47",
"sass": "^1.79.4",
"tailwindcss": "^3.4.13"
"tailwindcss": "^3.4.15"
},
"optionalDependencies": {
"@drop/droplet-linux-x64-gnu": "^0.7.0",

85
pages/store/index.vue
View File

@@ -38,7 +38,7 @@
class="relative mx-auto flex max-w-xl flex-col items-center text-center"
>
<h3 class="text-base/7 font-semibold text-blue-300">
Newly added
Recently added
</h3>
<h2
class="text-3xl font-bold tracking-tight text-white sm:text-5xl"
@@ -59,82 +59,33 @@
</VueSlide>
<template #addons>
<CarouselPagination class="py-2" :items="recent"/>
<CarouselPagination class="py-2" :items="recent" />
</template>
</VueCarousel>
<!-- recently updated -->
<div class="px-4 sm:px-12 py-4">
<h1 class="text-zinc-100 text-2xl font-bold font-display">Recently updated</h1>
<NuxtLink class="text-blue-600 font-semibold"
>Explore more &rarr;</NuxtLink
>
<div class="mt-4">
<GameCarousel
v-if="updated"
:items="updated.map((e) => e.game)"
:min="24"
/>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const headers = useRequestHeaders(["cookie"]);
const { data: recent } = await useFetch("/api/v1/store/recent", { headers });
const { data: updated } = await useFetch("/api/v1/store/updated", { headers });
useHead({
title: "Store",
});
const categories = [
{
name: "New Arrivals",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-01.jpg",
},
{
name: "Productivity",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-02.jpg",
},
{
name: "Workspace",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-04.jpg",
},
{
name: "Accessories",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-05.jpg",
},
{
name: "Sale",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-category-03.jpg",
},
];
const collections = [
{
name: "Handcrafted Collection",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-01.jpg",
imageAlt:
"Brown leather key ring with brass metal loops and rivets on wood table.",
description:
"Keep your phone, keys, and wallet together, so you can lose everything at once.",
},
{
name: "Organized Desk Collection",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-02.jpg",
imageAlt:
"Natural leather mouse pad on white desk next to porcelain mug and keyboard.",
description:
"The rest of the house will still be a mess, but your desk will look great.",
},
{
name: "Focus Collection",
href: "#",
imageSrc:
"https://tailwindui.com/plus/img/ecommerce-images/home-page-01-collection-03.jpg",
imageAlt:
"Person placing task list card into walnut card holder next to felt carrying case on leather desk pad.",
description:
"Be more productive than enterprise project managers with a single piece of paper.",
},
];
</script>

7
server/api/v1/store/updated.get.ts
View File

@@ -5,6 +5,11 @@ export default defineEventHandler(async (h3) => {
if (!userId) throw createError({ statusCode: 403 });
const versions = await prisma.gameVersion.findMany({
where: {
versionIndex: {
gte: 1,
},
},
select: {
game: true,
created: true,
@@ -16,5 +21,5 @@ export default defineEventHandler(async (h3) => {
take: 8,
});
return { versions };
return versions;
});

57
yarn.lock
View File

@@ -2162,7 +2162,7 @@ character-reference-invalid@^2.0.0:
resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
chokidar@^3.5.1, chokidar@^3.5.3, chokidar@^3.6.0:
chokidar@^3.5.1, chokidar@^3.6.0:
version "3.6.0"
resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
@@ -2933,7 +2933,7 @@ fast-fuzzy@^1.12.0:
dependencies:
graphemesplit "^2.4.1"
fast-glob@^3.2.7, fast-glob@^3.3.0, fast-glob@^3.3.2:
fast-glob@^3.2.7, fast-glob@^3.3.2:
version "3.3.2"
resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -3694,7 +3694,7 @@ jdenticon@^3.3.0:
dependencies:
canvas-renderer "~2.2.0"
jiti@^1.21.0, jiti@^1.21.6:
jiti@^1.21.6:
version "1.21.6"
resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
@@ -5013,7 +5013,7 @@ perfect-debounce@^1.0.0:
resolved "https://registry.yarnpkg.com/perfect-debounce/-/perfect-debounce-1.0.0.tgz#9c2e8bc30b169cc984a58b7d5b28049839591d2a"
integrity sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==
picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0:
picocolors@^1.0.0, picocolors@^1.0.1, picocolors@^1.1.0, picocolors@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
@@ -5116,7 +5116,7 @@ postcss-js@^4.0.1:
dependencies:
camelcase-css "^2.0.1"
postcss-load-config@^4.0.1:
postcss-load-config@^4.0.2:
version "4.0.2"
resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-4.0.2.tgz#7159dcf626118d33e299f485d6afe4aff7c4a3e3"
integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
@@ -5175,7 +5175,7 @@ postcss-minify-selectors@^7.0.4:
cssesc "^3.0.0"
postcss-selector-parser "^6.1.2"
postcss-nested@^6.0.1:
postcss-nested@^6.2.0:
version "6.2.0"
resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-6.2.0.tgz#4c2d22ab5f20b9cb61e2c5c5915950784d068131"
integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
@@ -5275,7 +5275,7 @@ postcss-selector-parser@6.0.10:
cssesc "^3.0.0"
util-deprecate "^1.0.2"
postcss-selector-parser@^6.0.11, postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
postcss-selector-parser@^6.1.1, postcss-selector-parser@^6.1.2:
version "6.1.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz#27ecb41fb0e3b6ba7a1ec84fff347f734c7929de"
integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
@@ -5303,7 +5303,7 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
postcss@^8.4.23, postcss@^8.4.43, postcss@^8.4.47:
postcss@^8.4.43, postcss@^8.4.47:
version "8.4.47"
resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.47.tgz#5bf6c9a010f3e724c503bf03ef7947dcb0fea365"
integrity sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==
@@ -5623,7 +5623,7 @@ resolve-from@^5.0.0:
resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
resolve@^1.1.7, resolve@^1.22.1, resolve@^1.22.2:
resolve@^1.1.7, resolve@^1.22.1, resolve@^1.22.8:
version "1.22.8"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -6081,7 +6081,7 @@ stylehacks@^7.0.4:
browserslist "^4.23.3"
postcss-selector-parser "^6.1.2"
sucrase@^3.32.0:
sucrase@^3.35.0:
version "3.35.0"
resolved "https://registry.yarnpkg.com/sucrase/-/sucrase-3.35.0.tgz#57f17a3d7e19b36d8995f06679d121be914ae263"
integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
@@ -6141,33 +6141,33 @@ system-architecture@^0.1.0:
resolved "https://registry.yarnpkg.com/system-architecture/-/system-architecture-0.1.0.tgz#71012b3ac141427d97c67c56bc7921af6bff122d"
integrity sha512-ulAk51I9UVUyJgxlv9M6lFot2WP3e7t8Kz9+IS6D4rVba1tR9kON+Ey69f+1R4Q8cd45Lod6a4IcJIxnzGc/zA==
tailwindcss@^3.4.13:
version "3.4.14"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.14.tgz#6dd23a7f54ec197b19159e91e3bb1e55e7aa73ac"
integrity sha512-IcSvOcTRcUtQQ7ILQL5quRDg7Xs93PdJEk1ZLbhhvJc7uj/OAhYOnruEiwnGgBvUtaUAJ8/mhSw1o8L2jCiENA==
tailwindcss@^3.4.15:
version "3.4.15"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.15.tgz#04808bf4bf1424b105047d19e7d4bfab368044a9"
integrity sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==
dependencies:
"@alloc/quick-lru" "^5.2.0"
arg "^5.0.2"
chokidar "^3.5.3"
chokidar "^3.6.0"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.3.0"
fast-glob "^3.3.2"
glob-parent "^6.0.2"
is-glob "^4.0.3"
jiti "^1.21.0"
jiti "^1.21.6"
lilconfig "^2.1.0"
micromatch "^4.0.5"
micromatch "^4.0.8"
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.23"
picocolors "^1.1.1"
postcss "^8.4.47"
postcss-import "^15.1.0"
postcss-js "^4.0.1"
postcss-load-config "^4.0.1"
postcss-nested "^6.0.1"
postcss-selector-parser "^6.0.11"
resolve "^1.22.2"
sucrase "^3.32.0"
postcss-load-config "^4.0.2"
postcss-nested "^6.2.0"
postcss-selector-parser "^6.1.2"
resolve "^1.22.8"
sucrase "^3.35.0"
tapable@^2.2.0:
version "2.2.1"
@@ -6900,7 +6900,12 @@ yaml-ast-parser@0.0.43:
resolved "https://registry.yarnpkg.com/yaml-ast-parser/-/yaml-ast-parser-0.0.43.tgz#e8a23e6fb4c38076ab92995c5dca33f3d3d7c9bb"
integrity sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==
yaml@^2.3.4, yaml@^2.5.0:
yaml@^2.3.4:
version "2.6.1"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.1.tgz#42f2b1ba89203f374609572d5349fb8686500773"
integrity sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==
yaml@^2.5.0:
version "2.6.0"
resolved "https://registry.yarnpkg.com/yaml/-/yaml-2.6.0.tgz#14059ad9d0b1680d0f04d3a60fe00f3a857303c3"
integrity sha512-a6ae//JvKDEra2kdi1qzCyrJW/WZCgFi8ydDV+eXExl95t+5R+ijnqHJbz9tmMh8FUjx3iv2fCQ4dclAQlO2UQ==