Create a fixed-position walkie-talkie UI component

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="walkie-talkie"></div>

CSS

html{
  height: 100%;
}
body{
  height: 100%;
  margin: 0px;
}
.walkie-talkie{
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  perspective: 100px;
}

JavaScript

class WalkieTalkie {

  constructor(parentElement,channel,channelAudience){

    this.parentElement = parentElement;
    this.facilitySelection;
    this.userSelection;
    this.channel = channel;
    this.channelAudience = []; // empty array = broadcast to all

    if(typeof(channelAudience) == 'object'){

      this.channelAudience = channelAudience;

    }
    this.build();

  }

  build(){

    // build the BABYLON stuff here

    // build the mechanisms for conversations

    this.facilitySelection = $('<select name="facility"><option value="Select.." selected></option></select>');
    this.userSelection = $('<select name="user"><option value="Select.." selected></option></select>');

    this.parentElement.append(this.facilitySelection);
    this.parentElement.append(this.userSelection);

  }

  speak(){



  }

}

let WT = new WalkieTalkie($('.walkie-talkie'),3);