GrandTabernacleAutoVI/public_html/js/phone.js

class Phone{
	constructor(){
		this.position = 0; //0: hidden 1: visible 2: notification
		this.messages = [];
		this.name = document.getElementById("TitlePage");

		this.content = document.getElementById("content");
		this.contentmsg = document.getElementById("chatMessages");
		this.inputDiv = document.getElementById("chatInputDiv");
		this.webview = document.getElementById("webview");

		this.webviewName = "Erreur";

		this.chargeMainPage();
		this.changeWindow(1);
	}

	chargeMainPage() {
		document.getElementById("appli-concord").addEventListener("click", (e) => {
            this.changeWindow(2);
        });
		document.getElementById("appli-gta6").addEventListener("click", (e) => {
            this.webviewName = "GTA 6";
            this.changeWindow("game.html");
        });
		document.getElementById("appli-vbuks").addEventListener("click", (e) => {
            this.webviewName = "Free Vbucks";
            this.changeWindow("assets/phone/webview/vbucks.html");
        });
		document.getElementById("appli-fb").addEventListener("click", (e) => {
            this.webviewName = "FakeBook";
            this.changeWindow("assets/phone/webview/fb.html");
        });
		document.getElementById("appli-utube").addEventListener("click", (e) => {
            this.webviewName = "uTube";
            this.changeWindow("assets/phone/webview/utube.html");
        });
		document.getElementById("appli-goo").addEventListener("click", (e) => {
            this.webviewName = "Gogole";
            this.changeWindow("https://mrdoob.com/projects/chromeexperiments/google-space/");
        });
		document.getElementById("appli-lest").addEventListener("click", (e) => {
            this.webviewName = "Lester";
            this.changeWindow("assets/phone/webview/lester.html");
        });
	}

	changeWindow(window) {
		//1 main view phone.changeWindow(
		//2 concorde
		//other webview
		this.content.style.display="none";
		this.contentmsg.style.display="none";
		this.inputDiv.style.display="none";
		this.webview.style.display = "none";
		this.webview.src="";

		switch (window) {
			case 1:
				this.name.innerText = "Pear phone";
				this.content.style.display="block";
				break;
			case 2:
				this.name.innerText = "Concord";
				this.contentmsg.style.display="block";
				this.inputDiv.style.display="block";
				break;
			default:
				this.name.innerText = this.webviewName
				this.webview.style.display = "block";
				this.webview.style.width="100%";
				this.webview.style.height="90%";
				this.webview.style.border="0";
				this.webview.src=window;
				break;
		}
	}

	addMessage(message){
		this.messages.push(message);

		let msg = document.createElement("div");
		msg.className = "message";

		let h2 = document.createElement("h2");
		h2.className = "messageTitle";
		h2.innerText = message.title;

		let btn = document.createElement("button");
		btn.className = "concordRemoveBtn"
		btn.innerText = "X"
		btn.onclick = ()=>{
			msg.remove();
		}

		let p;
		let match = message.content.match(/:(\w+):/);
		if(match){
			p = document.createElement("img");
			p.className = "messageImage";
			p.src = "assets/concord_images/" + match[1] + '.jpg';
		}else{
			p = document.createElement("p");
			p.className = "messageContent";
			p.innerText = message.content;
		}

		msg.appendChild(h2);
		msg.appendChild(p);
		msg.appendChild(btn)

		this.contentmsg.appendChild(msg);
		this.contentmsg.scrollTop = this.contentmsg.scrollHeight;

		//notification
		if(message.playerId!=player.id){
			notificationSound.play();
			if(this.position == 0){
				this.position = 2;
				document.getElementById("phoneContainer").className = "notification";
			}
		}
	}

	clearMessages(){
		let messages = document.getElementsByClassName("message");
		for (var i = messages.length - 1; i >= 0; i--) {
			messages[i].remove();
		}
	}

	sendMessage(title, content){
		if(content.toLowerCase() != "clear"){
			let message = {
				playerId: player.id,
				title: player.name,
				content: content
			}
			this.addMessage(message);
			net.sendMessage(title, content);
		}else{
			this.clearMessages();
		}
		
	}

	keyPress(input){
		if(event.key=='Enter'){
			if(input.value!=''){
				this.sendMessage(player.name, input.value);
				input.value = '';
				input.blur();
			}		
		}
	}

	changePosition(){
		if(!document.getElementById("phoneContainer").contains(document.activeElement)){
			if(this.position == 0 || this.position == 2){
				document.getElementById("phoneContainer").className = "visible";
				this.position = 1;
			}else{
				document.getElementById("phoneContainer").className = "hidden";
				this.position = 0;
			}
		}
		
	}
}