hud.html

<div id="status-indicators-group">
	<div id="cash" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/dollar-symbol.png" />
		<div class="status-indicators" id="cash-text">
			-
		</div>
	</div>
	<div id="food" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/knife-fork.png" />
		<div class="status-indicators" id="food-text">
			-
		</div>
		<div class="status-indicators resource-alert" id="food-alert">No Food! Half-Speed!</div>
	</div>
	<div id="water" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/water-droplet.png" />
		<div class="status-indicators" id="water-text">
			-
		</div>
		<div class="status-indicators resource-alert" id="water-alert">No Water! Half-Speed!</div>
	</div>
	<div id="gas" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/gas-station.png" />
		<div class="status-indicators" id="gas-text">
			-
		</div>
		<div class="status-indicators resource-alert" id="gas-alert">No Gas! Can't Move!</div>
	</div>
	<div id="treasure" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/diamond.png" />
		<div class="status-indicators" id="treasure-text">
			-
		</div>
	</div>
	<div id="capacity" class="sigroups">
		<image class="status-indicator-image" src="assets/icons/barrel.png" />
		<div class="status-indicators" id="capacity-text">
			-/-
		</div>
	</div>
	<div id="chat-container">
		<div onclick="openChat()" id="closed-chat" class="container-fluid">
				<div id="chat-speech-bubble" style="background-image:url('assets/icons/chat-arrow-combo.png')"></div>
				<!-- <div class="col col-sm-4" style="background-image:url('assets/icons/right-arrow.png')"></div> -->
				<!-- <image src="assets/icons/speech-bubble.png" id="chat-speech-bubble" style="margin-left:5px; height:8vh; display:inline-block;"/>
				<image src="assets/icons/right-arrow.png" style="height:8vh; display:inline-block; margin-right:10px; cursor:pointer;"/> -->
		</div>
		<div id="open-chat-container">
			<img id="chat-back" onclick="backChat()" src="./assets/icons/left-arrow.png" />
			<img id="chat-exit" onclick="closeChat()" src="./assets/icons/close-button.png" />
			<div id="chat-title"><p>Chat</p></div>
			<div id="chat-content-container">
				<div id="chat-select" class="container">
					<button class="team-select col btn btn-primary btn-block" id="broadcast-button">
						<p>Broadcast</p>
					</button>
				</div>
				<div id="message-content-container">
					<div class="messages" chatID="broadcast">
						<!-- Messages go in here -->
					</div>
					<div id="input-box-button">
						<input type="text" id="message-input-box">

						</input	>
						<div id="message-input-button" style="cursor:pointer;">
							<!-- <img src="./assets/icons/send.png" /> -->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<div id="right-side-button-group">
	<div id="buy-sell" onclick="openBuySell()" class="right-button">
		<div class="right-image" style="background-image:url('./assets/icons/cart.png')"></div>
	</div>
	<div id="trade" onclick="openTradeWindow()" class="right-button">
		<div class="right-image" style="background-image:url('./assets/icons/handshake.png')"></div>
	</div>
	<div id="sea-captain" onclick="openCaptainWindow()" class="right-button">
		<div class="right-image" style="background-image:url('./assets/icons/sea-captain.png')"></div>
	</div>
</div>

<div id="bottom-group">
	<div id="bottom-top-group">
		<div class="sub-items" style="left:0;">
			<div class="bottom-box-container">
				<div id="team">
					<p id="team-text" class="bottom-text resize">Ship A</p>
				</div>
			</div>
			<div id="day">
				<p id="day-text" class="bottom-text resize">Day <span id="day-number-text">7</span></p>
			</div>
		</div>
		<div id="status-container">
			<div id="status-circle" class="bottom-text">
				<div><p id="status-text" class="bottom-text resize">Not Ready</p></div>
			</div>
		</div>
		<div class="sub-items" style="right:0;">
			<div id="weather">
				<p id="weather-text" class="bottom-text resize">Sunny</p>
				<image class="weather-image" id="sunny-image" src="assets/icons/sunny.png" />
				<image class="weather-image" id="rain-image" src="assets/icons/rain.png" />
			</div>
			<div class="bottom-box-container">
				<div id="location">
					<p id="location-text" class="bottom-text resize">Cardinal Island</p>
				</div>
			</div>
		</div>
	</div>
	<div id="loading-progress">
		<div id="loading-bar-back"> </div>
		<div id="loading-bar"> </div>
	</div>
</div>

