lobby changed server confs

client/env.example

@@ -1,5 +1,5 @@
-# copy this file to .env.production and update the values
+# copy this file to .env and update the values. You can also create a different .env.prodution file for your release builds.
 
-VITE_WEBSOCKET_URL=ws://localhost:16800/ws
-VITE_HTTP_URL=http://localhost:16800
+# VITE_SERVER_URLS: comma-separated list of display_name:host:port:ssl describing the default servers in the frontend.
+VITE_SERVER_URLS=Local files:localhost:16800:0,Default server:pi.thissma.fr:16900:1
 

client/src/storage.ts

@@ -1,9 +1,10 @@
-const { VITE_WEBSOCKET_URL, VITE_HTTP_URL } = import.meta.env
+const { VITE_SERVER_URLS } = import.meta.env
 
 export interface ServerConfig {
   name: string
-  wsUrl: string
-  httpUrl: string
+  host: string
+  port: number
+  encrypted: boolean
 }
 
 interface StorageSpec {
@@ -18,17 +19,15 @@ interface StorageEntry<T> {
 
 type StorageEntries = { [K in keyof StorageSpec]: StorageEntry<StorageSpec[K]> }
 
-function cloneServerConf(conf: ServerConfig) {
-  const { wsUrl, httpUrl, name } = conf
-  return { wsUrl, httpUrl, name }
-}
-
 const entries: StorageEntries = {
   servers: {
     clone: function (confs: ServerConfig[]) {
-      return confs.map(cloneServerConf)
+      return confs.map(c => ({ ...c }))
     },
-    default: [{ name: 'Default Server', wsUrl: VITE_WEBSOCKET_URL, httpUrl: VITE_HTTP_URL }],
+    default: VITE_SERVER_URLS
+      .split(',')
+      .map(url => url.split(':'))
+      .map(([name, host, port, ssl]) => ({ name, host, port: parseInt(port), encrypted: ssl === '1' })),
   },
   currentServer: {
     clone: x => x,
@@ -37,7 +36,7 @@ const entries: StorageEntries = {
 }
 
 const storage = {
-  version: 2,
+  version: 3,
   init: function () {
     const storedVersion = parseInt(localStorage.getItem('version') ?? '0')
     if (storedVersion !== storage.version) {

client/src/ui/actions.ts

@@ -20,7 +20,9 @@ export async function downloadMap() {
   const serverConf_ = get(serverConfig)
   const rmap_ = get(rmap)
 
-  download(`${serverConf_.httpUrl}/maps/${rmap_.map.name}`, `${rmap_.map.name}.map`)
+  const httpUrl = `http${serverConf_.encrypted ? 's' : ''}://${serverConf_.host}:${serverConf_.port}`
+
+  download(`${httpUrl}/maps/${rmap_.map.name}`, `${rmap_.map.name}.map`)
 }
 
 export async function deleteMap() {

client/src/ui/index.svelte

@@ -14,7 +14,8 @@
     const serverId = storage.load('currentServer')
 
     $serverConfig = serverConfs[serverId]
-    $server = new WebSocketServer($serverConfig.wsUrl)
+    const wsUrl = `ws${$serverConfig.encrypted ? 's' : ''}://${$serverConfig.host}:${$serverConfig.port}/ws`
+    $server = new WebSocketServer(wsUrl)
 
     return new Promise((resolve, reject) => {
       $server.socket.addEventListener('open', resolve, { once: true })

client/src/ui/routes/edit.svelte

@@ -12,7 +12,8 @@
 
   let loadingSignal = (async () => {
     await $server.query('join', name)
-    const map_ = await queryMap($serverConfig.httpUrl, name)
+    const httpUrl = `http${$serverConfig.encrypted ? 's' : ''}://${$serverConfig.host}:${$serverConfig.port}`
+    const map_ = await queryMap(httpUrl, name)
     const ams = await $server.query('get/automappers', undefined)
     $automappers = Object.fromEntries(ams.map(am => [am.name, am]))
     $map = map_

client/src/ui/routes/lobby.svelte

@@ -38,6 +38,7 @@
   import { createMap, download, queryMaps, uploadMap } from '../lib/util'
   import type { ComboBoxItem } from 'carbon-components-svelte/types/ComboBox/ComboBox.svelte'
   import type { MapDetail } from '../../server/protocol'
+  import { onMount } from 'svelte'
 
   type SpinnerStatus = 'active' | 'inactive' | 'finished' | 'error'
   type ServerStatus = 'unknown' | 'connecting' | 'connected' | 'error' | 'online'
@@ -102,17 +103,39 @@
   }
 
   $: serverStatuses = serverConfs.map<ServerStatus>(_ =>  'unknown')
+  $: serverConf = serverConfs[serverId]
+  $: httpUrl = `http${serverConf.encrypted ? 's' : ''}://${serverConf.host}:${serverConf.port}`
 
-  $: {
+  onMount(() => {
+    selectServer(serverId)
+  })
+
+  function resetMapModal() {
+    modalCreateMap.uploadFile = null
+    modalCreateMap.clone = undefined
+    modalCreateMap.cloneItems = maps.map((m, i) => ({
+      id: i,
+      text: m.name,
+    }))
+  }
+
+  function setServerStatus(id: number, state: ServerStatus) {
+    serverStatuses[id] = state
+  }
+
+  function selectServer(id: number) {
+    serverId = id
     maps = []
 
     if (serverId >= serverConfs.length)
       serverId = 0
 
-    const id = serverId
     setServerStatus(id, 'connecting')
 
-    queryMaps(serverConfs[id].httpUrl)
+    const serverConf = serverConfs[id]
+    const httpUrl = `http${serverConf.encrypted ? 's' : ''}://${serverConf.host}:${serverConf.port}`
+
+    queryMaps(httpUrl)
       .then(m => {
         if (serverId === id) {
           maps = m
@@ -126,34 +149,16 @@
       })
   }
 
-  function resetMapModal() {
-    modalCreateMap.uploadFile = null
-    modalCreateMap.clone = undefined
-    modalCreateMap.cloneItems = maps.map((m, i) => ({
-      id: i,
-      text: m.name,
-    }))
-  }
-
-  function setServerStatus(id: number, state: ServerStatus) {
-    serverStatuses[id] = state
-  }
-
-  function onSelectServer(e: Event & { detail: string }) {
-    serverId = parseInt(e.detail)
-  }
-
   function onJoinMap(name: string) {
     navigate('/edit/' + name)
   }
 
   function onDeleteMap(mapName: string) {
-    const httpRoot = serverConfs[serverId].httpUrl
     modalConfirmDelete.name = mapName
     modalConfirmDelete.open = true
     modalConfirmDelete.onConfirm = async () => {
       try {
-        await fetch(`${httpRoot}/maps/${mapName}`, {
+        await fetch(`${httpUrl}/maps/${mapName}`, {
           method: 'DELETE'
         })
       } catch (e) {
@@ -169,17 +174,16 @@
   }
 
   function onDownloadMap(name: string) {
-    download(`${serverConfs[serverId].httpUrl}/maps/${name}`, `${name}.map`)
+    download(`${httpUrl}/maps/${name}`, `${name}.map`)
   }
 
   function onAddServer() {
     const { name, hostname, encrypted, port } = modalAddServer
-    const wsUrl = (encrypted ? 'wss://' : 'ws://') + hostname + ':' + port + '/ws'
-    const httpUrl = (encrypted ? 'https://' : 'http://') + hostname + ':' + port
     const conf: ServerConfig = {
       name,
-      wsUrl,
-      httpUrl,
+      host: hostname,
+      encrypted,
+      port,
     }
     serverConfs.push(conf)
     storage.save('servers', serverConfs)
@@ -201,10 +205,10 @@
 
     try {
       if (method === 'upload' && modalCreateMap.uploadFile !== null) {
-        await uploadMap(serverConfs[serverId].httpUrl, name, modalCreateMap.uploadFile)
+        await uploadMap(httpUrl, name, modalCreateMap.uploadFile)
       }
       else if (method === 'blank') {
-        await createMap(serverConfs[serverId].httpUrl, name, {
+        await createMap(httpUrl, name, {
           version: 'ddnet06', // TODO
           access,
           blank: {
@@ -214,7 +218,7 @@
         })
       }
       else if (method === 'clone' && modalCreateMap.clone !== undefined) {
-        await createMap(serverConfs[serverId].httpUrl, name, {
+        await createMap(httpUrl, name, {
           version: 'ddnet06',
           access,
           clone: maps[modalCreateMap.clone].name
@@ -289,13 +293,12 @@
           Add server
         </Button>
       </div>
-      <TileGroup on:select={onSelectServer}>
+      <TileGroup>
         {#each serverConfs as server, i}
-          {@const url = new URL(server.wsUrl)}
           {@const status = serverStatuses[i]}
-          <RadioTile value={'' + i}>
+          <RadioTile value={'' + i} checked={serverId === i} on:click={() => selectServer(i)}>
             <div style="font-weight: bold">{server.name}</div>
-            <div>({url.host}{url.protocol === 'ws:' ? ', unencrypted' : ''})</div>
+            <div>({server.host}{server.encrypted ? '' : ', unencrypted'})</div>
             <div>
               <InlineLoading
                 status={statusString[status][0]}

client/src/vite-env.d.ts

@@ -2,7 +2,7 @@
 /// <reference types="vite/client" />
 
 interface ImportMetaEnv {
-  readonly WEBSOCKET_URL: string
+  readonly VITE_SERVER_URLS: string
 }
 
 interface ImportMeta {