Experiment

Add OpenAPI client(s)

angular.json

@@ -92,5 +92,11 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false,
+    "cache": {
+      "enabled": true
+    }
   }
 }

openapitools.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "./node_modules/@openapitools/openapi-generator-cli/config.schema.json",
+  "spaces": 2,
+  "generator-cli": {
+    "version": "7.12.0"
+  }
+}

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": {
@@ -17,9 +18,11 @@
     "@angular/platform-browser": "^19.2.0",
     "@angular/platform-browser-dynamic": "^19.2.0",
     "@angular/router": "^19.2.0",
+    "@openapitools/openapi-generator-cli": "^2.19.1",
     "@primeng/themes": "^19.0.10",
     "@tailwindcss/postcss": "^4.1.3",
     "postcss": "^8.5.3",
+    "primeicons": "^7.0.0",
     "primeng": "^19.0.10",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.3",

src/app/app.component.html

@@ -1,36 +1,7 @@
-<style>
-  .main {
-    display: flex;
-    align-items: center;
-    height: 100vh;
-  }
+<main class="flex flex-col h-screen w-full items-center bg-surface-800">
+  <app-bar class="fixed top-0 z-10"/>
 
-  .content {
-    background: light-dark(var(--p-surface-50), var(--p-surface-900));
-    border-radius: 2rem;
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    gap: 1rem;
-    padding: 2rem;
-  }
-</style>
-
-<main class="flex h-screen items-center">
-  <app-bar/>
-  <app-items/>
-  <div class="content">
-    <h1 class="text-3xl font-bold underline">
-      Hello world!
-    </h1>
-    <span class="title">PrimeNG Playground</span>
-    <div class="content-input">
-      <input type="text" pInputText [(ngModel)]="text">
-      <p-button label="Submit" (onClick)="onClick()" [disabled]="!text"></p-button>
-    </div>
-    <p-message severity="success" *ngIf="msg">{{msg}}</p-message>
+  <div class="flex-1 w-full relative top-[4rem]">
+    <router-outlet/>
   </div>
 </main>
-
-
-<router-outlet />

src/app/app.component.ts

@@ -1,35 +1,30 @@
 import {Component} from '@angular/core';
-import {RouterOutlet} from '@angular/router';
 import {CommonModule} from '@angular/common';
 import {InputTextModule} from 'primeng/inputtext';
 import {ButtonModule} from 'primeng/button';
 import {MessageModule} from 'primeng/message';
 import {FormsModule} from '@angular/forms';
 import {BarComponent} from './component/bar/bar.component';
-import {ItemsComponent} from './component/items/items.component';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {ApiModule} from './openapi';
+import {RouterOutlet} from '@angular/router';
 
 @Component({
   selector: 'app-root',
   standalone: true,
   imports: [
     CommonModule,
-    RouterOutlet,
     InputTextModule,
     ButtonModule,
     MessageModule,
     FormsModule,
     BarComponent,
-    ItemsComponent
+    ScrollingModule,
+    ApiModule,
+    RouterOutlet
   ],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
-  text = '';
-
-  msg = '';
-
-  onClick() {
-    this.msg = 'Welcome ' + this.text;
-  }
 }

src/app/app.config.ts

@@ -4,6 +4,8 @@ import {routes} from './app.routes';
 import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
 import {providePrimeNG} from 'primeng/config';
 import Aura from '@primeng/themes/aura';
+import {BASE_PATH} from './openapi';
+import {provideHttpClient} from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -12,8 +14,16 @@ export const appConfig: ApplicationConfig = {
     provideAnimationsAsync(),
     providePrimeNG({
       theme: {
-        preset: Aura
+        preset: Aura,
+        options: {
+          cssLayer: {
+            name: 'primeng',
+            order: 'theme,base,primeng'
           }
-    })
+        }
+      }
+    }),
+    provideHttpClient(),
+    {provide: BASE_PATH, useValue: 'http://localhost:8080'}
   ]
 };

src/app/app.routes.ts

