Start work on storefront

src/MistoxWebsite.Client/src/app/models/Product.ts

@@ -0,0 +1,9 @@
+export class Product {
+    public id: number = -1;
+    public name: string = "";
+    public description: string = "";
+    public curShowingIMG: number = 0;
+    public images: string[] = [];
+    public cost: number = 0;
+    public url: string = "";
+}

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.css

@@ -0,0 +1,145 @@
+.gameCard {
+    position: relative;
+    background-color: var(--Mistox-Black);
+    float: left;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    border-radius: 10px;
+    break-inside: avoid;
+    margin-bottom: 2rem;
+    border: solid 2px var(--Mistox-Background);
+    transition-duration: 1s;
+}
+
+.gameCard :hover{
+    border-color: var(--Mistox-Light);
+}
+
+.gameCard-Name {
+    width: 100%;
+    text-align: left;
+    font-size: 25px;
+    padding: 5px 0 0 5px;
+    background-color: rgba(0,0,0,.1);
+}
+
+.gameCard-Grid {
+    column-count: 4;
+    column-gap: 2rem;
+    padding-top: 20px;
+    width: calc(100% - 40px);
+    margin-left: 20px;
+}
+
+@media (max-width: 1400px) {
+    .gameCard-Grid {
+        column-count: 3;
+        padding-top: 20px;
+        width: calc(100% - 40px);
+        margin-left: 20px;
+    }
+}
+
+@media (max-width: 1100px) {
+    .gameCard-Grid {
+        column-count: 2;
+        padding-top: 20px;
+        width: calc(100% - 40px);
+        margin-left: 20px;
+    }
+}
+
+@media (max-width: 900px) {
+    .gameCard-Grid {
+        column-count: 1;
+        padding-top: 20px;
+        width: calc(100% - 40px);
+        margin-left: 20px;
+    }
+}
+
+.gameCard-Img {
+    width: 100%;
+    border-radius: 10px 10px 0 0;
+}
+
+.gameCard-Next,
+.gameCard-Prev {
+    background-color: transparent;
+    color: var(--Mistox-White);
+    padding: 16px;
+    margin-top: -22px;
+    font-size: 18px;
+    font-weight: bold;
+    border: none;
+    transition: background-color 0.6s ease;
+}
+
+    .gameCard-Next:hover,
+    .gameCard-Prev:hover {
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+
+.gameCard-Prev {
+    position: absolute;
+    top: 50%;
+}
+
+.gameCard-Next {
+    position: absolute;
+    top: 50%;
+    right: 0;
+}
+
+.gameCard-Desc {
+    font-size: 13px;
+    margin: 5px;
+    color: var(--Mistox-Light);
+}
+
+.gameCard-Price {
+    width: calc(50% - 10px);
+    float: left;
+    margin: 5px;
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.gameCard-Button {
+    width: 40%;
+    margin: 5px 5%;
+    height: 38.4px;
+    color: var(--Mistox-Black);
+    background-color: var(--Mistox-Light);
+    font-size: 16px;
+    text-decoration: none;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: 0.5s;
+    letter-spacing: 2px;
+    border: 1px solid var(--Mistox-Light);
+    border-radius: 5px;
+}
+
+    .gameCard-Button :hover{
+        background-color: var(--Mistox-Light);
+        color: var(--Mistox-White);
+        box-shadow: 4px 3px 6px var(--Mistox-Dark);
+    }
+
+.cartopen {
+    position: absolute;
+    background: var(--Mistox-Offset);
+    right: 10px;
+    top: 55px;
+    width: 400px;
+    border-radius: 5px;
+    backdrop-filter: blur(3px);
+    border: 1px solid var(--Mistox-Light);
+}
+
+.cartclosed {
+    display: none;
+}

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.html

@@ -1 +1,29 @@
-<span>Temp Store</span>
+<div class="gameCard-Grid">
+    <div class="gameCard" *ngFor="let product of Products">
+        <div style="position: relative;">
+            <div *ngIf="product.images.length > 1">
+                <button class="gameCard-Prev" onclick="">❮</button>
+                <button class="gameCard-Next" onclick="">❯</button>
+            </div>
+            <div *ngIf="product.images.length > 0" >
+                <img class="gameCard-Img" src="{{ product.images[0] }}">
+            </div>
+        </div>
+        <h1 class ="gameCard-Name">{{ product.name }}</h1>
+        <div *ngFor="let line of product.description.split('\n')" >
+            <h2 class="gameCard-Desc">{{ line }}</h2>
+        </div>
+        <h2 class="gameCard-Price">${{ (product.cost/100).toFixed(2) }}</h2>
+        <button class="gameCard-Button" disabled="">Add To Cart</button>
+        <div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
+            <button style="width: calc(100% - 10px); margin: 5px;" onclick="">
+                Edit
+            </button>
+        </div>
+    </div>
+    <div *ngIf="auth.loggedInUser.siteData.role == 'Admin'">
+    <button style="width: calc(100% - 10px); margin: 5px;" onclick="">
+        New
+    </button>
+</div>
+</div>

src/MistoxWebsite.Client/src/app/pages/store/catalog/catalog.component.ts

@@ -5,16 +5,27 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { CommonModule } from '@angular/common';
 import { Authentication } from '../../../services/Authentication';
+import { Product } from 'app/models/Product';
 
 @Component({
   selector: 'account-forgot',
   templateUrl: './catalog.component.html',
+  styleUrl: './catalog.component.css',
   imports: [ FormsModule, CommonModule ]
 })
 export class CatalogComponent {
 
+  public Products: Product[] = [];
+
   constructor( private http: HttpClient, private router: Router, private route: ActivatedRoute, private title: Title, public auth: Authentication ) {
     this.title.setTitle("Store | Mistox");
+
+    http.post<Product[]>("https://mistox.com/api/product/getall", null).subscribe(
+      response => {
+        this.Products = response;
+      }
+    )
+
   };
 
 }