desktop v0.6

chinonso098 · Nov 4, 2023 · 6fbaa2d · 6fbaa2d
1 parent ed35ead
commit 6fbaa2d
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 33 deletions.
diff --git a/angular.json b/angular.json
@@ -23,7 +23,10 @@
               "path",
               "js-dos",
               "vanta/dist/vanta.waves.min",
-              "vanta/dist/vanta.birds.min"
+              "vanta/dist/vanta.birds.min",
+              "vanta/dist/vanta.rings.min",
+              "vanta/dist/vanta.globe.min",
+              "vanta/dist/vanta.net.min"
             ],
             "outputPath": "dist/cheetah-os",
             "index": "src/index.html",

diff --git a/src/app/system-apps/desktop/desktop.component.html b/src/app/system-apps/desktop/desktop.component.html
@@ -19,13 +19,13 @@
 
         <span class="span container"><span class="span section-line"></span></span>
 
-        <span class="span container2">
+        <span class="span container2" (click)="nextBackground()">
             <span class="span head"> <figure > </figure></span>
             <span class="span mid">Next Background</span>
             <span class="span tail"> <figure> </figure> </span>
         </span>
 
-        <span class="span container2">
+        <span class="span container2" (click)="previousBackground()">
             <span class="span head"> <figure > </figure></span>
             <span class="span mid">Previous Background</span>
             <span class="span tail"> <figure> </figure> </span>

diff --git a/src/app/system-apps/desktop/desktop.component.ts b/src/app/system-apps/desktop/desktop.component.ts
@@ -5,36 +5,22 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 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 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 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 RINGS from 'vanta/dist/vanta.rings.min';
 //import HALO from 'vanta/dist/vanta.halo.min';
 import * as THREE from 'three';
 
 
-const VANTAS = [
-  WAVES,
-  //BIRDS,
-  // FOG,
-  // CLOUDS,
-  // CLOUDS2,
-  // GLOBE,
-  // NET,
-  // CELLS,
-  // TRUNK,
-  // TOPOLOGY,
-  // DOTS,
-  // RINGS,
-   //HALO
-];
+
 
 @Component({
   selector: 'cos-desktop',
@@ -69,6 +55,26 @@ 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
+  ];
+
+  private MIN_NUMS_OF_DESKTOPS = 0;
+  private MAX_NUMS_OF_DESKTOPS = this.VANTAS.length - 1;
+  private CURRENT_DESTOP_NUM = 0;
+
 
   constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService, renderer: Renderer2) { 
     this._processIdService = processIdService;
@@ -81,27 +87,27 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
   }
 
   ngOnInit():void{
-    const vanta = VANTAS[0];
+    const vanta = this.VANTAS[0];
     this._vantaEffect = vanta({
       el: '#vanta',
       color:this._numSequence,
-      waveHeight:20,
-      shininess: 50,
-      waveSpeed:0.5,
-      zoom:0.75,   
+      // waveHeight:20,
+      // shininess: 50,
+      // waveSpeed:0.5,
+      // zoom:0.75,   
       THREE: THREE,    
     });
   }
 
   ngAfterViewInit():void{
     //interval countdown also 15 second
-     this._timerSubscription = interval(15000) .subscribe(() => {
+    //  this._timerSubscription = interval(15000) .subscribe(() => {
 
-          //console.log("hexColor:",this.getNextColor());
-          this._vantaEffect.setOptions({
-            color: this.getNextColor(),
-          });
-     });
+    //       //console.log("hexColor:",this.getNextColor());
+    //       this._vantaEffect.setOptions({
+    //         color: this.getNextColor(),
+    //       });
+    //  });
 
      this.hideContextMenu();
   }
@@ -191,6 +197,57 @@ export class DesktopComponent implements OnInit, OnDestroy, AfterViewInit{
     1
   }
 
+  previousBackground():void{
+
+    console.log('this.CURRENT_DESTOP_NUM-prev:',this.CURRENT_DESTOP_NUM);
+
+    if(this.CURRENT_DESTOP_NUM > this.MIN_NUMS_OF_DESKTOPS){
+      this.CURRENT_DESTOP_NUM --;
+      const curNum = this.CURRENT_DESTOP_NUM;
+
+      console.log('curNum:',curNum);
+      this.buildVantaEffect(curNum);
+    }
+
+    this.hideContextMenu();
+  }
+
+  nextBackground():void{
+
+    console.log('this.CURRENT_DESTOP_NUM-next:',this.CURRENT_DESTOP_NUM);
+
+    if(this.CURRENT_DESTOP_NUM < this.MAX_NUMS_OF_DESKTOPS){
+      this.CURRENT_DESTOP_NUM ++;
+      const curNum = this.CURRENT_DESTOP_NUM;
+
+      console.log('curNum:',curNum);
+
+      console.log('this.CURRENT_DESTOP_NUM-next:',this.CURRENT_DESTOP_NUM);
+      this.buildVantaEffect(curNum);
+    }
+
+    this.hideContextMenu();
+  }
+
+  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()
+    } catch (err) {
+      console.error('err:',err);
+      //this.buildVantaEffect(this.CURRENT_DESTOP_NUM);
+    }
+
+  }
+
+
 
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)