<div id="alerts" onclick="showAlerts()">
	<p id="alerts-text" class="bottom-text resize">Alerts</p>
	<div id="alerts-dot" hidden="true"> </div>
	<div id="alerts-icon"></div>
</div>

<div class="full-size-window" id="alerts-screen">
	<div class="full-size-window-top-bar">
		<h1>Alerts</h1>
		<img onclick="closeAlerts()" class="fullSizeCloseButton" src="./assets/icons/close-button.png" />
	</div>
	<hr class="eighty-percent-hr" />
	<div class="full-size-window-content" id="day-alert-box-container">
	</div>
</div>
<div class="full-size-window" id="buy-sell-window">
	<div class="full-size-window-top-bar">
		<h1>Purchase Resources and Sell Treasure</h1>
		<img class="fullSizeCloseButton" onclick="closeBuySell()" src="./assets/icons/close-button.png" />
	</div>
	<hr class="eighty-percent-hr" />
	<div class="full-size-window-content container" id="buy-sell-window-content">
		<div id="buy-food" class="row">
			<div class="buy-items-line" style="margin-top:4vh;">
				<div class="buy-title col-sm-3"><p>Buy Food</p></div>
				<div class="cost col-sm-4"><p>$25 per unit</p></div>
				<img class="buy-sell-minus" src="assets/icons/minus.png" />
				<div class="how-many-buying col-sm-3"><p>0</p></div>
				<img class="buy-sell-plus" src="assets/icons/plus.png" />
			</div>
		</div>
		<div id="buy-water" class="row">
			<div class="buy-items-line">
				<div class="buy-title col-sm-3"><p>Buy Water</p></div>
				<div class="cost col-sm-4"><p>$25 per unit</p></div>
				<img class="buy-sell-minus" src="assets/icons/minus.png" />
				<div class="how-many-buying col-sm-3"><p>0</p></div>
				<img class="buy-sell-plus" src="assets/icons/plus.png" />
			</div>
		</div>
		<div id="buy-gas" class="row">
			<div class="buy-items-line">
				<div class="buy-title col-sm-3"><p>Buy Gas</p></div>
				<div class="cost col-sm-4"><p>$25 per unit</p></div>
				<img class="buy-sell-minus" src="assets/icons/minus.png" />
				<div class="how-many-buying col-sm-3"><p>0</p></div>
				<img class="buy-sell-plus" src="assets/icons/plus.png" />
			</div>
		</div>
		<div id="sell-treasure" class="row">
			<div class="buy-items-line">
				<div class="buy-title col-sm-3"><p>Sell Treasure</p></div>
				<div class="cost col-sm-4"><p>$25 per unit</p></div>
				<img class="buy-sell-minus" src="assets/icons/minus.png" />
				<div class="how-many-buying col-sm-3"><p>0</p></div>
				<img class="buy-sell-plus" src="assets/icons/plus.png" />
			</div>
		</div>
		<div class="row">
			<button class="btn btn-block center-block btn-danger buy-submit-button"><p>Submit</p></button>
		</div>
		<br/>
	</div>
</div>
<div class="full-size-window" id="trade-window">
	<div class="full-size-window-top-bar">
		<img id="backTradeButton" onclick="backTrade()" style="margin-left:10px; margin-right:0px;" src="./assets/icons/left-arrow.png" />
		<h1>Trade <span id="trade-title"></span></h1>
		<img id="tradeCloseButton" class="fullSizeCloseButton" onclick="closeTradeWindow()" src="./assets/icons/close-button.png" />
	</div>
	<hr class="eighty-percent-hr" />
	<div class="full-size-window-content" id="trade-window-content" >
		<div id="trade-team-select-container">

		</div>
		<div id="trade-items-select" >
			<!-- <div id="trade-item-select-title">
				<h1 style="margin:0">???</h1>
			</div> -->
			<div id="trade-receive-container container">
				<div id="trade-in" class="col-sm-6">
					<h2 id="trade-in-title" class="row">You Give</h2>
					<div class="buy-items-line trade-item-line row trade-cash">
						<div class="buy-title trade-item-title col-sm-4"><p>Cash</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-food">
						<div class="buy-title trade-item-title col-sm-4"><p>Food</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-water">
						<div class="buy-title trade-item-title col-sm-4"><p>Water</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-gas">
						<div class="buy-title trade-item-title col-sm-4"><p>Gas</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-treasure">
						<div class="buy-title trade-item-title col-sm-4"><p>Treasure</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
				</div>
				<div id="to-receive" class="col-sm-6">
					<h2 id="to-receive-title" class="row">You Receive</h2>
					<div class="buy-items-line trade-item-line row trade-cash">
						<div class="buy-title trade-item-title col-sm-4"><p>Cash</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-food">
						<div class="buy-title trade-item-title col-sm-4"><p>Food</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-water">
						<div class="buy-title trade-item-title col-sm-4"><p>Water</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-gas">
						<div class="buy-title trade-item-title col-sm-4"><p>Gas</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
					<div class="buy-items-line trade-item-line row trade-treasure">
						<div class="buy-title trade-item-title col-sm-4"><p>Treasure</p></div>
						<img class="trade-minus" src="assets/icons/minus.png" />
						<div class="how-many-buying col-sm-4"><p>0</p></div>
						<img class="trade-plus" src="assets/icons/plus.png" />
					</div>
				</div>
			</div>
			<div id="trade-button-container">
				<button id="send-offer" class="btn btn-block center-block btn-primary">
					<p id="trade-item-select-title">Send offer</p>
				</button>
				
				<button id="trade-waiting-button" class="btn btn-block center-block btn-danger" disabled>
					<p>Waiting...</p>
				</button>
				
				<div id="trade-received-buttons" class="container-fluid">
					<div class="col-sm-6">
						<button id="trade-accept-button" class="btn btn-block center-block btn-success">
							<p>Accept</p>
						</button>
					</div>
					<div class="col-sm-6">
						<button id="trade-decline-button" class="btn btn-block center-block btn-danger">
							<p>Decline</p>
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="full-size-window" id="captain-window" style="min-height:70vh; margin-top:20px;">
	<div class="full-size-window-top-bar">
		<h1>Crusty Old Sea Captain</h1>
		<img onclick="closeCaptainWindow()" class="fullSizeCloseButton" src="./assets/icons/close-button.png" />
	</div>
	<hr class="eighty-percent-hr" />
	<div class="full-size-window-content" id="captain-window-content" >
		<div id="captain-face">
			<!-- image inserted as background on div -->
		</div>
		<div id="buttons-and-message">
			<div id="captains-buttons-container">
				<div id="instructions">
					<p>What would you like to ask me about?</p>
				</div>
				<button class="captains-buttons" id="sea-captain-weather-button">
					<p>Weather</p>
				</button>
				<button class="captains-buttons" id="sea-captain-pirates-button">
					<p>Pirates</p>
				</button>
			</div>
			<div onclick="expandText(this)" id="captains-message">
				<p>Encountered Error.</p>
			</div>
		</div>
	</div>
</div>

<div id="largeTextDisplay" hidden="true">
	<img id="chat-exit" onclick="closeExpandedText()" src="./assets/icons/close-button.png" />
	<p>
	</p>

</div>

<div id="warn-div" class="center-inside" hidden="true">
	<p>
	</p>
</div>

<script>
	var chatIsClosed = true;
	var windowWidthWhenChatIsClosed = ["80vw","50%"] //[width,left]
	var windowWidthWhenChatIsOpen = ["60vw","61%"]; //[width,left]
	var othersAreClosed = true;
	var alertsScreen = document.getElementById("alerts-screen");
	var buySellWindow = document.getElementById("buy-sell-window");
	var captainWindow = document.getElementById("captain-window");
	var tradeWindow = document.getElementById("trade-window");
	var alertsEnabled = true;
	var buySellEnabled = false;
	var tradeEnabled = false;
	var seaCaptainEnabled = false;
	var openChatID = false;
	window.notifications = new Notifications();
	window.sounds = new Sounds();
	// respond to user interaction through this script
	function closeChat(){
		$("#open-chat-container").hide();
		$("#closed-chat").show();
		chatIsClosed = true;
		setWidth();
	}
	function openChat(){
		$("#open-chat-container").show();
		$("#closed-chat").hide();
		chatIsClosed = false;
		setWidth();
	}
	function backChat(){ /*function that allows user to select team to chat with*/
		document.getElementById("message-content-container").style.display = "none";
		document.getElementById("chat-select").style.display = "initial";
		document.getElementById("chat-back").style.display = "none";
	}
	function expandText(element){
		document.getElementById("largeTextDisplay").style.display = "initial";
		document.getElementById("largeTextDisplay").childNodes[3].innerHTML = element.querySelector("p").innerHTML.trim();
	}
	function showAlerts(){
		if (alertsEnabled)
		{
			setWidth();
			closeOthers();
			alertsScreen.style.display = "flex";
			othersAreClosed = false;
			// $("#day-alert-box-container")[0].scrollTop = $("#day-alert-box-container")[0].scrollHeight; //TODO
			alertsFlash(false);
		}
	}
	function alertsFlash(flash){
		alerts = document.getElementById("alerts-dot");
		if(flash){
			alerts.style.display = "initial";
		}
		else{
			alerts.style.display = "none";
		}
	}
	function openBuySell(){
		if (buySellEnabled)
		{
			setWidth();
			closeOthers();
			buySellWindow.style.display = "flex";
			othersAreClosed = false;
		}
	}
	function openCaptainWindow(){
		if (seaCaptainEnabled)
		{
			setWidth();
			closeOthers();
			captainWindow.style.display = "flex";
			othersAreClosed = false;
		}
	}
	function openTradeWindow(){
		if (tradeEnabled)
		{
			setWidth();
			closeOthers();
			tradeWindow.style.display = "flex";
			othersAreClosed = false;
		}
	}
	function closeExpandedText(){
		$("#largeTextDisplay").hide();
		$("#largeTextDisplay > p").text();
	}
	function closeAlerts(){
		$(alertsScreen).hide();
		othersAreClosed = true;
	}
	function closeBuySell(){
		$(buySellWindow).hide();
		othersAreClosed = true;
	}
	function closeCaptainWindow(){
		$(captainWindow).hide();
		othersAreClosed = true;
	}
	function closeTradeWindow(){
		$(tradeWindow).hide();
		othersAreClosed = true;
	}
	function closeOthers(){ //closes all potentially open windows
		closeAlerts();
		closeBuySell();
		closeCaptainWindow();
		closeTradeWindow();
		closeExpandedText();
		othersAreClosed = true;
	}
	function backTrade(){
		document.getElementById("trade-items-select").style.display = "none";
		$("#trade-team-select-container").show();
		$("#backTradeButton").hide();
	}
	backTrade();
	function setWidth(){
			if(!chatIsClosed){
				alertsScreen.style.width = windowWidthWhenChatIsOpen[0];
				alertsScreen.style.left = windowWidthWhenChatIsOpen[1];
				buySellWindow.style.width = windowWidthWhenChatIsOpen[0];
				buySellWindow.style.left = windowWidthWhenChatIsOpen[1];
				captainWindow.style.width = windowWidthWhenChatIsOpen[0];
				captainWindow.style.left = windowWidthWhenChatIsOpen[1];
				tradeWindow.style.width = windowWidthWhenChatIsOpen[0];
				tradeWindow.style.left = windowWidthWhenChatIsOpen[1];
			}
			else{
				alertsScreen.style.width = windowWidthWhenChatIsClosed[0];
				alertsScreen.style.left = windowWidthWhenChatIsClosed[1];
				buySellWindow.style.width = windowWidthWhenChatIsClosed[0];
				buySellWindow.style.left = windowWidthWhenChatIsClosed[1];
				captainWindow.style.width = windowWidthWhenChatIsClosed[0];
				captainWindow.style.left = windowWidthWhenChatIsClosed[1];
				tradeWindow.style.width = windowWidthWhenChatIsClosed[0];
				tradeWindow.style.left = windowWidthWhenChatIsClosed[1];
			}
	}
	function warn(text){
		$("#warn-div p").text(text);
		setTimeout(()=>{ $("#warn-div").fadeOut(1000); },4000);
		window.sounds.playOnce("warningSound");
		$("#warn-div").fadeIn(1000);
	}
	// $(document).keyup(function(e) {
	//      if (e.keyCode == 27) { // escape key maps to keycode `27`
	//         closeOthers();
	//         closeChat();
	//     }
	// });
	var autoSizeText;
	autoSizeText = function(){
	  var el, elements, _i, _len, _results;
	  elements = $('.resize');
	  if (elements.length < 0) {
	    return;
	  }
	  _results = [];
	  for (_i = 0, _len = elements.length; _i < _len; _i++) {
	    el = elements[_i];
	    _results.push((function(el) {
	      var resizeText, _results1;
	      resizeText = function() {
	        var elNewFontSize;
	        elNewFontSize = (parseInt($(el).css('font-size').slice(0, -2)) - 1) + 'px';
	        return $(el).css('font-size', elNewFontSize);
	      };
	      _results1 = [];
	      while (el.scrollHeight > el.offsetHeight) {
	        _results1.push(resizeText());
	      }
	      return _results1;
	    })(el));
	  }
	  return _results;
	};
	autoSizeText();
    $(window).resize(()=>{$('.resize').css('font-size','8vh');autoSizeText();});
    $('.resize').on("DOMSubtreeModified",function(){ autoSizeText(); });

</script>