Experiment

angular.json

@@ -94,6 +94,9 @@
     }
   },
   "cli": {
-    "analytics": false
+    "analytics": false,
+    "cache": {
+      "enabled": true
+    }
   }
 }

src/app/app.component.html

@@ -1,7 +1,7 @@
 <main class="flex flex-col h-screen w-full items-center bg-surface-800">
-  <app-bar class="sticky top-0 z-10 h-[10%]"/>
+  <app-bar class="fixed top-0 z-10"/>
 
-  <div class="flex-1">
+  <div class="flex-1 w-full relative top-[4rem]">
     <router-outlet/>
   </div>
 </main>

src/app/app.config.ts

@@ -14,7 +14,13 @@ export const appConfig: ApplicationConfig = {
     provideAnimationsAsync(),
     providePrimeNG({
       theme: {
-        preset: Aura
+        preset: Aura,
+        options: {
+          cssLayer: {
+            name: 'primeng',
+            order: 'theme,base,primeng'
+          }
+        }
       }
     }),
     provideHttpClient(),

src/app/app.routes.ts

@@ -1,8 +1,10 @@
 import {Routes} from '@angular/router';
 import {DecksComponent} from './views/decks/decks.component';
 import {CardsComponent} from './views/cards/cards.component';
+import {PlaygroundComponent} from './views/playground/playground.component';
 
 export const routes: Routes = [
   { path: 'cards', component: CardsComponent },
   { path: 'decks', component: DecksComponent },
+  { path: 'test', component: PlaygroundComponent },
 ];

src/app/component/bar/bar.component.html

@@ -1,9 +1,7 @@
-<div class="w-screen p-4 bg-none">
+<div class="w-screen bg-none backdrop-blur-md">
   <p-menubar
     [model]="items"
-    [style]="{ background: 'none'}"
-    styleClass="backdrop-blur-md"
-    class="backdrop-blur-md"
+    [style]="{ background: 'none', height: '4rem'}"
   >
     <ng-template #item let-item let-root="root">
       <a pRipple class="flex items-center p-menubar-item-link">

src/app/component/bar/bar.component.ts

@@ -46,6 +46,13 @@ export class BarComponent implements OnInit {
         command: async () => {
           await this.router.navigate(['/cards']);
         }
+      },
+      {
+        label: 'Test',
+        icon: 'pi pi-search',
+        command: async () => {
+          await this.router.navigate(['/test']);
+        }
       }
     ]
   }

src/app/component/items/items.component.ts

@@ -4,7 +4,7 @@ import {Card as CardModel, CardService} from '../../openapi';
 import {Card} from 'primeng/card';
 import {Button} from 'primeng/button';
 import {PrimeTemplate} from 'primeng/api';
