swarm disclaimer and tracker chooser for frontend

frontend/package.json

@@ -13,6 +13,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@iconify-icons/bi": "^1.2.17",
+    "@iconify-icons/ic": "^1.2.13",
+    "@iconify-icons/maki": "^1.2.18",
+    "@iconify/svelte": "^3.1.4",
     "@rollup/browser": "^3.28.0",
     "@sveltejs/vite-plugin-svelte": "^2.4.5",
     "autoprefixer": "^10.4.15",
@@ -22,7 +26,6 @@
     "esbuild": "^0.19.1",
     "esbuild-plugin-inline-import": "^1.0.1",
     "firebase": "^10.1.0",
-    "tracker-list": "workspace:*",
     "m3-svelte": "^2.0.3",
     "postcss": "^8.4.27",
     "postcss-load-config": "^4.0.1",
@@ -30,6 +33,7 @@
     "svelte": "^4.2.0",
     "svelte-preprocess": "^5.0.4",
     "tailwindcss": "^3.3.3",
+    "tracker-list": "workspace:*",
     "typescript": "^5.1.6",
     "uuid": "^9.0.0",
     "vite": "^4.4.9",

frontend/src/App.svelte

@@ -11,10 +11,18 @@
     Button,
     Card,
     CircularProgressIndeterminate,
+    Dialog,
+    SegmentedButtonContainer,
+    SegmentedButtonItem,
     StyleFromScheme,
     TextField,
   } from "m3-svelte";
 
+  import iconDiscord from "@iconify-icons/ic/outline-discord";
+  import iconGithub from "@iconify-icons/bi/github";
+  import iconArrow from "@iconify-icons/maki/arrow";
+  import Icon from "@iconify/svelte";
+
   import type { Transport } from "protocol";
 
   import Proxy from "./Proxy.svelte";
@@ -38,6 +46,10 @@
 
   let connectionState = "";
 
+  let showSwarmWarning = false;
+  let showLogin = false;
+  let chosenTracker: keyof typeof TrackerList | undefined;
+
   function onTransportOpen() {
     console.log("Transport opened");
 
@@ -74,7 +86,8 @@
   }
 
   async function initFirebase() {
-    let tracker = TrackerList["us-central-1"];
+    if (!chosenTracker) return;
+    let tracker = TrackerList[chosenTracker];
     initializeApp(tracker.firebase);
   }
 
@@ -162,29 +175,92 @@
     </Card>
   </div>
 {:else if !import.meta.env.VITE_ADRIFT_DEV}
-  <div id="loginpage">
+  <div id="topbar" class="flex justify-between items-center p-4">
-    <div class="bigcard">
+    <div id="logo">
-      <h1>Adrift</h1>
+      <Card type="">
+        <h3 class="text-xl">Adrift</h3>
+      </Card>
     </div>
-
+    <div id="nav">
-    <div class="flex justify-evenly">
+      <!-- <Card type="outlined">
-      <Card type="filled">basically aero 2</Card>
+        <div id="quickmenu">
-      <div />
+          <a href="httsp" class="text-med m-2">About</a>
+          <a
+            href="https://github.com/MercuryWorkshop/adrift"
+            class="text-med m-2">Source</a
+          >
+        </div>
+      </Card> -->
+    </div>
+    <div id="links">
       <Card type="elevated">
