Merge pull request #223 from theImmortalCoders/dev

Release 2.1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rag-2-frontend",
-  "version": "0.0.0",
+  "version": "2.1",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",

src/app/game/components/console/console-fieldset/console-fieldset.component.ts

@@ -7,18 +7,58 @@ import { TExchangeData } from '@gameModels/exchange-data.type';
   selector: 'app-console-fieldset',
   standalone: true,
   imports: [KeyValuePipe, ExchangeDataPipe],
+  styles: [
+    `
+    .console-fieldset {
+      margin-top: 0px;
+      margin-bottom: 0px;
+      margin-left: 2rem;
+      margin-right: 0.5rem;
+      padding-top: 0.25rem;
+      padding-bottom: 0.25rem;
+      padding-left: 0.5rem;
+      border-left: 1px solid #FF6000;
+    }
+    .console-key {
+      font-weight: 700;
+      font-size: 1rem;
+      line-height: 1.5rem;
+      font-family: monospace;
+      position: relative;
+      top: -0.5rem;
+    }
+    .console-value {
+      font-size: 0.875rem;
+      line-height: 1.25rem;
+      color: #FFE6C7;
+      font-family: monospace;
+      position: relative;
+      top: -0.5rem;
+    }
+    @media (min-width: 1280px) {
+      .console-value {
+        font-size: 1rem;
+        line-height: 1.5rem;
+      }
+      .console-key{
+        font-size: 1.125rem;
+        line-height: 1.75rem;
+      }
+    }
+    `
+  ],
   template: `
     @for (data of logData | keyvalue; track data.key) {
-      <div class="my-0 ml-8 mr-2 pl-2 py-1 border-l-[1px] border-mainOrange">
-        <span class="font-bold text-base xl:text-lg font-mono relative -top-2">
+      <div class="console-fieldset">
+        <span class="console-key">
           {{ data.key }}:
         </span>
 
         @if (isTLogData(data.value)) {
           <app-console-fieldset
             [logData]="data.value | exchange_data"></app-console-fieldset>
         } @else {
-          <span class="text-sm xl:text-base text-mainCreme relative -top-2">
+          <span class="console-value">
             {{ data.value }}
           </span>
         }

src/app/game/components/console/console.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core';
+import { ApplicationRef, Component, ComponentFactoryResolver, ComponentRef, Injector, Input, OnDestroy } from '@angular/core';
 import { TExchangeData } from '@gameModels/exchange-data.type';
 import { ExchangeDataPipe } from '@utils/pipes/exchange-data.pipe';
 import { ConsoleFieldsetComponent } from './console-fieldset/console-fieldset.component';
@@ -9,36 +9,78 @@ import { ConsoleFieldsetComponent } from './console-fieldset/console-fieldset.co
   imports: [ExchangeDataPipe, ConsoleFieldsetComponent],
   template: `
     <div class="absolute bottom-0 left-0 w-full z-50">
-      <button [className]="consoleClasses['button']" (click)="toggleConsole()">
+      <button class="w-full bg-lightGray tracking-[0.15em] sticky z-50 top-0 transition-all ease-in-out duration-700 border-b-2 border-mainOrange hover:border-green-500 text-center py-2 uppercase font-bold font-mono text-xl" 
+      (click)="toggleConsole()">
         console
       </button>
       <div
-        [className]="
-          consoleClasses['consoleContainer'] +
-          (isConsoleVisible ? ' h-72 py-4' : ' h-0')
-        ">
+        class="relative w-full max-h-96 transition-all ease-in-out duration-700 bg-lightGray overflow-y-scroll z-50 px-5 {{isConsoleVisible ? ' h-72 py-4' : ' h-0'}}">
+        <button class="absolute right-0 top-4 bg-mainOrange px-4 py-1 rounded-l-lg flex flex-row space-x-2 justify-end items-center font-mono text-black border-y-2 border-l-2 border-mainOrange hover:border-black transition-all ease-in-out duration-300"
+          (click)="externalConsoleMode()">
+          <span class="uppercase">External console mode</span>
+          <i data-feather="external-link" class="size-5"></i>
+        </button>
         <app-console-fieldset
           [logData]="logData | exchange_data"
