spacerpg/wwwroot/js/PlayerCraftingHud.js

require('TemplateLoader');
class PlayerCraftingHud {
	constructor() {
		this.templateLoader = new TemplateLoader();
		this.containerId = "crafting-container";
	}

	async attach(parent) {
		let template = await this.templateLoader.get('crafting');
		let container = document.getElementById(this.containerId);
		container.innerHTML = template;

		this.recipes = document.getElementById('crafting--recipes');

		this.hide();
	}

	init() {
		this.buildRecipes();
	}

	buildRecipes() {
		this.recipes.innerHTML = "";
		game.crafting.getAllRecipes().forEach((recipe) => {
			let recipeRow = document.createElement("div");
			let recipeButton = document.createElement('button');
			let ingredients = recipe.ingredients.reduce((list, item) => {
				return `${list} ${item.amount} ${item.name}`;
			}, "");

			let results = recipe.results.reduce((list, item) => {
				return `${list} ${item.amount} ${item.name} `;
			}, "");
			recipeButton.innerHTML = `${ingredients} -> ${results}`;
			recipeButton.setAttribute('data-recipe-id', recipe.id);

			recipeButton.addEventListener('click', (event) => this.craftRecipe(event));
			recipeRow.appendChild(recipeButton);
			this.recipes.appendChild(recipeRow);
		});
	}

	craftRecipe(event) {
		game.craftRecipe(event.target.getAttribute('data-recipe-id'));
	}

	hide() {
		document.getElementById(this.containerId).style.opacity = "0";
		document.getElementById(this.containerId).style.visibility = "hidden";
	}

	show() {
		document.getElementById(this.containerId).style.opacity = "1";
		document.getElementById(this.containerId).style.visibility = "visible";
	}
}