-        <TextField name="email" bind:value={email} />
+        <div class="flex">
-        <TextField
+          <a href="https://discord.gg/bAgNyGpXSx">
-          name="password"
+            <Icon icon={iconDiscord} class="icon" />
-          bind:value={password}
+          </a>
-          extraOptions={{ type: "password" }}
+          <spacer />
-        />
+          <a href="https://github.com/MercuryWorkshop/adrift">
+            <Icon icon={iconGithub} class="icon" />
+          </a>
+        </div>
+      </Card>
+    </div>
+  </div>
+  <div id="loginpage">
+    <div class="flex justify-evenly">
+      <Card type="filled">
+        <SegmentedButtonContainer>
+          {#each Object.keys(TrackerList) as tracker}
+            <input
+              type="radio"
+              id={tracker}
+              name="tabs"
+              value={tracker}
+              bind:group={chosenTracker}
+            />
+            <SegmentedButtonItem input={tracker}>{tracker}</SegmentedButtonItem>
+          {/each}
+        </SegmentedButtonContainer>
 
-        <Button type="outlined" on:click={connectAccount}
+        {#if chosenTracker}
-          >Connect with firebase</Button
+          <Button type="elevated" on:click={() => (showSwarmWarning = true)}
-        >
+            >Connect to the swarm</Button
+          >
+          <Button type="filled" on:click={() => (showLogin = true)}
+            >Connect with login</Button
+          >
+        {/if}
 
-        <Button type="filled" on:click={connectSwarm}
+        <Dialog headline="WARNING" open={showSwarmWarning}>
-          >Connect with the swarm (firebase, webrtc, insecure)
+          <h2 class="text-2xl">
-        </Button>
+            TLS has not currently been implemented for the Adrift Swarm. Your
+            data will not be private, and you should not sign into any accounts
+            that you care much about
+          </h2>
+          <br />
+          <Button type="filled" on:click={() => (showLogin = false)}
+            >Cancel</Button
+          >
+          <Button type="outlined" on:click={connectSwarm}
+            >I understand, Connect</Button
+          >
+        </Dialog>
+
+        <Dialog headline="Log in to Connect" open={showLogin}>
+          <TextField name="email" bind:value={email} />
+          <TextField
+            name="password"
+            bind:value={password}
+            extraOptions={{ type: "password" }}
+          />
+
+          <div class="flex">
+            <Button type="outlined" on:click={() => (showLogin = false)}
+              >Cancel</Button
+            >
+            <Button type="filled" on:click={connectAccount}>Connect</Button>
+          </div>
+        </Dialog>
       </Card>
     </div>
   </div>
@@ -288,9 +364,18 @@
 />
 
 <style>
+  :global(.icon) {
+    font-size: 2em;
+  }
   :global(.pad-children > *) {
     margin: 2rem;
   }
+  :global(#nav > *) {
+    padding: 0.5em;
+  }
+  spacer {
+    margin: 1em;
+  }
   #loginpage {
     padding: 2.5em;
   }

pnpm-lock.yaml

@@ -288,6 +288,18 @@ importers:
 
   frontend:
     dependencies:
+      '@iconify-icons/bi':
+        specifier: ^1.2.17
+        version: 1.2.17
+      '@iconify-icons/ic':
+        specifier: ^1.2.13
+        version: 1.2.13
+      '@iconify-icons/maki':
+        specifier: ^1.2.18
+        version: 1.2.18
+      '@iconify/svelte':
+        specifier: ^3.1.4
+        version: 3.1.4(svelte@4.2.0)
       '@rollup/browser':
         specifier: ^3.28.0
         version: 3.28.0
@@ -3048,12 +3060,24 @@ packages:
       - supports-color
     dev: true
 
+  /@iconify-icons/bi@1.2.17:
+    resolution: {integrity: sha512-HWNkGtigLf8nYRZjqB0L3cDXik5urLl5Fsipesc/QcnjfozaHcZBH4VjGsZHiPzfEH+EtjGWi9WBUA2SLsiKjQ==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: false
+
   /@iconify-icons/ic@1.2.13:
     resolution: {integrity: sha512-9Y3DLark8PYGtsHuWqbYxo2xAquL9vFQBZKRkpHuntyQJxBDLsfm3OO8mRbj2EmaAQR65pecH77DqQaLnN7yJQ==}
     dependencies:
       '@iconify/types': 2.0.0
     dev: false
 
+  /@iconify-icons/maki@1.2.18:
+    resolution: {integrity: sha512-H/BJ0FLzoGB2KyYtfs88zLY5L7Ns/CXOvzbE7Ge9AKdCTsDJG5CnN5Kj71Zp3OYAH4ikpqZDkE4K34A/EjkVPA==}
+    dependencies:
+      '@iconify/types': 2.0.0
+    dev: false
+
   /@iconify/svelte@3.1.4(svelte@4.2.0):
     resolution: {integrity: sha512-YDwQlN46ka8KPRayDb7TivmkAPizfTXi6BSRNqa1IV0+byA907n8JcgQafA7FD//pW5XCuuAhVx6uRbKTo+CfA==}
     peerDependencies:

tracker-list/src/index.ts

@@ -1,17 +1,4 @@
-let trackers: {
+let trackers = {
-  [name: string]: {
-    firebase: {
-      apiKey: string;
-      authDomain: string;
-      projectId: string;
-      storageBucket: string;
-      messagingSenderId: string;
-      appId: string;
-      measurementId: string;
-    }
-    tracker: string;
-  }
-} = {
   "us-central-1": {
     firebase: {
       apiKey: "AIzaSyCs1LOqsbrAjymIcjvbKxPhFQWXlSPiLTs",
@@ -23,6 +10,18 @@ let trackers: {
       measurementId: "G-L0P2EF6Q72",
     },
     tracker: "wss://lb1.mercurywork.shop"
+  },
+  "rafftracker": {
+    firebase: {
+      apiKey: "AIzaSyCs1LOqsbrAjymIcjvbKxPhFQWXlSPiLTs",
+      authDomain: "adrift-6c1f6.firebaseapp.com",
+      projectId: "adrift-6c1f6",
+      storageBucket: "adrift-6c1f6.appspot.com",
+      messagingSenderId: "175846512414",
+      appId: "1:175846512414:web:5c6e06d231ab58e9029b0f",
+      measurementId: "G-L0P2EF6Q72",
+    },
+    tracker: "wss://lb1.mercurywork.shop"
   }
 };
 export default trackers;

tracker/src/main.ts

@@ -34,6 +34,7 @@ let ids: string[] = ["dummy"];
 
 reff.on("value", snapshot => {
   let val = snapshot.val();
+  console.log(val);
   if (!val) return;
 
   if (Object.keys(val) == ids) {