Fixes to merchants in PF2e

fantasycalendar · Apr 11, 2023 · 6d5897e · 6d5897e
1 parent dd639d1
commit 6d5897e
Show file tree

Hide file tree

Showing 10 changed files with 260 additions and 126 deletions.
diff --git a/changelog.md b/changelog.md
@@ -2,7 +2,9 @@
 
 ## Version 2.6.2
 
-- Fixed character price modifiers throwing errors
+- Improved loading speed of merchants by a factor of five in systems with item based currencies
+- Fixed buying items in systems with item based currencies would not work if change was to be given to the buyer
+- Fixed editing character price modifiers throwing errors
 
 ## Version 2.6.1
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
   "dependencies": {
     "@typhonjs-fvtt/runtime": "^0.0.22",
     "@typhonjs-fvtt/svelte-standard": "^0.0.23",
-    "svelte": "^3.57.0"
+    "svelte": "^3.57.0",
+    "svelte-virtual-scroll-list": "^1.1.0"
   },
   "devDependencies": {
     "@league-of-foundry-developers/foundry-vtt-types": "^9.238.1",

diff --git a/src/API/private-api.js b/src/API/private-api.js
@@ -2217,7 +2217,7 @@ export default class PrivateAPI {
         }], { type: "currency" });
       } else {
         await buyerTransaction.appendItemChanges([{
-          item: change.item, quantity: change.quantity
+          item: change.data.item, quantity: change.quantity
         }], { type: "currency" });
       }
     }

diff --git a/src/applications/merchant-app/MerchantItemEntry.svelte b/src/applications/merchant-app/MerchantItemEntry.svelte
@@ -1,9 +1,11 @@
 <script>
   import { fade } from 'svelte/transition';
 
-  export let item;
-  export let index;
-  export let columns;
+  export let data;
+
+  let item = data.item;
+  let index = data.index;
+  let columns = data.columns;
 
   const itemName = item.name;
   const itemImage = item.img;
@@ -30,8 +32,7 @@
 		 class:item-piles-child-even-color={index%2===0}
 		 class:item-piles-child-odd-color={index%2===1}
 		 class:merchant-item-hidden={itemFlagData.hidden}