-          [className]="
-            consoleClasses['consoleFieldset'] +
-            (isConsoleVisible ? ' p-10' : ' p-0')
-          " />
+          class="items-start gap-y-6 transition-all ease-in-out duration-700 {{isConsoleVisible ? ' p-10' : ' p-0'}}" />
       </div>
     </div>
   `,
 })
-export class ConsoleComponent {
+export class ConsoleComponent implements OnDestroy{
   @Input({ required: true }) public logData: TExchangeData = {};
   public isConsoleVisible = false;
+
+  private _newWindow: Window | null = null;
+  private _componentRef: ComponentRef<ConsoleFieldsetComponent> | null = null;
+  public constructor(
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    private _injector: Injector,
+    private _appRef: ApplicationRef,
+  ) {}
 
-  public consoleClasses: TExchangeData = {
-    button: `w-full bg-lightGray tracking-[0.15em] sticky z-50 top-0 transition-all ease-in-out duration-700 border-b-2
-      border-mainOrange hover:border-green-500 text-center py-2 uppercase font-bold font-mono text-xl cursor-pointer`,
-    consoleContainer: `w-full max-h-96 transition-all ease-in-out duration-700 bg-lightGray overflow-y-scroll z-50 px-5`,
-    consoleFieldset: `items-start gap-y-6 transition-all ease-in-out duration-700`,
-  };
+  public ngOnDestroy(): void {
+    this._newWindow?.close()
+  }
 
   public toggleConsole(): void {
     this.isConsoleVisible = !this.isConsoleVisible;
   }
+
+  public externalConsoleMode(): void {
+    this.isConsoleVisible = false;
+    if (this._newWindow && !this._newWindow.closed) {
+      this._newWindow.focus();
+      return;
+    }
+
+    this._newWindow = window.open('', '_blank', 'width=1100,height=600');
+    if (this._newWindow) {
+      this._newWindow.document.body.innerHTML = `
+        <h1 style="color:#FFE6C7; font-family:monospace;padding-left:2rem;">RAG-2 - External Console Mode</h1>
+        <div id="consoleFieldsetRoot"></div>
+      `;
+      this._newWindow.document.title = 'RAG-2 - External Console Mode';
+
+      const consoleStyles = document.querySelectorAll('style');
+      consoleStyles.forEach((style) => {
+        this._newWindow?.document.head.appendChild(style.cloneNode(true));
+      });
+
+      if (this._newWindow?.document.body) {
+        this._newWindow.document.body.style.backgroundColor = '#5D5D5D';
+        this._newWindow.document.body.style.paddingTop = '1rem';
+      }
+
+      const componentFactory = this._componentFactoryResolver.resolveComponentFactory(ConsoleFieldsetComponent);
+      this._componentRef = componentFactory.create(this._injector);
+
+      this._componentRef.instance.logData = this.logData;
+
+      this._appRef.attachView(this._componentRef.hostView);
+
+      const hostElement = this._componentRef.location.nativeElement;
+      this._newWindow.document.getElementById('consoleFieldsetRoot')?.appendChild(hostElement);
+    }
+  }
 }

src/app/shared/components/error-pages/error404/error404.page.component.ts

@@ -13,7 +13,7 @@ import { Rag2LogoComponent } from '../../common/rag-2-logo.component';
       </h1>
       <div
         class="flex flex-col md:flex-row w-[97%] 2xs:w-11/12 2xl:w-2/3 items-center justify-center border-2 border-mainOrange rounded-lg px-6 py-8 text-mainCreme mb-16">
-        <app-rag-2-logo class="h-80 sm:h-96 w-80 sm:w-96 relative" />
+        <app-rag-2-logo class="h-80 sm:h-96 w-80 sm:w-96 relative" [isPriority]="true"/>
         <div
           class="text-center py-12 md:py-0 pr-6 md:pr-2 pl-6 md:pl-12 lg:pl-16 xl:md-24">
           <h2 class="text-3xl sm:text-4xl pb-4 font-bold">Unfortunately...</h2>

src/app/shared/components/error-pages/error500/error500.page.component.ts

@@ -13,7 +13,7 @@ import { Rag2LogoComponent } from '../../common/rag-2-logo.component';
       </h1>
       <div
         class="flex flex-col md:flex-row w-[97%] 2xs:w-11/12 2xl:w-2/3 items-center justify-center border-2 border-mainOrange rounded-lg px-6 py-8 text-mainCreme mb-16">
-        <app-rag-2-logo class="h-80 sm:h-96 w-80 sm:w-96 relative" />
+        <app-rag-2-logo class="h-80 sm:h-96 w-80 sm:w-96 relative" [isPriority]="true"/>
         <div
           class="text-center py-12 md:py-0 pr-6 md:pr-2 pl-6 md:pl-12 lg:pl-16 xl:md-24">
           <h2 class="text-3xl sm:text-4xl pb-4 font-bold">Unfortunately...</h2>

src/utils/helpers/errorHandler.ts

@@ -1,11 +1,17 @@
 import { HttpErrorResponse } from '@angular/common/http';
+import { environment } from '@env/environment';
 
 export function errorHandler(error: HttpErrorResponse): string {
   let errorMessage = 'An error has occured';
   if (error.status === 401) {
     errorMessage = 'Unauthorized, you have to be logged in';
   } else if (error.status === 403) {
     errorMessage = 'Forbidden, you have no permission to do this operation';
+  } else if(error.status === 500 || error.statusText === "Unknown Error") {
+    if (window.location.pathname !== '/error500' && environment.production) {
+      window.location.href = '/error500';
+    }
+    errorMessage = error.message;
   } else {
     errorMessage = JSON.parse(error.error)['description'];
   }