@@ -1,3 +1,14 @@
 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';
+import {CardItemComponent} from './views/card-item/card-item.component';
+import {DeckItemComponent} from './views/deck-item/deck-item.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+  { 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,3 +1,26 @@
-<div class="flex items-center justify-center absolute top-0 w-full hover:bg-emphasis">
-  <p>bar works!</p>
+<div class="w-screen bg-none backdrop-blur-md">
+  <p-menubar
+    [model]="items"
+    [style]="{ background: 'none', height: '4rem'}"
+  >
+    <ng-template #item let-item let-root="root">
+      <a pRipple class="flex items-center p-menubar-item-link">
+        <span>{{ item.label }}</span>
+        <p-badge *ngIf="item.badge" [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge" />
+        <span *ngIf="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
+        <i *ngIf="item.items" [ngClass]="['ml-auto pi', root ? 'pi-angle-down' : 'pi-angle-right']"></i>
+      </a>
+    </ng-template>
+    <ng-template #end>
+      <div class="flex items-center gap-2">
+        <input
+          type="text"
+          pInputText
+          placeholder="Search"
+          class="w-36"
+        />
+        <p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" shape="circle" />
+      </div>
+    </ng-template>
+  </p-menubar>
 </div>

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

@@ -1,11 +1,59 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {MenuItem} from 'primeng/api';
+import {Menubar} from 'primeng/menubar';
+import {Badge} from 'primeng/badge';
+import {NgClass, NgIf} from '@angular/common';
+import {Ripple} from 'primeng/ripple';
+import {Avatar} from 'primeng/avatar';
+import {InputText} from 'primeng/inputtext';
+import {Router} from '@angular/router';
 
 @Component({
   selector: 'app-bar',
-  imports: [],
+  imports: [
+    Menubar,
+    Badge,
+    NgClass,
+    NgIf,
+    Ripple,
+    Avatar,
+    InputText
+  ],
   templateUrl: './bar.component.html',
   styleUrl: './bar.component.css'
 })
-export class BarComponent {
+export class BarComponent implements OnInit {
+  items: MenuItem[] | undefined;
 
+  constructor(private router: Router) {}
+
+  ngOnInit() {
+    this.items = [
+      {
+        label: 'Home (TBD)',
+        icon: 'pi pi-home'
+      },
+      {
+        label: 'Decks',
+        icon: 'pi pi-star',
+        command: async () => {
+          await this.router.navigate(['/decks']);
+        }
+      },
+      {
+        label: 'Cards',
+        icon: 'pi pi-search',
+        command: async () => {
+          await this.router.navigate(['/cards']);
+        }
+      },
+      {
+        label: 'Test',
+        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

@@ -1,9 +1,53 @@
-<p-virtualscroller [items]="items" [itemSize]="[50, 100]" orientation="both" styleClass="border border-surface" [style]="{ width: '500px', height: '200px' }">
-  <ng-template #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 style="width: 100px">
-        {{ item }}
+<div #container class="size-full overscroll-none">
+  @if (cards.length > 0) {
+    <p-virtualscroller
+      [items]="cards"
+      [itemSize]="itemSize"
+      [lazy]="true"
+      [loading]="lazyLoading"
+      [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-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{{ card.imageApiPath }}"
+                    />
                   </div>
                 </div>
               </ng-template>
+              <ng-template pTemplate="title"> {{ card.name }}</ng-template>
+              <ng-template pTemplate="subtitle"> Card subtitle</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"/>
+                </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!
+              </p>
+            </p-card>
+          }
+        </div>
+      </ng-template>
     </p-virtualscroller>
+  }
+</div>

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

@@ -1,29 +1,134 @@
-import { Component } from '@angular/core';
-import {Scroller} from 'primeng/scroller';
-import {NgClass, NgForOf} from '@angular/common';
+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-scroller-content/virtual-scroll.directive';
+import {debounceTime, Subject} from 'rxjs';
 
 @Component({
   selector: 'app-items',
   imports: [
     Scroller,
-    NgClass,
     Card,
-    NgForOf
+    Button,
+    PrimeTemplate,
+    VirtualScrollDirective,
   ],
   templateUrl: './items.component.html',
   styleUrl: './items.component.css'
 })
-export class ItemsComponent {
-  items: string[] = this.test();
+export class ItemsComponent implements OnInit, AfterViewInit {
+  @ViewChild('container') containerRef!: ElementRef<HTMLElement>;
+  @ViewChild(Scroller) virtualScroller!: Scroller;
 
-  test() {
-    const items = [];
-
-    for (let i = 0; i < 1000  ; i++) {
-      items[i] = `${i}`
+  constructor(private cardService: CardService) {
   }
 
-    return items;
+  private scrollSubject = new Subject<ScrollerLazyLoadEvent>();
+  private resizeObserver!: ResizeObserver;
+
+  private readonly FONT_SIZE_PX = 14;
+
+  pageSize: number = 5;
+  page: number = -1;
+  // noinspection PointlessArithmeticExpressionJS Card height + ( margin top/bottom) (rem)
+  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
+      .pipe(debounceTime(150))
+      .subscribe((lazyLoadEvent) => {
+        this.getPage(lazyLoadEvent.last);
+      });
+
+    this.scrollSubject.next({
+      first: 0,
+      last: 0
+    })
+  }
+
+  ngAfterViewInit(): void {
+    this.setupResizeObserver();
+  }
+
+  private setupResizeObserver(): void {
+    this.resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.calculateRowsInPage(entry.contentRect.height);
+        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.numToleratedItems = Math.floor(itemsInViewPort * 1.5);
+          this.numberOfToleratedItems = itemsInViewPort;
         }
       }
+    });
+    this.resizeObserver.observe(this.containerRef.nativeElement);
+  }
+
+  private calculateItemsPerRow(containerWidth: number): void {
+    const newItemsPerRow = Math.floor(containerWidth / (this.itemWidth * this.FONT_SIZE_PX)) || 1;
+
+    if (newItemsPerRow !== this.itemsPerRow) {
+      this.itemsPerRow = newItemsPerRow;
+    }
+    this.updateVirtualScrollerSettings();
+  }
+
+  private calculateRowsInPage(containerHeight: number) {
+    this.rowsInPage = Math.ceil(containerHeight / (this.rowHeight * this.FONT_SIZE_PX));
+  }
+
+  private updateVirtualScrollerSettings(): void {
+    this.itemSize = (this.rowHeight * this.FONT_SIZE_PX) / this.itemsPerRow;
+  }
+
+
+  getPage(lastIndexInPage: number): void {
+    this.lazyLoading = true
+
+    if (lastIndexInPage % this.pageSize !== 0) {
+      this.lazyLoading = false
+      return;
+    }
+
+    this.page++;
+
+    this.cardService.getCards(
+      undefined,
+      this.page,
+      this.pageSize,
+    ).subscribe({
+      next: cards => {
+        for (const card of cards) {
+          this.cards.push(card)
+        }
+        this.lazyLoading = false;
+      },
+      error: error => {
+        console.log(error);
+        this.lazyLoading = false;
+      }
+    });
+  }
+
+  onLazyLoad(event: ScrollerLazyLoadEvent) {
+    this.scrollSubject.next(event);
+  }
+
+}

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-content/virtual-scroll.directive.spec.ts

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

src/app/directives/virtual-scroller-content/virtual-scroll.directive.ts

@@ -0,0 +1,26 @@
+import {Directive, Input} from '@angular/core';
+import {ScrollerContentOptions} from 'primeng/scroller';
+
+interface CoolScrollerContentOptions<T extends object> extends ScrollerContentOptions {
+  items?: T[];
+}
+
+interface TableRowTemplateContext<T extends object> {
+  $implicit: T;
+  options: CoolScrollerContentOptions<T>;
+}
+
+@Directive({
+  selector: 'ng-template[appVirtualScroll]'
+})
+export class VirtualScrollDirective<T extends object>{
+
+  @Input('appVirtualScroll') items!: T[];
+
+  static ngTemplateContextGuard<E extends object>(
+    _dir: VirtualScrollDirective<E>,
+    _ctx: unknown
+  ): _ctx is TableRowTemplateContext<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-ignore

@@ -0,0 +1,23 @@
+# OpenAPI Generator Ignore
+# Generated by openapi-generator https://github.com/openapitools/openapi-generator
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell OpenAPI Generator to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md

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

@@ -0,0 +1,32 @@
+.gitignore
+README.md
+api.base.service.ts
+api.module.ts
+api/api.ts
+api/card.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/.openapi-generator/VERSION

@@ -0,0 +1 @@
+7.12.0

src/app/openapi/README.md

@@ -0,0 +1,236 @@
+# @
+
+No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
+
+The version of the OpenAPI document: 0.0.1
+
+## Building
+
+To install the required dependencies and to build the typescript sources run:
+
+```console
+npm install
+npm run build
+```
+
+## Publishing
+
+First build the package then run `npm publish dist` (don't forget to specify the `dist` folder!)
+
+## Consuming
+
+Navigate to the folder of your consuming project and run one of next commands.
+
+_published:_
+
+```console
+npm install @ --save
+```
+
+_without publishing (not recommended):_
+
+```console
+npm install PATH_TO_GENERATED_PACKAGE/dist.tgz --save
+```
+
+_It's important to take the tgz file, otherwise you'll get trouble with links on windows_
+
+_using `npm link`:_
+
+In PATH_TO_GENERATED_PACKAGE/dist:
+
+```console
+npm link
+```
+
+In your project:
+
+```console
+npm link 
+```
+
+__Note for Windows users:__ The Angular CLI has troubles to use linked npm packages.
+Please refer to this issue <https://github.com/angular/angular-cli/issues/8284> for a solution / workaround.
+Published packages are not effected by this issue.
+
+### General usage
+
+In your Angular project:
+
+```typescript
+// without configuring providers
+import { ApiModule } from '';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+    imports: [
+        ApiModule,
+        // make sure to import the HttpClientModule in the AppModule only,
+        // see https://github.com/angular/angular/issues/20575
+        HttpClientModule
+    ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers
+import { ApiModule, Configuration, ConfigurationParameters } from '';
+
+export function apiConfigFactory (): Configuration {
+  const params: ConfigurationParameters = {
+    // set configuration parameters here.
+  }
+  return new Configuration(params);
+}
+
+@NgModule({
+    imports: [ ApiModule.forRoot(apiConfigFactory) ],
+    declarations: [ AppComponent ],
+    providers: [],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+// configuring providers with an authentication service that manages your access tokens
+import { ApiModule, Configuration } from '';
+
+@NgModule({
+    imports: [ ApiModule ],
+    declarations: [ AppComponent ],
+    providers: [
+      {
+        provide: Configuration,
+        useFactory: (authService: AuthService) => new Configuration(
+          {
+            basePath: environment.apiUrl,
+            accessToken: authService.getAccessToken.bind(authService)
+          }
+        ),
+        deps: [AuthService],
+        multi: false
+      }
+    ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+```typescript
+import { DefaultApi } from '';
+
+export class AppComponent {
+    constructor(private apiGateway: DefaultApi) { }
+}
+```
+
+Note: The ApiModule is restricted to being instantiated once app wide.
+This is to ensure that all services are treated as singletons.
+
+### Using multiple OpenAPI files / APIs / ApiModules
+
+In order to use multiple `ApiModules` generated from different OpenAPI files,
+you can create an alias name when importing the modules
+in order to avoid naming conflicts:
+
+```typescript
+import { ApiModule } from 'my-api-path';
+import { ApiModule as OtherApiModule } from 'my-other-api-path';
+import { HttpClientModule } from '@angular/common/http';
+
+@NgModule({
+  imports: [
+    ApiModule,
+    OtherApiModule,
+    // make sure to import the HttpClientModule in the AppModule only,
+    // see https://github.com/angular/angular/issues/20575
+    HttpClientModule
+  ]
+})
+export class AppModule {
+
+}
+```
+
+### Set service base path
+
+If different than the generated base path, during app bootstrap, you can provide the base path to your service.
+
+```typescript
+import { BASE_PATH } from '';
+
+bootstrap(AppComponent, [
+    { provide: BASE_PATH, useValue: 'https://your-web-service.com' },
+]);
+```
+
+or
+
+```typescript
+import { BASE_PATH } from '';
+
+@NgModule({
+    imports: [],
+    declarations: [ AppComponent ],
+    providers: [ provide: BASE_PATH, useValue: 'https://your-web-service.com' ],
+    bootstrap: [ AppComponent ]
+})
+export class AppModule {}
+```
+
+### Using @angular/cli
+
+First extend your `src/environments/*.ts` files by adding the corresponding base path:
+
+```typescript
+export const environment = {
+  production: false,
+  API_BASE_PATH: 'http://127.0.0.1:8080'
+};
+```
+
+In the src/app/app.module.ts:
+
+```typescript
+import { BASE_PATH } from '';
+import { environment } from '../environments/environment';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [ ],
+  providers: [{ provide: BASE_PATH, useValue: environment.API_BASE_PATH }],
+  bootstrap: [ AppComponent ]
+})
+export class AppModule { }
+```
+
+### Customizing path parameter encoding
+
+Without further customization, only [path-parameters][parameter-locations-url] of [style][style-values-url] 'simple'
+and Dates for format 'date-time' are encoded correctly.
+
+Other styles (e.g. "matrix") are not that easy to encode
+and thus are best delegated to other libraries (e.g.: [@honoluluhenk/http-param-expander]).
+
+To implement your own parameter encoding (or call another library),
+pass an arrow-function or method-reference to the `encodeParam` property of the Configuration-object
+(see [General Usage](#general-usage) above).
+
+Example value for use in your Configuration-Provider:
+
+```typescript
+new Configuration({
+    encodeParam: (param: Param) => myFancyParamEncoder(param),
+})
+```
+
+[parameter-locations-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#parameter-locations
+[style-values-url]: https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values
+[@honoluluhenk/http-param-expander]: https://www.npmjs.com/package/@honoluluhenk/http-param-expander

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

@@ -0,0 +1,69 @@
+import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { CustomHttpParameterCodec } from './encoder';
+import { Configuration } from './configuration';
+
+export class BaseService {
+    protected basePath = '';
+    public defaultHeaders = new HttpHeaders();
+    public configuration: Configuration;
+    public encoder: HttpParameterCodec;
+
+    constructor(basePath?: string|string[], configuration?: Configuration) {
+        this.configuration = configuration || new Configuration();
+        if (typeof this.configuration.basePath !== 'string') {
+            const firstBasePath = Array.isArray(basePath) ? basePath[0] : undefined;
+            if (firstBasePath != undefined) {
+                basePath = firstBasePath;
+            }
+
+            if (typeof basePath !== 'string') {
+                basePath = this.basePath;
+            }
+            this.configuration.basePath = basePath;
+        }
+        this.encoder = this.configuration.encoder || new CustomHttpParameterCodec();
+    }
+
+    protected canConsumeForm(consumes: string[]): boolean {
+        return consumes.indexOf('multipart/form-data') !== -1;
+    }
+
+    protected addToHttpParams(httpParams: HttpParams, value: any, key?: string): HttpParams {
+        // If the value is an object (but not a Date), recursively add its keys.
+        if (typeof value === 'object' && !(value instanceof Date)) {
+            return this.addToHttpParamsRecursive(httpParams, value, key);
+        }
+        return this.addToHttpParamsRecursive(httpParams, value, key);
+    }
+
+    protected addToHttpParamsRecursive(httpParams: HttpParams, value?: any, key?: string): HttpParams {
+        if (value === null || value === undefined) {
+            return httpParams;
+        }
+        if (typeof value === 'object') {
+            // If JSON format is preferred, key must be provided.
+            if (key != null) {
+                return httpParams.append(key, JSON.stringify(value));
+            }
+            // Otherwise, if it's an array, add each element.
+            if (Array.isArray(value)) {
+                value.forEach(elem => httpParams = this.addToHttpParamsRecursive(httpParams, elem, key));
+            } else if (value instanceof Date) {
+                if (key != null) {
+                    httpParams = httpParams.append(key, value.toISOString());
+                } else {
+                    throw Error("key may not be null if value is Date");
+                }
+            } else {
+                Object.keys(value).forEach(k => {
+                    const paramKey = key ? `${key}.${k}` : k;
+                    httpParams = this.addToHttpParamsRecursive(httpParams, value[k], paramKey);
+                });
+            }
+            return httpParams;
+        } else if (key != null) {
+            return httpParams.append(key, value);
+        }
+        throw Error("key may not be null if value is not object or array");
+    }
+}

src/app/openapi/api.module.ts

@@ -0,0 +1,30 @@
+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { Configuration } from './configuration';
+import { HttpClient } from '@angular/common/http';
+
+
+@NgModule({
+  imports:      [],
+  declarations: [],
+  exports:      [],
+  providers: []
+})
+export class ApiModule {
+    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders<ApiModule> {
+        return {
+            ngModule: ApiModule,
+            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
+        };
+    }
+
+    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
+                 @Optional() http: HttpClient) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+            'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+}

src/app/openapi/api/api.ts

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

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

@@ -0,0 +1,247 @@
+/**
+ * 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 { Card } from '../model/card';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CardService extends BaseService {
+
+    constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+        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 
+     * @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 getCardById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Card>;
+    public getCardById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Card>>;
+    public getCardById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Card>>;
+    public getCardById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getCardById.');
+        }
+
+        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: "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,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get the image of a Card by its ID
+     * @param id 
+     * @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 getCardImageById(id: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<Blob>;
+    public getCardImageById(id: number, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<Blob>>;
+    public getCardImageById(id: number, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<Blob>>;
+    public getCardImageById(id: number, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/octet-stream', context?: HttpContext, transferCache?: boolean}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling getCardImageById.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+            'application/octet-stream'
+        ]);
+        if (localVarHttpHeaderAcceptSelected !== undefined) {
+            localVarHeaders = localVarHeaders.set('Accept', localVarHttpHeaderAcceptSelected);
+        }
+
+        const localVarHttpContext: HttpContext = options?.context ?? new HttpContext();
+
+        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: "int32"})}/image`;
+        return this.httpClient.request('get', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: "blob",
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Get a page of Cards 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 getCards(name?: string, page?: number, pageSize?: number, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json', context?: HttpContext, transferCache?: boolean}): Observable<Array<Card>>;
+    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');
+        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/cards`;
+        return this.httpClient.request<Array<Card>>('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/api/deck.service.ts

@@ -0,0 +1,272 @@
+/**
+ * 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 { PageDeckDto } from '../model/page-deck-dto';
+
+// @ts-ignore
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+import { BaseService } from '../api.base.service';
+
+
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DeckService extends BaseService {
+
+    constructor(protected httpClient: HttpClient, @Optional() @Inject(BASE_PATH) basePath: string|string[], @Optional() configuration?: Configuration) {
+        super(basePath, configuration);
+    }
+
+    /**
+     * 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 addCardToDeck(cardId: number, deckName: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
+    public addCardToDeck(cardId: number, deckName: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
+    public addCardToDeck(cardId: number, deckName: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<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 addCardToDeck.');
+        }
+        if (deckName === null || deckName === undefined) {
+            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([
+        ]);
+        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: "int32"})}`;
+        return this.httpClient.request<any>('post', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * Create a Deck with a given name
+     * @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 createDeck(deck: Deck, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<any>;
+    public createDeck(deck: Deck, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpResponse<any>>;
+    public createDeck(deck: Deck, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined, context?: HttpContext, transferCache?: boolean}): Observable<HttpEvent<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 createDeck.');
+        }
+
+        let localVarHeaders = this.defaultHeaders;
+
+        const localVarHttpHeaderAcceptSelected: string | undefined = options?.httpHeaderAccept ?? this.configuration.selectHeaderAccept([
+        ]);
+        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<any>('post', `${this.configuration.basePath}${localVarPath}`,
+            {
+                context: localVarHttpContext,
+                body: deck,
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: localVarHeaders,
+                observe: observe,
+                transferCache: localVarTransferCache,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * 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/configuration.ts

@@ -0,0 +1,180 @@
+import { HttpHeaders, HttpParams, HttpParameterCodec } from '@angular/common/http';
+import { Param } from './param';
+
+export interface ConfigurationParameters {
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+    /**
+     * Takes care of encoding query- and form-parameters.
+     */
+    encoder?: HttpParameterCodec;
+    /**
+     * Override the default method for encoding path parameters in various
+     * <a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values">styles</a>.
+     * <p>
+     * See {@link README.md} for more details
+     * </p>
+     */
+    encodeParam?: (param: Param) => string;
+    /**
+     * The keys are the names in the securitySchemes section of the OpenAPI
+     * document. They should map to the value used for authentication
+     * minus any standard prefixes such as 'Basic' or 'Bearer'.
+     */
+    credentials?: {[ key: string ]: string | (() => string | undefined)};
+}
+
+export class Configuration {
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    /**
+     *  @deprecated Since 5.0. Use credentials instead
+     */
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+    /**
+     * Takes care of encoding query- and form-parameters.
+     */
+    encoder?: HttpParameterCodec;
+    /**
+     * Encoding of various path parameter
+     * <a href="https://github.com/OAI/OpenAPI-Specification/blob/main/versions/3.1.0.md#style-values">styles</a>.
+     * <p>
+     * See {@link README.md} for more details
+     * </p>
+     */
+    encodeParam: (param: Param) => string;
+    /**
+     * The keys are the names in the securitySchemes section of the OpenAPI
+     * document. They should map to the value used for authentication
+     * minus any standard prefixes such as 'Basic' or 'Bearer'.
+     */
+    credentials: {[ key: string ]: string | (() => string | undefined)};
+
+    constructor(configurationParameters: ConfigurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+        this.encoder = configurationParameters.encoder;
+        if (configurationParameters.encodeParam) {
+            this.encodeParam = configurationParameters.encodeParam;
+        }
+        else {
+            this.encodeParam = param => this.defaultEncodeParam(param);
+        }
+        if (configurationParameters.credentials) {
+            this.credentials = configurationParameters.credentials;
+        }
+        else {
+            this.credentials = {};
+        }
+    }
+
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderContentType (contentTypes: string[]): string | undefined {
+        if (contentTypes.length === 0) {
+            return undefined;
+        }
+
+        const type = contentTypes.find((x: string) => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderAccept(accepts: string[]): string | undefined {
+        if (accepts.length === 0) {
+            return undefined;
+        }
+
+        const type = accepts.find((x: string) => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime !== null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+
+    public lookupCredential(key: string): string | undefined {
+        const value = this.credentials[key];
+        return typeof value === 'function'
+            ? value()
+            : value;
+    }
+
+    public addCredentialToHeaders(credentialKey: string, headerName: string, headers: HttpHeaders, prefix?: string): HttpHeaders {
+        const value = this.lookupCredential(credentialKey);
+        return value
+            ? headers.set(headerName, (prefix ?? '') + value)
+            : headers;
+    }
+
+    public addCredentialToQuery(credentialKey: string, paramName: string, query: HttpParams): HttpParams {
+        const value = this.lookupCredential(credentialKey);
+        return value
+            ? query.set(paramName, value)
+            : query;
+    }
+
+    private defaultEncodeParam(param: Param): string {
+        // This implementation exists as fallback for missing configuration
+        // and for backwards compatibility to older typescript-angular generator versions.
+        // It only works for the 'simple' parameter style.
+        // Date-handling only works for the 'date-time' format.
+        // All other styles and Date-formats are probably handled incorrectly.
+        //
+        // But: if that's all you need (i.e.: the most common use-case): no need for customization!
+
+        const value = param.dataFormat === 'date-time' && param.value instanceof Date
+            ? (param.value as Date).toISOString()
+            : param.value;
+
+        return encodeURIComponent(String(value));
+    }
+}

src/app/openapi/encoder.ts

@@ -0,0 +1,20 @@
+import { HttpParameterCodec } from '@angular/common/http';
+
+/**
+ * Custom HttpParameterCodec
+ * Workaround for https://github.com/angular/angular/issues/18261
+ */
+export class CustomHttpParameterCodec implements HttpParameterCodec {
+    encodeKey(k: string): string {
+        return encodeURIComponent(k);
+    }
+    encodeValue(v: string): string {
+        return encodeURIComponent(v);
+    }
+    decodeKey(k: string): string {
+        return decodeURIComponent(k);
+    }
+    decodeValue(v: string): string {
+        return decodeURIComponent(v);
+    }
+}

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/index.ts

@@ -0,0 +1,6 @@
+export * from './api/api';
+export * from './model/models';
+export * from './variables';
+export * from './configuration';
+export * from './api.module';
+export * from './param';

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

@@ -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.
+ */
+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';
+
+
+/**
+ * @type Card
+ * @export
+ */
+export type Card = MonsterCard | SpellCard | TrapCard;
+

src/app/openapi/model/deck.ts

@@ -0,0 +1,18 @@
+/**
+ * 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 { CardPrint } from './card-print';
+
+
+export interface Deck { 
+    id?: number;
+    name: string;
+    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

@@ -0,0 +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/openapi/param.ts

@@ -0,0 +1,69 @@
+/**
+ * Standard parameter styles defined by OpenAPI spec
+ */
+export type StandardParamStyle =
+  | 'matrix'
+  | 'label'
+  | 'form'
+  | 'simple'
+  | 'spaceDelimited'
+  | 'pipeDelimited'
+  | 'deepObject'
+  ;
+
+/**
+ * The OpenAPI standard {@link StandardParamStyle}s may be extended by custom styles by the user.
+ */
+export type ParamStyle = StandardParamStyle | string;
+
+/**
+ * Standard parameter locations defined by OpenAPI spec
+ */
+export type ParamLocation = 'query' | 'header' | 'path' | 'cookie';
+
+/**
+ * Standard types as defined in <a href="https://swagger.io/specification/#data-types">OpenAPI Specification: Data Types</a>
+ */
+export type StandardDataType =
+  | "integer"
+  | "number"
+  | "boolean"
+  | "string"
+  | "object"
+  | "array"
+  ;
+
+/**
+ * Standard {@link DataType}s plus your own types/classes.
+ */
+export type DataType = StandardDataType | string;
+
+/**
+ * Standard formats as defined in <a href="https://swagger.io/specification/#data-types">OpenAPI Specification: Data Types</a>
+ */
+export type StandardDataFormat =
+  | "int32"
+  | "int64"
+  | "float"
+  | "double"
+  | "byte"
+  | "binary"
+  | "date"
+  | "date-time"
+  | "password"
+  ;
+
+export type DataFormat = StandardDataFormat | string;
+
+/**
+ * The parameter to encode.
+ */
+export interface Param {
+  name: string;
+  value: unknown;
+  in: ParamLocation;
+  style: ParamStyle,
+  explode: boolean;
+  dataType: DataType;
+  dataFormat: DataFormat | undefined;
+}

src/app/openapi/variables.ts

@@ -0,0 +1,9 @@
+import { InjectionToken } from '@angular/core';
+
+export const BASE_PATH = new InjectionToken<string>('basePath');
+export const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+}

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