The panel

A mod can put its own control panel in Fruit Pie's sidebar. This can be useful for putting configuration settings or visual cues that wouldn't fit inside the game area.

export default createMod((mod) => {
  const key = mod.ui.state("KeyH", { persist: "hitKey" });
  const hits = mod.ui.state(0);

  mod.ui.panel({ title: "My mod" }, (ui) => [
    ui.section({ title: "Controls" }, [
      ui.keybind({ label: "Do the thing", value: key }),
      ui.text(() => `${hits.value} so far`, { tone: "muted" }),
      ui.button({ label: "Reset", onClick: () => (hits.value = 0) }),
    ]),
  ]);
});

States

States are variables that will automatically trigger re-renders when their value gets updated. They function like Vue refs and computeds.

const name = mod.ui.state("world", { persist: "name" });
const greeting = mod.ui.computed(() => `hello ${name.value}`);

name.value = "there"; // will trigger a re-render

persist remembers the value per player account.

States​

States