Groundwork for connection status display

ui/main.ts

@@ -16,16 +16,16 @@ type LatLng = {
 type Peer = {
 	marker: Marker | null;
 	dataChannel: RTCDataChannel;
+	listItemEl: HTMLElement;
+	statusEl: HTMLElement;
 };
 const init = async () => {
 	const peers = new Map<PeerID, Peer>();
-	const onPeerConnected = (peerID: PeerID, dataChannel: RTCDataChannel) => {
-		const peer = {
-			marker: null,
-			dataChannel,
-		} as Peer;
-		peers.set(peerID, peer);
-
+	const onPeerConnected = (
+		peerID: PeerID,
+		rtc: RTCPeerConnection,
+		dataChannel: RTCDataChannel,
+	) => {
 		dataChannel.addEventListener("message", (msg) => {
 			const latLng: LatLng = JSON.parse(msg.data);
 
@@ -45,6 +45,21 @@ const init = async () => {
 				dataChannel.send(JSON.stringify(lastPosition));
 			}
 		});
+
+		const statusEl = swel("div", { className: "peerStatus" }, "Connected");
+		const listItemEl = swel("div", { className: "peer" }, [
+			swel("div", { className: "peerID" }, peerID),
+			statusEl,
+		]);
+		peersList.appendChild(listItemEl);
+
+		const peer = {
+			marker: null,
+			dataChannel,
+			listItemEl,
+			statusEl,
+		} as Peer;
+		peers.set(peerID, peer);
 	};
 
 	const net = await initNetworking(onPeerConnected);
@@ -63,7 +78,9 @@ const init = async () => {
 		"Connect",
 	);
 
-	const controls = swel("div", { id: "controls" }, [
+	const peersList = swel("div", { id: "peers" });
+	const lobby = swel("div", { id: "lobby" }, [
+		peersList,
 		swel("div", { id: "peerID" }, net.peerID),
 		swel("div", [peerIDInput, connectButton]),
 	]);
@@ -71,7 +88,7 @@ const init = async () => {
 	const mapContainer = swel("div", { id: "map" });
 
 	const main = document.getElementsByTagName("main")[0];
-	main.replaceChildren(controls, mapContainer);
+	main.replaceChildren(mapContainer, lobby);
 
 	const map = createMap(mapContainer);
 	map.setView([37.8, -96], 4);

ui/networking.ts

@@ -9,7 +9,11 @@ import {
 import { pearServerSocketAddress, rtcConfiguration } from "../ui.config.ts";
 
 export const initNetworking = async (
-	onPeerConnected: (peerID: PeerID, dataChannel: RTCDataChannel) => void,
+	onPeerConnected: (
+		peerID: PeerID,
+		rtc: RTCPeerConnection,
+		dataChannel: RTCDataChannel,
+	) => void,
 ) => {
 	const socket = new WebSocket(pearServerSocketAddress);
 	const pendingAnswers = new Map() as Map<
@@ -119,7 +123,7 @@ export const initNetworking = async (
 		const dataChannel = await dataChannelP;
 		await connected;
 
-		onPeerConnected(msg.peerID, dataChannel);
+		onPeerConnected(msg.peerID, rtc, dataChannel);
 	};
 
 	const connectToPeer = async (peerID: PeerID) => {
@@ -136,7 +140,7 @@ export const initNetworking = async (
 
 		await connected;
 
-		onPeerConnected(peerID, dataChannel);
+		onPeerConnected(peerID, rtc, dataChannel);
 	};
 
 	on.iceCandidate = (msg) => {

ui/style.scss

@@ -10,6 +10,9 @@ body {
 :root {
 	height: 100vh;
 	width: 100vw;
+
+	font-family: sans;
+	font-size: 16pt;
 }
 
 body, main {
@@ -17,15 +20,34 @@ body, main {
 	width: 100%;
 }
 
-#controls {
-	position: fixed;
-	top: 0;
-	right: 0;
-	background: white;
-	z-index: 1000;
+#lobby {
+	height: 20vh;
+	display: flex;
+	flex-direction: column;
+}
+
+main {
+	display: flex;
+	flex-direction: column;
+}
+
+#peers {
+	padding: 1em;
+	flex: 1;
+	overflow-y: auto;
+
+	border-bottom: 1px solid black;
 }
 
 #map {
-	width: 100%;
-	height: 100%;
+	flex: 1;
+}
+
+.peer {
+	display: flex;
+	flex-direction: row;
+
+	.peerID {
+		flex: 1;
+	}
 }