splashscreen is now smaller, big cleanup on aisle themes - removed a lot unnecessary sync/awaits and promises that were sequential anyway

2024-09-17 05:04:52 +03:00 · 2024-09-17 05:04:52 +03:00 · 7550b8cbd2
parent 6c5fc53789
commit 7550b8cbd2
10 changed files with 362 additions and 249 deletions
--- a/index.html
+++ b/index.html
@ -4,6 +4,101 @@
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
    <link rel="icon" type="image/png" href="/favicon.png">
+    <style id="splashscreen">
+     #webpack-hot-middleware-clientOverlay {
+       z-index: 9999999999999999999999999999;
+     }
+
+     #splash {
+       --scale: 1;
+       width: 100vw;
+       height: 100vh;
+       display: grid;
+       grid-template-rows: auto;
+       grid-template-columns: auto;
+       align-content: center;
+       align-items: center;
+       justify-content: center;
+       justify-items: center;
+       flex-direction: column;
+       background: #0f161e;
+       font-family: sans-serif;
+       color: #b9b9ba;
+       position: absolute;
+       z-index: 9999;
+       font-size: calc(1vw + 1vh + 1vmin);
+     }
+
+     #splash-container {
+       align-items: center;
+     }
+
+     #mascot-container {
+       display: flex;
+       align-items: flex-end;
+       justify-content: center;
+     }
+
+     #mascot:not(.orz) {
+       margin-bottom: 2em
+       object-position: 2.5em 0;
+     }
+
+     #mascot-temp.orz {
+       margin-bottom: 2em
+       object-position: 2.5em 0;
+     }
+
+     #mascot,
+     #mascot-temp {
+       width: calc(10em * var(--scale));
+       height: calc(8em * var(--scale));
+       object-fit: contain;
+       object-position: bottom;
+     }
+
+     #throbber {
+       display: grid;
+       width: calc(5em * 0.5 * var(--scale));
+       height: calc(8em * 0.5 * var(--scale));
+       grid-template-rows: repeat(8, 1fr);
+       grid-template-columns: repeat(5, 1fr);
+       grid-template-areas: "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . L L"
+                            "P P . . ."
+                            "P P . . ."
+                            "P P . E E"
+                            "P P . E E";
+     }
+
+     .chunk {
+       background-color: #e2b188;
+       box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+     }
+
+     #chunk-P {
+       grid-area: P;
+       border-top-left-radius:  calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-L {
+       grid-area: L;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #chunk-E {
+       grid-area: E;
+       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+     }
+
+     #status {
+       line-height: 2;
+       width: 100%;
+       text-align: center;
+     }
+    </style>
    <style id="pleroma-eager-styles" type="text/css"></style>
    <style id="pleroma-lazy-styles" type="text/css"></style>
    <!--server-generated-meta-->
@ -11,95 +106,23 @@
  <body style="margin: 0; padding: 0">
    <noscript>To use Pleroma, please enable JavaScript.</noscript>
    <!-- putting styles here to avoid having to wait for styles to load up -->
-    <div id="splash" style="
-      width: 100vw;
-      height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      background: #0f161e;
-      font-family: sans-serif;
-      color: #b9b9ba;
-      position: absolute;
-      z-index: 999999;
-      "
-    >
-      <img
-        style="
-          width: 30vh;
-          margin-top: 1vh;
-          margin-bottom: 0.5vh;
-        "
-        src="/static/pleromatan_apology_fox.png"
-      />
-      <div
-        id="throbber"
-        style='
-          --logoChunkSize: 2vh;
-          display: grid;
-          margin-top: 2.5vh;
-          margin-bottom: 0.5vh;
-          width: 30vw;
-          grid-template-rows: repeat(8, var(--logoChunkSize));
-          grid-template-columns: repeat(5, var(--logoChunkSize));
-          grid-template-areas: "P P . L L"
-                               "P P . L L"
-                               "P P . L L"
-                               "P P . L L"
-                               "P P . . ."
-                               "P P . . ."
-                               "P P . E E"
-                               "P P . E E";
-          width: auto;
-        '
-      >
-        <div
-          style="
-            background-color: #e2b188;
-            grid-area: P;
-            border-top-left-radius:  calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
+    <div id="splash">
+      <div id="splash-container">
+        <div id="mascot-container">
+          <div id="throbber">
+            <div class="chunk" id="chunk-P">
+            </div>
+            <div class="chunk" id="chunk-L">
+            </div>
+            <div class="chunk" id="chunk-E">
+            </div>
+          </div>
+          <img id="mascot" src="/static/pleromatan_apology_fox.png">
        </div>
