OOKNET                             [ /  search the index  ]  
──────────────────────────────────────────────────────────────────────────────────────
[ KB ]    [ GIT ]    [ PROJECTS ]    [ ABOUT ]                                      EN
══════════════════════════════════════════════════════════════════════════════════════
OOKNET   [ /  search  ]  
────────────────────────────────────────────────
[ KB ] [ GIT ] [ PROJECTS ] [ ABOUT ]
════════════════════════════════════════════════
 
 
master @ 107 LINES
 
[ HISTORY ]  [ UP ]
 

---
import {
  getOrderedEquipment,
  processEquipmentEnchantments,
  getQualityColorClass,
  getZamimgIconUrl,
} from "../../../lib/equipment-utils";
import ItemTooltip from "../../ItemTooltip/ItemTooltip.astro";
import "./PlayerEquipment.scss";

interface Props {
  equipment?: Record<string, any> | null;
  className?: string;
  showTitle?: boolean;
  title?: string;
}

const {
  equipment = null,
  className = "",
  showTitle = true,
  title = "Current Equipment:",
} = Astro.props;

let orderedEquipment: any[] = [];
if (equipment && Object.keys(equipment).length > 0) {
  try {
    orderedEquipment = processEquipmentEnchantments(
      getOrderedEquipment(equipment),
    );
  } catch (error) {
    console.error("Error processing equipment:", error);
  }
}
---

<div class={`player-equipment ${className}`.trim()}>
  <div class="equipment-section">
    {showTitle && <h3 class="equipment-title">{title}</h3>}
    {
      !equipment || Object.keys(equipment).length === 0 ? (
        <div class="no-equipment">
          <p>No equipment data available</p>
        </div>
      ) : (
        <div class="equipment-compact">
          <div class="equipment-icon-grid">
            {orderedEquipment.map((item: any) => {
              const iconSlug = item.item_icon_slug || item.icon || "";
              const iconUrl = iconSlug
                ? getZamimgIconUrl(iconSlug, "large")
                : "";
              const qualityClass = getQualityColorClass(
                item.quality || "COMMON",
              );
              const itemId = item.item_id || item.id;
              const title = item.item_name || item.name || "Item";
              const gems = (item.enchantments || []).filter(
                (e: any) => e.gem_icon_slug,
              );
              return (
                <ItemTooltip
                  itemId={itemId}
                  enchants={item.enchantments || []}
                  class={`equip-icon-wrap ${qualityClass}`}
                  ariaLabel={title}
                >
                  <div class="equip-icon-inner">
                    {iconUrl ? (
                      <img
                        class="equip-icon"
                        src={iconUrl}
                        alt={title}
                        loading="lazy"
                      />
                    ) : (
                      <div class="equip-icon placeholder" aria-label={title} />
                    )}
                    {gems && gems.length > 0 && (
                      <div class="gem-stack" aria-hidden="true">
                        {gems.slice(0, 3).map((g: any) => {
                          const gUrl = g.gem_icon_slug
                            ? getZamimgIconUrl(g.gem_icon_slug, "small")
                            : "";
                          const gAlt = g.gem_name || g.display_string || "Gem";
                          return (
                            <img
                              class="gem-badge"
                              src={gUrl}
                              alt={gAlt}
                              title={gAlt}
                            />
                          );
                        })}
                      </div>
                    )}
                  </div>
                </ItemTooltip>
              );
            })}
          </div>
        </div>
      )
    }
  </div>
</div>


---
import {
  getOrderedEquipment,
  processEquipmentEnchantments,
  getQualityColorClass,
  getZamimgIconUrl,
} from "../../../lib/equipment-utils";
import ItemTooltip from "../../ItemTooltip/I
temTooltip.astro";
import "./PlayerEquipment.scss";

interface Props {
  equipment?: Record<string, any> | null;
  className?: string;
  showTitle?: boolean;
  title?: string;
}

const {
  equipment = null,
  className = "",
  showTitle = true,
  title = "Current Equipment:",
} = Astro.props;

let orderedEquipment: any[] = [];
if (equipment && Object.keys(equipment).leng
th > 0) {
  try {
    orderedEquipment = processEquipmentEncha
ntments(
      getOrderedEquipment(equipment),
    );
  } catch (error) {
    console.error("Error processing equipmen
t:", error);
  }
}
---

<div class={`player-equipment ${className}`.
trim()}>
  <div class="equipment-section">
    {showTitle && <h3 class="equipment-title
">{title}</h3>}
    {
      !equipment || Object.keys(equipment).l
ength === 0 ? (
        <div class="no-equipment">
          <p>No equipment data available</p>
        </div>
      ) : (
        <div class="equipment-compact">
          <div class="equipment-icon-grid">
            {orderedEquipment.map((item: any
) => {
              const iconSlug = item.item_ico
n_slug || item.icon || "";
              const iconUrl = iconSlug
                ? getZamimgIconUrl(iconSlug,
 "large")
                : "";
              const qualityClass = getQualit
yColorClass(
                item.quality || "COMMON",
              );
              const itemId = item.item_id ||
 item.id;
              const title = item.item_name |
| item.name || "Item";
              const gems = (item.enchantment
s || []).filter(
                (e: any) => e.gem_icon_slug,
              );
              return (
                <ItemTooltip
                  itemId={itemId}
                  enchants={item.enchantment
s || []}
                  class={`equip-icon-wrap ${
qualityClass}`}
                  ariaLabel={title}
                >
                  <div class="equip-icon-inn
er">
                    {iconUrl ? (
                      <img
                        class="equip-icon"
                        src={iconUrl}
                        alt={title}
                        loading="lazy"
                      />
                    ) : (
                      <div class="equip-icon
 placeholder" aria-label={title} />
                    )}
                    {gems && gems.length > 0
 && (
                      <div class="gem-stack"
 aria-hidden="true">
                        {gems.slice(0, 3).ma
p((g: any) => {
                          const gUrl = g.gem
_icon_slug
                            ? getZamimgIconU
rl(g.gem_icon_slug, "small")
                            : "";
                          const gAlt = g.gem
_name || g.display_string || "Gem";
                          return (
                            <img
                              class="gem-bad
ge"
                              src={gUrl}
                              alt={gAlt}
                              title={gAlt}
                            />
                          );
                        })}
                      </div>
                    )}
                  </div>
                </ItemTooltip>
              );
            })}
          </div>
        </div>
      )
    }
  </div>
</div>

 
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET