From ff62e537457eea54a2ba3d1fe942f8407851ad49 Mon Sep 17 00:00:00 2001
From: BOTAlex <zhentao2004@gmail.com>
Date: Thu, 14 Aug 2025 06:34:51 +0200
Subject: [PATCH] let me cook bois

---
 src/pages/shop/_shop_main.svelte         |  2 +-
 src/pages/shop/comps/ShopItemCard.svelte | 66 +++++++++++++++++++-----
 2 files changed, 55 insertions(+), 13 deletions(-)

diff --git a/src/pages/shop/_shop_main.svelte b/src/pages/shop/_shop_main.svelte
index af49449..0ba1f3a 100644
--- a/src/pages/shop/_shop_main.svelte
+++ b/src/pages/shop/_shop_main.svelte
@@ -17,7 +17,7 @@
 </div>
 
 <div class="flex w-full justify-center">
-  <div class="grid grid-cols-2 gap-4">
+  <div class="grid grid-cols-2 gap-8">
     {#if allItems != undefined}
       {#each allItems as item, i}
         <ShopItemCard bind:shopItem={item} />
diff --git a/src/pages/shop/comps/ShopItemCard.svelte b/src/pages/shop/comps/ShopItemCard.svelte
index 8d06766..c2147ae 100644
--- a/src/pages/shop/comps/ShopItemCard.svelte
+++ b/src/pages/shop/comps/ShopItemCard.svelte
@@ -2,22 +2,64 @@
   import type { ShopItem } from "@src/ts/api/classes/ShopItem";
 
   export let shopItem: ShopItem;
+
+  const selectionScale = 95;
 </script>
 
-<div>
-  <div class="group relative w-64 h-64 bg-slate-300">
-    <div class="w-full h-full">
-      <img
-        class="object-cover w-full h-full peer"
-        src={shopItem.preview_image}
-        alt=""
-      />
-    </div>
-
+<div class="">
+  <div class="relative">
+    <div class="relative w-48 h-48 corner-border-container"></div>
     <div
-      class="absolute hidden group-hover:flex w-full h-full top-0 bg-black opacity-50"
+      class="absolute"
+      style:top={`${-(selectionScale - 100) / 2}%`}
+      style:left={`${-(selectionScale - 100) / 2}%`}
+      style:width={`${selectionScale}%`}
+      style:height={`${selectionScale}%`}
     >
-      Baller
+      <div class="w-full h-full">
+        <img
+          class="object-cover w-full h-full peer"
+          src={shopItem.preview_image}
+          alt=""
+        />
+      </div>
     </div>
   </div>
 </div>
+
+<style>
+  .corner-border-container {
+    --length: 5px;
+    --width: 1px;
+    --line-color: #eeeeee;
+    background-color: #0008;
+    background-image:
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color)),
+      linear-gradient(var(--line-color), var(--line-color));
+    background-size:
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length),
+      var(--length) var(--width),
+      var(--width) var(--length);
+    background-position:
+      top left,
+      top left,
+      top right,
+      top right,
+      bottom right,
+      bottom right,
+      bottom left,
+      bottom left;
+    background-repeat: no-repeat;
+  }
+</style>