1 import { ShopEquipment } from "../../shared/inventory";
2 import { ShopItem, Item } from "../../shared/items";
3 import { capitalize } from "lodash";
4 import { Player } from "../../shared/player";
5 import { LocationWithCity } from "shared/map";
7 function renderStatBoost(name: string, val: number | string): string {
8 let valSign: string = '';
9 if(typeof val === 'number') {
10 valSign = val > 0 ? '+' : '-';
12 return `<span class="requirement-title">${name}</span>: <span class="requirement-value ${typeof val === 'number' ? (val > 0 ? "success": "error") : ""}">${valSign}${val}</span>`;
15 function renderRequirement(name: string, val: number | string, currentVal?: number): string {
16 let colorIndicator = '';
18 colorIndicator = currentVal >= val ? 'success' : 'error';
20 return `<span class="requirement-title">${name}</span>: <span class="requirement-value ${colorIndicator}">${val.toLocaleString()}</span>`;
23 function renderShopItem(item: (ShopItem & Item), action: (item: (ShopItem & Item)) => string): string {
24 return `<div class="store-list">
25 <div class="store-icon">
26 <img src="/assets/img/icons/items/${item.icon_name}" title="${item.name}"><div class="store-actions">${action(item)}</div>
29 <div class="name">${item.name}</div>
30 <div class="requirements">
33 ${item.hasOwnProperty('id') ? `<div class="store-cost">${item.price_per_unit.toLocaleString()}G</div>` : ''}
38 export function renderEquipmentDetails(item: ShopEquipment, player: Player): string {
41 <div class="name">${item.name}${item.equipment_slot === 'TWO_HANDED' ? ' (2H)': ''}</div>
42 <div class="requirements">
43 ${item.requirements.level ? renderRequirement('LVL', item.requirements.level, player.level): ''}
44 ${item.requirements.strength ? renderRequirement('STR', item.requirements.strength, player.strength): ''}
45 ${item.requirements.constitution ? renderRequirement('CON', item.requirements.constitution, player.constitution): ''}
46 ${item.requirements.dexterity ? renderRequirement('DEX', item.requirements.dexterity, player.dexterity): ''}
47 ${item.requirements.intelligence ? renderRequirement('INT', item.requirements.intelligence, player.intelligence): ''}
48 ${renderRequirement('PRF', item.profession)}
50 <div class="stat-mods">
51 ${item.boosts.strength ? renderStatBoost('STR', item.boosts.strength) : ''}
52 ${item.boosts.constitution ? renderStatBoost('CON', item.boosts.constitution) : ''}
53 ${item.boosts.dexterity ? renderStatBoost('DEX', item.boosts.dexterity) : ''}
54 ${item.boosts.intelligence ? renderStatBoost('INT', item.boosts.intelligence) : ''}
55 ${item.boosts.damage ? renderStatBoost(item.affectedSkills.includes('restoration_magic') ? 'HP' : 'DMG', item.boosts.damage) : ''}
56 ${item.boosts.damage_mitigation ? renderStatBoost('MIT', item.boosts.damage_mitigation.toString())+'%' : ''}
57 ${['WEAPON','SPELL'].includes(item.type) ? '' : renderStatBoost('AP', item.maxAp.toString())}
59 ${item.hasOwnProperty('id') ? `<div class="store-cost">${item.cost.toLocaleString()}G</div>` : ''}
65 function renderShopEquipment(item: ShopEquipment, action: (item: ShopEquipment) => string, player: Player): string {
66 return `<div class="store-list">
67 <div class="store-icon" style="background-image: url('${item.icon ? `/assets/img/icons/equipment/${item.icon}` : 'https://via.placeholder.com/64x64'}')">
68 <div class="store-actions">${action(item)}</div>
70 ${renderEquipmentDetails(item, player)}
76 export async function renderStore(equipment: ShopEquipment[], items: (ShopItem & Item)[], player: Player, location: LocationWithCity): Promise<string> {
77 const listing: Record<string, string> = {};
78 const listingTypes = new Set<string>();
80 equipment.forEach(item => {
81 const filter = item.type === 'ARMOUR' ? item.equipment_slot : item.type;
83 listingTypes.add(filter);
84 if(!listing[filter]) {
88 listing[filter] += renderShopEquipment(item, i => {
89 const id = `data-id="${i.id}"`;
90 return `<button type="button" hx-get="/location/${i.location_id}/equipment/${i.id}/overview" hx-target="#modal-wrapper">Buy</button>`
95 if(items && items.length) {
96 listingTypes.add('ITEMS');
97 listing['ITEMS'] = '';
98 items.forEach(item => {
99 listing['ITEMS'] += renderShopItem(item, i => {
100 return `<button type="button" hx-get="/location/${i.location_id}/items/${i.id}/overview" hx-target="#modal-wrapper">Buy</button>`;
105 let activeTab: string = listingTypes.keys().next().value;
107 const nav: string[] = [];
108 const finalListing: string[] = [];
110 listingTypes.forEach(type => {
111 nav.push(`<a href="#" data-filter="${type}" class="${activeTab === type ? 'active': ''}">${capitalize(type)}</a>`);
112 finalListing.push(`<div class="filter-result ${activeTab === type ? 'active': 'hidden'}" data-filter="${type}" id="filter_${type}">${listing[type]}</div>`);
116 <div class="city-title-wrapper"><div class="city-title">${location.city_name}</div></div>
117 <div class="city-details">
118 <h3 class="location-name"><span>${location.name}</span></h3>
119 <div class="shop-inventory-listing filter-container">
120 <nav class="filter" id="shop-inventory-listing">${nav.join("")}</nav><div class="inventory-listing listing">
121 ${finalListing.join("\n")}