baport

package.json

@@ -36,6 +36,7 @@
     "@angular/ssr": "^17.3.7",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
     "@popperjs/core": "^2.11.8",
+    "ace-builds": "^1.33.2",
     "bootstrap": "^5.2.0",
     "express": "^4.18.2",
     "fs": "^0.0.1-security",

src/app/app-routing.module.ts

@@ -135,6 +135,15 @@ const routes: Routes = [
       ogUrl: 'https://bombsquad-community.web.app/free-server',
     },
   },
+  {
+    path: 'baport',
+    loadChildren: () => import("./pages/baport/baport.component").then((m) => m.BaPortModule),
+    data: {
+      title: 'BAPORT | Update plugin to API 8',
+      description: 'Update plugins to latest version of game.',
+      ogUrl: 'https://bombsquad-community.web.app/baport'
+    }
+  },
   { path: '**', redirectTo: 'home' },
 ];
 

src/app/pages/baport/baport.component.html

@@ -0,0 +1,43 @@
+<div class="main background">
+  <div class="content" *ngIf="!appLaunched">
+    <div class="heading">
+      Introducing BAPORT: Your BS Plugin Update Wizard
+    </div>
+    <div class="description">
+      <p>Meet <a href="https://github.com/bombsquad-community/baport">BAPORT</a> , your ultimate solution for
+        effortlessly updating your Bobmsquad game plugins to the latest API
+        version,
+        currently at API 8. BAPORT streamlines the tedious process of converting code from API 6 or 7 to the latest
+        version,
+        ensuring compatibility and efficiency in your game scripts.</p>
+      Features:
+      <ol>
+        <li>CLI Convenience: BAPORT offers a command-line interface (CLI) for seamless batch updating of plugins.
+          Whether you have a
+          handful or a plethora of plugins, BAPORT simplifies the update process, saving you time and effort.</li>
+        <li>Discord Integration: Harness the power of BAPORT directly within your Bombsquad Discord community. Utilize
+          BAPORT
+          alongside your Discord bot to swiftly update snippets of code with ease. No need to switch between platforms;
+          BAPORT
+          brings the update capabilities directly to your Discord chat.</li>
+        <li>
+          Web Browser Deployment: BAPORT transcends platforms with its browser compatibility. Simply drag and drop your
+          files into
+          the browser interface, and BAPORT will swiftly update them to the latest code version. Whether you're on the
+          go or
+          prefer a web-based workflow, BAPORT adapts to your needs.
+        </li>
+      </ol>
+    </div>
+    <div class="baport-try-btn">
+      <button mat-flat-button color="primary" (click)="launch()" matRipple [matRippleCentered]="false"
+        [matRippleUnbounded]="true" [disableRipple]="false">Update plugin now</button>
+    </div>
+  </div>
+  <div class="baport-app" *ngIf="appLaunched" dragDropFile (fileDropped)="onFileDropped($event)">
+
+    <div class="tip">Paste your code here or drag drop your file.</div>
+    <div class="warn" *ngIf="mulitfilewarning">we support only one file upload at a time</div>
+    <div class="app-ace-editor" #editor>
+    </div>
+  </div>

src/app/pages/baport/baport.component.scss

@@ -0,0 +1,33 @@
+.background {
+  background-color: black;
+  min-height: 65vh;
+  color: white;
+}
+
+.content {
+  width: 80%;
+  margin: auto;
+}
+.heading {
+  color: white;
+  text-align: center;
+  font-size: 2em;
+  line-height: normal;
+  padding-top: 20px;
+}
+.description {
+  padding-top: 30px;
+}
+.baport-try-btn {
+  display: flex;
+  justify-content: center;
+}
+.tip {
+  text-align: center;
+  color: rgba(255, 255, 255, 0.404);
+  padding: 10px 5px;
+}
+.warn {
+  color: red;
+  text-align: center;
+}

src/app/pages/baport/baport.component.ts

