set cookie for room and peerUrl

packages/play-standalone/src/pages/index.astro

@@ -55,21 +55,80 @@ import { navigate } from "astro:transitions/client";
     <h1>Nestri Play</h1>
     <div>
       <label for="room">Room</label>
-      <input type="text" id="room" name="room" required>
+      <input type="text" id="room" name="room" required list="room-list">
+      <datalist id="room-list"></datalist>
     </div>
     <div>
       <label for="peerURL">peerURL</label>
-      <input type="text" id="peerURL" name="peerURL" required>
+      <input type="text" id="peerURL" name="peerURL" required list="peerURL-list">
+      <datalist id="peerURL-list"></datalist>
     </div>
     <button type="submit">Join</button>
   </form>
 
   <script>
     import { navigate } from "astro:transitions/client";
-    document.getElementById('join-form').addEventListener('submit', function(event) {
+
+    const roomInput = document.getElementById('room') as HTMLInputElement;
+    const peerURLInput = document.getElementById('peerURL') as HTMLInputElement;
+    const roomList = document.getElementById('room-list');
+    const peerURLList = document.getElementById('peerURL-list');
+
+    // Load values from cookies
+    function getCookie(name) {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) {
+        const cookieValue = parts.pop()?.split(';').shift();
+        return cookieValue ? decodeURIComponent(cookieValue) : undefined;
+      }
+    }
+
+    function setCookie(name, value, days) {
+      const d = new Date();
+      d.setTime(d.getTime() + (days*24*60*60*1000));
+      const expires = "expires="+ d.toUTCString();
+      document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/";
+    }
+
+    const storedRooms = JSON.parse(getCookie('nestri-rooms') || '[]');
+    const storedPeerURLs = JSON.parse(getCookie('nestri-peerURLs') || '[]');
+
+    if (roomList) {
+      storedRooms.forEach(room => {
+        const option = document.createElement('option');
+        option.value = room;
+        roomList.appendChild(option);
+      });
+    }
+
+    if (peerURLList) {
+      storedPeerURLs.forEach(peerURL => {
+        const option = document.createElement('option');
+        option.value = peerURL;
+        peerURLList.appendChild(option);
+      });
+    }
+
+    if (storedRooms.length > 0 && roomInput) {
+      roomInput.value = storedRooms[0];
+    }
+    if (storedPeerURLs.length > 0 && peerURLInput) {
+      peerURLInput.value = storedPeerURLs[0];
+    }
+
+    document.getElementById('join-form')?.addEventListener('submit', function(event) {
       event.preventDefault();
-      const room = (document.getElementById('room') as HTMLInputElement).value;
-      const peerURL = (document.getElementById('peerURL') as HTMLInputElement).value;
+      const room = roomInput.value;
+      const peerURL = peerURLInput.value;
+
+      // Save values to cookies
+      const newRooms = [room, ...storedRooms.filter(r => r !== room)].slice(0, 10);
+      const newPeerURLs = [peerURL, ...storedPeerURLs.filter(p => p !== peerURL)].slice(0, 10);
+
+      setCookie('nestri-rooms', JSON.stringify(newRooms), 365);
+      setCookie('nestri-peerURLs', JSON.stringify(newPeerURLs), 365);
+
       if (room && peerURL) {
         navigate(`/play/index.html?peerURL=${encodeURIComponent(peerURL)}#${room}`);
       }