desktop v0.6.1

angular.json

@@ -50,7 +50,13 @@
             ],
             "scripts": [
               "./src/scripts/bundle/index.js",
-              "node_modules/js-dos/dist/js-dos.js"
+              "node_modules/js-dos/dist/js-dos.js",
+              "./src/scripts/three.min.js",
+              "./src/scripts/vanta.waves.min.js",
+              "./src/scripts/vanta.halo.min.js",
+              "./src/scripts/vanta.globe.min.js",
+              "./src/scripts/vanta.birds.min.js",
+              "./src/scripts/vanta.rings.min.js"  
             ]
           },
           "configurations": {

package.json

@@ -20,7 +20,7 @@
     }
   },
   "lint-staged": {
-    "*.{js,ts}": "eslint --fix"
+    "*.{ts}": "eslint --fix"
   },
   "private": true,
   "dependencies": {
@@ -42,9 +42,7 @@
     "ngx-draggable-resize": "^0.1.1",
     "notyf": "^3.10.0",
     "rxjs": "~7.5.0",
-    "three": "0.124.0",
     "tslib": "^2.3.0",
-    "vanta": "0.5.22",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {

src/app/system-apps/desktop/desktop.component.ts

@@ -4,23 +4,11 @@ import { ProcessIDService } from 'src/app/shared/system-service/process.id.servi
 import { RunningProcessService } from 'src/app/shared/system-service/running.process.service';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
-import WAVES from 'vanta/dist/vanta.waves.min';
-import BIRDS from 'vanta/dist/vanta.birds.min';
-// import FOG from 'vanta/dist/vanta.fog.min';
-// import CLOUDS from 'vanta/dist/vanta.clouds.min';
-// import CLOUDS2 from 'vanta/dist/vanta.clouds2.min';
-import GLOBE from 'vanta/dist/vanta.globe.min';
-import NET from 'vanta/dist/vanta.net.min';
-// import CELLS from 'vanta/dist/vanta.cells.min';
-// import TRUNK from 'vanta/dist/vanta.trunk.min';
-// import TOPOLOGY from 'vanta/dist/vanta.topology.min';
-// import DOTS from 'vanta/dist/vanta.dots.min';
-import RINGS from 'vanta/dist/vanta.rings.min';
-//import HALO from 'vanta/dist/vanta.halo.min';
-import * as THREE from 'three';
-
-
+import { BIRDS, GLOBE, HALO, RINGS, WAVE } from './vanta-object/vanta.interfaces';
 
+declare let VANTA: {
+  HALO: any; BIRDS: any;  WAVES: any;  GLOBE: any; RINGS: any; 
+};
 
 @Component({
   selector: 'cos-desktop',
@@ -55,20 +43,18 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   type = ComponentType.systemComponent;
   displayName = '';
 
-  VANTAS = [
-    WAVES,
-    BIRDS,
-    // FOG,
-    // CLOUDS,
-    // CLOUDS2,
-    GLOBE,
-    NET,
-    // CELLS,
-    // TRUNK,
-    // TOPOLOGY,
-    // DOTS,
-    RINGS
-    //HALO
+  waveBkgrnd:WAVE =  {el:'#vanta'}
+  ringsBkgrnd:RINGS =  {el:'#vanta'}
+  haloBkgrnd:HALO =  {el:'#vanta'}
+  globeBkgrnd:GLOBE =  {el:'#vanta'}
+  birdBkgrnd:BIRDS =  {el:'#vanta'}
+
+  VANTAS:any = [
+    this.waveBkgrnd,
+    this.ringsBkgrnd,
+    this.haloBkgrnd,
+    this.globeBkgrnd,
+    this.birdBkgrnd
   ];
 
   private MIN_NUMS_OF_DESKTOPS = 0;
@@ -87,15 +73,14 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
   ngOnInit():void{
-    const vanta = this.VANTAS[0];
-    this._vantaEffect = vanta({
+
+    this._vantaEffect = VANTA.WAVES({
       el: '#vanta',
       color:this._numSequence,
-      // waveHeight:20,
-      // shininess: 50,
-      // waveSpeed:0.5,
-      // zoom:0.75,   
-      THREE: THREE,    
+      waveHeight:20,
+      shininess: 50,
+      waveSpeed:0.5,
+      zoom:0.75,     
     });
   }
 
@@ -231,15 +216,25 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
 
   private buildVantaEffect(n:number) {
 
-
-
     try {
       const vanta = this.VANTAS[n];
-      this._vantaEffect = vanta({
-        el: '#vanta',
-        THREE: THREE, // use a custom THREE when initializing
-      });
-      //this._vantaEffect.resizes()
+
+      if(n == 0){
+        this._vantaEffect = VANTA.WAVES(vanta)
+      }
+      if(n == 1){
+        this._vantaEffect = VANTA.RINGS(vanta)
+      }
+      if(n == 2){
+        this._vantaEffect = VANTA.HALO(vanta)
+      }
+      if(n == 3){
+        this._vantaEffect = VANTA.GLOBE(vanta)
+      }
+      if(n == 4){
+        this._vantaEffect = VANTA.BIRDS(vanta)
+      }
+
     } catch (err) {
       console.error('err:',err);
       //this.buildVantaEffect(this.CURRENT_DESTOP_NUM);

src/app/system-apps/desktop/vanta-object/vanta.interfaces.ts

@@ -0,0 +1,81 @@
+
+export interface HALO{
+    el: string,
+    mouseControls?: true,
+    touchControls?: true,
+    gyroControls?: false,
+    minHeight?: 200.00,
+    minWidth?: 200.00,
+    backgroundColor?:0x131a43,
+    baseColor?:0x1a59,
+    size?:1,
+    amplitudeFactor?:1,
+    xOffset?:0
+    yOffset?:0
+}
+
+export interface BIRDS{
+    el: string,
+    mouseControls?: true,
+    touchControls?: true,
+    gyroControls?: false,
+    minHeight?: 200.00,
+    minWidth?: 200.00,
+    backgroundColor?:0x7192f,
+    backgroundAlpha?:1,
+    baseColor?:0x1a59,
+    color1?:0xff0000,
+    color2?:0xd1ff,
+    quantity?:5,
+    birdSize?:1,
+    wingSpan?:30,
+    speedLimit?:5,
+    separation?:20,
+    alignment?:20,
+    cohesion?:20
+}
+
+export interface WAVE{
+    el: string,
+    mouseControls?: true,
+    touchControls?: true,
+    gyroControls?: false,
+    minHeight?: 200.00,
+    minWidth?: 200.00,
+    scale?: 1.00,
+    scaleMobile?: 1.00,
+    color?:0x5588,
+    shininess?:30,
+    waveHeight?:15,
+    waveSpeed?:1,
+    zoom?:1  
+}
+
+export interface RINGS{
+    el: string,
+    mouseControls?: true,
+    touchControls?: true,
+    gyroControls?: false,
+    minHeight?: 200.00,
+    minWidth?: 200.00,
+    scale?: 1.00,
+    scaleMobile?: 1.00,
+    color?:0x88ff00,
+    backgroundColor?:0x202428,
+    backgroundAlpha?:1,
+}
+
+export interface GLOBE{
+    el: string,
+    mouseControls?: true,
+    touchControls?: true,
+    gyroControls?: false,
+    minHeight?: 200.00,
+    minWidth?: 200.00,
+    scale?: 1.00,
+    scaleMobile?: 1.00,
+    color?:0xff3f81,
+    color2?:0xffffff,
+    backgroundColor?:0x23153c,
+    size?:1
+}