Inventar-Erstellung

Die MinecraftInventory Komponente ermöglicht es, ein Minecraft-ähnliches Inventar mit anklickbaren Slots, Tooltips und einem optionalen Header darzustellen. Diese Komponente ist nützlich, um Inhalte interaktiv auf Dokumentationsseiten zu präsentieren, ähnlich wie ein Inventar in Minecraft.

Beispiel-Nutzung

Hier ist ein Beispiel, wie du die MinecraftInventory Komponente in deinen .mdx-Dateien verwenden kannst:

<MinecraftInventory 
  headerText="GommeHD's Inventar" 
  slots={[
    { itemName: "diamond", tooltip: `§b§lGommeHD's Diamond`, link: 'https://gommehd.net' },
    { itemName: "tnt", tooltip: `§4§lGommemode`, link: 'https://gommehd.net' },
    { itemName: "gold_ingot", tooltip: `§c§lGold, das auf \neine andere Docs Seite linked`, 
    link: '/basics' },
  ]}
/>

ctugs rl inventar

Props

`headerText` (string, optional)

Hier ist der Header

`slots` (Array, required)

Hier ist der Header

{ itemName: "wooden_sword", tooltip: `§a§lSlots Demonstration` },

Man kann theoretisch so viele Slots wie gewünscht hinzufügen. Jeder Slot hat die folgenden Eigenschaften:

`itemname` (string, required)

Der Name des Items, das im Slot angezeigt werden soll. Dieser Name sollte dem Namen des Items in Minecraft entsprechen, z.B. diamond, gold_ingot, dirt, etc. Achtung: Stand version 1.21!

`Empty Slots`

Für Empty Slots benutze itemname: "empty". Der Vorteil besteht darin, dass man so auch Tooltips und Links zu leeren Slots hinzufügen kann.

{ itemName: "empty", tooltip: `§a§lEin Empty Slot der Links und Tooltips kann.`, link: 'https://gommehd.net' },

`tooltip` (string, optional)

Fügt einen Tooltip hinzu der beim Hovern über den Slot angezeigt wird. Der Text kann Minecraft-Formatierungscodes enthalten, um die Farbe und Formatierung des Textes zu ändern.

`link` (string, optional)

Fügt einen Link hinzu, der geöffnet wird, wenn der Slot angeklickt wird. Dies kann eine externe URL oder ein interner Link zu z.B. einer anderen Docs Seite sein.

Color Codes

Die Color-Codes können genauso benutzt werden wie in Minecraft selbst:

const colorMap = {
  "0": "#000000", // Schwarz
  "1": "#0000AA", // Dunkelblau
  "2": "#00AA00", // Dunkelgrün
  "3": "#00AAAA", // Dunkelaqua
  "4": "#AA0000", // Dunkelrot
  "5": "#AA00AA", // Dunkelviolett
  "6": "#FFAA00", // Gold
  "7": "#AAAAAA", // Grau
  "8": "#555555", // Dunkelgrau
  "9": "#5555FF", // Blau
  a: "#55FF55", // Grün
  b: "#55FFFF", // Aqua
  c: "#FF5555", // Rot
  d: "#FF55FF", // Hellviolett
  e: "#FFFF55", // Gelb
  f: "#FFFFFF", // Weiß
  r: "#FFFFFF", // Reset auf Weiß
};

const formatMap = {
  l: "bold", // Fett
  o: "italic", // Kursiv
  n: "underline", // Unterstrichen
  m: "line-through", // Durchgestrichen
  k: "obfuscated", // Verwischt
  r: "reset", // Reset aller Formatierungen
};