Add ltd stuff

src/index.css

@@ -75,18 +75,27 @@ body {
 }
 
 @layer components {
-
     @keyframes blink {
-        0%, 100% { opacity: 1; }
+        0%,
-        50% { opacity: 0; }
+        100% {
-      }
+            opacity: 1;
+        }
+        50% {
+            opacity: 0;
+        }
+    }
 
-      @keyframes scale {
+    @keyframes scale {
-        0%, 100% { transform: scale(1); }
+        0%,
-        50% { transform: scale(1.5); }
+        100% {
-      }
+            transform: scale(1);
+        }
+        50% {
+            transform: scale(1.5);
+        }
+    }
 
-      .dot {
+    .dot {
         position: absolute;
         width: 2px;
         height: 2px;
@@ -117,7 +126,7 @@ body {
             position: absolute;
             background-color: currentColor;
 
-            &:nth-child(1){
+            &:nth-child(1) {
                 top: 0;
                 left: 50%;
                 width: 1px;
@@ -137,7 +146,8 @@ body {
 
     .connecting-duck {
         @apply absolute inset-0 m-auto;
-        background: url('@/assets/images/loading/connecting-duck-spritesheet.png') no-repeat top left;
+        background: url("@/assets/images/loading/connecting-duck-spritesheet.png")
+            no-repeat top left;
         width: 235px;
         height: 127px;
         animation: connecting-duck 1.5s infinite step-end;
@@ -146,39 +156,39 @@ body {
 
     @keyframes connecting-duck {
         0% {
-          background-position: 0 0;
+            background-position: 0 0;
-          width: 235px;
+            width: 235px;
-          height: 127px;
+            height: 127px;
         }
         15% {
-          background-position: 0 -132px;
+            background-position: 0 -132px;
-          width: 280px;
+            width: 280px;
-          height: 151px;
+            height: 151px;
         }
         30% {
-          background-position: 0 -288px;
+            background-position: 0 -288px;
-          width: 326px;
+            width: 326px;
-          height: 174px;
+            height: 174px;
         }
         45% {
-          background-position: 0 -467px;
+            background-position: 0 -467px;
-          width: 235px;
+            width: 235px;
-          height: 127px;
+            height: 127px;
         }
         60% {
-          background-position: 0 -599px;
+            background-position: 0 -599px;
-          width: 280px;
+            width: 280px;
-          height: 151px;
+            height: 151px;
         }
         75% {
-          background-position: 0 -755px;
+            background-position: 0 -755px;
-          width: 326px;
+            width: 326px;
-          height: 174px;
+            height: 174px;
         }
         90% {
-          background-position: 0 -934px;
+            background-position: 0 -934px;
-          width: 190px;
+            width: 190px;
-          height: 104px;
+            height: 104px;
         }
     }
 
@@ -821,3 +831,147 @@ body {
         }
     }
 }
+
+.unique-item {
+    .unique-bg-override {
+        @apply z-[2] bg-center bg-no-repeat;
+    }
+
+    &:before {
+        @apply absolute z-[1] size-full bg-center bg-no-repeat [content:""];
+        background-image: url("@/assets/images/unique/grid-bg.png");
+    }
+
+    &:after {
+        @apply absolute bottom-0 z-[4] size-full bg-center bg-no-repeat [content:""];
+        background-image: url("@/assets/images/unique/grid-bg-glass.png");
+    }
+
+    &.sold-out:after {
+        @apply bg-center bg-no-repeat;
+        background-image: url("@/assets/images/unique/grid-bg-sold-out.png"),
+            url("@/assets/images/unique/grid-bg-glass.png");
+    }
+
+    .unique-item-counter {
+        background-image: url("@/assets/images/unique/grid-count-bg.png");
+        @apply bottom-[1px] z-[3] mx-auto my-0 flex h-[9px] w-full items-center justify-center bg-center bg-no-repeat;
+    }
+}
+
+.unique-sold-out-blocker {
+    width: 364px;
+    height: 30px;
+    background: url("@/assets/images/unique/catalog-info-sold-out.png");
+
+    div {
+        float: right;
+        width: 140px;
+        text-align: center;
+        font-weight: bold;
+        margin-top: 5px;
+        margin-right: 17px;
+        color: #000;
+    }
+}
+
+.unique-compact-plate {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    right: 16px;
+    width: 34px;
+    height: 37px;
+    background: url("@/assets/images/unique/inventory-info-amount-bg.png");
+
+    div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 9.5px;
+    }
+}
+
+.unique-complete-plate {
+    width: 170px;
+    height: 29px;
+    background: url("@/assets/images/unique/catalog-info-amount-bg.png")
+        no-repeat center;
+    z-index: 1;
+    padding-top: 3px;
+
+    .plate-container {
+        margin-left: 45px;
+        width: 100px;
+        font-size: 10px;
+        color: black;
+
+        > :first-child {
+            margin-bottom: 2px;
+        }
+    }
+}
+
+.limited-edition-number {
+    display: inline-block;
+    outline: 0;
+    height: 5px;
+    margin-right: 1px;
+    background-image: url("@/assets/images/unique/numbers.png");
+    background-repeat: no-repeat;
+
+    &:last-child {
+        margin-right: 0px;
+    }
+
+    &.n-0 {
+        width: 4px;
+        background-position: -1px 0px;
+    }
+
+    &.n-1 {
+        width: 2px;
+        background-position: -6px 0px;
+    }
+
+    &.n-2 {
+        width: 4px;
+        background-position: -9px 0px;
+    }
+
+    &.n-3 {
+        width: 4px;
+        background-position: -14px 0px;
+    }
+
+    &.n-4 {
+        width: 4px;
+        background-position: -19px 0px;
+    }
+
+    &.n-5 {
+        width: 4px;
+        background-position: -24px 0px;
+    }
+
+    &.n-6 {
+        width: 4px;
+        background-position: -29px 0px;
+    }
+
+    &.n-7 {
+        width: 4px;
+        background-position: -34px 0px;
+    }
+
+    &.n-8 {
+        width: 4px;
+        background-position: -39px 0px;
+    }
+
+    &.n-9 {
+        width: 4px;
+        background-position: -44px 0px;
+    }
+}

src/layout/InfiniteGrid.tsx

@@ -1,6 +1,7 @@
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { DetailedHTMLProps, Fragment, HTMLAttributes, ReactElement, forwardRef, useEffect, useRef, useState } from 'react';
 import { classNames } from './classNames';
+import { NitroLimitedEditionStyledNumberView } from './limited-edition';
 import { styleNames } from './styleNames';
 
 type Props<T> = {
@@ -143,6 +144,9 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
                 'flex flex-col items-center justify-center cursor-pointer overflow-hidden relative bg-center bg-no-repeat w-full rounded-md border-2',
                 (!backgroundImageUrl || !backgroundImageUrl.length) && 'nitro-icon icon-loading',
                 itemActive ? 'border-card-grid-item-active bg-card-grid-item-active' : 'border-card-grid-item-border bg-card-grid-item',
+                (itemUniqueSoldout || (itemUniqueNumber > 0)) && 'unique-item',
+                itemUniqueSoldout && 'sold-out',
+                itemUnseen && ' bg-green-500 bg-opacity-40',
                 className
             ) }
             style={ styleNames(
@@ -152,6 +156,19 @@ const InfiniteGridItem = forwardRef<HTMLDivElement, {
                 style
             ) }
             { ...rest }>
+            { (itemCount > itemCountMinimum) &&
+                <div className="absolute align-middle rounded bg-red-700 bg-opacity-80 text-white border-black border top-[2px] right-[2px] text-[9.5px] p-[2px] z-[1] leading-[8px]">{ itemCount }</div> }
+            { (itemUniqueNumber > 0) && 
+                <>
+                    <div
+                        className="size-full unique-bg-override"
+                        style={ {
+                            backgroundImage: `url(${ backgroundImageUrl })`
+                        } } />
+                    <div className="absolute bottom-0 unique-item-counter">
+                        <NitroLimitedEditionStyledNumberView value={ itemUniqueNumber } />
+                    </div>
+                </> }
             { children }
         </div>
     );

src/layout/NitroCard.tsx

@@ -13,7 +13,7 @@ const NitroCardRoot = forwardRef<HTMLDivElement, PropsWithChildren<{
             <div
                 ref={ ref }
                 className={ classNames(
-                    'flex flex-col rounded-md shadow border border-card-border overflow-hidden min-w-full min-h-full max-w-full max-h-full',
+                    'flex flex-col rounded-md shadow border-2 border-card-border overflow-hidden min-w-full min-h-full max-w-full max-h-full',
                     className
                 ) }
                 { ...rest } />

src/layout/index.ts

@@ -2,4 +2,5 @@ export * from './InfiniteGrid';
 export * from './NitroCard';
 export * from './NitroItemCountBadge';
 export * from './classNames';
+export * from './limited-edition';
 export * from './styleNames';

src/layout/limited-edition/NitroLimitedEditionStyledNumberView.tsx

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+
+export const NitroLimitedEditionStyledNumberView: FC<{
+    value: number;
+}> = props =>
+{
+    const { value = 0 } = props;
+    
+    return (
+        <>
+            { value.toString().split('').map((number, index) =>
+                <i
+                    key={ index }
+                    className={ 'limited-edition-number n-' + number } />
+            ) }
+        </>
+    );
+}

src/layout/limited-edition/index.ts

@@ -0,0 +1 @@
+export * from './NitroLimitedEditionStyledNumberView';