Experiment

angular.json

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

package.json

@@ -6,7 +6,8 @@
     "start": "ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
-    "test": "ng test"
+    "test": "ng test",
+    "generate-openapi": "npx openapi-generator-cli generate -i http://localhost:8080/q/openapi -g typescript-angular -o src/app/openapi --additional-properties fileNaming=kebab-case --generate-alias-as-model"
   },
   "private": true,
   "dependencies": {

src/app/app.component.html

@@ -1,4 +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"/>
-  <app-items class="size-full"/>
+
+  <div class="flex-1 w-full relative top-[4rem]">
+    <router-outlet/>
+  </div>
 </main>

src/app/app.component.ts

@@ -7,7 +7,7 @@ import {FormsModule} from '@angular/forms';
 import {BarComponent} from './component/bar/bar.component';
 import {ScrollingModule} from '@angular/cdk/scrolling';
 import {ApiModule} from './openapi';
-import {ItemsComponent} from './component/items/items.component';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
@@ -21,8 +21,7 @@ import {ItemsComponent} from './component/items/items.component';
     BarComponent,
     ScrollingModule,
     ApiModule,
-    ItemsComponent,
+    RouterOutlet
-    ItemsComponent
   ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',

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,6 +1,14 @@
-import { Routes } from '@angular/router';
+import {Routes} from '@angular/router';
-import {ItemsComponent} from './component/items/items.component';
+import {DecksComponent} from './views/decks/decks.component';
+import {CardsComponent} from './views/cards/cards.component';
+import {PlaygroundComponent} from './views/playground/playground.component';
+import {CardItemComponent} from './views/card-item/card-item.component';
+import {DeckItemComponent} from './views/deck-item/deck-item.component';
 
 export const routes: Routes = [
-  { path: '', component: ItemsComponent },
+  { path: 'cards', component: CardsComponent },
+  { path: 'cards/:id', component: CardItemComponent },
+  { path: 'decks/:id', component: DeckItemComponent },
+  { 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'}"
+    [style]="{ background: 'none', height: '4rem'}"
-    styleClass="backdrop-blur-md"
-    class="backdrop-blur-md"
   >
     <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

@@ -30,51 +30,29 @@ export class BarComponent implements OnInit {
   ngOnInit() {
     this.items = [
       {
-        label: 'Home (Cards)',
+        label: 'Home (TBD)',
-        icon: 'pi pi-home',
+        icon: 'pi pi-home'
-        command: () => {
+      },
-          this.router.navigate(['/cards']);
+      {
+        label: 'Decks',
+        icon: 'pi pi-star',
+        command: async () => {
+          await this.router.navigate(['/decks']);
         }
       },
       {
-        label: 'Features',
+        label: 'Cards',
-        icon: 'pi pi-star'
-      },
-      {
-        label: 'Projects',
         icon: 'pi pi-search',
-        items: [
+        command: async () => {
-          {
+          await this.router.navigate(['/cards']);
-            label: 'Components',
-            icon: 'pi pi-bolt'
-          },
-          {
-            label: 'Blocks',
-            icon: 'pi pi-server'
-          },
-          {
-            label: 'UI Kit',
-            icon: 'pi pi-pencil'
-          },
-          {
-            label: 'Templates',
-            icon: 'pi pi-palette',
-            items: [
-              {
-                label: 'Apollo',
-                icon: 'pi pi-palette'
-              },
-              {
-                label: 'Ultima',
-                icon: 'pi pi-palette'
         }
-            ]
-          }
-        ]
       },
       {
-        label: 'Contact',
+        label: 'Test',
-        icon: 'pi pi-envelope'
+        icon: 'pi pi-search',
+        command: async () => {
+          await this.router.navigate(['/test']);
+        }
       }
     ]
   }

src/app/component/grid-items/grid-items.component.html

@@ -0,0 +1,17 @@
+<div #container class="card flex justify-center">
+  hi there!
+  <p-virtualscroller
+    [items]="items"
+    [itemSize]="[50, 100]"
+    orientation="both"
+    styleClass="border border-surface"
+    [autoSize]="true"
+    [style]="{ width: '400px', height: '200px' }"
+  >
+    <ng-template pTemplate="item" let-item let-options="options">
+      <div class="flex items-center p-2" [ngClass]="{ 'bg-surface-100 dark:bg-surface-700': options.odd }" style="height: 50px;">
+        <div *ngFor="let el of item" style="width: 100px">{{ el }}</div>
+      </div>
+    </ng-template>
+  </p-virtualscroller>
+</div>

src/app/component/grid-items/grid-items.component.spec.ts

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

src/app/component/grid-items/grid-items.component.ts

@@ -0,0 +1,33 @@
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Scroller, ScrollerModule} from 'primeng/scroller';
+import {NgClass, NgForOf, NgStyle} from '@angular/common';
+
+@Component({
+  selector: 'app-grid-items',
+  imports: [
+    ScrollerModule,
+    NgClass,
+    NgForOf,
+    NgStyle
+  ],
+  styles: [
+    `:host ::ng-deep {
+            .p-scroller-viewport {
+                flex: none;
+            }
+        }`
+  ],
+  templateUrl: './grid-items.component.html',
+  styleUrl: './grid-items.component.css'
+})
+export class GridItemsComponent implements OnInit {
+  @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
+
+  private readonly FONT_SIZE_PX = 14;
+  items!: string[][];
+  widthTest: string = '300px';
+
+  ngOnInit() {
+    this.items = Array.from({ length: 1000 }).map((_, i) => Array.from({ length: 1000 }).map((_j, j) => `Item #${i}_${j}`));
+  }
+}

src/app/component/items/items.component.html

@@ -2,17 +2,19 @@
   @if (cards.length > 0) {
     <p-virtualscroller
       [items]="cards"
-      [itemSize]="580 / 4"
+      [itemSize]="itemSize"
       [lazy]="true"
       [loading]="lazyLoading"
-      [appendOnly]="true"
+      [appendOnly]="false"
+      [step]="pageSize"
+      [numToleratedItems]="numberOfToleratedItems"
       (onLazyLoad)="onLazyLoad($event)"
       styleClass="size-full"
     >
       <ng-template [appVirtualScroll]="cards" pTemplate="content" let-options="options">
         <div class="flex flex-wrap justify-around">
           @for (card of options.items; track card.id) {
-            <p-card styleClass="w-[24rem] h-[36rem] m-4 overflow-hidden">
+            <p-card styleClass="w-[24rem] h-[36rem] m-2 overflow-hidden">
               <ng-template pTemplate="header">
                 <div
                   class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 z-10 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"

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

@@ -1,10 +1,10 @@
-import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {AfterViewInit, Component, ElementRef, OnInit, TrackByFunction, ViewChild} from '@angular/core';
 import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller';
 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({
@@ -31,16 +31,17 @@ export class ItemsComponent implements OnInit, AfterViewInit {
 
   private readonly FONT_SIZE_PX = 14;
 
-  lastRequestResponseSize?: number;
   pageSize: number = 5;
   page: number = -1;
-  // noinspection PointlessArithmeticExpressionJS Card height + ( margin top + margin bottom) (rem)
+  // noinspection PointlessArithmeticExpressionJS Card height + ( margin top/bottom) (rem)
-  rowHeight: number = 36 + (1 * 2);
+  rowHeight: number = 36 + (0.5 * 2);
   itemWidth: number = 24; // Card width (rem)
   cards: CardModel[] = [];
   lazyLoading: boolean = false;
   itemsPerRow!: number;
   rowsInPage!: number;
+  itemSize: number = this.rowHeight;
+  numberOfToleratedItems: number = 5;
 
   ngOnInit() {
     this.scrollSubject
@@ -66,10 +67,14 @@ export class ItemsComponent implements OnInit, AfterViewInit {
         this.calculateItemsPerRow(entry.contentRect.width);
 
         const itemsInViewPort = this.itemsPerRow * this.rowsInPage;
+        this.pageSize = itemsInViewPort;
+        console.log(`items in row: ${this.itemsPerRow}`);
+        console.log(`rows in page: ${this.rowsInPage}`);
 
         if (this.virtualScroller) {
-          this.virtualScroller.numItemsInViewport = itemsInViewPort;
+          //this.virtualScroller.numItemsInViewport = itemsInViewPort;
-          this.virtualScroller.numToleratedItems = Math.floor(itemsInViewPort * 1.5);
+          //this.virtualScroller.numToleratedItems = Math.floor(itemsInViewPort * 1.5);
+          this.numberOfToleratedItems = itemsInViewPort;
         }
       }
     });
@@ -90,26 +95,18 @@ export class ItemsComponent implements OnInit, AfterViewInit {
   }
 
   private updateVirtualScrollerSettings(): void {
-    if (this.virtualScroller) {
+    this.itemSize = (this.rowHeight * this.FONT_SIZE_PX) / this.itemsPerRow;
-      this.virtualScroller.itemSize = (this.rowHeight * this.FONT_SIZE_PX);
-    }
   }
 
 
   getPage(lastIndexInPage: number): void {
-    console.log("piss")
-    if (this.lazyLoading) {
-      return;
-    }
-    console.log("piss2")
-    console.log(lastIndexInPage )
-
-    if (this.lastRequestResponseSize && this.lastRequestResponseSize > lastIndexInPage ) {
-      return;
-    }
-    console.log("piss3")
-
     this.lazyLoading = true
+
+    if (lastIndexInPage % this.pageSize !== 0) {
+      this.lazyLoading = false
+      return;
+    }
+
     this.page++;
 
     this.cardService.getCards(
@@ -118,10 +115,13 @@ export class ItemsComponent implements OnInit, AfterViewInit {
       this.pageSize,
     ).subscribe({
       next: cards => {
-        console.log(`pageSize ${this.pageSize}`);
+        for (const card of cards) {
-        console.log(`response size ${cards.length}`);
+          this.cards.push(card)
-        this.cards = this.cards.concat(cards);
+        }
-        console.log(`total cards ${this.cards.length}`);
+        this.lazyLoading = false;
+      },
+      error: error => {
+        console.log(error);
         this.lazyLoading = false;
       }
     });

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

@@ -4,13 +4,29 @@ api.base.service.ts
 api.module.ts
 api/api.ts
 api/card.service.ts
-api/deck-controller.service.ts
+api/deck.service.ts
 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/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/api.ts

@@ -1,5 +1,5 @@
 export * from './card.service';
 import { CardService } from './card.service';
-export * from './deck-controller.service';
+export * from './deck.service';
-import { DeckControllerService } from './deck-controller.service';
+import { DeckService } from './deck.service';
-export const APIS = [CardService, DeckControllerService];
+export const APIS = [CardService, DeckService];

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,
@@ -142,6 +195,7 @@ export class CardService extends BaseService {
     public getCards(name?: string, page?: number, pageSize?: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Array<Card>>>;
     public getCards(name?: string, page?: number, pageSize?: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Array<Card>>>;
     public getCards(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});
         localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
           <any>name, 'name');

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

@@ -18,6 +18,8 @@ import { Observable }                                        from 'rxjs';
 
 // @ts-ignore
 import { Deck } from '../model/deck';
+// @ts-ignore
+import { PageDeckDto } from '../model/page-deck-dto';
 
 // @ts-ignore
 import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
@@ -29,34 +31,33 @@ import { BaseService } from '../api.base.service';
 @Injectable({
   providedIn: 'root'
 })
-export class DeckControllerService extends BaseService {
+export class DeckService extends BaseService {
 
     constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
         super(basePath, configuration);
     }
 
     /**
-     * Add Card To Deck
+     * Add a Card by its ID to a Deck by its name
      * @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 addCardToDeck(cardId: number, deckName: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<object>>;
+    public addCardToDeck(cardId: number, deckName: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<object>>;
+    public addCardToDeck(cardId: number, deckName: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
-    public apiDecksDeckNameCardIdPost(cardId: number, deckName: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public addCardToDeck(cardId: number, deckName: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
         if (cardId === null || cardId === undefined) {
-            throw new Error('Required parameter cardId was null or undefined when calling apiDecksDeckNameCardIdPost.');
+            throw new Error('Required parameter cardId was null or undefined when calling addCardToDeck.');
         }
         if (deckName === null || deckName === undefined) {
-            throw new Error('Required parameter deckName was null or undefined when calling apiDecksDeckNameCardIdPost.');
+            throw new Error('Required parameter deckName was null or undefined when calling addCardToDeck.');
         }
 
         let localVarHeaders = this.defaultHeaders;
 
         const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
-            'application/json'
         ]);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
@@ -78,8 +79,8 @@ export class DeckControllerService 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<object>('post', `${this.configuration.basePath}${localVarPath}`,
+        return this.httpClient.request<any>('post', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
                 responseType: <any>responseType_,
@@ -93,81 +94,22 @@ export class DeckControllerService extends BaseService {
     }
 
     /**
-     * Get Deck
+     * Create a Deck with a given name
-     * @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 createDeck(deck: Deck, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
-    public apiDecksPost(deck: Deck, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<string>>;
+    public createDeck(deck: Deck, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
-    public apiDecksPost(deck: Deck, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<string>>;
+    public createDeck(deck: Deck, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<any>>;
-    public apiDecksPost(deck: Deck, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+    public createDeck(deck: Deck, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any> {
         if (deck === null || deck === undefined) {
-            throw new Error('Required parameter deck was null or undefined when calling apiDecksPost.');
+            throw new Error('Required parameter deck was null or undefined when calling createDeck.');
         }
 
         let localVarHeaders = this.defaultHeaders;
 
         const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
-            'application/json'
         ]);
         if (localVarHttpHeaderAcceptSelected !== undefined) {
             localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
@@ -199,7 +141,7 @@ export class DeckControllerService extends BaseService {
         }
 
         let localVarPath = `/api/decks`;
-        return this.httpClient.request<string>('post', `${this.configuration.basePath}${localVarPath}`,
+        return this.httpClient.request<any>('post', `${this.configuration.basePath}${localVarPath}`,
             {
                 context: localVarHttpContext,
                 body: deck,
@@ -213,4 +155,118 @@ export class DeckControllerService extends BaseService {
         );
     }
 
+    /**
+     * Get a singular Deck by its name
+     * @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 getDeckByName(name: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Deck>;
+    public getDeckByName(name: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Deck>>;
+    public getDeckByName(name: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Deck>>;
+    public getDeckByName(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 getDeckByName.');
+        }
+
+        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: "name", value: name, in: "path", style: "simple", explode: false, dataType: "string", dataFormat: undefined})}`;
+        return this.httpClient.request<Deck>('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get a page of Decks with optional name query parameter
+     * @param name 
+     * @param page 
+     * @param pageSize 
+     * @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<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});
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>name, 'name');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>page, 'page');
+        localVarQueryParameters = this.addToHttpParams(localVarQueryParameters,
+          <any>pageSize, 'pageSize');
+
+        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<PageDeckDto>('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                params: localVarQueryParameters,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
 }

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;
+ * @type Card
-    description: string;
+ * @export
-    pendulumDescription?: string | null;
+ */
-    defense?: number | null;
+export type Card = MonsterCard | SpellCard | TrapCard;
-    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;
-}
 

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,2 +1,18 @@
+export * from './attribute';
 export * from './card';
+export * from './card-print';
+export * from './card-type';
 export * from './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

@@ -0,0 +1,25 @@
+/**
+ * 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 { Deck } from './deck';
+
+
+/**
+ * Page of items
+ */
+export interface PageDeckDto { 
+    /**
+     * Items in the page
+     */
+    content: Array<Deck>;
+    page?: number;
+    pageSize?: number;
+    totalPages?: 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/card-item/card-item.component.html

@@ -0,0 +1 @@
+<p>card-item works!</p>

src/app/views/card-item/card-item.component.spec.ts

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

src/app/views/card-item/card-item.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-card-item',
+  imports: [],
+  templateUrl: './card-item.component.html',
+  styleUrl: './card-item.component.css'
+})
+export class CardItemComponent {
+
+}

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

@@ -0,0 +1,51 @@
+<div #container class="h-full w-screen">
+    <p-virtualscroller
+      [items]="cardRows"
+      [itemSize]="[itemWidthInPx,itemHeightInPx]"
+      [lazy]="true"
+      [loading]="lazyLoading"
+      [appendOnly]="true"
+      (onLazyLoad)="onLazyLoad($event)"
+      orientation="both"
+      [style]="{ width: '100vw', height: '100%' }"
+    >
+      <ng-template [appVirtualScroll]="cardRows" #item let-items let-options="options">
+        <div class="flex justify-around">
+          <p-card
+            *ngFor="let card of items"
+            styleClass="w-[24rem] h-[36rem] max-h-[36rem] m-2 overflow-hidden"
+          >
+            <ng-template pTemplate="header">
+              <div
+                class="relative duration-200 w-[23rem] rounded-lg ease-in-out h-64 z-10 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="http://localhost:8080/api/{{ card.id }}/image"
+                  />
+                </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-virtualscroller>
+</div>

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

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

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

@@ -0,0 +1,111 @@
+import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Scroller, ScrollerLazyLoadEvent} from 'primeng/scroller';
+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',
+  imports: [
+    Scroller,
+    Button,
+    Card,
+    PrimeTemplate,
+    NgForOf,
+    ScrollPanelModule,
+    VirtualScrollDirective
+  ],
+  templateUrl: './cards.component.html',
+  styleUrl: './cards.component.css'
+})
+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;
+
+  page: number = 0;
+  pageSize: number = 5;
+  itemHeight: number = 36 + (0.5 * 2);
+  itemWidth: number = 24;
+  itemHeightInPx: number = this.itemHeight * this.FONT_SIZE_PX;
+  itemWidthInPx: number = this.itemWidth * this.FONT_SIZE_PX;
+  cardRows: CardModel[][] = [];
+  lazyLoading: boolean = true;
+  initialized: boolean = false;
+  itemsPerRow!: number;
+  rowsInPage!: number;
+  lastResponseSize?: number;
+
+  ngOnInit(): void {
+    this.pageSubject
+      .pipe(
+        debounceTime(150),
+        switchMap(pageNumber => {
+          this.lazyLoading = true;
+
+          return this.cardService.getCards(undefined, pageNumber, this.pageSize).pipe(
+            catchError(error => {
+              console.log(`Error: ${error}`);
+
+              return of([]);
+            })
+          )
+        })
+      )
+      .subscribe(cards => {
+        this.lazyLoading = false;
+        this.lastResponseSize = cards.length
+
+        this.cardRows = [...this.cardRows, cards];
+
+        if (!this.initialized) {
+          this.initialized = true;
+        }
+      })
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        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) {
+    this.pageSubject.next(++this.page);
+  }
+
+  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/deck-item/deck-item.component.html

@@ -0,0 +1 @@
+<p>deck-item works!</p>

src/app/views/deck-item/deck-item.component.spec.ts

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

src/app/views/deck-item/deck-item.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-deck-item',
+  imports: [],
+  templateUrl: './deck-item.component.html',
+  styleUrl: './deck-item.component.css'
+})
+export class DeckItemComponent {
+
+}

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

@@ -0,0 +1,26 @@
+<div class="card">
+  <p-table
+    [value]="decks"
+    [tableStyle]="{ 'min-width': '60rem' }"
+  >
+    <ng-template pTemplate="caption">
+      <div class="flex items-center justify-between">
+        <span class="text-xl font-bold">Decks</span>
+        <p-button icon="pi pi-refresh" rounded raised/>
+      </div>
+    </ng-template>
+    <ng-template pTemplate="header">
+      <tr>
+        <th>Name</th>
+        <th>No. of Cards</th>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="body" let-deck>
+      <tr>
+        <td>{{ deck.name }}</td>
+        <td>{{ getNumberOfCardsInDecks(deck) }}</td>
+      </tr>
+    </ng-template>
+    <ng-template pTemplate="footer"> In total there are 0 Decks.</ng-template>
+  </p-table>
+</div>

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

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

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

@@ -0,0 +1,71 @@
+import {Component, OnInit} from '@angular/core';
+import {TableModule} from 'primeng/table';
+import {Button} from 'primeng/button';
+import {FormsModule} from '@angular/forms';
+import {BehaviorSubject, catchError, of, switchMap} from 'rxjs';
+import {LazyLoadEvent} from 'primeng/api';
+import {Deck, DeckService, PageDeckDto} from '../../openapi';
+
+@Component({
+  selector: 'app-decks',
+  imports: [
+    TableModule,
+    Button,
+    FormsModule
+  ],
+  templateUrl: './decks.component.html',
+  styleUrl: './decks.component.css'
+})
+export class DecksComponent implements OnInit {
+
+  constructor(private deckService: DeckService) {
+  }
+
+  protected loading: boolean = true;
+  protected decks: Deck[] = [];
+  private readonly pageSubject: BehaviorSubject<number> = new BehaviorSubject(0);
+  private page: number = 0;
+  private pageSize: number = 5;
+
+  ngOnInit() {
+    this.pageSubject.pipe(
+      switchMap(pageNumber => {
+          this.loading = true;
+
+          return this.deckService.getDecks(undefined, pageNumber, this.pageSize).pipe(
+            catchError(error => {
+              console.log(`Error: ${error}`);
+
+              return of({
+                content: [],
+                page: pageNumber,
+                pageSize: this.pageSize,
+                totalPages: 1
+              } as PageDeckDto);
+            })
+          )
+        }
+      )
+    ).subscribe(pageDeck => {
+      this.loading = false
+
+      this.decks = [
+        ...this.decks,
+        ...pageDeck.content
+      ]
+    });
+  }
+
+  lazyLoad(event: LazyLoadEvent) {
+    if (!event.last || event.last % this.pageSize !== 0) {
+      return;
+    }
+
+    this.pageSubject.next(++this.page);
+  }
+
+  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

@@ -1,21 +1,9 @@
 /* You can add global styles to this file, and also import other style files */
 @import "tailwindcss";
 @import "primeicons/primeicons.css";
-@plugin "tailwindcss-primeui";
+@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));
-}