-		 style="flex: 1 0 auto;"
-		 transition:fade|local={{duration: 250}}>
+		 style="flex: 1 0 auto;">
 
 	{#each columns as column}
 		{#if column?.data}
@@ -46,15 +47,6 @@
 
 <style lang="scss">
 
-
-  .item-piles-item-row:global(.item-piles-child-even-color > *) {
-    background-color: var(--item-piles-even-color);
-  }
-
-  .item-piles-item-row:global(.item-piles-child-odd-color > *) {
-    background-color: var(--item-piles-odd-color);
-  }
-
   .item-piles-item-row {
     margin: 0;
     overflow: visible;

diff --git a/src/applications/merchant-app/MerchantItemListHeader.svelte b/src/applications/merchant-app/MerchantItemListHeader.svelte
@@ -0,0 +1,61 @@
+<script>
+
+  import CategoryHeader from "./CategoryHeader.svelte";
+
+  export let data;
+
+  let store = data.store;
+  let columns = data.columns;
+  let category = data.category;
+  let first = data.first;
+
+  const sortTypeStore = store.sortType;
+  const inverseSortStore = store.inverseSort;
+  const editPrices = store.editPrices;
+
+</script>
+
+<div class="item-piles-item-list-header">
+	{#each columns as column, columnIndex}
+		{#if columnIndex === 0 && category}
+			<CategoryHeader {store} {category}/>
+		{:else if column.label && (columnIndex > 0 || !category) && first && !$editPrices}
+			<div class="item-piles-small-text">
+				<a on:click={() => {
+              $inverseSortStore = $sortTypeStore === columnIndex+1 ? !$inverseSortStore : false;
+              $sortTypeStore = columnIndex+1;
+						}}>
+					{column.label}
+					<i class="fas"
+						 class:fa-chevron-down={!$inverseSortStore && $sortTypeStore === columnIndex+1}
+						 class:fa-chevron-up={$inverseSortStore && $sortTypeStore === columnIndex+1}
+					></i>
+				</a>
+			</div>
+		{:else if !$editPrices}
+			<div></div>
+		{/if}
+	{/each}
+</div>
+
+<style lang="scss">
+
+  .item-piles-item-list-header {
+    display: contents;
+
+    & > * {
+      height: 1.5rem;
+      margin-top: 10px;
+      margin-bottom: 5px;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+      padding: 0 5px;
+      display: flex;
+      align-items: center;
+
+      &:not(:first-child) {
+        justify-content: center;
+      }
+    }
+  }
+
+</style>
diff --git a/src/applications/merchant-app/MerchantItemTab.svelte b/src/applications/merchant-app/MerchantItemTab.svelte
@@ -3,7 +3,9 @@
   import { localize } from "@typhonjs-fvtt/runtime/svelte/helper";
   import MerchantItemEntry from "./MerchantItemEntry.svelte";
   import CategoryHeader from "./CategoryHeader.svelte";
-  import { get } from "svelte/store";
+  import { get, writable } from "svelte/store";
+  import { VirtualScroll } from "svelte-virtual-scroll-list";
+  import MerchantItemListHeader from "./MerchantItemListHeader.svelte";
 
   export let store;
   export let noItemsLabel = "ITEM-PILES.Merchant.NoItemsForSale";
@@ -26,8 +28,8 @@
 
   $: categoryDropDown = $itemCategoriesStore.filter(category => category.service === services);
   $: categories = $categoryStore.filter(category => category.service === services);
-	$: items = $itemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
-	$: visibleItems = $visibleItemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
+  $: items = $itemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
+  $: visibleItems = $visibleItemsStore.filter(item => Boolean(get(item.itemFlagData)?.isService) === services)
 
   let columns = [];
   $: {
@@ -40,7 +42,61 @@
     ]
   }
 
+  let itemListStore = writable([])
+  let header = false;
+  $: {
+    $sortTypeStore;
+    $editPrices;
+    itemListStore.update(itemList => {
+      itemList = [];
+      header = false;
+      if ($sortTypeStore === 0 || $editPrices) {
+        let first = true;
+        for (const category of categories) {
+          itemList.push({
+            id: category.type,
+            component: MerchantItemListHeader,
+            category,
+            columns,
+            store,
+            first
+          })
+          first = false;
+          $itemsPerCategoryStore[category.type].items.forEach((item, index) => {
+            itemList.push({
+              id: item.id,
+              component: MerchantItemEntry,
+              item,
+              index,
+              columns: $itemColumns
+            })
+          });
+        }
+      } else {
+        header = {
+          id: randomID(),
+          component: MerchantItemListHeader,
+          category: false,
+          columns,
+          store,
+          first: true,
+        }
+        items.forEach((item, index) => {
+          itemList.push({
+            id: item.id,
+            component: MerchantItemEntry,
+            item,
+            index,
+            columns: $itemColumns
+          })
+        });
+      }
+      return itemList;
+    })
+  }
+
 </script>
+
 <div class="item-piles-flexrow">
 	<input bind:value={$searchStore} placeholder="Type to search..." type="text">
 	{#if categoryDropDown.length > 1}
@@ -58,67 +114,20 @@
 	</select>
 </div>
 
-<div class="item-piles-items-list" style="grid-template-columns: auto repeat({columns.length-1}, max-content);">
-
-	{#if $sortTypeStore === 0 || $editPrices}
-
-		{#each categories as category, index (category.type)}
-
-			<div class="item-piles-item-list-header">
-				{#each columns as column, columnIndex}
-					{#if columnIndex === 0}
-						<CategoryHeader {store} {category}/>
-					{:else if column.label && columnIndex > 0 && index === 0 && !$editPrices}
-						<div class="item-piles-small-text">
-							<a on:click={() => {
-              $inverseSortStore = $sortTypeStore === columnIndex+1 ? !$inverseSortStore : false;
-              $sortTypeStore = columnIndex+1;
-						}}>
-								{column.label}
-								<i class="fas"
-									 class:fa-chevron-down={!$inverseSortStore && $sortTypeStore === columnIndex+1}
-									 class:fa-chevron-up={$inverseSortStore && $sortTypeStore === columnIndex+1}
-								></i>
-							</a>
-						</div>
-					{:else if !$editPrices}
-						<div></div>
-					{/if}
-				{/each}
-			</div>
-			{#each $itemsPerCategoryStore[category.type].items as item, itemIndex (item.id)}
-				<MerchantItemEntry {item} index={itemIndex} columns={$itemColumns}/>
-			{/each}
-
-		{/each}
-
-	{:else}
-
-		<div class="item-piles-item-list-header">
-			{#each columns as column, columnIndex}
-				{#if column.label}
-					<div class="item-piles-small-text" class:item-piles-merchant-first-label={!columnIndex}>
-						<a on:click={() => {
-              $inverseSortStore = $sortTypeStore === columnIndex + 1 ? !$inverseSortStore : false;
-              $sortTypeStore = columnIndex + 1;
-						}}>
-							{column.label}
-							<i class="fas"
-								 class:fa-chevron-down={!$inverseSortStore && $sortTypeStore === columnIndex+1}
-								 class:fa-chevron-up={$inverseSortStore && $sortTypeStore === columnIndex+1}
-							></i>
-						</a>
-					</div>
-				{:else}
-					<div></div>
-				{/if}
-			{/each}
+<div class="item-piles-items-list" style="--grid-template-columns: auto repeat({columns.length-1}, max-content);">
+
+	<VirtualScroll
+		data={$itemListStore}
+		key="id"
+		let:data
+	>
+		<div slot="header" class="item-piles-list-header">
+			{#if header}
+				<svelte:component data={header} this={header.component}/>
+			{/if}
 		</div>
-		{#each items as item, itemIndex (item.id)}
-			<MerchantItemEntry {item} index={itemIndex} columns={$itemColumns}/>
-		{/each}
-
-	{/if}
+		<svelte:component {data} this={data.component}/>
+	</VirtualScroll>
 
 </div>
 
@@ -146,22 +155,34 @@
     display: grid;
     align-items: center;
     max-height: calc(100% - 31px);
-		margin-top: 5px;
+    margin-top: 5px;
+  }
+
+  :global(.item-piles-items-list > div) {
+    display: grid !important;
+    grid-template-columns: var(--grid-template-columns);
+  }
+
+  :global(.item-piles-items-list > div > div) {
+    display: contents;
   }
 
-  .item-piles-item-list-header {
+  .item-piles-items-list :global(.virtual-scroll-item), .item-piles-list-header {
     display: contents;
+  }
+
+  :global(.virtual-scroll-item) {
+    padding: 2px;
+    margin-right: 5px;
+    border-radius: 4px;
+  }
+
+  :global(.item-piles-items-list .virtual-scroll-item:nth-child(even) .item-piles-flexrow > div) {
+    background-color: var(--item-piles-even-color);
+  }
 
-    & > * {
-      height: 1.5rem;
-      margin-top: 10px;
-      margin-bottom: 5px;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-      padding: 0 5px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
+  :global(.item-piles-items-list .virtual-scroll-item:nth-child(odd) .item-piles-flexrow > div) {
+    background-color: var(--item-piles-odd-color);
   }
 
   .item-piles-merchant-first-label {