70 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			70 lines
		
	
	
	
		
			2.6 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| window.addEventListener("message", (event) => {
 | |
|     switch (event.data.action) {
 | |
|         case "open":
 | |
|             open(event.data);
 | |
|             break;
 | |
|         case "close":
 | |
|             close();
 | |
|             break;
 | |
|         case "setup":
 | |
|             setup(event.data);
 | |
|             break;
 | |
|     }
 | |
| });
 | |
| 
 | |
| const open = (data) => {
 | |
|     const scoreboard = document.querySelector(".scoreboard-block");
 | |
|     scoreboard.style.display = "block";
 | |
|     const totalPlayers = document.getElementById("total-players");
 | |
|     if (totalPlayers) {
 | |
|         totalPlayers.innerHTML = `<p>${data.players} of ${data.maxPlayers}</p>`;
 | |
|     }
 | |
|     Object.entries(data.requiredCops).forEach(([category, info]) => {
 | |
|         const beam = document.querySelector(`.scoreboard-info [data-type="${category}"]`);
 | |
|         if (!beam) return;
 | |
|         const status = beam.querySelector(".info-beam-status");
 | |
|         if (!status) return;
 | |
|         if (info.busy) {
 | |
|             status.innerHTML = "⏳";
 | |
|         } else if (data.currentCops >= info.minimumPolice) {
 | |
|             status.innerHTML = "✅";
 | |
|         } else {
 | |
|             status.innerHTML = "❌";
 | |
|         }
 | |
|     });
 | |
| };
 | |
| 
 | |
| const close = () => {
 | |
|     const scoreboard = document.querySelector(".scoreboard-block");
 | |
|     scoreboard.style.display = "none";
 | |
| };
 | |
| 
 | |
| const setup = (data) => {
 | |
|     const scoreboardInfo = document.querySelector(".scoreboard-info");
 | |
|     if (!scoreboardInfo) return;
 | |
|     scoreboardInfo.innerHTML = "";
 | |
|     Object.entries(data.items).forEach(([index, value]) => {
 | |
|         const beamElement = document.createElement("div");
 | |
|         beamElement.className = "scoreboard-info-beam";
 | |
|         beamElement.setAttribute("data-type", index);
 | |
|         const titleElement = document.createElement("div");
 | |
|         titleElement.className = "info-beam-title";
 | |
|         titleElement.innerHTML = `<p>${value}</p>`;
 | |
|         const statusElement = document.createElement("div");
 | |
|         statusElement.className = "info-beam-status";
 | |
|         beamElement.appendChild(titleElement);
 | |
|         beamElement.appendChild(statusElement);
 | |
|         scoreboardInfo.appendChild(beamElement);
 | |
|     });
 | |
|     const playersBeam = document.createElement("div");
 | |
|     playersBeam.className = "scoreboard-info-beam";
 | |
|     const playersTitle = document.createElement("div");
 | |
|     playersTitle.className = "info-beam-title";
 | |
|     playersTitle.innerHTML = "<p>Total Players</p>";
 | |
|     const playersStatus = document.createElement("div");
 | |
|     playersStatus.className = "info-beam-status";
 | |
|     playersStatus.id = "total-players";
 | |
|     playersBeam.appendChild(playersTitle);
 | |
|     playersBeam.appendChild(playersStatus);
 | |
|     scoreboardInfo.appendChild(playersBeam);
 | |
| };
 | 
