From 13a10508b3b50887051ca334a02fea3860c4cfab Mon Sep 17 00:00:00 2001
From: Mathis Brossier <mathis.brossier@gmail.com>
Date: Sun, 24 Nov 2024 13:12:10 +0100
Subject: [PATCH] fixes synchronization for automappers

---
 client/src/server/server.ts         |  2 +-
 client/src/ui/lib/AutomapperConfig  |  1 +
 client/src/ui/lib/automapper.svelte | 60 +++++++++++++----------------
 client/src/ui/lib/editLayer.svelte  | 46 +++++++++++++++-------
 client/src/ui/lib/editor.svelte     | 42 ++++----------------
 client/src/ui/lib/util.ts           |  4 +-
 client/src/ui/routes/edit.svelte    | 26 ++++++++++++-
 server/src/server.rs                | 54 +++++++++++++-------------
 server/src/util.rs                  |  2 +-
 9 files changed, 122 insertions(+), 115 deletions(-)
 create mode 100644 client/src/ui/lib/AutomapperConfig

diff --git a/client/src/server/server.ts b/client/src/server/server.ts
index 8c3a67c..0a48477 100755
--- a/client/src/server/server.ts
+++ b/client/src/server/server.ts
@@ -164,7 +164,7 @@ export class WebSocketServer extends EventDispatcher<Recv> implements Server {
 
     // we predict an ok response from the server and dispatch right away.
     // if the server replies with err(), or if the requests are out of order,
-    // the history will take care of resyncing.
+    // the history will take care of resyncing by undoing dirty predictions.
     this.dispatch(type as any, content, promise.then())
 
     this.socket.send(message)
diff --git a/client/src/ui/lib/AutomapperConfig b/client/src/ui/lib/AutomapperConfig
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/client/src/ui/lib/AutomapperConfig
@@ -0,0 +1 @@
+
diff --git a/client/src/ui/lib/automapper.svelte b/client/src/ui/lib/automapper.svelte
index 2731b51..0be02d4 100644
--- a/client/src/ui/lib/automapper.svelte
+++ b/client/src/ui/lib/automapper.svelte
@@ -1,22 +1,19 @@
 <script lang="ts">
-  import type { TilesLayer } from '../../twmap/tilesLayer'
-  import { lint as lintAutomapper, LintLevel, lintToString } from '../../twmap/automap'
+  import type { AutomapperConfig } from '../../twmap/mapdir'
+  import { lint as lintAutomapper, LintLevel } from '../../twmap/automap'
   import { showError, showInfo, showWarning } from './dialog'
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
-  import { server, automappers } from '../global'
-  import type { Recv } from 'src/server/protocol'
+  import { createEventDispatcher } from 'svelte'
+  import { server } from '../global'
 
-  export let layer: TilesLayer
+  export let automapper: AutomapperConfig | null
+  export let configs: string[]
 
-  let dispatch = createEventDispatcher<{ change: number }>()
-
-  $: configs = $automappers[layer.image?.name + '.rules']?.configs ?? []
+  let dispatch = createEventDispatcher<{ change: AutomapperConfig }>()
 
   async function onFileChange(e: Event) {
     const input = e.target as HTMLInputElement
     if (input.files === null || input.files.length === 0) return
     const file = input.files[0]
-    const name = file.name.replace(/.rules$/, '')
     const str = await file.text()
 
     // const newRules = parseAutomapper(str) ?? []
@@ -32,57 +29,54 @@
     }
 
     try {
-      await $server.query('create/automapper', [file.name, str])
+      const res = await $server.query('create/automapper', [file.name, str])
+      if (res.length !== 0) {
+        showWarning(
+          `Automapper has ${res.length} issues(s). Check the autommapper tab for more details.`
+        )
+      }
     } catch (e) {
       showError('Saving failed: ' + e)
       return
     }
 
-    showInfo(`Uploaded '${name}'.`, 'closable')
+    showInfo(`Uploaded '${file.name}'.`)
   }
 
   async function onConfig() {
-    dispatch('change', layer.automapper.config)
-  }
-
-  function onSync([_g, _l, e]: Recv['edit/layer']) {
-    if ('automapper_config' in e || 'image' in e) layer = layer
+    dispatch('change', automapper)
   }
-
-  onMount(() => {
-    $server.on('edit/layer', onSync)
-  })
-
-  onDestroy(() => {
-    $server.off('edit/layer', onSync)
-  })
 </script>
 
 <div class="edit-automapper">
   <label>
     Upload rules
