Simplify grid ui (#278)

Co-authored-by: droak <[email protected]>
topology-foundation · Dec 8, 2024 · 1daee47 · 1daee47
1 parent 1828da0
commit 1daee47
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 10 deletions.
diff --git a/examples/grid/index.html b/examples/grid/index.html
@@ -7,21 +7,26 @@
   </head>
   <body>
     <div>
-      <h1>A 2D grid made with DRP</h1>
+      <h1>GRID</h1>
       <p>Your Peer ID: <span id="peerId"></span></p>
-      <p>Peers on dRAM: <span id="peers"></span></p>
-      <p>Discovery Peers: <span id="discoveryPeers"></span></p>
+      <p>Your Peers: <span id="peers"></span></p>
+      <p>Your Discovery Peers: <span id="discoveryPeers"></span></p>
 
-      <button id="createGrid">Spawn a new Grid DRP</button>
-      <span style="margin: 0 10px;">|</span>
-      <input id="gridInput" type="text" placeholder="Enter Grid DRP ID" />
-      <button id="joinGrid">Connect to existing Grid DRP</button>
       <p>
-        Connected to Grid DRP ID:
+        <button id="joinGrid" style="width: 80px">JOIN</button>
+        <span style="margin: 0 5px;"></span>
+        <input id="gridInput" type="text" placeholder="GRID ID" />
+        <span style="margin: 0 5px;"></span>
+        <span id="objectPeers"></span>
+      </p>
+
+      <p>
+        <button id="createGrid" style="width: 80px">CREATE</button>
+        <span style="margin: 0 5px;"></span>
+        <span id="gridIdText"></span>
         <span id="gridId" style="text-decoration: underline;"></span>
         <button id="copyGridId" style="margin-left: 10px; display: none;">Copy</button>
       </p>
-      <p>Peers in DRP: <span id="objectPeers"></span></p>
     </div>
 
     <div

diff --git a/examples/grid/src/index.ts b/examples/grid/src/index.ts
@@ -46,6 +46,10 @@ const getColorForNodeId = (id: string): string => {
 
 const render = () => {
 	if (drpObject) {
+		const gridIdTextElement = <HTMLSpanElement>(
+			document.getElementById("gridIdText")
+		);
+		gridIdTextElement.innerText = `You're in GRID ID:`;
 		const gridIdElement = <HTMLSpanElement>document.getElementById("gridId");
 		gridIdElement.innerText = drpObject.id;
 		const copyGridIdButton = document.getElementById("copyGridId");
@@ -73,7 +77,9 @@ const render = () => {
 	const element_objectPeers = <HTMLDivElement>(
 		document.getElementById("objectPeers")
 	);
-	element_objectPeers.innerHTML = `[${objectPeers.map((peer) => `<strong style="color: ${getColorForNodeId(peer)};">${formatNodeId(peer)}</strong>`).join(", ")}]`;
+	element_objectPeers.innerHTML = !gridDRP
+		? ""
+		: `Your frens in GRID: [${objectPeers.map((peer) => `<strong style="color: ${getColorForNodeId(peer)};">${formatNodeId(peer)}</strong>`).join(", ")}]`;
 
 	if (!gridDRP) return;
 	const users = gridDRP.getUsers();