@@ -0,0 +1,165 @@
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  NgModule,
+  OnInit,
+  Renderer2,
+  ViewChild,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { ActivatedRoute, RouterModule, Routes } from '@angular/router';
+import { SEOServiceService } from 'src/app/services/seoservice.service';
+import { MatRipple, MatRippleModule } from '@angular/material/core';
+import * as ace from 'ace-builds';
+import { DragDropFileUploadDirective } from './drag-drop-upload.directive';
+import {
+  MatSnackBar,
+  MatSnackBarModule,
+  MatSnackBarRef,
+  TextOnlySnackBar,
+} from '@angular/material/snack-bar';
+@Component({
+  selector: 'app-baport',
+  templateUrl: './baport.component.html',
+  styleUrl: './baport.component.scss',
+})
+export class BaportComponent implements OnInit, AfterViewInit {
+  appLaunched: boolean = false;
+  aceEditor: any;
+  fileType: string | undefined;
+  fileName: string = "myPlugin.py";
+  files: any[] = [];
+  mulitfilewarning = false;
+  insertedByUs = false;
+  portSnackBarRef: MatSnackBarRef<TextOnlySnackBar> | null = null;
+  @ViewChild('editor', { static: false })
+  private editor!: ElementRef<HTMLElement>;
+
+  constructor(
+    private _seoService: SEOServiceService,
+    private activatedRoute: ActivatedRoute,
+    private renderer: Renderer2,
+    private _snackBar: MatSnackBar,
+  ) {}
+  ngAfterViewInit(): void {}
+  ngOnInit(): void {
+    var rt = this.getChild(this.activatedRoute);
+
+    rt.data.subscribe((data: any) => {
+      this._seoService.updateTitle(data.title);
+      this._seoService.updateOgUrl(data.ogUrl);
+      this._seoService.updateDescription(data.description);
+    });
+  }
+  initAce(): void {
+    console.log('after view init');
+    ace.config.set('fontSize', '14px');
+    ace.config.set(
+      'basePath',
+      'https://unpkg.com/ace-builds@1.10.0/src-noconflict',
+    );
+
+    this.aceEditor = ace.edit(this.editor.nativeElement);
+    this.aceEditor.session.setValue('print("hello world")');
+    this.aceEditor.setTheme('ace/theme/twilight');
+    this.aceEditor.session.setMode('ace/mode/python');
+    this.aceEditor.setOption('minLines', 34);
+    this.aceEditor.setOption('maxLines', 50);
+    this.aceEditor.session.on('change', (delta: any) => {
+      if (delta.action == 'insert') {
+        if (this.insertedByUs) {
+          this.insertedByUs = false;
+          let snackBarRef = this._snackBar.open(
+            'Download udpated code',
+            'Download',
+          );
+          snackBarRef.onAction().subscribe(() => this.downloadScript());
+        } else {
+          // this.updateScript();
+          if (this.portSnackBarRef == null) {
+            this.portSnackBarRef = this._snackBar.open(
+              'Update code to latest API',
+              'Port',
+            );
+            this.portSnackBarRef
+              .onAction()
+              .subscribe(() => this.updateScript());
+            this.portSnackBarRef.afterDismissed().subscribe(() => {
+              this.portSnackBarRef = null;
+            });
+          }
+        }
+      }
+    });
+
+    const script = this.renderer.createElement('script');
+    script.src = 'assets/api7to8.js';
+    this.renderer.appendChild(document.body, script);
+  }
+  callBaPortConvert(input: string) {
+    if (typeof (window as any).convert === 'function') {
+      return (window as any).convert(input);
+    }
+    return 'Faield to load baport converter';
+  }
+  downloadScript() {
+    const blob = new Blob([this.aceEditor.getValue()], { type: 'text/plain' });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = this.fileName;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    window.URL.revokeObjectURL(url);
+  }
+  updateScript() {
+    let code = this.aceEditor.getValue();
+    let ported = this.callBaPortConvert(code);
+    this.insertedByUs = true;
+    this.aceEditor.session.setValue(ported, -1);
+  }
+
+  getChild(activatedRoute: ActivatedRoute): any {
+    if (activatedRoute.firstChild) {
+      return this.getChild(activatedRoute.firstChild);
+    } else {
+      return activatedRoute;
+    }
+  }
+
+  launch() {
+    this.appLaunched = true;
+    setTimeout(() => this.initAce(), 100);
+  }
+
+  async onFileDropped($event: any) {
+    if ($event.length > 1) {
+      this.mulitfilewarning = true;
+    }
+    for (const item of $event) {
+      console.log(item);
+      this.files.push(item);
+    }
+    this.fileName = this.files[0].name;
+    this.aceEditor.session.setValue(await this.files[0].text());
+  }
+}
+
+const routes: Routes = [{ path: '', component: BaportComponent }];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatRippleModule,
+    MatSnackBarModule,
+    RouterModule.forChild(routes),
+  ],
+  exports: [BaportComponent],
+  declarations: [BaportComponent, DragDropFileUploadDirective],
+  providers: [],
+})
+export class BaPortModule {}

src/app/pages/baport/drag-drop-upload.directive.ts

@@ -0,0 +1,37 @@
+import {
+  Directive,
+  EventEmitter,
+  Output,
+  HostListener,
+  HostBinding,
+} from '@angular/core';
+
+@Directive({
+  selector: '[dragDropFile]',
+})
+export class DragDropFileUploadDirective {
+  @Output() fileDropped = new EventEmitter<any>();
+  @HostBinding('style.border-color') private background = 'rgb(155 149 149)';
+  // Dragover Event
+  @HostListener('dragover', ['$event']) dragOver(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.background = 'rgb(16 149 243)';
+  }
+  // Dragleave Event
+  @HostListener('dragleave', ['$event']) public dragLeave(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.background = 'rgb(155 149 149)';
+  }
+  // Drop Event
+  @HostListener('drop', ['$event']) public drop(event: any) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.background = 'rgb(155 149 149)';
+    const files = event.dataTransfer.files;
+    if (files.length > 0) {
+      this.fileDropped.emit(files);
+    }
+  }
+}