Skip to content

Commit

Permalink
Added automatic loading of the machines icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@andev0
andev0 committed Aug 15, 2024
1 parent d7982e1 commit 247dda4
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 35 deletions.
45 changes: 15 additions & 30 deletions dist/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,38 +37,23 @@ <h2 class="title">Select a recipe for the new node</h2>
<div class="close">X</div>
</div>
<div class="content">
<div class="recipes-tab active" id="tab-1">
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png" alt="Recipe"
class="item-icon">
</div>
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png" alt="Recipe"
class="item-icon">
</div>
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png" alt="Recipe"
class="item-icon">
</div>
</div>
<div class="tab-selectors">
<div class="tab-selector active">
<img src="GameData/SatisfactoryIcons/Buildable/Factory/ConstructorMk1/ConstructorMk1.png"
alt="Machine" class="machine-icon">
</div>
<div class="tab-selector">
<img src="GameData/SatisfactoryIcons/Buildable/Factory/ConstructorMk1/ConstructorMk1.png"
alt="Machine" class="machine-icon">
</div>
<div class="tab-selector">
<img src="GameData/SatisfactoryIcons/Buildable/Factory/ConstructorMk1/ConstructorMk1.png"
alt="Machine" class="machine-icon">
</div>
<div class="tab-selector">
<img src="GameData/SatisfactoryIcons/Buildable/Factory/ConstructorMk1/ConstructorMk1.png"
alt="Machine" class="machine-icon">
<div id="recipe-tabs">
<div class="recipes-tab active" id="tab-1">
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
alt="Recipe" class="item-icon">
</div>
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
alt="Recipe" class="item-icon">
</div>
<div class="recipe">
<img src="GameData/SatisfactoryIcons/Resource/Parts/IronPlate/IronPlates.png"
alt="Recipe" class="item-icon">
</div>
</div>
</div>
<div id="tab-selectors"> </div>
</div>
</div>
</div>
Expand Down
13 changes: 9 additions & 4 deletions dist/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,7 @@ div#node-creation-modal {
flex-grow: 1;
}

#node-creation-modal div.tab-selectors {
#node-creation-modal div#tab-selectors {
display: flex;
gap: 8px;
}
Expand Down Expand Up @@ -231,18 +231,23 @@ div#node-creation-modal {
}

#node-creation-modal .tab-selector img.machine-icon {
height: 52px;
width: 52px;
height: 44px;
width: 44px;
object-fit: contain;
}

#node-creation-modal div#recipe-tabs {
display: flex;
max-width: 100%;
flex-grow: 1;
}

#node-creation-modal .recipes-tab {
display: flex;
max-width: 100%;
background-color: #2b2b2b;
border: 2px solid #7a7a7a;
padding: 12px;
height: 100%;
flex-grow: 1;
gap: 12px;
border-radius: 0 8px 8px 8px;
Expand Down
32 changes: 31 additions & 1 deletion src/Tools/SatisfactoryRecipeExporter/Exporter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -238,13 +238,43 @@ console.log(`Machines: ${machines.length}`);
console.log(`Descriptors: ${descriptorsMap.size}`);
console.log(formFrequency);

let machinesSorter = (first: Building, second: Building): number =>
{
const order = [
"Smelter", "Constructor", "Assembler", "Foundry", "Refinery", "Manufacturer",
"Packager", "Blender", "Particle Accelerator"
];

const firstOrder = order.indexOf(first.displayName);
const secondOrder = order.indexOf(second.displayName);

if (firstOrder === -1 && secondOrder === -1)
{
// Both names are not in the order array, keep their relative positions.
return 0;
}
if (firstOrder === -1)
{
// First's name is not in the order array, place it after the second.
return 1;
}
if (secondOrder === -1)
{
// Second's name is not in the order array, place it after the first.
return -1;
}

// Sort by the order array.
return firstOrder - secondOrder;
};

let destinationDir = "dist/GameData";
fs.mkdirSync(destinationDir, { recursive: true });
fs.writeFileSync(
`${destinationDir}/Satisfactory.json`,
JSON.stringify({
gameVersion: gameVersion,
machines: machines,
machines: machines.toSorted(machinesSorter),
resources: [...descriptorsMap.values()]
.filter(descriptor => descriptor.isResourceInUse)
.map<Resource>(descriptor =>
Expand Down
25 changes: 25 additions & 0 deletions src/main.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@ import { SankeyNode } from "./Sankey/SankeyNode";
import { Point } from "./Point";
import { MouseHandler } from "./MouseHandler";

// Ignore import error as the file only appears on launch of the exporting tool.
// @ts-ignore
import satisfactoryData from '../dist/GameData/Satisfactory.json';

async function main()
{
let viewport: SVGElement | null = document.querySelector("#viewport");
Expand Down Expand Up @@ -111,6 +115,27 @@ async function main()
{
MouseHandler.getInstance().handleMouseMove(event);
};

let tabSelectors = document.querySelector("div#tab-selectors")!;
let recipeTabs = document.querySelector("div#recipe-tabs")!;

for (const machine of satisfactoryData.machines)
{
let tabSelector = document.createElement("div");
tabSelector.classList.add("tab-selector");

let machineIcon = document.createElement("img");
machineIcon.classList.add("machine-icon");

machineIcon.src = `GameData/SatisfactoryIcons/${machine.iconPath}`;
machineIcon.alt = machine.displayName;
machineIcon.loading = "lazy";

tabSelector.appendChild(machineIcon);
tabSelectors?.appendChild(tabSelector);
}

tabSelectors.children[0].classList.add("active");
}

main().catch((reason) =>
Expand Down

0 comments on commit 247dda4

Please sign in to comment.