-        <div
-          style="
-            width: 100%;
-            height: 100%;
-            background-color: #e2b188;
-            grid-area: L;
-            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
+        <div id="status" class="css-ok">
+          <!-- (｡>﹏<) -->
+          <span class="initial-text">(｡&gt;﹏&lt;)</span>
        </div>
-        <div
-          style="
-            width: 100%;
-            height: 100%;
-            background-color: #e2b188;
-            grid-area: E;
-            border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-            box-shadow: 0.1vh 0.1vh 1vh 0 #e2b188;
-          "
-        >
-        </div>
-      </div>
-      <div
-        id="status"
-        class="css-ok"
-        style="
-        margin-top: 3.5vh;
-        height: 4vh;
-        line-height: 4vh;
-        font-size: 4vh;
-        width: 100%;
-        text-align: center;
-        "
-      >
-        <!-- (｡>﹏<) -->
-        <span class="initial-text">(｡&gt;﹏&lt;)</span>
      </div>
    </div>
    <div id="app" class="hidden"></div>
--- a/src/App.scss
+++ b/src/App.scss
@ -919,7 +919,6 @@ option {
  pointer-events: none;
  transition: opacity 2s;
  opacity: 1;
-  z-index: 9999999999999999999999999999;

  &.hidden {
    opacity: 0;
@ -938,13 +937,80 @@ option {
    }
  }

+  #mascot-container {
+    perspective: 60em;
+    perspective-origin: 0 -15em;
+    transform-style: preserve-3d;
+  }
+
  #throbber {
-    animation-duration: 2s;
+    animation-duration: 3s;
    animation-name: bounce;
    animation-iteration-count: infinite;
    animation-direction: normal;
    transform-origin: bottom center;

