reverted changes, linux fix, started inv gui

gommehdnet · Sep 4, 2024 · 09e9481 · 09e9481
1 parent c90e6cd
commit 09e9481
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 47 deletions.
diff --git a/docs/all-about-docs/inventories.mdx b/docs/all-about-docs/inventories.mdx
@@ -133,3 +133,66 @@ const formatMap = {
 
 Hier wurde "§6Gold", "§bBlau", "§aGrün" und §c§kText als Tooltip verwendet, was den Text in der jeweiligen Farbe färbt / formatiert.
 
+
+
+<MinecraftInventory 
+  headerText="Wähle ein Ziel" 
+  slots={[
+    { itemName: "empty", tooltip: "" },
+    { itemName: "diamond", tooltip: "§b§lPrivate Runden\n§7Entdecke §ediverse Spielmodi §7in von\n§eSpielern §7erstellten Runden"
+, link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "gommehd", tooltip: "§6§lGommunity §7(1.20+)\n§7Springe durch §eJump 'n' Runs§7, triff \nFreunde und spiele §eGommunity-Spiele"
+, link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "magma_cream", tooltip: "§a§lSpawn\n§7Zum Spawn"
+, link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "sunflower", tooltip: "§6§lCoinSystem\n§7Hole deine §eBelohnung §7ab und öffne §eItem-\n§7sowie §eCoin-Truhen"
+, link: 'https://gommehd.net' },
+
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "iron_pickaxe", tooltip: "§b§lMasterBuilders §7(1.20+)\n§7Baue in §evorgegebener Zeit §7ein Bauwerk zu einem bestimmten §eThema"
+, link: 'https://gommehd.net' },
+    { itemName: "crafting_table", tooltip: "§fWerkbank", link: 'https://gommehd.net' },
+    { itemName: "diamond_boots", tooltip: "§bDiamantstiefel", link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+
+    { itemName: "grass_block", tooltip: "§aGrasblock", link: 'https://gommehd.net' },
+    { itemName: "cake", tooltip: "§fKuchen", link: 'https://gommehd.net' },
+    { itemName: "golden_axe", tooltip: "§eGold-Axt", link: 'https://gommehd.net' },
+    { itemName: "gold_ingot", tooltip: "§6Goldbarren", link: 'https://gommehd.net' },
+    { itemName: "red_bed", tooltip: "§fBett", link: 'https://gommehd.net' },
+    { itemName: "stick", tooltip: "§fStock", link: 'https://gommehd.net' },
+    { itemName: "golden_helmet", tooltip: "§eGoldhelm", link: 'https://gommehd.net' },
+
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+
+    { itemName: "filled_map", tooltip: "§fKarte", link: 'https://gommehd.net' },
+    { itemName: "golden_sword", tooltip: "§eGold-Schwert", link: 'https://gommehd.net' },
+    { itemName: "flower_pot", tooltip: "§fBlumentopf", link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "diamond_sword", tooltip: "§bDiamant-Schwert", link: 'https://gommehd.net' },
+    { itemName: "sand", tooltip: "§fSand", link: 'https://gommehd.net' },
+    { itemName: "diamond_chestplate", tooltip: "§bDiamantbrustplatte", link: 'https://gommehd.net' },
+    { itemName: "empty", tooltip: "" },
+    { itemName: "empty", tooltip: "" },
+  ]}
+/>
diff --git a/src/components/MinecraftInventory/MinecraftInventory.tsx b/src/components/MinecraftInventory/MinecraftInventory.tsx
@@ -12,28 +12,34 @@ type MinecraftInventoryProps = {
 const MinecraftInventory: React.FC<MinecraftInventoryProps> = ({
   slots,
   headerText,
-}) => (
-  <div className={styles.inventoryContainer}>
-    <div className={styles.inventory}>
-      {headerText && <div className={styles.header}>{headerText}</div>}
-      {(slots.length % 9 > 0
-        ? slots.concat(
-            new Array(9 - (slots.length % 9)).fill({
-              itemName: "",
-              tooltip: "",
-            })
-          )
-        : slots
-      ).map((slot, index) => (
-        <MinecraftSlot
-          key={slot.itemName + index}
-          itemName={slot.itemName}
-          tooltip={slot.tooltip}
-          link={slot.link}
-        />
-      ))}
+}) => {
+  if (/\blinux\b/i.test(navigator.userAgent)) {
+    document.body.className += " linux";
+  }
+
+  return (
+    <div className={styles.inventoryContainer}>
+      <div className={styles.inventory}>
+        {headerText && <div className={styles.header}>{headerText}</div>}
+        {(slots.length % 9 > 0
+          ? slots.concat(
+              new Array(9 - (slots.length % 9)).fill({
+                itemName: "empty",
+                tooltip: "",
+              })
+            )
+          : slots
+        ).map((slot, index) => (
+          <MinecraftSlot
+            key={slot.itemName + index}
+            itemName={slot.itemName}
+            tooltip={slot.tooltip}
+            link={slot.link}
+          />
+        ))}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default MinecraftInventory;
diff --git a/src/components/MinecraftInventory/styles.module.css b/src/components/MinecraftInventory/styles.module.css
@@ -1,8 +1,8 @@
 /* src/components/MinecraftInventory.module.css */
 
 @font-face {
-    font-family: "Mojangles";
-    src: url('/fonts/mojangles/Mojangles.otf') format('truetype');
+    font-family: "Minecraftia";
+    src: url('/fonts/minecraftia/Minecraftia-Regular.ttf') format('truetype');
 }
 
 .inventoryContainer {
@@ -33,23 +33,23 @@
 }
 
 .header {
-    font-family: 'Mojangles', sans-serif;
-    font-size: 15px;
+    font-family: 'Minecraftia', sans-serif;
+    font-size: 14px;
     color: #575757;
     /* Neue Schriftfarbe */
     position: absolute;
-    top: 5px;
+    top: 8px;
     /* Mehr Abstand über dem Text */
-    left: 10px;
+    left: 12px;
     /* Abstand vom linken Rand des Inventars */
     line-height: 1;
     margin-bottom: 8px;
     /* Spacing unter dem Text */
 }
 
 .slot {
-        background-image: url('/img/gui/inventory-slot.png');
-        background-size: cover;
+    background-image: url('/img/gui/inventory-slot.png');
+    background-size: cover;
     width: 40px;
     /* Reduzierte Breite */
     height: 40px;
@@ -60,7 +60,7 @@
     align-items: center;
     justify-content: center;
     position: relative;
-   /*  border: 1px solid #000; */
+    /*  border: 1px solid #000; */
     user-select: none;
     /* Verhindert Textauswahl */
     transition: background-color 0.2s ease;
@@ -86,16 +86,18 @@
 }
 
 .slot a {
-  display: block;
-  width: 100%;
-  height: 100%;
-  text-decoration: none;
-  color: inherit;
-  z-index: 5; /* Höherer Z-Index, um sicherzustellen, dass der Link im Vordergrund steht */
+    display: block;
+    width: 100%;
+    height: 100%;
+    text-decoration: none;
+    color: inherit;
+    z-index: 5;
+    /* Höherer Z-Index, um sicherzustellen, dass der Link im Vordergrund steht */
 }
 
 .slot .tooltip {
-  z-index: 10; /* Tooltip bleibt im Vordergrund */
+    z-index: 10;
+    /* Tooltip bleibt im Vordergrund */
 }
 
 .slot:hover .tooltip {
@@ -113,21 +115,22 @@
     /* Tooltip-Hintergrund */
     color: #e7e7e7;
     /* Angepasste Textfarbe */
+    padding: 10px 10px 0 10px;
     border-radius: 5px;
     border: 1px solid #300270;
     /* Tooltip-Rand */
     white-space: pre-wrap;
     /* Erlaubt Zeilenumbrüche im Tooltip */
     box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
     z-index: 10;
-    font-family: 'Mojangles', sans-serif;
+    font-family: 'Minecraftia', sans-serif;
     /* Verwendung der Minecraftia-Schriftart */
-    font-size: 16px;
+    font-size: 14px;
+    line-height: 1.5;
     /* Zeilenhöhe für bessere Lesbarkeit */
     width: max-content !important;
-    line-height: 1;
 }
 
-.tooltipcontentwrapper {
-    padding: 10px 10px 5px;
+.tooltip .linux {
+    padding: 10px !important;
 }
diff --git a/src/components/MinecraftSlot/MinecraftSlot.tsx b/src/components/MinecraftSlot/MinecraftSlot.tsx
@@ -18,7 +18,7 @@ const MinecraftSlot: React.FC<MinecraftSlotProps> = (props) => {
           <div className={styles.tooltip}>
             <div className={styles.tooltipcontentwrapper}>
               <MinecraftTextFormatter text={props.tooltip} />
-              </div>
+            </div>
           </div>
         )}
       </div>

diff --git a/src/components/MinecraftTextFormatter/MinecraftTextFormatter.tsx b/src/components/MinecraftTextFormatter/MinecraftTextFormatter.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 
 // Mapping von Minecraft-Farbcodes zu HTML-Farben
 const colorMap = {
@@ -131,10 +131,10 @@ const MinecraftTextFormatter = ({ text }) => {
           formattedText.push(
             <span key={index} style={style}>
               {part.split("\n").map((line, i) => (
-                <div key={i}>
+                <Fragment key={i}>
                   {line}
                   {i < part.split("\n").length - 1 && <br />}
-                </div>
+                </Fragment>
               ))}
             </span>
           );

diff --git a/static/fonts/mojangles/Mojangles.otf b/static/fonts/mojangles/Mojangles.otf
diff --git a/static/img/minecraft-items/minecraft_gommehd.png b/static/img/minecraft-items/minecraft_gommehd.png
-Original file line number
+Diff line change
@@ Expand Up @@
               <div className={styles.tooltip}>
                 <div className={styles.tooltipcontentwrapper}>
                   <MinecraftTextFormatter text={props.tooltip} />
-                  </div>
+                </div>
               </div>
             )}
           </div>
@@ Expand Down @@