DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

cooking
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-14 07:03:57 +02:00
parent 1b371ff2b7
commit 990266de0c
2 changed files with 23 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
src/pages/shop/comps/ShopItemCard.svelte
View file

@ -1,5 +1,6 @@
<script lang="ts"> <script lang="ts">
import type { ShopItem } from "@src/ts/api/classes/ShopItem"; import type { ShopItem } from "@src/ts/api/classes/ShopItem";
import { ArrowBigRight } from "lucide-svelte";
export let shopItem: ShopItem; export let shopItem: ShopItem;
@ -9,7 +10,22 @@
<div class=""> <div class="">
<div class="relative w-48 h-48"> <div class="relative w-48 h-48">
<!-- moved w/h here --> <!-- moved w/h here -->
<div class="corner-border-container"></div> <div class="corner-border-container">
<div class="w-full h-full flex flex-col justify-end">
<div class="flex flex-col justify-center items-center">
<span class="text-xl font-semibold text-center w-full"
>{shopItem.item_name}</span
>
<span>{@html shopItem.short_desc}</span>
</div>
<div class="flex justify-end p-2">
<a
class="btn not-hover:btn-outline btn-primary btn-square"
href={shopItem.page_url}><ArrowBigRight /></a
>
</div>
</div>
</div>
<!-- removed 'relative w-48 h-48' --> <!-- removed 'relative w-48 h-48' -->
<div <div
class="absolute" class="absolute"
@ -20,7 +36,7 @@
> >
<div class="w-full h-full"> <div class="w-full h-full">
<img <img
class="object-cover w-full h-full peer" class="object-cover w-full h-full peer rounded"
src={shopItem.preview_image} src={shopItem.preview_image}
alt="" alt=""
/> />
@ -40,7 +56,6 @@
position: absolute; position: absolute;
inset: 0; inset: 0;
z-index: 1; z-index: 1;
pointer-events: none;
/* Corner lines (same 8-gradients as before) */ /* Corner lines (same 8-gradients as before) */
background-image: background-image:
@ -94,6 +109,6 @@
--y: var(--length); --y: var(--length);
opacity: 1; opacity: 1;
transform: scale(1); transform: scale(1);
background-color: #0008; background-color: rgba(0, 0, 0, 0.65);
} }
</style> </style>

4
src/ts/api/classes/ShopItem.ts
View file

@ -3,6 +3,7 @@ import { ParseAssetUrl } from "@src/ts/Helper";
export class ShopItem { export class ShopItem {
item_name: string; item_name: string;
short_desc: string;
preview_image: string; preview_image: string;
page_url: string; // the url used for the item page_url: string; // the url used for the item
images_root: string; // might not be optimal to include this, in the same class, but should be fine, for now at least images_root: string; // might not be optimal to include this, in the same class, but should be fine, for now at least
@ -13,6 +14,7 @@ export class ShopItem {
constructor( constructor(
item_name: string, item_name: string,
short_desc: string,
preview_image: string, preview_image: string,
redirect: string, redirect: string,
images_root: string, images_root: string,
@ -22,6 +24,7 @@ export class ShopItem {
unlisted: boolean, unlisted: boolean,
) { ) {
this.item_name = item_name; this.item_name = item_name;
this.short_desc = short_desc;
this.preview_image = preview_image; this.preview_image = preview_image;
this.page_url = redirect; this.page_url = redirect;
this.images_root = images_root; this.images_root = images_root;
@ -34,6 +37,7 @@ export class ShopItem {
static fromJSON(json: any): ShopItem { static fromJSON(json: any): ShopItem {
return new ShopItem( return new ShopItem(
json.item_name, json.item_name,
json.short_desc,
ParseAssetUrl(json.preview_image, "/assets/shop/preview-images"), ParseAssetUrl(json.preview_image, "/assets/shop/preview-images"),
json.page_url, json.page_url,
ParseAssetUrl(json.images_root, "/assets/shop/" + json.item_name + "/"), // Please use better paths ParseAssetUrl(json.images_root, "/assets/shop/" + json.item_name + "/"), // Please use better paths