Add SmeltingPanel component for managing smelting operations and recipes

2026-03-21 16:49:50 -04:00
parent 05bf5ce122
commit e6f2ff5587
1 changed files with 130 additions and 0 deletions
--- a/web/client/src/components/SmeltingPanel.jsx
+++ b/web/client/src/components/SmeltingPanel.jsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import { useInventoryStore } from '../store/inventoryStore';
+import { formatItemName } from '../utils/itemUtils';
+import ItemIcon from './ItemIcon';
+import './SmeltingPanel.css';
+
+function SmeltingPanel() {
+  const inventory = useInventoryStore((state) => state.inventory);
+  const smeltingPaused = useInventoryStore((state) => state.smeltingPaused);
+  const disabledRecipes = useInventoryStore((state) => state.disabledRecipes);
+  const smeltable = useInventoryStore((state) => state.smeltable);
+  const toggleSmelting = useInventoryStore((state) => state.toggleSmelting);
+  const toggleRecipe = useInventoryStore((state) => state.toggleRecipe);
+  const enableAllRecipes = useInventoryStore((state) => state.enableAllRecipes);
+  const disableAllRecipes = useInventoryStore((state) => state.disableAllRecipes);
+
+  const furnaceStatus = inventory.furnaceStatus || {};
+  const furnaceEntries = Object.entries(furnaceStatus);
+
+  const smeltableEntries = Object.entries(smeltable);
+
+  return (
+    <div className="smelting-panel">
+      {/* Header */}
+      <div className="smelting-header">
+        <h2>🔥 Smelting Dashboard</h2>
+        <div className="smelting-controls">
+          <button
+            className={`mc-btn ${smeltingPaused ? 'green' : 'red'}`}
+            onClick={toggleSmelting}
+          >
+            {smeltingPaused ? '▶ Resume' : '⏸ Pause'}
+          </button>
+        </div>
+      </div>
+
+      {smeltingPaused && (
+        <div className="smelting-paused-banner">⚠️ Smelting is PAUSED</div>
+      )}
+
+      {/* Furnace status */}
+      <div className="furnace-section detail-section">
+        <h3>🔥 Furnaces ({inventory.furnaceCount || 0})</h3>
+        {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 className="furnace-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 && (
+                    <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 && (
+                    <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 && (
+                    <span className="furnace-empty">Empty</span>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <div className="no-data">No furnace data available</div>
+        )}
+      </div>
+
+      {/* Recipe list */}
+      <div className="recipe-section detail-section">
+        <h3>📋 Smelting Recipes ({smeltableEntries.length})</h3>
+        <div className="recipe-bulk-controls">
+          <button className="mc-btn green" onClick={enableAllRecipes}>✅ Enable All</button>
+          <button className="mc-btn red" onClick={disableAllRecipes}>❌ Disable All</button>
+        </div>
+        <div className="recipe-list">
+          {smeltableEntries.map(([input, recipe]) => {
+            const isDisabled = disabledRecipes[input];
+            return (
+              <div
+                key={input}
+                className={`recipe-item ${isDisabled ? 'disabled' : 'enabled'}`}
+                onClick={() => toggleRecipe(input)}
+              >
+                <div className="recipe-toggle">
+                  {isDisabled ? '⬜' : '✅'}
+                </div>
+                <div className="recipe-input">
+                  <ItemIcon itemName={input} size={20} />
+                  <span>{formatItemName(input)}</span>
+                </div>
+                <span className="recipe-arrow">→</span>
+                <div className="recipe-output">
+                  <ItemIcon itemName={recipe.result} size={20} />
+                  <span>{formatItemName(recipe.result)}</span>
+                </div>
+                <div className="recipe-furnaces">
+                  {(recipe.furnaces || []).map((f) => (
+                    <span key={f} className="furnace-tag">
+                      {f.replace(/^minecraft:/, '')}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+          {smeltableEntries.length === 0 && (
+            <div className="no-data">No smelting recipes loaded</div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SmeltingPanel;