Harden components: add ErrorBoundary, null-safe rendering

This commit is contained in:
MayaTheShy
2026-03-21 17:51:07 -04:00
parent 0ce63bacd7
commit fe6ac23329
6 changed files with 109 additions and 42 deletions

View File

@@ -17,7 +17,7 @@ function SmeltingPanel() {
const furnaceStatus = inventory.furnaceStatus || {};
const furnaceEntries = Object.entries(furnaceStatus);
const smeltableEntries = Object.entries(smeltable);
const smeltableEntries = Object.entries(smeltable || {});
return (
<div className="smelting-panel">
@@ -44,31 +44,31 @@ function SmeltingPanel() {
{furnaceEntries.length > 0 ? (
<div className="furnace-grid">
{furnaceEntries.map(([name, status]) => (
<div key={name} className={`furnace-card ${status.active ? 'active' : 'idle'}`}>
<div className="furnace-name">{name.replace(/^minecraft:/, '')}</div>
<div key={name} className={`furnace-card ${(status && status.active) ? 'active' : 'idle'}`}>
<div className="furnace-name">{(name || '').replace(/^minecraft:/, '')}</div>
<div className="furnace-status">
{status.input && (
{status && status.input && (
<div className="furnace-slot">
<span className="slot-label">In:</span>
<ItemIcon itemName={status.input.name} size={16} />
<span>{status.input.count || 0}</span>
</div>
)}
{status.fuel && (
{status && status.fuel && (
<div className="furnace-slot">
<span className="slot-label">Fuel:</span>
<ItemIcon itemName={status.fuel.name} size={16} />
<span>{status.fuel.count || 0}</span>
</div>
)}
{status.output && (
{status && status.output && (
<div className="furnace-slot">
<span className="slot-label">Out:</span>
<ItemIcon itemName={status.output.name} size={16} />
<span>{status.output.count || 0}</span>
</div>
)}
{!status.input && !status.fuel && !status.output && (
{(!status || (!status.input && !status.fuel && !status.output)) && (
<span className="furnace-empty">Empty</span>
)}
</div>
@@ -90,6 +90,8 @@ function SmeltingPanel() {
<div className="recipe-list">
{smeltableEntries.map(([input, recipe]) => {
const isDisabled = disabledRecipes[input];
const result = (recipe && recipe.result) || '';
const furnaces = (recipe && recipe.furnaces) || [];
return (
<div
key={input}
@@ -105,13 +107,13 @@ function SmeltingPanel() {
</div>
<span className="recipe-arrow"></span>
<div className="recipe-output">
<ItemIcon itemName={recipe.result} size={20} />
<span>{formatItemName(recipe.result)}</span>
<ItemIcon itemName={result} size={20} />
<span>{formatItemName(result)}</span>
</div>
<div className="recipe-furnaces">
{(recipe.furnaces || []).map((f) => (
{furnaces.map((f) => (
<span key={f} className="furnace-tag">
{f.replace(/^minecraft:/, '')}
{(f || '').replace(/^minecraft:/, '')}
</span>
))}
</div>