Deploy

apps/frontend/components/home/table/row/HomeTableRowProfessionMoxie.svelte

@@ -2,16 +2,12 @@
     import sortBy from 'lodash/sortBy';
 
     import { Constants } from '@/data/constants';
-    import { currencyGood } from '@/data/currencies';
-    import { imageStrings } from '@/data/icons';
     import { professionMoxie } from '@/data/professions/moxie';
     import { wowthingData } from '@/shared/stores/data';
-    import { timeStore } from '@/shared/stores/time';
-    import { getCurrencyData } from '@/utils/characters/get-currency-data';
     import { getProfessionSortKey } from '@/utils/professions';
     import type { CharacterProps } from '@/types/props';
 
-    import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
+    import Currency from '@/shared/components/currencies/Currency.svelte';
 
     let { character }: CharacterProps = $props();
 
@@ -35,14 +31,30 @@
 
 <style lang="scss">
     td {
-        --width: calc(var(--width-profession) * 2);
+        --padding-left: 0;
+        --padding-right: 0;
+        --profession-width: 3.6rem;
+        --width: calc(var(--profession-width) * 2);
 
         border-left: 1px solid var(--border-color);
         text-align: right;
         word-spacing: -0.2ch;
     }
     .flex-wrapper {
         width: 100%;
+        align-items: center;
+        display: grid;
+        gap: 0.5rem;
+        grid-template-columns: repeat(2, var(--profession-width));
+        padding: 0 0.3rem;
+
+        :global(.currency) {
+            --image-margin-top: 0;
+
+            align-items: center;
+            display: flex;
+            justify-content: space-between;
+        }
     }
     .faded {
         opacity: 0.7;
@@ -62,22 +74,11 @@
 
 <td>
     <div class="flex-wrapper">
-        {#each professions as profession}
-            {@const currencyId = professionMoxie[profession.id]}
-            {@const { amount, amountRaw, tooltip } = getCurrencyData(
-                $timeStore,
-                character,
-                wowthingData.static.currencyById.get(currencyId)
+        {#each professions as profession (profession.id)}
+            {@const moxieCurrency = wowthingData.static.currencyById.get(
+                professionMoxie[profession.id]
             )}
-            {@const good = currencyGood[currencyId] || 0}
-            <div
-                class="moxie"
-                class:status-success={good && amountRaw >= good}
-                data-tooltip={tooltip}
-            >
-                <WowthingImage name={imageStrings[profession.slug]} size={20} border={1} />
-                <span>{amount}</span>
-            </div>
+            <Currency {character} currency={moxieCurrency} />
         {/each}
     </div>
 </td>

apps/frontend/shared/components/currencies/Currency.svelte

@@ -36,8 +36,12 @@
             }
         } else {
             const goodValue = currencyGood[currency.id];
-            if (goodValue && data.amountRaw >= goodValue) {
-                return 'status-success';
+            if (goodValue) {
+                if (data.amountRaw >= goodValue) {
+                    return 'status-success';
+                } else if (data.amountRaw >= goodValue * 0.9) {
+                    return 'status-shrug';
+                }
             }
         }
     }

apps/frontend/user-home/components/currencies/TableRow.svelte

@@ -35,7 +35,7 @@
     <td
         class:alt={sortingBy}
         class:status-success={good && amountRaw >= good}
-        class:status-shrug={percent > 50 && percent < 90}
+        class:status-shrug={(percent > 50 && percent < 90) || (good && amountRaw >= good * 0.9)}
         class:status-warn={percent >= 90 && percent < 100}
         class:status-fail={percent >= 100}
         class:faded={amount === '0' && percent === 0}