Skip to content

Commit

Permalink
Added recipes groups
Browse files Browse the repository at this point in the history
  • Loading branch information
andev0 committed Aug 15, 2024
1 parent c06003d commit d305dd9
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 16 deletions.
2 changes: 1 addition & 1 deletion dist/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
</div>
</div>

<div class="dimming" id="node-creation-container">
<div class="dimming hidden" id="node-creation-container">
<div id="node-creation-modal">
<div class="title-row">
<h2 class="title">Select a recipe for the new node</h2>
Expand Down
15 changes: 14 additions & 1 deletion dist/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -255,14 +255,27 @@ div#node-creation-modal {
flex-grow: 1;
gap: 12px;
border-radius: 0 8px 8px 8px;
flex-wrap: wrap;
flex-direction: column;
align-content: flex-start;
}

#node-creation-modal .recipes-tab.active {
display: flex;
}

#node-creation-modal .recipes-tab h3.group-title {
margin: 0;
font-size: 18px;
font-weight: 400;
color: #e8e8e8;
}

#node-creation-modal .recipes-tab div.group {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}

#node-creation-modal div.recipe {
height: 64px;
width: 64px;
Expand Down
80 changes: 66 additions & 14 deletions src/main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ async function main()

function createNode()
{
let nodeCreationContainer = document.querySelector("div#node-creation-container");
nodeCreationContainer?.classList.remove("hidden");

const node = new SankeyNode(nodesGroup, new Point(50, 50), [50, 50], [100]);

node.nodeSvg.onmousedown = (event) =>
Expand Down Expand Up @@ -141,29 +144,78 @@ async function main()
let recipesTab = document.createElement("div");
recipesTab.classList.add("recipes-tab");

for (let recipe of machine.recipes)
let createRecipesGroup = (name: string): { div: HTMLDivElement, title: HTMLHeadingElement; } =>
{
let recipeNode = document.createElement("div");
recipeNode.classList.add("recipe");
let groupTitle = document.createElement("h3");
groupTitle.classList.add("group-title");
groupTitle.innerText = name;

let groupDiv = document.createElement("div");
groupDiv.classList.add("group");

return { div: groupDiv, title: groupTitle };
};

let itemIcon = document.createElement("img");
itemIcon.classList.add("item-icon");
let basicRecipesGroup = createRecipesGroup("Basic recipes");
let alternateRecipesGroup = createRecipesGroup("Alternate recipes");
let eventsRecipesGroup = createRecipesGroup("Events recipes");

if (recipe.products.length === 1)
let createRecipeParser = (simpleRecipesGroup: HTMLDivElement) =>
{
return (recipe: typeof machine.recipes[0]): void =>
{
let resource = satisfactoryData.resources.find(resource => resource.id == recipe.products[0].id);
let recipeNode = document.createElement("div");
recipeNode.classList.add("recipe");

let itemIcon = document.createElement("img");
itemIcon.classList.add("item-icon");

if (resource != undefined)
let isEventRecipe = false;

if (recipe.products.length === 1)
{
itemIcon.src = `GameData/SatisfactoryIcons/${resource.iconPath}`;
let resource = satisfactoryData.resources.find(resource => resource.id == recipe.products[0].id);

Check failure on line 177 in src/main.ts

View workflow job for this annotation

GitHub Actions / publish

Parameter 'resource' implicitly has an 'any' type.

if (resource != undefined)
{
itemIcon.src = `GameData/SatisfactoryIcons/${resource.iconPath}`;
isEventRecipe = resource.iconPath.startsWith("Events");
}
}
}

itemIcon.alt = recipe.displayName;
itemIcon.loading = "lazy";
itemIcon.alt = recipe.displayName;
itemIcon.loading = "lazy";

recipeNode.appendChild(itemIcon);

if (isEventRecipe)
{
eventsRecipesGroup.div.appendChild(recipeNode);
}
else
{
simpleRecipesGroup.appendChild(recipeNode);
}
};
};

machine.recipes.forEach(createRecipeParser(basicRecipesGroup.div));
machine.alternateRecipes.forEach(createRecipeParser(alternateRecipesGroup.div));

recipeNode.appendChild(itemIcon);
recipesTab.appendChild(recipeNode);
if (basicRecipesGroup.div.childElementCount !== 0)
{
recipesTab.appendChild(basicRecipesGroup.title);
recipesTab.appendChild(basicRecipesGroup.div);
}
if (alternateRecipesGroup.div.childElementCount !== 0)
{
recipesTab.appendChild(alternateRecipesGroup.title);
recipesTab.appendChild(alternateRecipesGroup.div);
}
if (eventsRecipesGroup.div.childElementCount !== 0)
{
recipesTab.appendChild(eventsRecipesGroup.title);
recipesTab.appendChild(eventsRecipesGroup.div);
}

tabSelector.addEventListener("click", () =>
Expand Down

0 comments on commit d305dd9

Please sign in to comment.