+    --defaultY: 0;
+
+    &.dead {
+      animation-name: dead;
+      animation-duration: 3s;
+      // animation-iteration-count: 1;
+      animation-iteration-count: 1;
+      transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+    }
+
+    @keyframes dead {
+      0% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      5% {
+        transform: rotateX(0) rotateY(0) rotateZ(1deg);
+      }
+
+      10% {
+        transform: rotateX(0) rotateY(0) rotateZ(-2deg);
+      }
+
+      15% {
+        transform: rotateX(0) rotateY(0) rotateZ(3deg);
+      }
+
+      20% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      25% {
+        transform: rotateX(0) rotateY(0) rotateZ(0);
+      }
+
+      30% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      35% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      40% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      45% {
+        transform: rotateX(-10deg) rotateY(0) rotateZ(0);
+      }
+
+      50% {
+        transform: rotateX(10deg) rotateY(0) rotateZ(0);
+      }
+
+      100% {
+        transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
+        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
+      }
+    }
+
    @keyframes bounce {
      0% {
        scale: 1 1;
@ -955,24 +1021,28 @@ option {
      10% {
        scale: 1.2 0.8;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }

      30% {
        scale: 0.9 1.1;
        translate: 0 -40%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      40% {
        scale: 1.1 0.9;
        translate: 0 -50%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      45% {
        scale: 0.9 1.1;
        translate: 0 -45%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

@ -985,30 +1055,35 @@ option {
      55% {
        scale: 0.985 1.025;
        translate: 0 -35%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      60% {
        scale: 1.0125 0.9985;
        translate: 0 -30%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in;
      }

      80% {
        scale: 1.0063 0.9938;
        translate: 0 -10%;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-in-ou;
      }

      90% {
        scale: 1.2 0.8;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }

      100% {
        scale: 1 1;
        translate: 0 0;
+        transform: rotateZ(var(--defaultZ));
        animation-timing-function: ease-out;
      }
    }
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@ -327,11 +327,7 @@ const setConfig = async ({ store }) => {

 const checkOAuthToken = async ({ store }) => {
  if (store.getters.getUserToken()) {
-    try {
-      await store.dispatch('loginUser', store.getters.getUserToken())
-    } catch (e) {
-      console.error(e)
-    }
+    return store.dispatch('loginUser', store.getters.getUserToken())
  }
  return Promise.resolve()
 }
@ -349,10 +345,15 @@ const afterStoreSetup = async ({ store, i18n }) => {
  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
  store.dispatch('setInstanceOption', { name: 'server', value: server })

+  document.querySelector('#status').textContent = i18n.global.t('splash.settings')
  await setConfig({ store })
-  await store.dispatch('setTheme')
-
  document.querySelector('#status').textContent = i18n.global.t('splash.theme')
+  try {
+    await store.dispatch('setTheme').catch((e) => { console.log(e) })
+  } catch (e) {
+    return Promise.reject(e)
+  }
+
  applyConfig(store.state.config, i18n.global)

  // Now we can try getting the server settings and logging in
@ -363,7 +364,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
    getInstancePanel({ store }),
    getNodeInfo({ store }),
    getInstanceConfig({ store })
-  ])
+  ]).catch(e => Promise.reject(e))

  // Start fetching things that don't need to block the UI
  store.dispatch('fetchMutes')
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@ -1406,11 +1406,12 @@
    "loading": "Loading...",
    "theme": "Applying theme, please wait warmly...",
    "instance": "Getting instance info...",
-    "splines": "Reticulating splines...",
-    "almost": "Almost there!",
-    "fun_1": "Drink more water!",
+    "settings": "Applying settings...",
+    "almost": "Reticulating splines...",
+    "fun_1": "Drink more water",
    "fun_2": "Take it easy!",
-    "fun_3": "Suya..",
-    "fun_4": "#cofe"
+    "fun_3": "Suya...",
+    "fun_4": "My Pleroma machine is full power!",
+    "error": "Something went wrong"
  }
 }
--- a/src/main.js
+++ b/src/main.js
@ -48,6 +48,16 @@ const i18n = createI18n({

 messages.setLanguage(i18n.global, currentLocale)

+const splashError = (i18n, e) => {
+  document.querySelector('#mascot').src = (Math.floor(Math.random() * 2) > 0)
+    ? '/static/pleromatan_orz_fox.png'
+    : '/static/pleromatan_orz.png'
+  document.querySelector('#mascot').classList.add('orz')
+  document.querySelector('#throbber').classList.add('dead')
+  document.querySelector('#status').textContent = i18n.global.t('splash.error')
+  console.error('PleromaFE failed to initialize: ', e)
+}
+
 const persistedStateOptions = {
  paths: [
    'serverSideStorage.cache',
@ -58,57 +68,61 @@ const persistedStateOptions = {
 };

 (async () => {
-  let storageError = false
-  const plugins = [pushNotifications]
  try {
-    const persistedState = await createPersistedState(persistedStateOptions)
-    plugins.push(persistedState)
-  } catch (e) {
-    console.error(e)
-    storageError = true
-  }
-  document.querySelector('#status').removeAttribute('class')
-  document.querySelector('#status').textContent = i18n.global.t('splash.loading')
-  const store = createStore({
-    modules: {
-      i18n: {
-        getters: {
-          i18n: () => i18n.global
-        }
+    let storageError
+    const plugins = [pushNotifications]
+    try {
+      const persistedState = await createPersistedState(persistedStateOptions)
+      plugins.push(persistedState)
+    } catch (e) {
+      console.error('Storage error', e)
+      storageError = e
+    }
+    document.querySelector('#status').removeAttribute('class')
+    document.querySelector('#status').textContent = i18n.global.t('splash.loading')
+    const store = createStore({
+      modules: {
+        i18n: {
+          getters: {
+            i18n: () => i18n.global
+          }
+        },
+        interface: interfaceModule,
+        instance: instanceModule,
+        // TODO refactor users/statuses modules, they depend on each other
+        users: usersModule,
+        statuses: statusesModule,
+        notifications: notificationsModule,
+        lists: listsModule,
+        api: apiModule,
+        config: configModule,
+        profileConfig: profileConfigModule,
+        serverSideStorage: serverSideStorageModule,
+        adminSettings: adminSettingsModule,
+        shout: shoutModule,
+        oauth: oauthModule,
+        authFlow: authFlowModule,
+        mediaViewer: mediaViewerModule,
+        oauthTokens: oauthTokensModule,
+        reports: reportsModule,
+        polls: pollsModule,
+        postStatus: postStatusModule,
+        editStatus: editStatusModule,
+        statusHistory: statusHistoryModule,
+        chats: chatsModule,
+        announcements: announcementsModule
      },
-      interface: interfaceModule,
-      instance: instanceModule,
-      // TODO refactor users/statuses modules, they depend on each other
-      users: usersModule,
-      statuses: statusesModule,
-      notifications: notificationsModule,
-      lists: listsModule,
-      api: apiModule,
-      config: configModule,
-      profileConfig: profileConfigModule,
-      serverSideStorage: serverSideStorageModule,
-      adminSettings: adminSettingsModule,
-      shout: shoutModule,
-      oauth: oauthModule,
-      authFlow: authFlowModule,
-      mediaViewer: mediaViewerModule,
-      oauthTokens: oauthTokensModule,
-      reports: reportsModule,
-      polls: pollsModule,
-      postStatus: postStatusModule,
-      editStatus: editStatusModule,
-      statusHistory: statusHistoryModule,
-      chats: chatsModule,
-      announcements: announcementsModule
-    },
-    plugins,
-    strict: false // Socket modifies itself, let's ignore this for now.
-    // strict: process.env.NODE_ENV !== 'production'
-  })
-  if (storageError) {
-    store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+      plugins,
+      strict: false // Socket modifies itself, let's ignore this for now.
+      // strict: process.env.NODE_ENV !== 'production'
+    })
+    if (storageError) {
+      store.dispatch('pushGlobalNotice', { messageKey: 'errors.storage_unavailable', level: 'error' })
+    }
+    return await afterStoreSetup({ store, i18n })
+  } catch (e) {
+    splashError(i18n, e)
  }
-  afterStoreSetup({ store, i18n })
 })()

 // These are inlined by webpack's DefinePlugin
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@ -230,27 +230,27 @@ const interfaceMod = {

      const forceRecompile = forceThemeRecompilation || recompile

-      let promise = null
+      let result = null

      if (themeData) {
-        promise = Promise.resolve(normalizeThemeData(themeData))
+        result = normalizeThemeData(themeData)
      } else if (themeName) {
-        promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+        result = normalizeThemeData(getPreset(themeName))
+          .then(themeData => normalizeThemeData(themeData))
      } else if (userThemeSource || userThemeSnapshot) {
-        promise = Promise.resolve(normalizeThemeData({
+        result = normalizeThemeData({
          _pleroma_theme_version: 2,
          theme: userThemeSnapshot,
          source: userThemeSource
-        }))
-      } else if (actualThemeName && actualThemeName !== 'custom') {
-        promise = getPreset(actualThemeName).then(themeData => {
-          const realThemeData = normalizeThemeData(themeData)
-          if (actualThemeName === instanceThemeName) {
-            // This sole line is the reason why this whole block is above the recompilation check
-            commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
-          }
-          return realThemeData
        })
+      } else if (actualThemeName && actualThemeName !== 'custom') {
+        const themeData = actualThemeName
+        const realThemeData = normalizeThemeData(themeData)
+        if (actualThemeName === instanceThemeName) {
+          // This sole line is the reason why this whole block is above the recompilation check
+          commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
+        }
+        result = realThemeData
      } else {
        throw new Error('Cannot load any theme!')
      }
@ -259,95 +259,91 @@ const interfaceMod = {
      // cache (tryLoadCache return true if load successful)
      if (!forceRecompile && !themeDebug && tryLoadCache()) {
        dispatch('setThemeApplied')
-        return
+        return Promise.resolve()
      }

-      promise
-        .then(realThemeData => {
-          const theme2ruleset = convertTheme2To3(realThemeData)
+      const realThemeData = result
+      const theme2ruleset = convertTheme2To3(realThemeData)

-          if (saveData) {
-            commit('setOption', { name: 'theme', value: themeName || actualThemeName })
-            commit('setOption', { name: 'customTheme', value: realThemeData })
-            commit('setOption', { name: 'customThemeSource', value: realThemeData })
+      if (saveData) {
+        commit('setOption', { name: 'theme', value: themeName || actualThemeName })
+        commit('setOption', { name: 'customTheme', value: realThemeData })
+        commit('setOption', { name: 'customThemeSource', value: realThemeData })
+      }
+      const hacks = []
+
+      Object.entries(theme3hacks).forEach(([key, value]) => {
+        switch (key) {
+          case 'fonts': {
+            Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+              if (!font?.family) return
+              switch (fontKey) {
+                case 'interface':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'input':
+                  hacks.push({
+                    component: 'Input',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'post':
+                  hacks.push({
+                    component: 'RichContent',
+                    directives: {
+                      '--font': 'generic | ' + font.family
+                    }
+                  })
+                  break
+                case 'monospace':
+                  hacks.push({
+                    component: 'Root',
+                    directives: {
+                      '--monoFont': 'generic | ' + font.family
+                    }
+                  })
+                  break
+              }
+            })
+            break
          }
-          const hacks = []
-
-          Object.entries(theme3hacks).forEach(([key, value]) => {
-            switch (key) {
-              case 'fonts': {
-                Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
-                  if (!font?.family) return
-                  switch (fontKey) {
-                    case 'interface':
-                      hacks.push({
-                        component: 'Root',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'input':
-                      hacks.push({
-                        component: 'Input',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'post':
-                      hacks.push({
-                        component: 'RichContent',
-                        directives: {
-                          '--font': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                    case 'monospace':
-                      hacks.push({
-                        component: 'Root',
-                        directives: {
-                          '--monoFont': 'generic | ' + font.family
-                        }
-                      })
-                      break
-                  }
-                })
-                break
+          case 'underlay': {
+            if (value !== 'none') {
+              const newRule = {
+                component: 'Underlay',
+                directives: {}
              }
-              case 'underlay': {
-                if (value !== 'none') {
-                  const newRule = {
-                    component: 'Underlay',
-                    directives: {}
-                  }
-                  if (value === 'opaque') {
-                    newRule.directives.opacity = 1
-                    newRule.directives.background = '--wallpaper'
-                  }
-                  if (value === 'transparent') {
-                    newRule.directives.opacity = 0
-                  }
-                  hacks.push(newRule)
-                }
-                break
+              if (value === 'opaque') {
+                newRule.directives.opacity = 1
+                newRule.directives.background = '--wallpaper'
              }
+              if (value === 'transparent') {
+                newRule.directives.opacity = 0
+              }
+              hacks.push(newRule)
            }
-          })
+            break
+          }
+        }
+      })

-          const ruleset = [
-            ...theme2ruleset,
-            ...hacks
-          ]
+      const ruleset = [
+        ...theme2ruleset,
+        ...hacks
+      ]

-          applyTheme(
-            ruleset,
-            () => dispatch('setThemeApplied'),
-            themeDebug
-          )
-        })
-
-      return promise
+      applyTheme(
+        ruleset,
+        () => dispatch('setThemeApplied'),
+        themeDebug
+      )
    }
  }
 }
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@ -43,16 +43,16 @@ const adoptStyleSheets = (styles) => {
  // is nothing to do here.
 }

-export const generateTheme = async (inputRuleset, callbacks, debug) => {
+export const generateTheme = (inputRuleset, callbacks, debug) => {
  const {
    onNewRule = (rule, isLazy) => {},
    onLazyFinished = () => {},
    onEagerFinished = () => {}
  } = callbacks

-  // Assuming that "worst case scenario background" is panel background since it's the most likely one
  const themes3 = init({
    inputRuleset,
+    // Assuming that "worst case scenario background" is panel background since it's the most likely one
    ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
    debug
  })
@ -146,11 +146,11 @@ export const tryLoadCache = () => {
  }
 }

-export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
+export const applyTheme = (input, onFinish = (data) => {}, debug) => {
  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)

-  const { lazyProcessFunc } = await generateTheme(
+  const { lazyProcessFunc } = generateTheme(
    input,
    {
      onNewRule (rule, isLazy) {
@ -185,8 +185,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
  )

  setTimeout(lazyProcessFunc, 0)
-
-  return Promise.resolve()
 }

 const extractStyleConfig = ({
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@ -196,6 +196,11 @@ export const init = ({
    return rule
  })

+  const i = 4
+  if (2 + 2 === i) {
+    throw new Error('test')
+  }
+
  const ruleset = rulesetUnsorted
    .map((data, index) => ({ data, index }))
    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
--- a/static/pleromatan_orz.png
+++ b/static/pleromatan_orz.png
--- a/static/pleromatan_orz_fox.png
+++ b/static/pleromatan_orz_fox.png