Monitor Component - EricEisaman/cs1-ide GitHub Wiki

Monitor Component

---

export default (()=>{
 
  document.addEventListener('gameStart',e=>{

   
    const mon1 = document.createElement('a-monitor');
    mon1.setAttribute('type','green');
    mon1.object3D.position.set(-7, 0.1, -6);
    mon1.setAttribute('rotation','0 90 0');
    CS1.scene.appendChild(mon1);
    CS1.log('Hello on the green channel!','green');
    
    const mon2 = document.createElement('a-monitor');
    mon2.setAttribute('type','gray');
    mon2.object3D.position.set(-7, 0.1, -2);
    mon2.setAttribute('rotation','0 90 0');
    CS1.scene.appendChild(mon2);
    CS1.log('Hello on the gray channel!','gray');
    
    const mon3 = document.createElement('a-monitor');
    mon3.setAttribute('type','purple');
    mon3.setAttribute('color','hotpink');
    mon3.object3D.position.set(-7, 0.1, 3);
    mon3.setAttribute('rotation','0 90 0');
    CS1.scene.appendChild(mon3);
    CS1.log('Hello from my new monitor!','purple');
    
    
  });
 
 
  AFRAME.registerComponent('monitor', {
   
   
    schema: {
      type: {default: 'gray'},
      color: {default: 'white'},
    },
 
    init: function(){
      let url,posX,posY,posZ;
      switch(this.data.type){
        case 'gray':
         url = 'https://cdn.glitch.com/b9d48379-1407-4182-9065-97e7d3b2b2fe%2Fmonitor1.glb?v=1571491705385';
         posX = -0.2;
         posY = 1.7;
         posZ = 0.2;
         break;
        case 'green':
         url = 'https://cdn.glitch.com/b9d48379-1407-4182-9065-97e7d3b2b2fe%2Fmonitor2.glb?v=1571492051012';
         posX = 0.0;
         posY = 1.416;
         posZ = 0.2;
         break;
        case 'purple':
          url = 'https://cdn.glitch.com/76fbb411-d921-400e-9dc6-ee5c0f54d76a%2Fpurple_monitor.glb?v=1573050389507';
          posX = -0.3;
          posY = 1.811;
          posZ = 0.4;
          break;
      }
       
      const model = document.createElement('a-gltf-model');
      model.setAttribute('src',url);
      const log = document.createElement('a-entity');
      log.setAttribute('log',`max:10;channel:${this.data.type}`);
      log.setAttribute('geometry','primitive:plane;width:2.7;height:1.6');
      log.setAttribute('material','opacity:0');
      log.object3D.position.set(posX,posY,posZ);//posY original 1.397
      log.setAttribute('text',`color:${this.data.color}`);
      model.appendChild(log);
      this.el.appendChild(model);
    }
   
   
  });
 
  AFRAME.registerPrimitive('a-monitor', {
 
   defaultComponents: {
    monitor: {}
   },
   
   mappings: {
    type: 'monitor.type',
    color: 'monitor.color',
   }
 
  });
 
 
 
 
})()