Simple inventory display

inventory1.tw

:: Inventory 1 [nobr]

/* constant data - item pool mostly (goes into StoryInit) */

<<set setup.items = {
}>>
<<set setup.createItem = function(id, data) {
	id = String(id);
	data = data || {};
	data.id = id;
	setup.items[id] = clone(data);
}>>
<<run setup.createItem("key1", {name: "Front door key", cats: ["key"], desc: "The key is rusted and worn from use."})>>
<<run setup.createItem("key2", {name: "Side door key", cats: ["key"]})>>
<<run setup.createItem("key3", {name: "Back door key", cats: ["key"]})>>
<<run setup.createItem("whisky", {name: "Whisky", desc: "2032 Glenfiddich Rich Oak. A good year.", cats: ["consumable"]})>>
<<run setup.createItem("bo", {name: "Hamster", desc: "A miniature giant space hamster", cats: ["pet"]})>>

<<set setup.categories = [
	{name: "Keys", filter: "key"},
	{name: "Consumables", filter: "consumable"},
	{name: "Tools", filter: "tool"}
]>>

/* current inventory (typically set by gameplay so far) */

<<set $inventory = {
	key1: 1,
	key2: 1,
	key3: 1,
	whisky: 3,
	bo: 1
}>>

/* styling (goes into the story's style sheet) */

<style>
.inventory {
	border: 2px solid white;
	border-radius: 5px;
	padding: 5px;
	display: grid;
	grid-template-columns: 25% 75%;
	grid-template-rows: auto auto 7em;
}
.inventory .header {
	grid-area: 1 / 1 / span 1 / span 2;
}
.inventory .categories {
	grid-area: 2 / 1 / span 1 / span 2;
	border-bottom: 1px solid white;
}
.inventory .items {
	grid-area: 3 / 1 / span 1 / span 1;
	border-right: 1px solid white;
	overflow-y: auto;
	overflow-x: hidden;
}
.inventory .description {
	grid-area: 3 / 2 / span 1 / span 1;
	overflow: auto;
}
.inventory .categories a {
	padding: 0 1em;
}
.inventory .categories a::before {
	content: '[ ';
}
.inventory .categories a::after {
	content: ' ]';
}
.inventory .categories .off a {
	opacity: 0.5;
}
.inventory .items a {
	display: block;
}
</style>

/* helper widgets (go into an own passage tagged with "widget") */

<<widget "InventoryItemList">><<capture _inventory, _hiddenCategories, _descId>>
<<set _inventory = $args[0]>>
<<set _hiddenCategories = $args[1]>>
<<set _descId = $args[2]>>
<<for _id, _amount range _inventory>><<capture _id, _descId>>
	<<set _cats = clone(setup.items[_id].cats)>>
	<<if _hiddenCategories.length > 0>>
		<<run _cats.delete(_hiddenCategories)>>
		<<if _cats.length == 0>>
			<<continue>> /* skip this item */
		<</if>>
	<</if>>
	<<set _link = setup.items[_id].name>>
	<<if _amount > 1>><<set _link = _link + " (&times;" + _amount + ")">><</if>>
	<<link _link>><<silently>>
		<<set _desc = setup.items[_id].desc>>
		<<if _desc>>
			<<run jQuery("#" + _descId).empty().wiki(_desc)>>
		<<else>>
			<<run jQuery("#" + _descId).empty()>>
		<</if>>
	<</silently>><</link>>
<</capture>><</for>>
<</capture>><</widget>>

/* inventory display */

<<set _catsId = "cats-" + Math.round(Math.random() * 0x1000000000).toString(16)>>
<<set _itemsId = "items-" + Math.round(Math.random() * 0x1000000000).toString(16)>>
<<set _descId = "desc-" + Math.round(Math.random() * 0x1000000000).toString(16)>>
<<set _hiddenCategories = []>>
<div class="inventory">
<div class="header">You currently have these items:</div>
<div class="categories" @id="_catsId"><<for _cat range setup.categories>>
<<set _catId = "category-" + Math.round(Math.random() * 0x1000000000).toString(16)>>
<<capture _cat, _catId, _itemsId, _descId>>
	<span @id="_catId"><<link _cat.name>><<silently>>
		<<if _hiddenCategories.includes(_cat.filter)>>
			/* reenable the category */
			<<run _hiddenCategories.delete(_cat.filter)>>
			<<run jQuery("#" + _catId).removeClass("off")>>
		<<else>>
			/* disable the category */
			<<run _hiddenCategories.push(_cat.filter)>>
			<<run jQuery("#" + _catId).addClass("off")>>
		<</if>>
		<<run jQuery("#" + _itemsId).empty().wiki("<<InventoryItemList $inventory _hiddenCategories '" + _descId + "'>>")>>
		<<run jQuery("#" + _descId).empty()>>
	<</silently>><</link>></span>
<</capture>><</for>></div>
<div class="items" @id="_itemsId"><<InventoryItemList $inventory _hiddenCategories _descId>></div>
<div class="description" @id="_descId"></div>
</div>