-    <input type="file" placeholder="upload rules…" accept=".rules" on:change={onFileChange} />
+    <input type="file" placeholder="upload rules…" accept=".rules,.rpp" on:change={onFileChange} />
   </label>
 
   <label>
     Config
-    <select bind:value={layer.automapper.config} on:change={onConfig}>
-      <option value={-1}>None</option>
+    <select bind:value={automapper.config} on:change={onConfig}>
+      <option value={-1} selected={automapper.config === -1 || automapper.config === null}>
+        None
+      </option>
       {#each configs as conf, i}
-        <option value={i}>#{i} {conf}</option>
+        <option value={i} selected={automapper.config === i}>#{i} {conf}</option>
       {/each}
-      {#if layer.automapper.config >= configs.length}
-        <option value={layer.automapper.config}>#{layer.automapper.config} (missing)</option>
+      {#if automapper.config >= configs.length}
+        <option value={automapper.config} selected>
+          #{automapper.config} (missing)
+        </option>
       {/if}
     </select>
   </label>
 
   <label>
     Seed
-    <input type="number" bind:value={layer.automapper.seed} on:change={onConfig} />
+    <input type="number" bind:value={automapper.seed} on:change={onConfig} />
   </label>
   <label>
     Automatic
-    <input type="checkbox" bind:checked={layer.automapper.automatic} on:change={onConfig} />
+    <input type="checkbox" bind:checked={automapper.automatic} on:change={onConfig} />
   </label>
 </div>
diff --git a/client/src/ui/lib/editLayer.svelte b/client/src/ui/lib/editLayer.svelte
index 010ff41..0ca7784 100644
--- a/client/src/ui/lib/editLayer.svelte
+++ b/client/src/ui/lib/editLayer.svelte
@@ -4,6 +4,7 @@
   import type { Envelope } from '../../twmap/map'
   import { type FormInputEvent, layerKind } from './util'
   import { TilesLayerFlags } from '../../twmap/types'
+  import type { Group } from '../../twmap/group'
   import { AnyTilesLayer, TilesLayer, GameLayer } from '../../twmap/tilesLayer'
   import { QuadsLayer } from '../../twmap/quadsLayer'
   import { showInfo, showError, clearDialog } from '../lib/dialog'
@@ -23,14 +24,28 @@
   import type * as Info from '../../twmap/types'
   import type * as MapDir from '../../twmap/mapdir'
   import Number from './number.svelte'
+  import type { RenderLayer } from '../../gl/renderLayer'
+  import type { RenderGroup } from '../../gl/renderGroup'
 
   export let g: number, l: number
 
+  let rlayer: RenderLayer | null
+  let rgroup: RenderGroup | null
+  let layer: (TilesLayer | QuadsLayer) | null
+  let group: Group | null
+
   $: rgroup = g === -1 ? null : $rmap.groups[g]
   $: rlayer = l === -1 ? null : rgroup.layers[l]
   $: group = rgroup === null ? null : rgroup.group
   $: layer = rlayer === null ? null : (rlayer.layer as TilesLayer | QuadsLayer)
 
+  let amCfgs: string[]
+  $: if (syncImg && $syncImg !== null) {
+    amCfgs = $automappers[$syncImg.name + '.rules']?.configs ?? []
+  } else {
+    amCfgs = []
+  }
+
   function clamp(cur: number, min: number, max: number) {
     return Math.min(Math.max(min, cur), max)
   }
@@ -75,11 +90,11 @@
     }
   }
 
-  function amCfgName(img: string, cfg: number | null): string {
-    if (cfg === null) {
+  function amCfgName(cfgs: string[], cfg: number | null): string {
+    if (cfg === null || cfg === -1) {
       return 'None'
     } else {
-      return $automappers[img + '.rules']?.configs?.at(cfg) ?? `#${cfg} (missing)`
+      return cfgs.at(cfg) ?? `#${cfg} (missing)`
     }
   }
 
@@ -112,7 +127,7 @@
     }
     // new image from gallery
     else {
-      const [name, size] = e.detail
+      const [name, _size] = e.detail
       const url = externalImageUrl(name)
       const embed = await showInfo('Do you wish to embed this image?', 'yesno')
       if (embed) {
@@ -175,7 +190,7 @@
   let syncColorEnvOff: Writable<number>
   let syncImgs: Readable<Image[]>
   let syncImg: Readable<Image | null>
-  let syncAmCfg: Readable<number | null>
+  let syncAmCfg: Readable<MapDir.AutomapperConfig>
   let syncColEnvs: Readable<Envelope[]>
 
   $: syncGroup = sync($server, g, {
@@ -277,9 +292,9 @@
     },
   ])
   $: if (layer && layer instanceof TilesLayer) {
-    syncAmCfg = read($server, layer.automapper.config === -1 ? null : layer.automapper.config, {
+    syncAmCfg = read($server, layer.automapper, {
       query: 'edit/layer',
-      match: [g, l, { automapper_config: { config: pick } }],
+      match: [g, l, { automapper_config: pick }],
     })
   }
   $: if (layer && layer instanceof TilesLayer) {
@@ -325,18 +340,17 @@
     //   $rmap.automapLayer(g, l, conf, tlayer.automapper.seed)
     // }, 5000)
   }
-  async function onAutomapperChange() {
+  async function onAutomapperChange(cfg: MapDir.AutomapperConfig) {
     if (!layer) return
-    const automapper = (layer as TilesLayer).automapper
     await $server.query('edit/layer', [
       g,
       l,
       {
         type: layerKind(layer),
         automapper_config: {
-          config: automapper.config === -1 ? null : automapper.config,
-          seed: automapper.seed,
-          automatic: automapper.automatic,
+          config: cfg.config,
+          seed: cfg.seed,
+          automatic: cfg.automatic,
         },
       },
     ])
@@ -404,7 +418,7 @@
         </span>
         <input
           type="button"
-          value={amCfgName($syncImg?.name, $syncAmCfg)}
+          value={amCfgName(amCfgs, $syncAmCfg.config)}
           disabled={$syncImg === null}
           on:click={() => (automapperOpen = true)}
         />
@@ -412,7 +426,11 @@
       <ComposedModal bind:open={automapperOpen} size="sm" selectorPrimaryFocus=".bx--modal-close">
         <ModalHeader title="Automapper" />
         <ModalBody hasForm>
-          <AutomapperPicker {layer} on:change={onAutomapperChange} />
+          <AutomapperPicker
+            automapper={$syncAmCfg}
+            configs={amCfgs}
+            on:change={e => onAutomapperChange(e.detail)}
+          />
         </ModalBody>
       </ComposedModal>
       <button
diff --git a/client/src/ui/lib/editor.svelte b/client/src/ui/lib/editor.svelte
index 79f5ba4..aef7b43 100644
--- a/client/src/ui/lib/editor.svelte
+++ b/client/src/ui/lib/editor.svelte
@@ -2,32 +2,30 @@
   import { LayerType } from '../../twmap/types'
   import { AnyTilesLayer, GameLayer } from '../../twmap/tilesLayer'
   import { onMount, onDestroy } from 'svelte'
-  import { server, rmap, selected, automappers, anim, peers } from '../global'
+  import { server, rmap, selected, anim, peers } from '../global'
   import TreeView from './treeView.svelte'
-  import { showError } from './dialog'
   import EnvelopeEditor from './envelopeEditor.svelte'
   import * as Editor from './editor'
-  import { px2vw, rem2px } from './util'
+  import { px2vh, px2vw, rem2px } from './util'
   import { Pane, Splitpanes } from 'svelte-splitpanes'
   import LayerEditor from './editLayer.svelte'
   import GroupEditor from './editGroup.svelte'
   import MapEditor from './mapEditor.svelte'
   import { Add as CreateGroupIcon } from 'carbon-icons-svelte'
   import { Button } from 'carbon-components-svelte'
-  import { navigate } from 'svelte-routing'
   import { dataToTiles, tilesLayerFlagsToLayerKind } from '../../server/convert'
   import * as Actions from '../actions'
   import { viewport } from '../../gl/global'
   import Fence from './fence.svelte'
-  import type { AutomapperKind, Recv, Tiles } from '../../server/protocol'
+  import type { Recv, Tiles } from '../../server/protocol'
 
   // split panes
-  let layerPaneSize = px2vw(rem2px(10))
-  let propsPaneSize = px2vw(rem2px(10))
-  let envPaneSize = px2vw(rem2px(10))
+  let layerPaneSize = Math.min(33, px2vw(rem2px(15)))
+  let propsPaneSize = Math.min(33, px2vw(rem2px(15)))
+  let envPaneSize = Math.min(33, px2vh(rem2px(10)))
   let lastLayerPaneSize = layerPaneSize
   let lastPropsPaneSize = propsPaneSize
-  let lastEnvPaneSize = 20
+  let lastEnvPaneSize = envPaneSize
   let closedPaneThreshold = px2vw(rem2px(2))
 
   // computed (readonly)
@@ -83,26 +81,6 @@
       $rmap.editTile({ g, l, x, y, ...tile })
     }
   }
-  function serverOnDeleteAutomapper(e: Recv['delete/automapper']) {
-    delete $automappers[e]
-    $automappers = $automappers
-  }
-  function serverOnUploadAutomapper([name, file]: Recv['create/automapper']) {
-    const kind = name.slice(name.lastIndexOf('.') + 1) as AutomapperKind
-    const image = name.slice(0, name.lastIndexOf('.'))
-    $automappers[name] = {
-      name,
-      image,
-      file,
-      kind,
-    }
-    $automappers = $automappers
-  }
-  async function onServerClosed() {
-    await showError('You have been disconnected from the server.')
-    navigate('/')
-  }
-
   let signalLoaded: () => void
   let loadSignal: Promise<void> = new Promise(resolve => {
     signalLoaded = resolve
@@ -110,12 +88,9 @@
 
   onMount(() => {
     $selected = [$rmap.map.physicsLayerIndex(GameLayer)]
-    $server.socket.addEventListener('close', onServerClosed, { once: true })
     $server.on('users', serverOnUsers)
     $server.on('edit/tiles', serverOnEditTiles)
     $server.on('edit/automap', serverOnApplyAutomapper)
-    $server.on('delete/automapper', serverOnDeleteAutomapper)
-    $server.on('create/automapper', serverOnUploadAutomapper)
     $server.query('get/users', undefined).then(u => ($peers = u))
 
     viewport.canvas.addEventListener('mouseenter', onHoverCanvas)
@@ -124,12 +99,9 @@
   })
 
   onDestroy(() => {
-    $server.socket.removeEventListener('error', onServerClosed)
     $server.off('users', serverOnUsers)
     $server.off('edit/tiles', serverOnEditTiles)
     $server.off('edit/automap', serverOnApplyAutomapper)
-    $server.off('delete/automapper', serverOnDeleteAutomapper)
-    $server.off('create/automapper', serverOnUploadAutomapper)
 
     viewport.canvas.removeEventListener('mouseenter', onHoverCanvas)
   })
diff --git a/client/src/ui/lib/util.ts b/client/src/ui/lib/util.ts
index 174ebdd..96aca04 100644
--- a/client/src/ui/lib/util.ts
+++ b/client/src/ui/lib/util.ts
@@ -192,8 +192,8 @@ export function rem2px(rem: number) {
   return parseFloat(window.getComputedStyle(document.documentElement).fontSize) * rem
 }
 export function px2vw(px: number) {
-  return (px / window.screen.width) * 100
+  return (px / window.innerWidth) * 100
 }
 export function px2vh(px: number) {
-  return (px / window.screen.height) * 100
+  return (px / window.innerHeight) * 100
 }
diff --git a/client/src/ui/routes/edit.svelte b/client/src/ui/routes/edit.svelte
index 2ca5ccf..fafa6e2 100644
--- a/client/src/ui/routes/edit.svelte
+++ b/client/src/ui/routes/edit.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { server, serverCfg, map, automappers, view, View, reset } from '../global'
+  import { server, map, automappers, view, View, reset } from '../global'
   import { queryMap } from '../lib/util'
   import Editor from '../lib/editor.svelte'
   import EditAutomapper from '../lib/editAutomapper.svelte'
@@ -7,6 +7,8 @@
   import Fence from '../lib/fence.svelte'
   import { onDestroy, onMount } from 'svelte'
   import { showError } from '../lib/dialog'
+  import { navigate } from 'svelte-routing'
+  import type { Recv } from '../../server/protocol'
 
   export let name: string
   export let password: string
@@ -24,12 +26,34 @@
   function serverOnError(e: string) {
     showError(e[0].toUpperCase() + e.slice(1))
   }
+  async function serverOnDeleteAutomapper(_e: Recv['delete/automapper'], prom: Promise<void>) {
+    await prom
+    const ams = await $server.query('get/automappers', undefined)
+    $automappers = Object.fromEntries(ams.map(am => [am.name, am]))
+  }
+  async function serverOnCreateAutomapper(_e: Recv['create/automapper'], prom: Promise<void>) {
+    await prom
+    const ams = await $server.query('get/automappers', undefined)
+    $automappers = Object.fromEntries(ams.map(am => [am.name, am]))
+  }
+  async function onServerClosed() {
+    await showError('You have been disconnected from the server.')
+    navigate('/')
+  }
 
   onMount(() => {
+    $server.socket.addEventListener('close', onServerClosed, { once: true })
+    $server.on('delete/automapper', serverOnDeleteAutomapper)
+    $server.on('create/automapper', serverOnCreateAutomapper)
+
     $server.onError(serverOnError)
   })
 
   onDestroy(() => {
+    $server.socket.removeEventListener('error', onServerClosed)
+    $server.off('delete/automapper', serverOnDeleteAutomapper)
+    $server.off('create/automapper', serverOnCreateAutomapper)
+
     $server.onError(() => {})
     $server.query('leave', name)
   })
diff --git a/server/src/server.rs b/server/src/server.rs
index 89f3166..e2c6514 100644
--- a/server/src/server.rs
+++ b/server/src/server.rs
@@ -1332,32 +1332,29 @@ impl Server {
                     .filter_map(|e| e.ok())
                     .filter_map(|e| {
                         let path = e.path();
-                        if let Some(kind) = is_automapper(&path) {
-                            let name = e.file_name().to_string_lossy().into_owned();
-                            let image = path
-                                .file_stem()
-                                .unwrap_or_default()
-                                .to_string_lossy()
-                                .into_owned();
-                            let configs = (kind == AutomapperKind::DDNet)
-                                .then(|| {
-                                    let file = std::fs::read_to_string(&path).ok()?;
-                                    let am =
-                                        twmap::automapper::Automapper::parse(image.clone(), &file)
-                                            .ok()?;
-                                    Some(am.configs.iter().map(|c| c.name.to_owned()).collect())
-                                })
-                                .flatten();
-
-                            Some(AutomapperDetail {
-                                name,
-                                image,
-                                kind,
-                                configs,
+                        let kind = automapper_kind(&path)?;
+                        let name = e.file_name().to_string_lossy().into_owned();
+                        let image = path
+                            .file_stem()
+                            .unwrap_or_default()
+                            .to_string_lossy()
+                            .into_owned();
+                        let configs = (kind == AutomapperKind::DDNet)
+                            .then(|| {
+                                let file = std::fs::read_to_string(&path).ok()?;
+                                let am = twmap::automapper::Automapper::parse(image.clone(), &file)
+                                    .ok()?;
+                                Some(am.configs.iter().map(|c| c.name.to_owned()).collect())
                             })
-                        } else {
-                            None
-                        }
+                            .flatten();
+                        log::info!("get autommapers");
+
+                        Some(AutomapperDetail {
+                            name,
+                            image,
+                            kind,
+                            configs,
+                        })
                     })
                     .collect();
                 Ok(automappers)
@@ -1380,7 +1377,7 @@ impl Server {
             .ok_or(Error::AutomapperNotFound)?
             .join(am);
 
-        if is_automapper(&path).is_none() {
+        if automapper_kind(&path).is_none() {
             return Err(Error::AutomapperNotFound);
         }
 
@@ -1466,10 +1463,11 @@ impl Server {
             ))?
             .join(am);
 
-        let kind = is_automapper(&path).ok_or(Error::InvalidFileName)?;
+        let kind = automapper_kind(&path).ok_or(Error::InvalidFileName)?;
 
         std::fs::create_dir_all(room.automapper_path().unwrap()).ok();
         std::fs::write(&path, file).map_err(|e| Error::Internal(e.to_string().into()))?;
+        log::info!("automapper write");
 
         if kind == AutomapperKind::RulesPP {
             match self.compile_rpp(&path) {
@@ -1523,7 +1521,7 @@ impl Server {
             .ok_or(Error::AutomapperNotFound)?
             .join(am);
 
-        if is_automapper(&path).is_none() {
+        if automapper_kind(&path).is_none() {
             return Err(Error::InvalidFileName);
         }
 
diff --git a/server/src/util.rs b/server/src/util.rs
index 41544e6..8f8dd6b 100644
--- a/server/src/util.rs
+++ b/server/src/util.rs
@@ -84,7 +84,7 @@ pub(crate) fn set_layer_height<T: twmap::TilemapLayer>(
     Ok(())
 }
 
-pub(crate) fn is_automapper(path: &Path) -> Option<AutomapperKind> {
+pub(crate) fn automapper_kind(path: &Path) -> Option<AutomapperKind> {
     let extensions = &[
         ("rules", AutomapperKind::DDNet),
         ("rpp", AutomapperKind::RulesPP),