Add image service

tools/src/app/app.component.html

@@ -0,0 +1,4 @@
+<app-header></app-header>
+<div class="main-content">
+  <router-outlet></router-outlet>
+</div>

tools/src/app/app.component.scss

@@ -0,0 +1,9 @@
+// .main-content {
+//   display: flex;
+//   flex-direction: row;
+// }
+
+// router-outlet {
+//   flex: 1;
+//   padding: 20px;
+// }

tools/src/app/app.component.spec.ts

@@ -0,0 +1,29 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [AppComponent],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have the 'tools' title`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('tools');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain('Hello, tools');
+  });
+});

tools/src/app/app.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { HeaderComponent } from './header/header.component';
+import { PrimeNGConfig } from 'primeng/api';
+import { Lara } from 'primeng/themes/lara';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet, HeaderComponent],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'tools';
+
+  constructor(private config: PrimeNGConfig) {
+    this.config.theme.set({ preset: Lara });
+  }
+}

tools/src/app/app.config.ts

@@ -0,0 +1,18 @@
+import { ApplicationConfig } from '@angular/core';
+import { provideRouter } from '@angular/router';
+
+import { routes } from './app.routes';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideNgIconsConfig } from '@ng-icons/core';
+import { provideHttpClient } from '@angular/common/http';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(routes), 
+    provideAnimationsAsync("animations"), 
+    provideNgIconsConfig({
+      size: '1.5em',
+    }),
+    provideHttpClient()
+  ]
+};

tools/src/app/app.routes.ts

@@ -0,0 +1,41 @@
+import { Routes } from '@angular/router';
+import { AsciiToTextComponent } from '../tools/ascii-to-text/ascii-to-text.component';
+import { GuidComponent } from '../tools/guid/guid.component';
+import { Base64ConverterComponent } from '../tools/base64-converter/base64-converter.component';
+import { JwtToJsonComponent } from '../tools/jwt-to-json/jwt-to-json.component';
+import { TextToCronComponent } from '../tools/text-to-cron/text-to-cron.component';
+import { DdsToPngComponent } from '../tools/dds-to-png/dds-to-png.component';
+
+export const routes: Routes = [
+  {
+    path: 'ascii-to-text',
+    pathMatch: 'full',
+    component: AsciiToTextComponent
+  },
+  {
+    path: 'guid',
+    pathMatch: 'full',
+    component: GuidComponent
+  },
+  {
+    path: 'base64-converter',
+    pathMatch: 'full',
+    component: Base64ConverterComponent
+  },
+  {
+    path: 'jwt-decoder',
+    pathMatch: 'full',
+    component: JwtToJsonComponent
+  },
+  {
+    path: 'text-to-cron',
+    pathMatch: 'full',
+    component: TextToCronComponent
+  },
+  {
+    path: 'dds-to-png',
+    pathMatch: 'full',
+    component: DdsToPngComponent
+  }
+];
+

tools/src/app/header/header.component.html

@@ -0,0 +1 @@
+<p-megamenu [model]="items" />

tools/src/app/header/header.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { HeaderComponent } from './header.component';
+
+describe('HeaderComponent', () => {
+  let component: HeaderComponent;
+  let fixture: ComponentFixture<HeaderComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ HeaderComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HeaderComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/app/header/header.component.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit } from '@angular/core';
+import { MegaMenuItem } from 'primeng/api';
+import { MegaMenuModule } from 'primeng/megamenu';
+import { ButtonModule } from 'primeng/button';
+import { CommonModule } from '@angular/common';
+import { AvatarModule } from 'primeng/avatar';
+
+@Component({
+    selector: 'app-header',
+    templateUrl: './header.component.html',
+    standalone: true,
+    imports: [MegaMenuModule, ButtonModule, CommonModule, AvatarModule]
+})
+export class HeaderComponent implements OnInit {
+  items: MegaMenuItem[] | undefined;
+
+  ngOnInit() {
+      this.items = [
+          {
+						label: 'Text Tools',
+						icon: 'pi pi-box',
+						items: [
+							[
+								{
+									items: [
+											{
+													label: 'Ascii to text',
+													routerLink: 'ascii-to-text',
+													routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Guid Generator',
+												routerLink: 'guid',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Base64 Converter',
+												routerLink: 'base64-converter',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Jwt decoder',
+												routerLink: 'jwt-decoder',
+												routerLinkActiveOptions: { exact: true }
+											},
+											{
+												label: 'Text to Cron Expression',
+												routerLink: 'text-to-cron',
+												routerLinkActiveOptions: { exact: true }
+											}
+									],
+									
+								}
+							]
+            ]
+          },
+					{
+						label: 'Conversion',
+						icon: 'pi pi-box',
+						items: [
+							[
+								{
+									items: [
+										{
+											label: 'DDS to PNG',
+											routerLink: 'dds-to-png',
+											routerLinkActiveOptions: { exact: true }
+										}
+									]
+								}
+							]
+						]
+					}
+      ]
+  }
+}

tools/src/app/shared/dual-textarea/dual-textarea.component.html

@@ -0,0 +1,21 @@
+<div class="card flex justify-center">
+    <p-panel [header]="title">
+      <textarea 
+        (keyup)="onTopChange($event)"
+        [disabled]="topDisabled"
+        pTextarea
+        [value]="topValue"
+        [placeholder]="topPlaceholder">
+      </textarea>
+      <div>
+        <i class="pi pi-arrow-right-arrow-left" style="font-size: 1rem"></i>
+      </div>
+      <textarea 
+        (keyup)="onBottomChange($event)"
+        [disabled]="bottomDisabled"
+        pTextarea
+        [value]="bottomValue"
+        [placeholder]="bottomPlaceholder">
+      </textarea>
+    </p-panel>
+</div>

tools/src/app/shared/dual-textarea/dual-textarea.component.scss

@@ -0,0 +1,42 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 98vw;
+    
+    .card {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+    }
+    
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+      
+      .conversion {
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            height: 70vh;
+  
+        p-floatlabel {
+            width: 30vw;
+        }
+      }
+    }
+
+    textarea {
+        width: 100%;
+        height: 175px;
+        padding: 12px 20px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        font-size: 16px;
+        resize: none;
+        background-color: var(--primary-contrast);
+        color: var(--text-color)
+    }
+}

tools/src/app/shared/dual-textarea/dual-textarea.component.ts

@@ -0,0 +1,42 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, Output, EventEmitter, input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { PanelModule } from 'primeng/panel';
+
+@Component({
+  selector: 'app-dual-textarea',
+  templateUrl: 'dual-textarea.component.html',
+  styleUrls: ['dual-textarea.component.scss'],
+  standalone: true,
+  imports: [
+    FloatLabelModule, 
+    InputTextareaModule, 
+    FormsModule, 
+    PanelModule, 
+    CommonModule
+  ]
+
+})
+export class DualTextareaComponent {
+  @Input() topDisabled: boolean = false;
+  @Input() bottomDisabled: boolean = false;
+  @Input() title: string = 'Dual Textarea';
+  @Input() topPlaceholder: string = 'Left Textarea';
+  @Input() bottomPlaceholder: string = 'Right Textarea';
+  @Input() topValue: string = '';
+  @Input() bottomValue: string = '';
+  @Output() topChange = new EventEmitter<string>();
+  @Output() bottomChange = new EventEmitter<string>();
+
+  onTopChange(event: Event): void {
+    const input = (event.target as HTMLTextAreaElement).value;
+    this.topChange.emit(input);
+  }
+
+  onBottomChange(event: Event): void {
+    const input = (event.target as HTMLTextAreaElement).value;
+    this.bottomChange.emit(input);
+  }
+}

tools/src/app/shared/upload/file-converter.component.html

@@ -0,0 +1,29 @@
+<div class="card flex justify-center">
+  <p-panel [header]="title">
+    <p-fileUpload 
+      name="file" 
+      url="./upload" 
+      (onSelect)="onFileSelect($event)" 
+      [auto]="true"
+      [accept]="accept"
+      [previewWidth]="isPreview ? '50px' : '0px'"
+    >
+    </p-fileUpload>
+    <p-table [value]="processedFiles" *ngIf="processedFiles.length != 0">
+      <ng-template pTemplate="header">
+        <tr>
+          <th>Name</th>
+          <th>Format</th>
+          <th>Download</th>
+        </tr>
+      </ng-template>
+      <ng-template pTemplate="body" let-file>
+        <tr>
+          <td>{{file.name}}</td>
+          <td>{{file.format}}</td>
+          <td><a [href]="file.link" download>{{file.name}}</a></td>
+        </tr>
+      </ng-template>
+    </p-table>
+  </p-panel>
+</div>

tools/src/app/shared/upload/file-converter.component.scss

@@ -0,0 +1,20 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 98vw;
+    
+  
+    .card {
+      display: flex;
+      flex-direction: column;
+      width: 1140px;
+    }
+  
+    .conversion {
+      display: flex;
+      justify-content: center;
+      margin-top: 1rem;
+    }
+  }

tools/src/app/shared/upload/file-converter.component.ts

@@ -0,0 +1,53 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { FileSelectEvent, FileUploadModule } from 'primeng/fileupload';
+import { ButtonModule } from 'primeng/button';
+import { PanelModule } from 'primeng/panel';
+import { TableModule } from 'primeng/table';
+
+interface ProcessedFile {
+  name: string;
+  link: string;
+  format: string;
+}
+
+@Component({
+  selector: 'app-file-converter',
+  templateUrl: 'file-converter.component.html',
+  styleUrls: ['file-converter.component.scss'],
+  standalone: true,
+  imports: [
+    CommonModule,
+    FormsModule,
+    FileUploadModule,
+    ButtonModule,
+    PanelModule,
+    TableModule
+  ]
+})
+export class FileConverterComponent {
+  _fileFormats: string[] = [];
+  accept: string = '';
+
+  @Output() fileSelected = new EventEmitter<File[]>();
+  @Input() isPreview: boolean = true;
+  @Input () title: string = 'File Converter';
+  @Input() processedFiles: ProcessedFile[] = [];
+  @Input()
+  set fileFormats(formats: string[]) {
+    this._fileFormats = formats;
+    this.accept = formats.join(',');
+  }
+
+  get fileFormats(): string[] {
+    return this._fileFormats;
+  }
+
+  selectedFile: File[] | null = null;
+
+  onFileSelect(event: FileSelectEvent): void {
+    this.selectedFile = event.files;
+    this.fileSelected.emit(this.selectedFile!);
+  }
+}

tools/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Tools</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>

tools/src/main.ts

@@ -0,0 +1,5 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));

tools/src/styles.scss

@@ -0,0 +1,2 @@
+/* You can add global styles to this file, and also import other style files */
+@import "primeicons/primeicons.css";

tools/src/tools/ascii-to-text/ascii-to-text.component.html

@@ -0,0 +1,9 @@
+<app-dual-textarea 
+  title="Ascii to text"
+  [topPlaceholder]="'Enter ascii here...'"
+  [bottomPlaceholder]="'Text will appear here...'"
+  [topValue]="convertedAscii" 
+  [bottomValue]="convertedText" 
+  (topChange)="onAsciiChange($event)" 
+  (bottomChange)="onTextChange($event)">
+</app-dual-textarea>

tools/src/tools/ascii-to-text/ascii-to-text.component.scss

@@ -0,0 +1,34 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 98vw;
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        width: 1140;
+        
+        .conversion {
+            justify-content: center;
+            display: flex;
+            align-items: center;
+            height: 70vh;
+    
+            p-floatlabel {
+                width: 30vw;
+            }
+    
+            textarea {
+                width: 100%;
+                height: 50vh;
+                padding: 12px 20px;
+                box-sizing: border-box;
+                border-radius: 4px;
+                font-size: 16px;
+                resize: none;
+            }
+        }
+    }
+}

tools/src/tools/ascii-to-text/ascii-to-text.component.ts

@@ -0,0 +1,39 @@
+import { Component } from '@angular/core';
+import { DualTextareaComponent } from '../../app/shared/dual-textarea/dual-textarea.component';
+
+@Component({
+  selector: 'app-ascii-to-text',
+  templateUrl: './ascii-to-text.component.html',
+  styleUrls: ['./ascii-to-text.component.scss'],
+  standalone: true,
+  imports: [DualTextareaComponent]
+})
+export class AsciiToTextComponent {
+  convertedText: string = '';
+  convertedAscii: string = '';
+
+  onAsciiChange(input: string): void {
+    this.convertedText = this.convertAsciiToText(input);
+  }
+
+  convertAsciiToText(ascii: string): string {
+    return ascii
+      .split(' ')
+      .map(char => String.fromCharCode(parseInt(char, 10)))
+      .join('');
+  }
+
+  onTextChange(input: string): void {
+    this.convertedAscii = this.convertTextToAscii(input);
+  }
+
+  convertTextToAscii(text: string): string {
+    return text
+      .split('')
+      .map(char => {
+        const asciiValue = char.charCodeAt(0).toString();
+        return asciiValue.padStart(3, '0');
+      })
+      .join(' ');
+  }
+}

tools/src/tools/base64-converter/base64-converter.component.html

@@ -0,0 +1,9 @@
+<app-dual-textarea 
+  title="base64 to text"
+  topPlaceholder="Enter base64 here..."
+  bottomPlaceholder="Text will appear here..."
+  [topValue]="convertedBase64" 
+  [bottomValue]="convertedText" 
+  (topChange)="base64Decoded($event)" 
+  (bottomChange)="base64Encoded($event)">
+</app-dual-textarea>

tools/src/tools/base64-converter/base64-converter.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { Base64ConverterComponent } from './base64-converter.component';
+
+describe('Base64ConverterComponent', () => {
+  let component: Base64ConverterComponent;
+  let fixture: ComponentFixture<Base64ConverterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ Base64ConverterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Base64ConverterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/base64-converter/base64-converter.component.ts

@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+import { DualTextareaComponent } from '../../app/shared/dual-textarea/dual-textarea.component';
+
+@Component({
+  selector: 'app-base64-converter',
+  templateUrl: './base64-converter.component.html',
+  styleUrls: ['./base64-converter.component.scss'],
+  standalone: true,
+  imports: [DualTextareaComponent]
+})
+export class Base64ConverterComponent {
+  convertedBase64: string = '';
+  convertedText: string = '';
+
+  base64Encoded(event: string): void {
+    this.convertedBase64 = btoa(event);
+    this.convertedText = event;
+  }
+
+  base64Decoded(event: string): void {
+    this.convertedText = atob(event);
+    this.convertedBase64 = event;
+  }
+}

tools/src/tools/dds-to-png/dds-to-png.component.html

@@ -0,0 +1,7 @@
+<app-file-converter 
+  title="DDS to PNG Converter"
+  [isPreview]="false"
+  [processedFiles]="processedFiles" 
+  [fileFormats]="fileFormats"
+  (fileSelected)="onFileSelected($event)">
+</app-file-converter>

tools/src/tools/dds-to-png/dds-to-png.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { DdsToPngComponent } from './dds-to-png.component';
+
+describe('DdsToPngComponent', () => {
+  let component: DdsToPngComponent;
+  let fixture: ComponentFixture<DdsToPngComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DdsToPngComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DdsToPngComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/dds-to-png/dds-to-png.component.ts

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { FileConverterComponent } from '../../app/shared/upload/file-converter.component';
+import { DdsToPngService } from './dds-to-png.service';
+
+interface ProcessedFile {
+  name: string;
+  link: string;
+  format: string;
+}
+
+@Component({
+  selector: 'app-dds-to-png',
+  templateUrl: './dds-to-png.component.html',
+  styleUrls: ['./dds-to-png.component.scss'],
+  standalone: true,
+  imports: [FileConverterComponent]
+})
+export class DdsToPngComponent {
+
+  processedFiles: ProcessedFile[] = [];
+  fileFormats: string[] = [".dds"];
+
+  constructor(private ddsToPngService: DdsToPngService) { }
+
+  onFileSelected(input: File[]): void {
+    if (input.length > 0) {
+      const file = input[0];
+      const reader = new FileReader();
+      reader.onload = async () => {
+        try {
+          const ddsArrayBuffer = reader.result as ArrayBuffer;
+          const pngDataUrl = await this.ddsToPngService.ddsToPng(ddsArrayBuffer);
+
+          const blob = await (await fetch(pngDataUrl)).blob();
+          const blobUrl = URL.createObjectURL(blob);
+
+          const processedFile: ProcessedFile = {
+            name: file.name.replace('.dds', '.png'),
+            link: blobUrl,
+            format: 'png'
+          };
+          this.processedFiles.push(processedFile);
+
+          console.log('Processed Files:', this.processedFiles);
+        } catch (error) {
+          console.error('Error:', error);
+        }
+      };
+      reader.readAsArrayBuffer(file);
+    }
+  }
+}

tools/src/tools/dds-to-png/dds-to-png.service.ts

@@ -0,0 +1,222 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DdsToPngService {
+  constructor() {}
+
+  parseHeaders(arrayBuffer: ArrayBuffer) {
+    const header = new DataView(arrayBuffer, 0, 128);
+    const height = header.getUint32(12, true);
+    const width = header.getUint32(16, true);
+    const fourCC = header.getUint32(84, true);
+    return { width, height, fourCC };
+  }
+
+  decodeDXT1(src: Uint8Array, width: number, height: number): Uint8Array {
+    const rgba = new Uint8Array(width * height * 4);
+    let srcIndex = 0;
+
+    for (let y = 0; y < height; y += 4) {
+      for (let x = 0; x < width; x += 4) {
+        const c0 = src[srcIndex] | (src[srcIndex + 1] << 8);
+        const c1 = src[srcIndex + 2] | (src[srcIndex + 3] << 8);
+        const code = src[srcIndex + 4] | (src[srcIndex + 5] << 8) | (src[srcIndex + 6] << 16) | (src[srcIndex + 7] << 24);
+        srcIndex += 8;
+
+        const colors = new Uint8Array(16);
+        this.decodeColors(c0, c1, colors);
+
+        for (let blockY = 0; blockY < 4; blockY++) {
+          for (let blockX = 0; blockX < 4; blockX++) {
+            const pixelIndex = ((code >> (2 * (blockY * 4 + blockX))) & 0x03) * 4;
+            const dstPixelIndex = ((y + blockY) * width + (x + blockX)) * 4;
+            rgba[dstPixelIndex] = colors[pixelIndex];
+            rgba[dstPixelIndex + 1] = colors[pixelIndex + 1];
+            rgba[dstPixelIndex + 2] = colors[pixelIndex + 2];
+            rgba[dstPixelIndex + 3] = colors[pixelIndex + 3];
+          }
+        }
+      }
+    }
+
+    return rgba;
+  }
+
+  decodeDXT3(src: Uint8Array, width: number, height: number): Uint8Array {
+    const rgba = new Uint8Array(width * height * 4);
+    let srcIndex = 0;
+
+    for (let y = 0; y < height; y += 4) {
+      for (let x = 0; x < width; x += 4) {
+        const alpha = new Uint8Array(16);
+        for (let i = 0; i < 8; i++) {
+          const byte = src[srcIndex++];
+          alpha[i * 2] = (byte & 0x0F) * 17;
+          alpha[i * 2 + 1] = (byte >> 4) * 17;
+        }
+
+        const c0 = src[srcIndex] | (src[srcIndex + 1] << 8);
+        const c1 = src[srcIndex + 2] | (src[srcIndex + 3] << 8);
+        const code = src[srcIndex + 4] | (src[srcIndex + 5] << 8) | (src[srcIndex + 6] << 16) | (src[srcIndex + 7] << 24);
+        srcIndex += 8;
+
+        const colors = new Uint8Array(16);
+        this.decodeColors(c0, c1, colors);
+
+        for (let blockY = 0; blockY < 4; blockY++) {
+          for (let blockX = 0; blockX < 4; blockX++) {
+            const pixelIndex = ((code >> (2 * (blockY * 4 + blockX))) & 0x03) * 4;
+            const dstPixelIndex = ((y + blockY) * width + (x + blockX)) * 4;
+            rgba[dstPixelIndex] = colors[pixelIndex];
+            rgba[dstPixelIndex + 1] = colors[pixelIndex + 1];
+            rgba[dstPixelIndex + 2] = colors[pixelIndex + 2];
+            rgba[dstPixelIndex + 3] = alpha[blockY * 4 + blockX];
+          }
+        }
+      }
+    }
+
+    return rgba;
+  }
+
+  decodeDXT5(src: Uint8Array, width: number, height: number): Uint8Array {
+    const rgba = new Uint8Array(width * height * 4);
+    let srcIndex = 0;
+
+    for (let y = 0; y < height; y += 4) {
+      for (let x = 0; x < width; x += 4) {
+        const alpha0 = src[srcIndex++];
+        const alpha1 = src[srcIndex++];
+        const alphaCode = src[srcIndex] | (src[srcIndex + 1] << 8) | (src[srcIndex + 2] << 16) | (src[srcIndex + 3] << 24) | (src[srcIndex + 4] << 32) | (src[srcIndex + 5] << 40);
+        srcIndex += 6;
+
+        const alphas = new Uint8Array(8);
+        alphas[0] = alpha0;
+        alphas[1] = alpha1;
+        if (alpha0 > alpha1) {
+          for (let i = 1; i < 7; i++) {
+            alphas[i + 1] = ((7 - i) * alpha0 + i * alpha1) / 7;
+          }
+        } else {
+          for (let i = 1; i < 5; i++) {
+            alphas[i + 1] = ((5 - i) * alpha0 + i * alpha1) / 5;
+          }
+          alphas[6] = 0;
+          alphas[7] = 255;
+        }
+
+        const c0 = src[srcIndex] | (src[srcIndex + 1] << 8);
+        const c1 = src[srcIndex + 2] | (src[srcIndex + 3] << 8);
+        const code = src[srcIndex + 4] | (src[srcIndex + 5] << 8) | (src[srcIndex + 6] << 16) | (src[srcIndex + 7] << 24);
+        srcIndex += 8;
+
+        const colors = new Uint8Array(16);
+        this.decodeColors(c0, c1, colors);
+
+        for (let blockY = 0; blockY < 4; blockY++) {
+          for (let blockX = 0; blockX < 4; blockX++) {
+            const pixelIndex = ((code >> (2 * (blockY * 4 + blockX))) & 0x03) * 4;
+            const alphaIndex = (alphaCode >> (3 * (blockY * 4 + blockX))) & 0x07;
+            const dstPixelIndex = ((y + blockY) * width + (x + blockX)) * 4;
+            rgba[dstPixelIndex] = colors[pixelIndex];
+            rgba[dstPixelIndex + 1] = colors[pixelIndex + 1];
+            rgba[dstPixelIndex + 2] = colors[pixelIndex + 2];
+            rgba[dstPixelIndex + 3] = alphas[alphaIndex];
+          }
+        }
+      }
+    }
+
+    return rgba;
+  }
+
+  decodeColors(c0: number, c1: number, colors: Uint8Array) {
+    const r0 = (c0 >> 11) & 0x1F;
+    const g0 = (c0 >> 5) & 0x3F;
+    const b0 = c0 & 0x1F;
+    const r1 = (c1 >> 11) & 0x1F;
+    const g1 = (c1 >> 5) & 0x3F;
+    const b1 = c1 & 0x1F;
+
+    colors[0] = (r0 << 3) | (r0 >> 2);
+    colors[1] = (g0 << 2) | (g0 >> 4);
+    colors[2] = (b0 << 3) | (b0 >> 2);
+    colors[3] = 255;
+
+    colors[4] = (r1 << 3) | (r1 >> 2);
+    colors[5] = (g1 << 2) | (g1 >> 4);
+    colors[6] = (b1 << 3) | (b1 >> 2);
+    colors[7] = 255;
+
+    if (c0 > c1) {
+      for (let i = 0; i < 3; i++) {
+        colors[8 + i] = (2 * colors[i] + colors[4 + i]) / 3;
+        colors[12 + i] = (colors[i] + 2 * colors[4 + i]) / 3;
+      }
+      colors[11] = colors[15] = 255;
+    } else {
+      for (let i = 0; i < 3; i++) {
+        colors[8 + i] = (colors[i] + colors[4 + i]) / 2;
+        colors[12 + i] = 0;
+      }
+      colors[11] = 255;
+      colors[15] = 0;
+    }
+  }
+
+  ddsToPng(arrayBuffer: ArrayBuffer): Promise<string> {
+    return new Promise((resolve, reject) => {
+      try {
+        const { width, height, fourCC } = this.parseHeaders(arrayBuffer);
+
+        let rgbaData: Uint8Array;
+        const src = new Uint8Array(arrayBuffer, 128);
+
+        switch (fourCC) {
+          case 0x31545844: // 'DXT1' in ASCII
+            rgbaData = this.decodeDXT1(src, width, height);
+            break;
+          case 0x33545844: // 'DXT3' in ASCII
+            rgbaData = this.decodeDXT3(src, width, height);
+            break;
+          case 0x35545844: // 'DXT5' in ASCII
+            rgbaData = this.decodeDXT5(src, width, height);
+            break;
+          default:
+            throw new Error('Unsupported DDS format');
+        }
+
+        const canvas = document.createElement('canvas');
+        canvas.width = width;
+        canvas.height = height;
+        const context = canvas.getContext('2d');
+
+        if (!context) {
+          reject('Failed to get canvas context');
+          return;
+        }
+
+        const imageData = context.createImageData(width, height);
+        imageData.data.set(rgbaData);
+        context.putImageData(imageData, 0, 0);
+
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const reader = new FileReader();
+            reader.onload = () => {
+              resolve(reader.result as string);
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(blob);
+          } else {
+            reject('Failed to create blob');
+          }
+        }, 'image/png');
+      } catch (error) {
+        reject(`Error converting DDS to PNG: ${error}`);
+      }
+    });
+  }
+}

tools/src/tools/guid/guid.component.html

@@ -0,0 +1,44 @@
+<p-panel header="Guid Generator">
+  <div>
+    <div *ngFor="let setting of settings" class="guid-row">
+		<p-radiobutton [inputId]="setting.code" name="category" [value]="setting" [(ngModel)]="selectedGuid" />
+		<label [for]="setting.code">
+			{{ setting.name }}
+		</label>
+    </div>
+  </div>
+
+  <ng-template pTemplate="footer">
+    <div>
+      <div class="icon-wrapper">
+        <p-button 
+					pTooltip="Regenerate new Guid." 
+					icon="pi pi-refresh" 
+					[rounded]="true" 
+					[text]="true" 
+					(onClick)="generateGuid(true)" 
+				/>
+        <p-button 
+					pTooltip="Copy selected Guid to clipboard." 
+					icon="pi pi-clipboard" 
+					severity="secondary" 
+					[rounded]="true" 
+					[text]="true"
+          (onClick)="onCopyToClipboard()" 
+				/>
+        <p-button 
+					pTooltip="Change casing." 
+					icon="pi" 
+					severity="secondary" 
+					[rounded]="true" 
+					[text]="true"
+					(onClick)="onCasingChange()" 
+				>
+          <ng-template pTemplate="uppercase">
+            <ng-icon name="cssFormatUppercase"></ng-icon>
+          </ng-template>
+        </p-button>
+      </div>
+    </div>
+  </ng-template>
+</p-panel>

tools/src/tools/guid/guid.component.scss

@@ -0,0 +1,32 @@
+:host {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    width: 98vw;
+
+    p-panel {
+        display: flex;
+        flex-direction: column;
+        width: 1140px;
+    }
+
+    .guid-row {
+        padding: 8px 0px;
+        border-bottom: solid 1px var(--p-button-text-secondary-color);
+    }
+    
+    p-floatlabel {
+        width: 30vw;
+    }
+
+    ng-icon {
+        color: var(--p-button-text-secondary-color)
+    }
+
+    .icon-wrapper{
+        display: flex;
+        align-items: center;
+        margin: 10px 0px;
+    }
+}

tools/src/tools/guid/guid.component.ts

@@ -0,0 +1,100 @@
+import { Component, OnInit } from '@angular/core';
+import { InputTextareaModule } from 'primeng/inputtextarea';
+import { FormsModule } from '@angular/forms';
+import { FloatLabelModule } from 'primeng/floatlabel';
+import { RadioButtonModule,  } from 'primeng/radiobutton';
+import { CommonModule } from '@angular/common';
+import { ToggleButtonModule } from 'primeng/togglebutton';
+import { Clipboard } from '@angular/cdk/clipboard';
+import { ButtonModule } from 'primeng/button';
+import { PanelModule } from 'primeng/panel';
+import { NgIconComponent, provideIcons } from '@ng-icons/core';
+import { cssFormatUppercase } from '@ng-icons/css.gg';
+import { DividerModule } from 'primeng/divider';
+import { TooltipModule } from 'primeng/tooltip';
+
+interface setting {
+  name: string;
+  code: string;
+}
+
+@Component({
+  selector: 'app-guid',
+  templateUrl: './guid.component.html',
+  styleUrls: ['./guid.component.scss'],
+  standalone: true,
+  viewProviders: [provideIcons({cssFormatUppercase})],
+  imports: [
+    NgIconComponent,
+    PanelModule,
+    DividerModule,
+    FloatLabelModule, 
+    InputTextareaModule, 
+    FormsModule, 
+    RadioButtonModule, 
+    CommonModule, 
+    ToggleButtonModule, 
+    ButtonModule,
+    TooltipModule
+  ]
+})
+export class GuidComponent implements OnInit {
+  settings: setting[] | undefined;
+  selectedGuid: setting | undefined;
+  guid: string = '';
+  isUppercase: boolean = false;
+
+  constructor(private clipboard: Clipboard) { }
+
+  ngOnInit() {
+    this.generateGuid(false);
+    this.setGuids();
+  }
+
+  onCopyToClipboard(): void {
+    this.clipboard.copy(this.selectedGuid?.name!);
+  }
+
+  onCasingChange(): void {
+    this.isUppercase = !this.isUppercase;
+
+    if (this.isUppercase) {
+      this.guid = this.guid.toUpperCase();
+    } else {
+      this.guid = this.guid.toLowerCase();
+    }
+
+    this.setGuids();
+  }
+
+  generateGuid(input: boolean) {
+    this.guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(character) {
+        const randomValue = Math.random() * 16 | 0;
+        const value = character === 'x' ? randomValue : (randomValue & 0x3 | 0x8);
+        return value.toString(16);
+    });
+
+    if (this.isUppercase) {
+      this.guid = this.guid.toUpperCase();
+    } else {
+      this.guid = this.guid.toLowerCase();
+    }
+
+    if (input)
+      this.setGuids();
+  }
+
+  setGuids() {
+    this.settings = [
+      { name: this.guid, code: '00' },
+      { name: `"${this.guid}"`, code: '01' },
+      { name: `{${this.guid}}`, code: '02' },
+      { name: `new Guid("${this.guid}")`, code: '03' },
+      { name: `[Guid("${this.guid}")]`, code: '04' },
+    ];
+
+    if (this.settings!.length > 0) {
+      this.selectedGuid = this.settings![0];
+    }
+  }
+}

tools/src/tools/jwt-to-json/jwt-to-json.component.html

@@ -0,0 +1,8 @@
+<app-dual-textarea 
+  title="Decode JWT Token"
+  topPlaceholder="Enter JWT Token here..."
+  bottomPlaceholder="Json will appear here..."
+  [bottomDisabled]="true"
+  [bottomValue]="readableToken" 
+  (topChange)="decodeJwtToken($event)">
+</app-dual-textarea>

tools/src/tools/jwt-to-json/jwt-to-json.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { JwtToJsonComponent } from './jwt-to-json.component';
+
+describe('JwtToJsonComponent', () => {
+  let component: JwtToJsonComponent;
+  let fixture: ComponentFixture<JwtToJsonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ JwtToJsonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(JwtToJsonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/jwt-to-json/jwt-to-json.component.ts

@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import { DualTextareaComponent } from '../../app/shared/dual-textarea/dual-textarea.component';
+
+@Component({
+  selector: 'app-jwt-to-json',
+  templateUrl: './jwt-to-json.component.html',
+  styleUrls: ['./jwt-to-json.component.scss'],
+  standalone: true,
+  imports: [DualTextareaComponent]
+})
+export class JwtToJsonComponent {
+  readableToken: string = '';
+
+  decodeBase64Url(base64Url: string): string {
+    const base64 = base64Url
+      .replace(/-/g, '+')
+      .replace(/_/g, '/');
+      
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map(char => '%' + ('00' + char.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    );
+
+    return jsonPayload;
+  }
+
+  decodeJwtToken(token: string): void {
+      const parts = token.split('.');
+      
+      if (parts.length !== 3) {
+        throw new Error('Invalid JWT Token');
+      }
+
+      const payload = this.decodeBase64Url(parts[1]);
+    try {
+      this.readableToken = JSON.stringify(JSON.parse(payload), null, 2);
+    } catch (error) {
+      this.readableToken = 'Invalid JWT Token';
+    }
+  }
+}

tools/src/tools/text-to-cron/text-to-cron.component.html

@@ -0,0 +1,10 @@
+<app-dual-textarea 
+  title="Text to Cron Expression"
+  topPlaceholder="every 5 minutes"
+  bottomPlaceholder="*/5 * * * *"
+  [bottomDisabled]="true"
+  [bottomValue]="cronExpression" 
+  (topChange)="getCronExpression($event)">
+</app-dual-textarea>
+
+<p>Still in beta, don't rely on this tool!</p>

tools/src/tools/text-to-cron/text-to-cron.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { TextToCronComponent } from './text-to-cron.component';
+
+describe('TextToCronComponent', () => {
+  let component: TextToCronComponent;
+  let fixture: ComponentFixture<TextToCronComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TextToCronComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextToCronComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

tools/src/tools/text-to-cron/text-to-cron.component.ts

@@ -0,0 +1,50 @@
+import { Component } from '@angular/core';
+import { DualTextareaComponent } from '../../app/shared/dual-textarea/dual-textarea.component';
+
+@Component({
+  selector: 'app-text-to-cron',
+  templateUrl: './text-to-cron.component.html',
+  styleUrls: ['./text-to-cron.component.scss'],
+  standalone: true,
+  imports: [DualTextareaComponent]
+})
+export class TextToCronComponent {
+
+  cronExpression: string = '';
+
+  getCronExpression(description: string): string {
+    let minute = "*";
+    let hour = "*";
+    let dayOfMonth = "*";
+    let month = "*";
+    let dayOfWeek = "*";
+  
+    description = description.toLowerCase().trim();
+  
+    const parts = description.split(" ");
+    parts.forEach((part, index) => {
+      if (part === "minute" || part === "minutes") {
+        if (index > 0 && !isNaN(parseInt(parts[index - 1]))) {
+          minute = `*/${parts[index - 1]}`;
+        }
+      } else if (part === "hour" || part === "hours") {
+        if (index > 0 && !isNaN(parseInt(parts[index - 1]))) {
+          hour = `*/${parts[index - 1]}`;
+        }
+      } else if (part === "day" && parts[index + 1] === "of") {
+        if (parts[index + 2] === "month" && index > 0 && !isNaN(parseInt(parts[index - 1]))) {
+          dayOfMonth = `${parts[index - 1]}`;
+        } else if (parts[index + 2] === "week" && index > 0 && !isNaN(parseInt(parts[index - 1]))) {
+          dayOfWeek = `${parts[index - 1]}`;
+        }
+      } else if (part === "month" || part === "months") {
+        if (index > 0 && !isNaN(parseInt(parts[index - 1]))) {
+          month = `*/${parts[index - 1]}`;
+        }
+      }
+    });
+  
+    this.cronExpression = `${minute} ${hour} ${dayOfMonth} ${month} ${dayOfWeek}`;
+    return `${minute} ${hour} ${dayOfMonth} ${month} ${dayOfWeek}`;
+  }
+}