items list with a for loop

Question

I have a shop where my character buys items. I made a clickable Buy botton inside the for loop that lists available items.

The code below works and sets a dummy $test veriable to the quantity of the item.

{
(set: $items to (a:
(dm: "Name", "ItemA", "Price", 13000, "Quantity", 1),
(dm: "Name", "ItemB", "Price", 2000, "Quantity", 1)
))

(for: each _item, ...$items)[
<table style="display:inline-block"><tr><td>
  <br>(print: _item's Name)
  <br>(print: _item's Price)
  <br>(print: '(link: "Buy")[(set: $selected to "' + _item's Name + '")(set: $test to ' + (text:_item's Quantity) + ')(go-to: "next")]')
  <br>
</td></tr></table>
]

Now, I want it to decrease the quantity of item when clicked on the "Buy" button. But the following modification give errors:

{
(set: $items to (a:
(dm: "Name", "ItemA", "Price", 13000, "Quantity", 1),
(dm: "Name", "ItemB", "Price", 2000, "Quantity", 1)
))

(for: each _item, ...$items)[
<table style="display:inline-block"><tr><td>
  <br>(print: _item's Name)
  <br>(print: _item's Price)
  <br>(print: '(link: "Buy")[(set: $selected to "' + _item's Name + '")(set: _item's Quantity to ' + (text:_item's Quantity) + ')(go-to: "next")]')
  <br>
</td></tr></table>
]
}

How should I proceed?

 

Answer 1

Your 2nd example dynamically creates (link:) macro calls that have a structure like the following

(link: "Buy")[
	(set: $selected to "ItemA")
	(set: _item's Quantity to 1)
	(go-to: "next")
]

The _item temporary variable referenced in the above was declared within the local scope of the (for:) macro associated hook, which means that that temporary variable no longer exisits once the (for:) macro has finished. This is why selecting any of the generated links results in an error.

There are a number of ways to get around this issue, one of the easiest is to change your $items story variable to have a Key & Value structure like the following

(set: $items to (dm:
	"itemA", (dm: "Name", "Item A", "Price", 13000, "Quantity", 1),
	"itemB", (dm: "Name", "Item B", "Price", 2000, "Quantity", 1)
))

... which associates a Key (the "itemA" & "itemB" strings) with each Value (the item data-maps). This means you only need to pass the relevant Key to the "next" passage to know which item was selected.

WARNING: HTML table elements are expensive to create, which is why modern Web Developers use them sparingly when creating page layout. For this reason I have replaced the table elements in your example with div elements.

Your (for:) macro call would now look like the following

(for: each _id, ...(datanames: $items))[
<div style="display: inline-block;">
<br>(print: $items's (_id)'s Name)
<br>(print: $items's (_id)'s Price)
<br>(print: '(link: "Buy")[(set: $selected to "' + _id + '")(go-to: "next")]')
</div>
]

... and you can test the above by adding code like the following to the start of your "next" passage.

Selected Item: (print: $items's ($selected)'s Name)

NOTE: Valid CSS property values are meant to end with a semi-colon.
eg. display: inline-block;

Comments

Thank you for the inspiring idea and the further guidance on html and css!