Merge pull request #126 from Blipz/bugfixes

Fix untranslated strings when using edition link
Azgaar · Sep 3, 2023 · 628efc6 · 628efc6
2 parents b4939cd + 685d0c3
commit 628efc6
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 82 deletions.
diff --git a/src/components/App.svelte b/src/components/App.svelte
@@ -12,7 +12,7 @@
   import UploadVector from "./navigation/UploadVector.svelte";
   import Tinctures from "./navigation/Tinctures.svelte";
   import Message from "./Message.svelte";
-  import {background, size, history, matrices, matrix, state, message, shield} from "data/stores";
+  import {background, size, history, isTextReady, matrices, matrix, state, message, shield} from "data/stores";
   import {shields} from "data/shields";
   import {rw} from "scripts/utils";
   import "scripts/i18n";
@@ -82,7 +82,7 @@
 
     if (coaParam || seedParam) {
       if (from === "FMG") {
-        message.info($t("info.tipFromFmg"), 10000);
+        message.info("info.tipFromFmg", 10000);
       }
 
       $matrices[0] = [0];
@@ -138,7 +138,7 @@
     {#if $state.vector}<UploadVector />{/if}
     {#if $state.tinctures}<Tinctures />{/if}
 
-    {#if $message}<Message />{/if}
+    {#if $message && $isTextReady}<Message />{/if}
   </div>
 {/if}
 <WindowEvents />

diff --git a/src/components/Message.svelte b/src/components/Message.svelte
@@ -2,6 +2,7 @@
   // @ts-check
   import {onMount} from "svelte";
   import {fly, fade} from "svelte/transition";
+  import {t} from "svelte-i18n";
   import {message} from "data/stores";
 
   const {text, type, timeout} = $message;
@@ -16,7 +17,7 @@
 </script>
 
 <div class={type} in:fly={{y: 200, duration: 500}} out:fade={{duration: 300}} on:click={() => message.clear()}>
-  {text}
+  {$t(text)}
 </div>
 
 <style>

diff --git a/src/components/editor/Editor.svelte b/src/components/editor/Editor.svelte
@@ -1,7 +1,7 @@
 <script>
   import {t, dictionary, locale} from "svelte-i18n";
   import {fade, fly, slide} from "svelte/transition";
-  import {changes, grid, history, message, shield, showGrid, state, tinctures, iconedNav} from "data/stores";
+  import {changes, grid, history, isTextReady, message, shield, showGrid, state, tinctures} from "data/stores";
   import {charges, divisions, ordinaries} from "data/dataModel";
   import {generate} from "scripts/generator";
   import {ra, rw} from "scripts/utils";
@@ -322,15 +322,15 @@
   }
 
   if (!("ontouchstart" in window) && (coa.ordinaries || coa.charges)) {
-    if (!$message) message.info($t("info.tipEditControls"));
+    if (!$message) message.info("info.tipEditControls");
   }
 
   function isRaster(charge) {
     const el = document.getElementById(charge);
     return el ? el.tagName === "image" : false;
   }
 
-  const translateSafely = (group, key) => {
+  $: translateSafely = (group, key) => {
     const isInDictionary = $dictionary?.[$locale]?.[group]?.[key];
     return isInDictionary ? $t(`${group}.${key}`) : key;
   };
@@ -345,7 +345,11 @@
 
   <div id="menu" in:fly={{x: isLandscape ? 1000 : 0, y: isLandscape ? 0 : 1000, duration: 1000}}>
     <!-- Field -->
-    <div class="section" class:expanded={section.field} on:click={toggleSection("field")}>{$t("tinctures.field")}</div>
+    <div class="section" class:expanded={section.field} on:click={toggleSection("field")}>
+      {#if $isTextReady}
+        {$t("tinctures.field")}
+      {/if}
+    </div>
     {#if section.field}
       <div class="panel" transition:slide>
         <div class="subsection">
@@ -394,7 +398,9 @@
 
     <!-- Division -->
     <div class="section" class:expanded={section.division} on:click={toggleSection("division")}>
-      {$t("tinctures.division")}: {translateSafely("divisions", menu.division.division)}
+      {#if $isTextReady}
+        {$t("tinctures.division")}: {translateSafely("divisions", menu.division.division)}
+      {/if}
     </div>
     {#if section.division}
       <div class="panel" transition:slide>
@@ -472,14 +478,16 @@
         class:expanded={section.ordinary[i]}
         on:click={toggleSection("ordinary", i)}
       >
-        {$t("editor.ordinary")}{menu.ordinaries.length > 1 ? ` ${i + 1}` : ""}: {translateSafely(
-          "ordinaries",
-          o.ordinary
-        )}
-        {#if o.above}
-          <i>[{$t("editor.aboveCharges")}]</i>
+        {#if $isTextReady}
+          {$t("editor.ordinary")}{menu.ordinaries.length > 1 ? ` ${i + 1}` : ""}: {translateSafely(
+            "ordinaries",
+            o.ordinary
+          )}
+          {#if o.above}
+            <i>[{$t("editor.aboveCharges")}]</i>
+          {/if}
+          <EditorControls bind:els={menu.ordinaries} el={o} {i} />
         {/if}
-        <EditorControls bind:els={menu.ordinaries} el={o} {i} />
       </div>
       {#if section.ordinary[i]}
         <div class="panel" transition:slide>
@@ -522,11 +530,13 @@
     <!-- Charges -->
     {#each menu.charges as charge, i}
       <div class="section" transition:slide class:expanded={section.charge[i]} on:click={toggleSection("charge", i)}>
-        {$t("tinctures.charge")}{menu.charges.length > 1 ? ` ${i + 1}` : ""}: {translateSafely(
-          "charges",
-          charge.charge
-        )}
-        <EditorControls bind:els={menu.charges} el={charge} {i} />
+        {#if $isTextReady}
+          {$t("tinctures.charge")}{menu.charges.length > 1 ? ` ${i + 1}` : ""}: {translateSafely(
+            "charges",
+            charge.charge
+          )}
+          <EditorControls bind:els={menu.charges} el={charge} {i} />
+        {/if}
       </div>
       {#if section.charge[i]}
         <div class="panel" transition:slide>
@@ -575,8 +585,10 @@
       {/if}
     {/each}
 
-    <div class="buttonLine" on:click={addOrdinary}>{$t("editor.addOrdinary")}</div>
-    <div class="buttonLine" on:click={addCharge}>{$t("editor.addCharge")}</div>
+    {#if $isTextReady}
+      <div class="buttonLine" on:click={addOrdinary}>{$t("editor.addOrdinary")}</div>
+      <div class="buttonLine" on:click={addCharge}>{$t("editor.addCharge")}</div>
+    {/if}
   </div>
 </main>
 

diff --git a/src/components/navigation/Tinctures.svelte b/src/components/navigation/Tinctures.svelte
@@ -41,12 +41,12 @@
     const min = +target.min;
 
     if (isNaN(newValue)) {
-      message.error($t("error.mustBeNumber"));
+      message.error("error.mustBeNumber");
       return;
     }
 
     if (newValue < min) {
-      message.error($t("error.valueCannotBeThatLow"));
+      message.error("error.valueCannotBeThatLow");
       target.value = String(min);
       return;
     }
@@ -59,7 +59,7 @@
     const newValue = +target.value;
 
     if (isNaN(newValue)) {
-      message.error($t("error.mustBeNumber"));
+      message.error("error.mustBeNumber");
       return;
     }
 
@@ -68,7 +68,7 @@
       typeTinctures[tinctureName] = 0;
       const totalChance = Object.values(typeTinctures).reduce((a, b) => a + b, 0);
       if (totalChance < 1) {
-        message.error($t("error.totalChanceMustNotBeZero"));
+        message.error("error.totalChanceMustNotBeZero");
         target.value = String(1);
         return;
       }
@@ -86,7 +86,7 @@
 
   function addTincture() {
     addLine.show = true;
-    message.info($t("info.tipAddTincture"), 8000);
+    message.info("info.tipAddTincture", 8000);
   }
 
   function cancelAddTincture() {
@@ -101,15 +101,15 @@
     const name = camelize(addLine.name);
 
     if (!name || $colors[name]) {
-      message.error($t("error.nonUniqueTincture"));
+      message.error("error.nonUniqueTincture");
       return;
     }
 
     $tinctures[addLine.type][name] = addLine.chance;
     $colors[name] = addLine.color;
     addLine.show = false;
     addLine.name = "";
-    message.info($t("success.tinctureAdded"));
+    message.info("success.tinctureAdded");
   }
 
   function restoreDefault() {
@@ -118,7 +118,7 @@
     localStorage.removeItem("tinctures");
     localStorage.removeItem("colors");
     loaded = [];
-    message.info($t("info.restoredDefaults"));
+    message.info("info.restoredDefaults");
   }
 
   function getTinctureName(tinctureName: string) {

diff --git a/src/components/navigation/UploadRaster.svelte b/src/components/navigation/UploadRaster.svelte
@@ -28,12 +28,12 @@
     const file = files.length ? files[0] : [];
 
     if (!file.type.match(/image.*/)) {
-      message.error($t("error.notAnImage"));
+      message.error("error.notAnImage");
       return;
     }
 
     selected = true;
-    message.info($t("info.tipUploadImageSize"));
+    message.info("info.tipUploadImageSize");
     name = camelize(file.name);
     loadImage(file);
   };
@@ -65,7 +65,7 @@
     name = camelize(name);
 
     if (!name || document.getElementById(name) || allCharges.includes(name)) {
-      message.error($t("error.notUniqueName"));
+      message.error("error.notUniqueName");
       return;
     }
 
@@ -88,7 +88,7 @@
 
     selected = false;
     $state.raster = 0;
-    message.success($t("success.chargeAdded"));
+    message.success("success.chargeAdded");
   }
 </script>
 

diff --git a/src/components/navigation/UploadVector.svelte b/src/components/navigation/UploadVector.svelte
@@ -43,7 +43,7 @@
     const file = files.length ? files[0] : [];
 
     if (!file.type.match(/text.*|svg.*/)) {
-      message.error($t("error.notSvgOrText"));
+      message.error("error.notSvgOrText");
       return;
     }
 
@@ -79,7 +79,7 @@
 
       const g = el.querySelector("g");
       if (!g) {
-        message.error($t("error.incorrectSvg"));
+        message.error("error.incorrectSvg");
         selected = false;
         return;
       }
@@ -103,7 +103,7 @@
     name = camelize(name);
 
     if (!name || document.getElementById(name) || allCharges.includes(name)) {
-      message.error($t("error.notUniqueName"));
+      message.error("error.notUniqueName");
       return;
     }
 
@@ -124,7 +124,7 @@
 
     selected = false;
     $state.vector = 0;
-    message.success($t("success.chargeAdded"));
+    message.success("success.chargeAdded");
   }
 
   function downloadTemplate() {

diff --git a/src/components/navigation/header/Navbar.svelte b/src/components/navigation/header/Navbar.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   // @ts-check
-  import {iconedNav, state} from "data/stores";
+  import {iconedNav, isTextReady, state} from "data/stores";
   import Logo from "./menu/Logo.svelte";
   import Options from "./menu/options/Options.svelte";
   import Rollback from "./menu/Rollback.svelte";
@@ -20,26 +20,28 @@
 
 <nav>
   <Logo />
-  <Options />
-  <Rollback />
-  <Reroll />
-  <Save />
-  <Upload />
-  <Install />
+  {#if $isTextReady}
+    <Options />
+    <Rollback />
+    <Reroll />
+    <Save />
+    <Upload />
+    <Install />
 
-  {#if $iconedNav && $state.edit}
-    <Other />
-  {:else}
-    <Language />
-    <License />
-    <Support />
-    <About />
-  {/if}
+    {#if $iconedNav && $state.edit}
+      <Other />
+    {:else}
+      <Language />
+      <License />
+      <Support />
+      <About />
+    {/if}
 
-  {#if $state.edit}
-    <Undo />
-    <Redo />
-    <Back />
+    {#if $state.edit}
+      <Undo />
+      <Redo />
+      <Back />
+    {/if}
   {/if}
 </nav>
 

diff --git a/src/components/navigation/header/menu/Install.svelte b/src/components/navigation/header/menu/Install.svelte
@@ -21,7 +21,7 @@
   });
 
   window.addEventListener("appinstalled", () => {
-    message.success($t("success.install"));
+    message.success("success.install");
   });
 </script>
 

diff --git a/src/components/navigation/header/menu/Save.svelte b/src/components/navigation/header/menu/Save.svelte
@@ -16,7 +16,7 @@
         }, 500);
       },
       err => {
-        message.error($t("error.copyToClipboard"));
+        message.error("error.copyToClipboard");
         console.error(err);
       }
     );
@@ -25,19 +25,19 @@
   function copyEditLink() {
     const coa = ($changes[0] as string).replaceAll("#", "%23");
     const url = location.origin + location.pathname + "?coa=" + coa;
-    copyToClipboard(url, $t("success.copyEditLink"));
+    copyToClipboard(url, "success.copyEditLink");
   }
 
   function copyApiLink() {
     const encoded = encodeURI($changes[0] as string);
     const API = "https://armoria.herokuapp.com/";
     const url = `${API}?size=500&format=png&coa=${encoded}`;
-    copyToClipboard(url, $t("success.copyApiLink"));
+    copyToClipboard(url, "success.copyApiLink");
   }
 
   function copyCoaString() {
     const encoded = encodeURI($changes[0] as string);
-    copyToClipboard(encoded, $t("success.copyCoaString"));
+    copyToClipboard(encoded, "success.copyCoaString");
   }
 </script>
 

diff --git a/src/components/navigation/header/shared/NavLabel.svelte b/src/components/navigation/header/shared/NavLabel.svelte
@@ -1,12 +1,11 @@
 <script lang="ts">
   // @ts-check
   import {fade} from "svelte/transition";
-  import {isTextReady} from "data/stores";
 
   export let label: string = undefined;
 </script>
 
-{#if label && $isTextReady}
+{#if label}
   <span in:fade={{duration: 100}}>
     {label}
   </span>