push

frontend/src/views/ShopPage.vue

@@ -59,6 +59,7 @@
               :buying="buying === p.id"
               :owns="owns"
               :pet-count="petCount()"
+              :owned-pet-chars="ownedPetChars()"
               :free-mode="freeMode"
               @buy="onBuy"
               @go-perso="activeCat = 'perso'"
@@ -78,7 +79,7 @@ import { useWallet } from '@/composables/useWallet';
 import ProductCard from '@/components/shop/ProductCard.vue';
 import MesPersos from '@/components/shop/MesPersos.vue';
 
-const { products, loading, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, purchase } = useShop();
+const { products, loading, buying, lastError, lastSuccess, fetchProducts, fetchMe, owns, petCount, ownedPetChars, purchase } = useShop();
 const { ip, freeMode, displayBalance, fetchWallet, topUp: walletTopUp } = useWallet();
 
 const categories = [
@@ -92,11 +93,19 @@ const categories = [
 ];
 const activeCat = ref('all');
 
-const visibleProducts = computed(() =>
-  activeCat.value === 'all'
+const visibleProducts = computed(() => {
+  const chars = ownedPetChars();
+  const base = activeCat.value === 'all'
     ? products.value
-    : products.value.filter((p) => p.category === activeCat.value)
-);
+    : products.value.filter((p) => p.category === activeCat.value);
+  return base.filter((p) => {
+    if (p.kind !== 'pet') return true;
+    try {
+      const designs: any[] = JSON.parse((p as any).metaJson ?? '{}').designs ?? [];
+      return designs.some((d) => !chars.includes(d.char));
+    } catch { return true; }
+  });
+});
 
 async function onBuy(productId: string, options: PurchaseOptions): Promise<void> {
   await purchase(productId, options);