Documentation

FdCookingPotScreen

FD cooking pot (176×166): six ingredient slots plus meal display, container and output slots, heat flame, cooking arrow and recipe book button; slot frames and pot body come baked into the original texture.

Full-screen previewPreview pages are excluded from search indexes

厨锅物品栏

点击物品槽切换受热状态；点击配方书按钮切换按钮态。

Composition

These are the composable components; the Block only places them at vanilla coordinates.

ModSlotGrid ModLabel ScreenPanel PlayerInventory Slot GuiSprite FdSprite FdHeatIndicator FdCookingProgress FdRecipeBookButton

Code

import { useState } from "react";

import { FD_DEMO_ITEMS } from "../fd-demo-data";
import { FdCookingPotScreen } from "./index";

interface FdCookingPotScreenDemoProps {
  progress?: number;
}

export function FdCookingPotScreenDemo({ progress = 0.6 }: FdCookingPotScreenDemoProps = {}) {
  const [heated, setHeated] = useState(true);
  const [recipeBookOpen, setRecipeBookOpen] = useState(false);
  return (
    <div className="flex flex-col gap-3">
      <FdCookingPotScreen
        container={FD_DEMO_ITEMS.bowl}
        heated={heated}
        ingredients={[
          FD_DEMO_ITEMS.brownMushroom,
          FD_DEMO_ITEMS.redMushroom,
          null,
          null,
          null,
          null,
        ]}
        meal={undefined}
        onRecipeBookToggle={() => { setRecipeBookOpen(value => !value); }}
        onSlotClick={() => { setHeated(value => !value); }}
        output={FD_DEMO_ITEMS.mushroomStew}
        progress={progress}
        recipeBookOpen={recipeBookOpen}
      />
      <p className="text-xs opacity-60">
        点击物品槽切换受热状态；点击配方书按钮切换按钮态。
      </p>
    </div>
  );
}