-import {VirtualScrollDirective} from '../../directives/virtual-scroll.directive';
+import {VirtualScrollDirective} from '../../directives/virtual-scroller-content/virtual-scroll.directive';
 import {debounceTime, Subject} from 'rxjs';
 
 @Component({

src/app/directives/base-item/base-item.directive.spec.ts

@@ -0,0 +1,8 @@
+import { BaseItemDirective } from './base-item.directive';
+
+describe('BaseItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new BaseItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/base-item/base-item.directive.ts

@@ -0,0 +1,22 @@
+import {Directive, Input} from '@angular/core';
+
+interface BaseItemTemplateContext<T extends object> {
+  $implicit: T;
+  item?: T;
+}
+
+@Directive({
+  selector: '[appBaseItem]'
+})
+export class BaseItemDirective<T extends object> {
+
+  @Input('appBaseItem') item!: T;
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: BaseItemDirective<E>,
+    _ctx: unknown
+  ): _ctx is BaseItemTemplateContext<E> {
+    return true;
+  }
+
+}

src/app/directives/base-items/base-items.directive.spec.ts

@@ -0,0 +1,8 @@
+import { BaseItemsDirective } from './base-items.directive';
+
+describe('BaseItemsDirective', () => {
+  it('should create an instance', () => {
+    const directive = new BaseItemsDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/base-items/base-items.directive.ts

@@ -0,0 +1,21 @@
+import {Directive, Input} from '@angular/core';
+
+interface BaseItemsTemplateContext<T extends object> {
+  $implicit: T[];
+  items?: T[];
+}
+
+@Directive({
+  selector: '[appBaseItems]'
+})
+export class BaseItemsDirective<T extends object> {
+  @Input('appBaseItems') items!: T[];
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: BaseItemsDirective<E>,
+    _ctx: unknown
+  ): _ctx is BaseItemsTemplateContext<E> {
+    return true;
+  }
+
+}

src/app/directives/data-view/data-view.directive.spec.ts

@@ -0,0 +1,8 @@
+import { DataViewDirective } from './data-view.directive';
+
+describe('DataViewDirective', () => {
+  it('should create an instance', () => {
+    const directive = new DataViewDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/data-view/data-view.directive.ts

@@ -0,0 +1,22 @@
+import {Directive, Input} from '@angular/core';
+
+interface DataViewTemplateContext<T extends object> {
+  $implicit: T[];
+  items?: T[];
+}
+
+@Directive({
+  selector: '[appDataView]'
+})
+export class DataViewDirective<T extends object> {
+
+  @Input('appDataView') items!: T[];
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: DataViewDirective<E>,
+    _ctx: unknown
+  ): _ctx is DataViewTemplateContext<E> {
+    return true;
+  }
+
+}

src/app/directives/virtual-scroller-item/virtual-scroller-item.directive.spec.ts

@@ -0,0 +1,8 @@
+import { VirtualScrollerItemDirective } from './virtual-scroller-item.directive';
+
+describe('VirtualScrollerItemDirective', () => {
+  it('should create an instance', () => {
+    const directive = new VirtualScrollerItemDirective();
+    expect(directive).toBeTruthy();
+  });
+});

src/app/directives/virtual-scroller-item/virtual-scroller-item.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, Input} from '@angular/core';
+import {ScrollerItemOptions} from 'primeng/scroller';
+
+interface TypedScrollerItemOptions<T extends object> extends ScrollerItemOptions {
+  items?: T[];
+}
+
+interface ScrollerItemTemplateContext<T extends object> {
+  $implicit: T;
+  options: TypedScrollerItemOptions<T>;
+}
+
+@Directive({
+  selector: '[appVirtualScrollerItem]'
+})
+export class VirtualScrollerItemDirective<T extends object> {
+
+  @Input('appVirtualScroll') items!: T[];
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: VirtualScrollerItemDirective<E>,
+    _ctx: unknown
+  ): _ctx is ScrollerItemTemplateContext<E> {
+    return true;
+  }
+}

src/app/openapi/.gitignore

@@ -0,0 +1,4 @@
+wwwroot/*.js
+node_modules
+typings
+dist

src/app/openapi/.openapi-generator/FILES

@@ -9,9 +9,24 @@ configuration.ts
 encoder.ts
 git_push.sh
 index.ts
+model/attribute.ts
+model/card-print.ts
+model/card-type.ts
 model/card.ts
 model/deck.ts
+model/link-arrow.ts
 model/models.ts
-model/page-deck.ts
+model/monster-card-type.ts
+model/monster-card.ts
+model/monster-type.ts
+model/page-deck-dto.ts
+model/page.ts
+model/region.ts
+model/regional-set.ts
+model/set-prefix.ts
+model/spell-card-type.ts
+model/spell-card.ts
+model/trap-card-type.ts
+model/trap-card.ts
 param.ts
 variables.ts

src/app/openapi/api/card.service.ts

@@ -35,6 +35,59 @@ export class CardService extends BaseService {
         super(basePath, configuration);
     }
 
+    /**
+     * Fetch And Persist From Upstream
+     * @param name 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public apiCardsNameNewPut(name: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Array<Card>>;
+    public apiCardsNameNewPut(name: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<Card>>>;
+    public apiCardsNameNewPut(name: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<Card>>>;
+    public apiCardsNameNewPut(name: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (name === null || name === undefined) {
+            throw new Error('Required parameter name was null or undefined when calling apiCardsNameNewPut.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/json'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        const localVarTransferCache: boolean = options?.transferCache ?? true;
+
+
+        let responseType_: 'text' | 'json' | 'blob' = 'json';
+        if (localVarHttpHeaderAcceptSelected) {
+            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
+                responseType_ = 'text';
+            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
+                responseType_ = 'json';
+            } else {
+                responseType_ = 'blob';
+            }
+        }
+
+        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "name", value: name, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}/new`;
+        return this.httpClient.request<Array<Card>>('put', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * Get a singular Card by its ID
      * @param id 
@@ -74,7 +127,7 @@ export class CardService extends BaseService {
             }
         }
 
-        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
+        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int32"})}`;
         return this.httpClient.request<Card>('get', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
@@ -116,7 +169,7 @@ export class CardService extends BaseService {
         const localVarTransferCache: boolean = options?.transferCache ?? true;
 
 
-        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}/image`;
+        let localVarPath = `/api/cards/${this.configuration.encodeParam({name: "id", value: id, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int32"})}/image`;
         return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,

src/app/openapi/api/deck-controller.service.ts

@@ -1,216 +0,0 @@
-/**
- * dex API
- *
- * 
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-/* tslint:disable:no-unused-variable member-ordering */
-
-import { Inject, Injectable, Optional }                      from '@angular/core';
-import { HttpClient, HttpHeaders, HttpParams,
-         HttpResponse, HttpEvent, HttpParameterCodec, HttpContext 
-        }       from '@angular/common/http';
-import { CustomHttpParameterCodec }                          from '../encoder';
-import { Observable }                                        from 'rxjs';
-
-// @ts-ignore
-import { Deck } from '../model/deck';
-
-// @ts-ignore
-import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
-import { Configuration }                                     from '../configuration';
-import { BaseService } from '../api.base.service';
-
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DeckControllerService extends BaseService {
-
-    constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
-        super(basePath, configuration);
-    }
-
-    /**
-     * Add Card To Deck
-     * @param cardId 
-     * @param deckName 
-     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
-     * @param reportProgress flag to report request and response progress.
-     */
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<object>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<object>>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<object>>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
-        if (cardId === null || cardId === undefined) {
-            throw new Error('Required parameter cardId was null or undefined when calling apiDecksDeckNameCardIdPost.');
-        }
-        if (deckName === null || deckName === undefined) {
-            throw new Error('Required parameter deckName was null or undefined when calling apiDecksDeckNameCardIdPost.');
-        }
-
-        let localVarHeaders = this.defaultHeaders;
-
-        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
-            'application/json'
-        ]);
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-
-        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
-
-        const localVarTransferCache: boolean = options?.transferCache ?? true;
-
-
-        let responseType_: 'text' | 'json' | 'blob' = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            } else {
-                responseType_ = 'blob';
-            }
-        }
-
-        let localVarPath = `/api/decks/${this.configuration.encodeParam({name: "deckName", value: deckName, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}/${this.configuration.encodeParam({name: "cardId", value: cardId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
-        return this.httpClient.request<object>('post', `${this.configuration.basePath}${localVarPath}`,
-            {
-                context: localVarHttpContext,
-                responseType: <any>responseType_,
-                withCredentials: this.configuration.withCredentials,
-                headers: localVarHeaders,
-                observe: observe,
-                transferCache: localVarTransferCache,
-                reportProgress: reportProgress
-            }
-        );
-    }
-
-    /**
-     * Get Deck
-     * @param name 
-     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
-     * @param reportProgress flag to report request and response progress.
-     */
-    public apiDecksGet(name: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Deck>;
-    public apiDecksGet(name: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Deck>>;
-    public apiDecksGet(name: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Deck>>;
-    public apiDecksGet(name: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
-        if (name === null || name === undefined) {
-            throw new Error('Required parameter name was null or undefined when calling apiDecksGet.');
-        }
-
-        let localVarQueryParameters = new HttpParams({encoder: this.encoder});
-        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
-          <any>name, 'name');
-
-        let localVarHeaders = this.defaultHeaders;
-
-        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
-            'application/json'
-        ]);
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-
-        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
-
-        const localVarTransferCache: boolean = options?.transferCache ?? true;
-
-
-        let responseType_: 'text' | 'json' | 'blob' = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            } else {
-                responseType_ = 'blob';
-            }
-        }
-
-        let localVarPath = `/api/decks`;
-        return this.httpClient.request<Deck>('get', `${this.configuration.basePath}${localVarPath}`,
-            {
-                context: localVarHttpContext,
-                params: localVarQueryParameters,
-                responseType: <any>responseType_,
-                withCredentials: this.configuration.withCredentials,
-                headers: localVarHeaders,
-                observe: observe,
-                transferCache: localVarTransferCache,
-                reportProgress: reportProgress
-            }
-        );
-    }
-
-    /**
-     * Create Deck
-     * @param deck 
-     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
-     * @param reportProgress flag to report request and response progress.
-     */
-    public apiDecksPost(deck: Deck, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<string>;
-    public apiDecksPost(deck: Deck, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<string>>;
-    public apiDecksPost(deck: Deck, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<string>>;
-    public apiDecksPost(deck: Deck, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
-        if (deck === null || deck === undefined) {
-            throw new Error('Required parameter deck was null or undefined when calling apiDecksPost.');
-        }
-
-        let localVarHeaders = this.defaultHeaders;
-
-        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
-            'application/json'
-        ]);
-        if (localVarHttpHeaderAcceptSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
-        }
-
-        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
-
-        const localVarTransferCache: boolean = options?.transferCache ?? true;
-
-
-        // to determine the Content-Type header
-        const consumes: string[] = [
-            'application/json'
-        ];
-        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
-        if (httpContentTypeSelected !== undefined) {
-            localVarHeaders = localVarHeaders.set('Content-Type', httpContentTypeSelected);
-        }
-
-        let responseType_: 'text' | 'json' | 'blob' = 'json';
-        if (localVarHttpHeaderAcceptSelected) {
-            if (localVarHttpHeaderAcceptSelected.startsWith('text')) {
-                responseType_ = 'text';
-            } else if (this.configuration.isJsonMime(localVarHttpHeaderAcceptSelected)) {
-                responseType_ = 'json';
-            } else {
-                responseType_ = 'blob';
-            }
-        }
-
-        let localVarPath = `/api/decks`;
-        return this.httpClient.request<string>('post', `${this.configuration.basePath}${localVarPath}`,
-            {
-                context: localVarHttpContext,
-                body: deck,
-                responseType: <any>responseType_,
-                withCredentials: this.configuration.withCredentials,
-                headers: localVarHeaders,
-                observe: observe,
-                transferCache: localVarTransferCache,
-                reportProgress: reportProgress
-            }
-        );
-    }
-
-}

src/app/openapi/api/deck.service.ts

@@ -19,7 +19,7 @@ import { Observable }                                        from 'rxjs';
 // @ts-ignore
 import { Deck } from '../model/deck';
 // @ts-ignore
-import { PageDeck } from '../model/page-deck';
+import { PageDeckDto } from '../model/page-deck-dto';
 
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
@@ -79,7 +79,7 @@ export class DeckService extends BaseService {
             }
         }
 
-        let localVarPath = `/api/decks/${this.configuration.encodeParam({name: "deckName", value: deckName, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}/${this.configuration.encodeParam({name: "cardId", value: cardId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int64"})}`;
+        let localVarPath = `/api/decks/${this.configuration.encodeParam({name: "deckName", value: deckName, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}/${this.configuration.encodeParam({name: "cardId", value: cardId, in: "path", style: "simple", explode: false, dataType: "number", dataFormat: "int32"})}`;
         return this.httpClient.request<any>('post', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
@@ -216,9 +216,9 @@ export class DeckService extends BaseService {
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<PageDeck>;
-    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<PageDeck>>;
-    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<PageDeck>>;
+    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<PageDeckDto>;
+    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<PageDeckDto>>;
+    public getDecks(name?: string, page?: number, pageSize?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<PageDeckDto>>;
     public getDecks(name?: string, page?: number, pageSize?: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
 
         let localVarQueryParameters = new HttpParams({encoder: this.encoder});
@@ -255,7 +255,7 @@ export class DeckService extends BaseService {
         }
 
         let localVarPath = `/api/decks`;
-        return this.httpClient.request<PageDeck>('get', `${this.configuration.basePath}${localVarPath}`,
+        return this.httpClient.request<PageDeckDto>('get', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
                 params: localVarQueryParameters,

src/app/openapi/git_push.sh

@@ -0,0 +1,57 @@
+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 openapi-petstore-perl "minor update" "gitlab.com"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+git_host=$4
+
+if [ "$git_host" = "" ]; then
+    git_host="github.com"
+    echo "[INFO] No command line input provided. Set \$git_host to $git_host"
+fi
+
+if [ "$git_user_id" = "" ]; then
+    git_user_id="GIT_USER_ID"
+    echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+    git_repo_id="GIT_REPO_ID"
+    echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+    release_note="Minor update"
+    echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository.
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=$(git remote)
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+    if [ "$GIT_TOKEN" = "" ]; then
+        echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+        git remote add origin https://${git_host}/${git_user_id}/${git_repo_id}.git
+    else
+        git remote add origin https://${git_user_id}:"${GIT_TOKEN}"@${git_host}/${git_user_id}/${git_repo_id}.git
+    fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://${git_host}/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'

src/app/openapi/model/attribute.ts

@@ -0,0 +1,30 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type Attribute = 'WIND' | 'WATER' | 'FIRE' | 'EARTH' | 'LIGHT' | 'DARK' | 'DIVINE';
+
+export const Attribute = {
+
+    Wind: 'WIND' as Attribute,
+
+    Water: 'WATER' as Attribute,
+
+    Fire: 'FIRE' as Attribute,
+
+    Earth: 'EARTH' as Attribute,
+
+    Light: 'LIGHT' as Attribute,
+
+    Dark: 'DARK' as Attribute,
+
+    Divine: 'DIVINE' as Attribute
+};
+

src/app/openapi/model/card-print.ts

@@ -0,0 +1,17 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { RegionalSet } from './regional-set';
+
+
+export interface CardPrint { 
+    id?: number;
+    set: RegionalSet;
+}
+

src/app/openapi/model/card-type.ts

@@ -0,0 +1,24 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type CardType = 'MONSTER' | 'SPELL' | 'TRAP' | 'UNKNOWN';
+
+export const CardType = {
+
+    Monster: 'MONSTER' as CardType,
+
+    Spell: 'SPELL' as CardType,
+
+    Trap: 'TRAP' as CardType,
+
+    Unknown: 'UNKNOWN' as CardType
+};
+

src/app/openapi/model/card.ts

@@ -7,24 +7,22 @@
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+import { MonsterCardType } from './monster-card-type';
+import { TrapCard } from './trap-card';
+import { TrapCardType } from './trap-card-type';
+import { Attribute } from './attribute';
+import { CardType } from './card-type';
+import { LinkArrow } from './link-arrow';
+import { SpellCardType } from './spell-card-type';
+import { MonsterCard } from './monster-card';
+import { SpellCard } from './spell-card';
+import { CardPrint } from './card-print';
+import { MonsterType } from './monster-type';
 
 
-export interface Card { 
-    id?: number;
-    description: string;
-    pendulumDescription?: string | null;
-    defense?: number | null;
-    attack?: number | null;
-    health?: number | null;
-    level?: number | null;
-    linkValue?: number | null;
-    name: string;
-    type: string;
-    frameType: string;
-    archetype?: string | null;
-    race?: string | null;
-    attribute?: string | null;
-    decks: { [key: string]: number; };
-    imageApiPath: string;
-}
+/**
+ * @type Card
+ * @export
+ */
+export type Card = MonsterCard | SpellCard | TrapCard;
 

src/app/openapi/model/deck.ts

@@ -7,10 +7,12 @@
  * https://openapi-generator.tech
  * Do not edit the class manually.
  */
+import { CardPrint } from './card-print';
 
 
 export interface Deck { 
+    id?: number;
     name: string;
-    cards: { [key: string]: number; };
+    prints: Set<CardPrint>;
 }
 

src/app/openapi/model/link-arrow.ts

@@ -0,0 +1,32 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type LinkArrow = 'TOP_LEFT' | 'TOP' | 'TOP_RIGHT' | 'LEFT' | 'RIGHT' | 'BOTTOM_LEFT' | 'BOTTOM' | 'BOTTOM_RIGHT';
+
+export const LinkArrow = {
+
+    TopLeft: 'TOP_LEFT' as LinkArrow,
+
+    Top: 'TOP' as LinkArrow,
+
+    TopRight: 'TOP_RIGHT' as LinkArrow,
+
+    Left: 'LEFT' as LinkArrow,
+
+    Right: 'RIGHT' as LinkArrow,
+
+    BottomLeft: 'BOTTOM_LEFT' as LinkArrow,
+
+    Bottom: 'BOTTOM' as LinkArrow,
+
+    BottomRight: 'BOTTOM_RIGHT' as LinkArrow
+};
+

src/app/openapi/model/models.ts

@@ -1,3 +1,18 @@
+export * from './attribute';
 export * from './card';
+export * from './card-print';
+export * from './card-type';
 export * from './deck';
-export * from './page-deck';
+export * from './link-arrow';
+export * from './monster-card';
+export * from './monster-card-type';
+export * from './monster-type';
+export * from './page';
+export * from './page-deck-dto';
+export * from './region';
+export * from './regional-set';
+export * from './set-prefix';
+export * from './spell-card';
+export * from './spell-card-type';
+export * from './trap-card';
+export * from './trap-card-type';

src/app/openapi/model/monster-card-type.ts

@@ -0,0 +1,30 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type MonsterCardType = 'NORMAL' | 'EFFECT' | 'RITUAL' | 'FUSION' | 'SYNCHRO' | 'XYZ' | 'LINK';
+
+export const MonsterCardType = {
+
+    Normal: 'NORMAL' as MonsterCardType,
+
+    Effect: 'EFFECT' as MonsterCardType,
+
+    Ritual: 'RITUAL' as MonsterCardType,
+
+    Fusion: 'FUSION' as MonsterCardType,
+
+    Synchro: 'SYNCHRO' as MonsterCardType,
+
+    Xyz: 'XYZ' as MonsterCardType,
+
+    Link: 'LINK' as MonsterCardType
+};
+

src/app/openapi/model/monster-card.ts

@@ -0,0 +1,40 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { MonsterCardType } from './monster-card-type';
+import { Attribute } from './attribute';
+import { CardType } from './card-type';
+import { LinkArrow } from './link-arrow';
+import { CardPrint } from './card-print';
+import { MonsterType } from './monster-type';
+
+
+export interface MonsterCard { 
+    id?: number;
+    cardType: CardType;
+    description: string;
+    name: string;
+    cardPrints: Set<CardPrint>;
+    monsterEffect?: string | null;
+    attack?: number | null;
+    defense?: number | null;
+    level?: number | null;
+    isPendulum?: boolean;
+    pendulumScale?: number | null;
+    pendulumEffect?: string | null;
+    linkValue?: number | null;
+    monsterCardType: MonsterCardType;
+    monsterType: MonsterType;
+    attribute: Attribute;
+    linkArrows: Set<LinkArrow>;
+}
+export namespace MonsterCard {
+}
+
+

src/app/openapi/model/monster-type.ts

@@ -0,0 +1,68 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type MonsterType = 'AQUA' | 'BEAST' | 'BEAST_WARRIOR' | 'CREATOR_GOD' | 'CYBERSE' | 'DINOSAUR' | 'DIVINE_BEAST' | 'DRAGON' | 'FAIRY' | 'FIEND' | 'FISH' | 'INSECT' | 'ILLUSION' | 'MACHINE' | 'PLANT' | 'PSYCHIC' | 'PYRO' | 'REPTILE' | 'ROCK' | 'SEA_SERPENT' | 'SPELLCASTER' | 'THUNDER' | 'WARRIOR' | 'WINGED_BEAST' | 'WYRM' | 'ZOMBIE';
+
+export const MonsterType = {
+
+    Aqua: 'AQUA' as MonsterType,
+
+    Beast: 'BEAST' as MonsterType,
+
+    BeastWarrior: 'BEAST_WARRIOR' as MonsterType,
+
+    CreatorGod: 'CREATOR_GOD' as MonsterType,
+
+    Cyberse: 'CYBERSE' as MonsterType,
+
+    Dinosaur: 'DINOSAUR' as MonsterType,
+
+    DivineBeast: 'DIVINE_BEAST' as MonsterType,
+
+    Dragon: 'DRAGON' as MonsterType,
+
+    Fairy: 'FAIRY' as MonsterType,
+
+    Fiend: 'FIEND' as MonsterType,
+
+    Fish: 'FISH' as MonsterType,
+
+    Insect: 'INSECT' as MonsterType,
+
+    Illusion: 'ILLUSION' as MonsterType,
+
+    Machine: 'MACHINE' as MonsterType,
+
+    Plant: 'PLANT' as MonsterType,
+
+    Psychic: 'PSYCHIC' as MonsterType,
+
+    Pyro: 'PYRO' as MonsterType,
+
+    Reptile: 'REPTILE' as MonsterType,
+
+    Rock: 'ROCK' as MonsterType,
+
+    SeaSerpent: 'SEA_SERPENT' as MonsterType,
+
+    Spellcaster: 'SPELLCASTER' as MonsterType,
+
+    Thunder: 'THUNDER' as MonsterType,
+
+    Warrior: 'WARRIOR' as MonsterType,
+
+    WingedBeast: 'WINGED_BEAST' as MonsterType,
+
+    Wyrm: 'WYRM' as MonsterType,
+
+    Zombie: 'ZOMBIE' as MonsterType
+};
+

src/app/openapi/model/page-deck-dto.ts

@@ -10,7 +10,13 @@
 import { Deck } from './deck';
 
 
-export interface PageDeck { 
+/**
+ * Page of items
+ */
+export interface PageDeckDto { 
+    /**
+     * Items in the page
+     */
     content: Array<Deck>;
     page?: number;
     pageSize?: number;

src/app/openapi/model/page.ts

@@ -0,0 +1,24 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+/**
+ * Page of items
+ */
+export interface Page { 
+    /**
+     * Items in the page
+     */
+    content: Array<any>;
+    page?: number;
+    pageSize?: number;
+    totalPages?: number;
+}
+

src/app/openapi/model/region.ts

@@ -0,0 +1,44 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type Region = 'ASIAN_ENGLISH' | 'JAPANESE' | 'JAPANESE_ASIAN' | 'ENGLISH' | 'EUROPEAN_ENGLISH' | 'KOREAN' | 'FRENCH' | 'FRENCH_CANADIAN' | 'NA_ENGLISH' | 'OCEANIC' | 'GERMAN' | 'PORTUGUESE' | 'ITALIAN' | 'SPANISH';
+
+export const Region = {
+
+    AsianEnglish: 'ASIAN_ENGLISH' as Region,
+
+    Japanese: 'JAPANESE' as Region,
+
+    JapaneseAsian: 'JAPANESE_ASIAN' as Region,
+
+    English: 'ENGLISH' as Region,
+
+    EuropeanEnglish: 'EUROPEAN_ENGLISH' as Region,
+
+    Korean: 'KOREAN' as Region,
+
+    French: 'FRENCH' as Region,
+
+    FrenchCanadian: 'FRENCH_CANADIAN' as Region,
+
+    NaEnglish: 'NA_ENGLISH' as Region,
+
+    Oceanic: 'OCEANIC' as Region,
+
+    German: 'GERMAN' as Region,
+
+    Portuguese: 'PORTUGUESE' as Region,
+
+    Italian: 'ITALIAN' as Region,
+
+    Spanish: 'SPANISH' as Region
+};
+

src/app/openapi/model/regional-set.ts

@@ -0,0 +1,22 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { SetPrefix } from './set-prefix';
+import { Region } from './region';
+
+
+export interface RegionalSet { 
+    id?: number;
+    region: Region;
+    prefix: SetPrefix;
+}
+export namespace RegionalSet {
+}
+
+

src/app/openapi/model/set-prefix.ts

@@ -0,0 +1,16 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export interface SetPrefix { 
+    id?: number;
+    name: string;
+}
+

src/app/openapi/model/spell-card-type.ts

@@ -0,0 +1,28 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type SpellCardType = 'NORMAL' | 'CONTINUOUS' | 'EQUIP' | 'QUICK_PLAY' | 'FIELD' | 'RITUAL';
+
+export const SpellCardType = {
+
+    Normal: 'NORMAL' as SpellCardType,
+
+    Continuous: 'CONTINUOUS' as SpellCardType,
+
+    Equip: 'EQUIP' as SpellCardType,
+
+    QuickPlay: 'QUICK_PLAY' as SpellCardType,
+
+    Field: 'FIELD' as SpellCardType,
+
+    Ritual: 'RITUAL' as SpellCardType
+};
+

src/app/openapi/model/spell-card.ts

@@ -0,0 +1,26 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { CardType } from './card-type';
+import { SpellCardType } from './spell-card-type';
+import { CardPrint } from './card-print';
+
+
+export interface SpellCard { 
+    id?: number;
+    cardType: CardType;
+    description: string;
+    name: string;
+    cardPrints: Set<CardPrint>;
+    spellCardType: SpellCardType;
+}
+export namespace SpellCard {
+}
+
+

src/app/openapi/model/trap-card-type.ts

@@ -0,0 +1,22 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
+
+export type TrapCardType = 'NORMAL' | 'CONTINUOUS' | 'COUNTER';
+
+export const TrapCardType = {
+
+    Normal: 'NORMAL' as TrapCardType,
+
+    Continuous: 'CONTINUOUS' as TrapCardType,
+
+    Counter: 'COUNTER' as TrapCardType
+};
+

src/app/openapi/model/trap-card.ts

@@ -0,0 +1,26 @@
+/**
+ * dex API
+ *
+ * 
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+import { TrapCardType } from './trap-card-type';
+import { CardType } from './card-type';
+import { CardPrint } from './card-print';
+
+
+export interface TrapCard { 
+    id?: number;
+    cardType: CardType;
+    description: string;
+    name: string;
+    cardPrints: Set<CardPrint>;
+    trapCardType: TrapCardType;
+}
+export namespace TrapCard {
+}
+
+

src/app/views/cards/cards.component.html

@@ -1,5 +1,4 @@
 <div #container class="h-full w-screen">
-  @if (this.initialized) {
     <p-virtualscroller
       [items]="cardRows"
       [itemSize]="[itemWidthInPx,itemHeightInPx]"
@@ -10,11 +9,11 @@
       orientation="both"
       [style]="{ width: '100vw', height: '100%' }"
     >
-      <ng-template #item let-item let-options="options">
+      <ng-template [appVirtualScroll]="cardRows" #item let-items let-options="options">
         <div class="flex justify-around">
           <p-card
-            *ngFor="let card of item"
-            styleClass="w-[24rem] h-[36rem] m-2 overflow-hidden"
+            *ngFor="let card of items"
+            styleClass="w-[24rem] h-[36rem] max-h-[36rem] m-2 overflow-hidden"
           >
             <ng-template pTemplate="header">
               <div
@@ -25,31 +24,28 @@
                   <img
                     alt="Card"
                     class="w-full h-full object-cover object-center"
-                    src="http://localhost:8080{{ card.imageApiPath }}"
+                    src="http://localhost:8080/api/{{ card.id }}/image"
                   />
                 </div>
               </div>
             </ng-template>
             <ng-template pTemplate="title"> {{ card.name }}</ng-template>
-            <ng-template pTemplate="subtitle"> Card subtitle</ng-template>
+            <ng-template pTemplate="subtitle"> {{ getFormattedCardType(card.cardType) }} </ng-template>
             <ng-template pTemplate="footer">
               <div class="flex gap-4 mt-1">
                 <p-button label="Cancel" severity="secondary" class="w-full" [outlined]="true" styleClass="w-full"/>
-                <p-button label="Save" class="w-full" styleClass="w-full"/>
+                <p-button label="Save" class="w-full" styleClass="w-full" (onClick)="console.log('hi :]')"/>
               </div>
             </ng-template>
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae
-              numquam deserunt
-              quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
-              neque
-              quas!
+            <ng-template pTemplate="content">
+              <div class="w-full h-[9rem] flex-1 whitespace-pre-line">
+                <p class="text-pretty break-normal truncate max-h-[9rem] whitespace-pre-line">
+                  {{ card.description }}
                 </p>
+              </div>
+            </ng-template>
           </p-card>
         </div>
       </ng-template>
     </p-virtualscroller>
-  } @else {
-    hold on im poggin
-  }
 </div>

src/app/views/cards/cards.component.ts

@@ -1,13 +1,13 @@
-// noinspection DuplicatedCode
-
-import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller';
-import {Card as CardModel, CardService} from '../../openapi';
 import {catchError, debounceTime, of, Subject, switchMap} from 'rxjs';
 import {Button} from 'primeng/button';
 import {Card} from 'primeng/card';
 import {PrimeTemplate} from 'primeng/api';
 import {NgForOf} from '@angular/common';
+import {Card as CardModel, CardService, CardType} from '../../openapi';
+import {VirtualScrollDirective} from '../../directives/virtual-scroller-content/virtual-scroll.directive';
+import {ScrollPanelModule} from 'primeng/scrollpanel';
 
 @Component({
   selector: 'app-cards',
@@ -16,19 +16,20 @@ import {NgForOf} from '@angular/common';
     Button,
     Card,
     PrimeTemplate,
-    NgForOf
+    NgForOf,
+    ScrollPanelModule,
+    VirtualScrollDirective
   ],
   templateUrl: './cards.component.html',
   styleUrl: './cards.component.css'
 })
-export class CardsComponent implements AfterViewInit {
+export class CardsComponent implements OnInit, AfterViewInit {
   @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
 
   constructor(private cardService: CardService) {
   }
 
   private readonly FONT_SIZE_PX = 14;
-
   private pageSubject = new Subject<number>();
   private resizeObserver!: ResizeObserver;
 
@@ -45,9 +46,7 @@ export class CardsComponent implements AfterViewInit {
   rowsInPage!: number;
   lastResponseSize?: number;
 
-  ngAfterViewInit(): void {
-    this.setupResizeObserver();
-
+  ngOnInit(): void {
     this.pageSubject
       .pipe(
         debounceTime(150),
@@ -65,20 +64,18 @@ export class CardsComponent implements AfterViewInit {
       )
       .subscribe(cards => {
         this.lazyLoading = false;
+        this.lastResponseSize = cards.length
 
-        if (!this.lastResponseSize) {
-          this.lastResponseSize = cards.length;
-        }
+        this.cardRows = [...this.cardRows, cards];
 
         if (!this.initialized) {
           this.initialized = true;
         }
-
-        this.cardRows[this.page] = cards
-        console.log(cards.length);
       })
+  }
 
-
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
   }
 
   private setupResizeObserver(): void {
@@ -87,16 +84,28 @@ export class CardsComponent implements AfterViewInit {
         this.rowsInPage = Math.ceil(entry.contentRect.height / this.itemHeightInPx);
         this.itemsPerRow = Math.floor(entry.contentRect.width / this.itemWidthInPx);
         this.pageSize = this.itemsPerRow;
+        this.pageSubject.next(this.page);
       }
     });
     this.resizeObserver.observe(this.containerRef.nativeElement);
   }
 
   onLazyLoad(event: ScrollerLazyLoadEvent) {
-    console.log(`kinda pogging rn cuz ${JSON.stringify(event)}`)
-
     this.pageSubject.next(++this.page);
   }
 
-  protected readonly JSON = JSON;
+  getFormattedCardType(cardType: CardType): String {
+    switch (cardType) {
+      case "MONSTER":
+        return "Monster";
+      case "SPELL":
+        return "Spell";
+      case "TRAP":
+        return "Trap";
+      default:
+        return "N/A";
+    }
+  }
+
+  protected readonly console = console;
 }

src/app/views/decks/decks.component.html

@@ -18,7 +18,7 @@
     <ng-template pTemplate="body" let-deck>
       <tr>
         <td>{{ deck.name }}</td>
-        <td>{{ getCardsInDecks(deck) }}</td>
+        <td>{{ getNumberOfCardsInDecks(deck) }}</td>
       </tr>
     </ng-template>
     <ng-template pTemplate="footer"> In total there are 0 Decks.</ng-template>

src/app/views/decks/decks.component.ts

@@ -2,9 +2,9 @@ import {Component, OnInit} from '@angular/core';
 import {TableModule} from 'primeng/table';
 import {Button} from 'primeng/button';
 import {FormsModule} from '@angular/forms';
-import {Deck, DeckService, PageDeck} from '../../openapi';
-import {BehaviorSubject, catchError, Observable, of, switchMap} from 'rxjs';
+import {BehaviorSubject, catchError, of, switchMap} from 'rxjs';
 import {LazyLoadEvent} from 'primeng/api';
+import {Deck, DeckService, PageDeckDto} from '../../openapi';
 
 @Component({
   selector: 'app-decks',
@@ -41,7 +41,7 @@ export class DecksComponent implements OnInit {
                 page: pageNumber,
                 pageSize: this.pageSize,
                 totalPages: 1
-              } as PageDeck);
+              } as PageDeckDto);
             })
           )
         }
@@ -64,8 +64,8 @@ export class DecksComponent implements OnInit {
     this.pageSubject.next(++this.page);
   }
 
-  getCardsInDecks(deck: Deck): number {
-    return Object.keys(deck.cards).length
+  getNumberOfCardsInDecks(deck: Deck): number {
+    return Object.keys(deck.prints).length
   }
 
 }

src/app/views/playground/playground.component.html

@@ -0,0 +1,118 @@
+<div class="h-full w-full bg-surface">
+  <div class="flex justify-between items-center bg-surface">
+    <p-selectButton [(ngModel)]="layout" [options]="options" [allowEmpty]="false">
+      <ng-template #item let-item>
+        <i class="pi " [ngClass]="{ 'pi-bars': item === 'list', 'pi-table': item === 'grid' }"></i>
+        Hi there
+      </ng-template>
+    </p-selectButton>
+    <p-paginator
+      (onPageChange)="onPageChange($event)"
+      [first]="first"
+      [rows]="rows"
+      [totalRecords]="120"
+      [rowsPerPageOptions]="[10, 20, 30]"
+      class=""
+    />
+  </div>
+  <p-dataView
+    #dv
+    [value]="cards"
+    [layout]="layout"
+    class="pb-24"
+  >
+    <ng-template [appDataView]="cards" #list let-items pStyleClass="bg-inherit">
+      <div class="border border-surface rounded-md bg-inherit mx-4">
+        <div *ngFor="let card of items; let first = first" class="">
+          <div
+            class="flex flex-col sm:flex-row sm:items-center p-6 gap-4"
+            [ngClass]="{ 'border-t border-surface-200 dark:border-surface-700': !first }"
+          >
+            <div class="md:w-40 relative">
+              <img
+                class="block xl:block mx-auto rounded w-full"
+                [src]="'https://primefaces.org/cdn/primeng/images/demo/product/bamboo-watch.jpg'"
+                [alt]="card.name"
+              />
+              <p-tag
+                [value]="card.name"
+                [severity]="getSeverity(card)"
+                class="absolute"
+                styleClass="dark:!bg-surface-900"
+                [style.left.px]="4"
+                [style.top.px]="4"
+              />
+            </div>
+            <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
+              <div class="flex flex-row md:flex-col justify-between items-start gap-2">
+                <div>
+                  <span class="font-medium text-surface-500 dark:text-surface-400 text-sm">{{ card.name }}</span>
+                  <div class="text-lg font-medium mt-2">{{ card.name }}</div>
+                </div>
+                <div class="bg-surface-100 p-1" style="border-radius: 30px">
+                  <div
+                    class="bg-surface-0 flex items-center gap-2 justify-center py-1 px-2"
+                    style="border-radius: 30px; box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.04), 0px 1px 2px 0px rgba(0, 0, 0, 0.06)"
+                  >
+                    <span class="text-surface-900 font-medium text-sm">{{ card.name }}</span>
+                    <i class="pi pi-star-fill text-yellow-500"></i>
+                  </div>
+                </div>
+              </div>
+              <div class="flex flex-col md:items-end gap-8">
+                <span class="text-xl font-semibold">USD</span>
+                <div class="flex flex-row-reverse md:flex-row gap-2">
+                  <button pButton icon="pi pi-heart" [outlined]="true"></button>
+                  <button
+                    pButton
+                    icon="pi pi-shopping-cart"
+                    label="Buy Now"
+                    class="flex-auto md:flex-initial whitespace-nowrap"
+                  ></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </ng-template>
+    <ng-template [appDataView]="cards" #grid let-items>
+      <div class="flex flex-wrap gap-4 bg-surface-800 justify-around">
+        <p-card
+          *ngFor="let card of items"
+          styleClass="w-[24rem] h-[36rem] max-h-[36rem] m-2 overflow-hidden col-span-12"
+        >
+          <ng-template pTemplate="header">
+            <div
+              class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 overflow-hidden hover:h-[34rem] hover:translate-y-2 m-2 after:absolute after:inset-0 after:shadow-[inset_0_-10px_30px_15px_rgba(0,0,0,0.85)] after:content-[''] hover:inset-0"
+            >
+              <div class="absolute -inset-0">
+                <!--suppress AngularNgOptimizedImage -->
+                <img
+                  alt="Card"
+                  class="w-full h-full object-cover object-center"
+                  src="https://tcg-corner.com/cdn/shop/files/Image_20240902_0047.jpg?v=1725615110"
+                />
+              </div>
+            </div>
+          </ng-template>
+          <ng-template pTemplate="title"> {{ card.name }}</ng-template>
+          <ng-template pTemplate="subtitle"> {{ getFormattedCardType(card.cardType) }} </ng-template>
+          <ng-template pTemplate="footer">
+            <div class="flex gap-4 mt-1">
+              <p-button label="Cancel" severity="secondary" class="w-full" [outlined]="true" styleClass="w-full"/>
+              <p-button label="Save" class="w-full" styleClass="w-full" (onClick)="console.log('hi :]')"/>
+            </div>
+          </ng-template>
+          <ng-template pTemplate="content">
+            <div class="w-full h-[9rem] flex-1 whitespace-pre-line">
+              <p class="text-pretty break-normal truncate max-h-[9rem] whitespace-pre-line">
+                {{ card.description }}
+              </p>
+            </div>
+          </ng-template>
+        </p-card>
+      </div>
+    </ng-template>
+  </p-dataView>
+</div>

src/app/views/playground/playground.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PlaygroundComponent } from './playground.component';
+
+describe('PlaygroundComponent', () => {
+  let component: PlaygroundComponent;
+  let fixture: ComponentFixture<PlaygroundComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PlaygroundComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PlaygroundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/views/playground/playground.component.ts

@@ -0,0 +1,91 @@
+import {Component, OnInit} from '@angular/core';
+import {DataView} from 'primeng/dataview';
+import {Card as CardModel, CardService, CardType} from '../../openapi';
+import {catchError, of, Subject, switchMap} from 'rxjs';
+import {FormsModule} from '@angular/forms';
+import {NgClass, NgForOf} from '@angular/common';
+import {Tag} from 'primeng/tag';
+import {Button, ButtonDirective} from 'primeng/button';
+import {DataViewDirective} from '../../directives/data-view/data-view.directive';
+import {Card} from 'primeng/card';
+import {PrimeTemplate} from 'primeng/api';
+import {StyleClass} from 'primeng/styleclass';
+import {Paginator, PaginatorState} from 'primeng/paginator';
+import {SelectButton} from 'primeng/selectbutton';
+
+@Component({
+  selector: 'app-playground',
+  imports: [
+    DataView,
+    FormsModule,
+    NgClass,
+    Tag,
+    NgForOf,
+    ButtonDirective,
+    DataViewDirective,
+    Button,
+    Card,
+    PrimeTemplate,
+    StyleClass,
+    Paginator,
+    SelectButton
+  ],
+  templateUrl: './playground.component.html',
+  styleUrl: './playground.component.css'
+})
+export class PlaygroundComponent implements OnInit {
+  layout: 'grid' | 'list' = 'grid';
+  options = ['list', 'grid'];
+  cards: CardModel[] = [];
+  first: number = 0;
+  rows: number = 10;
+
+  constructor(private cardService: CardService) {
+  }
+
+  private pageSubject = new Subject<number>();
+
+  ngOnInit() {
+    this.pageSubject
+      .pipe(
+        switchMap(pageNumber => {
+          return this.cardService.getCards(undefined, pageNumber, 50).pipe(
+            catchError(error => {
+              console.log(`Error: ${error}`);
+
+              return of([]);
+            })
+          )
+        })
+      )
+      .subscribe(cards => {
+        this.cards = cards
+        console.log(this.cards)
+      })
+
+    this.pageSubject.next(0)
+  }
+
+  getSeverity(card: CardModel): "success" | "warn" {
+    return 'success';
+  }
+
+  getFormattedCardType(cardType: CardType): String {
+    switch (cardType) {
+      case "MONSTER":
+        return "Monster";
+      case "SPELL":
+        return "Spell";
+      case "TRAP":
+        return "Trap";
+      default:
+        return "N/A";
+    }
+  }
+
+  onPageChange(event: PaginatorState) {
+
+  }
+
+  protected readonly console = console;
+}

src/styles.css

@@ -4,18 +4,6 @@
 @import "tailwindcss-primeui";
 
 html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   font-size: 14px;
 }
 
-body {
-  margin: 0;
-  min-height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
-  font-weight: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: light-dark(var(--p-surface-0), var(--p-surface-950));
-}