item.html

{% macro item(primary, secondary='', classes='"', max='', secondaryMax='', src='', max_image='', width='32px', height='32px', top='', left='', overlay_count='', invert_count='',
              allItems=None, hideIfZero=False, condition=True, gfx=True, highlightOwnedSecondary=False, secondaryBelow=False) %}
{% if condition and (allItems == None or (hideIfZero and (primary not in allItems or allItems[primary] > 0))) %}
    {% set altNames = {
        'SONG1': 'Ballad of the Wind Fish',
        'SONG2': "Manbo's Mambo",
        'SONG3': "Frog's Song of Soul",
        'INSTRUMENT1': 'D1: Full Moon Cello',
        'REQ1': 'Required',
        'INSTRUMENT2': 'D2: Conch Horn',
        'REQ2': 'Required',
        'INSTRUMENT3': "D3: Sea Lily's Bell",
        'REQ3': 'Required',
        'INSTRUMENT4': "D4: Surf Harp",
        'REQ4': 'Required',
        'INSTRUMENT5': "D5: Wind Marimba",
        'REQ5': 'Required',
        'INSTRUMENT6': "D6: Coral Triangle",
        'REQ6': 'Required',
        'INSTRUMENT7': "D7: Organ of Evening Calm",
        'REQ7': 'Required',
        'INSTRUMENT8': "D8: Thunder Drum",
        'REQ8': 'Required',
    } %}

    {% if primary in altNames %}
        {% set primaryName = altNames[primary] %}
    {% else %}
        {% set primaryName = primary %}
    {% endif %}

    {% if secondary in altNames %}
        {% set secondaryName = altNames[secondary] %}
    {% else %}
        {% set secondaryName = secondary %}
    {% endif %}

    {% if secondary != '' %}
        {% set secondaryTag = 'data-secondary=' + secondary %}
        {% set oncontextmenu = "addItem('" + secondary + "', 1, true, true, this.dataset.parentPlayer);return false;" %}
        {% set tooltip = primaryName.replace('_', ' ').replace('TRADING_ITEM_', '')|title + ' | ' + secondaryName.replace('_', ' ')|title %}
    {% else %}
        {% set secondaryTag= "" %}
        {% set oncontextmenu = "addItem('" + primary + "', -1, true, true, this.dataset.parentPlayer);return false;" %}
        {% set tooltip = primaryName.replace('_', ' ').replace('TRADING ITEM ', '')|title %}
    {% endif %}

    {% set onmouseenter = "itemMouseEnter(this); vueTooltip(`" + tooltip + "`, window.event, 500);" %}

    {% if classes == '"' %}
        {% set classes = "pt-2 px-1 col text-center" %}
    {% endif %}

    {% if max != '' %}
        {% set max = 'data-max=' + max %}
    {% endif %}

    {% if secondaryMax != '' %}
        {% set secondaryMax = 'data-secondary_max=' + secondaryMax %}
    {% endif %}

    {% if src != '' %}
        {% set src_tag = 'data-src=' + src %}
    {% endif %}

    {% if max_image != '' %}
        {% set max_image = 'data-max_image=' + max_image %}
    {% endif %}

    {% if invert_count != '' %}
        {% set invert_count = 'data-invert_count' %}
    {% endif %}

    {% if highlightOwnedSecondary %}
        {% set highlightOwnedSecondary = ' highlight-owned-secondary ' %}
    {% else %}
        {% set highlightOwnedSecondary = '' %}
    {% endif %}

    {% set innerStyle = 'style="width: ' + width + '; height: ' + height + ';"' %}
    {% set outerStyle = '' %}

    {% if left != '' %}
        {% set outerStyle = outerStyle + 'left: ' + left + ';' %}
    {% endif %}

    {% if top != '' %}
        {% set outerStyle = outerStyle + 'top: ' + top + ';' %}
    {% endif %}

    {% set secondaryClasses = '' %}
    {% if secondaryBelow %}
        {% set secondaryClasses = ' lowSecondary' %}
    {% endif %}

    <div data-primary="{{primary}}" {{secondaryTag}} {{max}} {{secondaryMax}} {{max_image}} data-gfx="{{gfx}}" class="inventory-item {{highlightOwnedSecondary}}{{classes}}" style="{{outerStyle}}">
        <div class="itemWrapper" {{innerStyle|safe}} data-parent-player="${player}" onclick="addItem('{{primary}}', 1, true, true, this.dataset.parentPlayer)" oncontextmenu="{{oncontextmenu}}" onmouseenter="{{onmouseenter|safe}}" onmouseleave="itemMouseLeave(this)"  data-bs-toggle="tooltip" data-bs-title="{{tooltip}}">
        {% if secondary != '' and src == '' %}
            <img data-item="{{secondary}}" class="itemImage secondary{{secondaryClasses}}" src="static/images/{{secondary}}_0.png" draggable="false">
        {% endif %}
            <img data-item="{{primary}}" {{src_tag}} {{max_image}} {{invert_count}} class="itemImage primary" src="static/images/{{primary}}_0.png" draggable="false">
        {% if overlay_count != '' %}
            <span data-overlay_count="{{overlay_count}}" {{invert_count}} class="overlay" onmousedown="preventDoubleClick(event)">0</span>
        {% endif %}
        </div>
    </div>

{% endif %}
{% endmacro %}