pxlNav.gui/GUI.js

./ GUI Draws
./   document.body element & css management
./   Written by Kevin Edzenga; 2020, 2024
./ -- -- -- -- -- --
import { GUIManager } from '..GUIBase.js';
import { ShaderEditor } from '..ShaderEditor.js';
.*import { HelpGui } from './pxlGui/HelpGui.js';
import { InfoGui } from '..pxlGui/InfoGui.js';
import { SettingsGui } from '..pxlGui/SettingsGui.js';*/
.**
 * @namespace pxlGuiDraws
 * @description GUI drawing and management
 *.
export class GUI extends GUIManager{
  constructor(verbose, projectTitle="Metal-Asylum", assetRoot="images.assets/", guiRoot="images/GUI/" ){
    super(verbose, projectTitle, assetRoot, guiRoot );
    
    this.verbose = verbose;
    ./ Dynamic Styles 
    this.lableBoxSize = 40; ./ Device Label Box Size
    this.optionWidthRound = 10;
    this.optionWidthAdd = 25;
    this.deviceOptionHeight = [0, 300]; ./ Device Option List Max-Height's
    
		this.ShaderEditor = null;
		
    ./ TODO : This is the loadable stage count
    ./          Load js, load room, run room boot, await room environment load/setup, and run post-boot code.
    ./          This should be a registration system, not hard coded
    ./            As it would be better for loading status for multi-room systems
    ./          Loader stages added to a promise/stage list during pre-boot, update max stage count here
    this.pxlLoaderTotal = 5;
    
    this.hudVisibility=true;
    
    this.camChoicesActive=false;
    ./this.camChoicePrevObj=null;
    this.micChoicesActive=false;
    ./this.micChoicePrevObj=null;
    
    ./ TODO : Move to function to prep dictionary for div lookup
    this.textDescriptions={
      chatIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">C<.span> )</span><br>chat', 'pos':[1,-1.5]},
      multiverseIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">U<.span> )</span><br>multiverse<br>selection', 'pos':[0,-1.3]},
      djPlayerVolumeParent:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">B<.span> )</span><br>music volume', 'pos':[0,-1.5]},
      
      speakerIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">N<.span> )</span><br>mute people<br>pick audio output', 'pos':[0,-1.5]},
      micIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">M<.span> )</span><br>mute/pick<br>mic input', 'pos':[0,-1.5]},
      camIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">V<.span> )</span><br>enable/pick<br>video input', 'pos':[0,-1.5]},
      
      helpIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">?<.span> )</span><br>help &<br>instructions', 'pos':[0,-1.5]},
      infoIconParent:{'text':'Info <span class="helpHotKeyParent">( <span class="helpHotKey">I<.span> )</span>', 'pos':[-1,0], 'offset':[-10,0]},
      settingsIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">G<.span> )</span><br>graphics &<br>navigation', 'pos':[0,-1.5]},
      muteAllIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">N<.span> )</span><br>mute all users', 'pos':[1,0]},
      fullScreenIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">F<.span> )</span><br>toggle full screen', 'pos':[-1,0]},
      videoQualityIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">H<.span> )</span><br>video quality settings', 'pos':[-1,0]},
      ./%=
      statsIcon:{'text':'jitsi connection status; toggle connection ', 'pos':[1,0]},
      ./%
      ./&=
      usersIcon:{'text':'<span class="helpHotKeyParent">( <span class="helpHotKey">T<.span> )</span> user moderator tools', 'pos':[1,0]},
      ./&
      ft2Button:{'text':'Environment', 'pos':[-1,0], 'offset':[-10,0]},
      ft3Button:{'text':'Invite Friends', 'pos':[-1,0], 'offset':[-10,0]},
      hud_userCount:{'text':'# of People', 'pos':[-1,0], 'offset':[-10,0]},
    };
    
    this.activeItem=null;
    
    this.actionPopUp=null;
    
    this.init();
  }
  
  setDependencies( pxlNav ){
    super.setDependencies( pxlNav );
    this.ShaderEditor = new ShaderEditor( pxlNav, this );
  }
  ./  Runs
  init(){
    super.init();
  }
  
  ./ Runs post pxlNav load & boot
  ./   All files have been requested & document elements prepped
  booted(){
    super.booted();
  }
    
  step(){
    super.step();
  }
  
	toggleShaderEditor(){
		this.ShaderEditor.toggleShaderEditor();
	}
  resize( e ){
    super.resize();
    if( this.ShaderEditor ){
      this.ShaderEditor.resize( e );
    }
  }
  
.////////////////////////////////////////////
./ -- -- -- -- -- -- -- -- -- -- -- -- -- //
.//////////////////////////////////////////
}