Code_of_Conquest/public_web/templates/game/partials/character_panel.html

{#
Character Panel - Left sidebar
Displays character stats, resource bars, and action buttons
#}
<div class="character-panel">
    {# Character Header #}
    <div class="character-header">
        <div class="character-name">{{ character.name }}</div>
        <div class="character-info">
            <span class="character-class">{{ character.class_name }}</span>
            <span class="character-level">Level {{ character.level }}</span>
        </div>
        <div class="character-usage">
            {% include 'components/usage_display.html' %}
        </div>
    </div>

    {# Resource Bars #}
    <div class="resource-bars">
        {# HP Bar #}
        <div class="resource-bar resource-bar--hp">
            <div class="resource-bar-label">
                <span class="resource-bar-name">HP</span>
                <span class="resource-bar-value">{{ character.current_hp }} / {{ character.max_hp }}</span>
            </div>
            <div class="resource-bar-track">
                {% set hp_percent = (character.current_hp / character.max_hp * 100)|int %}
                <div class="resource-bar-fill" style="width: {{ hp_percent }}%"></div>
            </div>
        </div>

        {# MP Bar #}
        <div class="resource-bar resource-bar--mp">
            <div class="resource-bar-label">
                <span class="resource-bar-name">MP</span>
                <span class="resource-bar-value">{{ character.current_mp }} / {{ character.max_mp }}</span>
            </div>
            <div class="resource-bar-track">
                {% set mp_percent = (character.current_mp / character.max_mp * 100)|int %}
                <div class="resource-bar-fill" style="width: {{ mp_percent }}%"></div>
            </div>
        </div>
    </div>

    {# Stats Accordion (Collapsed by default) #}
    <div class="panel-accordion collapsed" data-panel-accordion="stats">
        <button class="panel-accordion-header" onclick="togglePanelAccordion(this)">
            <span>Stats</span>
            <span class="panel-accordion-icon">▼</span>
        </button>
        <div class="panel-accordion-content">
            <div class="stats-grid">
                <div class="stat-item">
                    <div class="stat-abbr">STR</div>
                    <div class="stat-value">{{ character.stats.strength }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-abbr">DEX</div>
                    <div class="stat-value">{{ character.stats.dexterity }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-abbr">CON</div>
                    <div class="stat-value">{{ character.stats.constitution }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-abbr">INT</div>
                    <div class="stat-value">{{ character.stats.intelligence }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-abbr">WIS</div>
                    <div class="stat-value">{{ character.stats.wisdom }}</div>
                </div>
                <div class="stat-item">
                    <div class="stat-abbr">CHA</div>
                    <div class="stat-value">{{ character.stats.charisma }}</div>
                </div>
            </div>
        </div>
    </div>

    {# Quick Actions (Equipment, NPC, Travel) #}
    <div class="quick-actions">
        {# Equipment & Gear - Opens modal #}
        <button class="action-btn action-btn--special"
                hx-get="{{ url_for('game.equipment_modal', session_id=session_id) }}"
                hx-target="#modal-container"
                hx-swap="innerHTML">
            ⚔️ Equipment & Gear
        </button>

        {# Talk to NPC - Opens NPC accordion #}
        <button class="action-btn action-btn--special"
                hx-get="{{ url_for('game.npcs_accordion', session_id=session_id) }}"
                hx-target="#accordion-npcs"
                hx-swap="innerHTML"
                onclick="document.querySelector('[data-accordion=npcs]').classList.remove('collapsed')">
            💬 Talk to NPC...
        </button>

        {# Travel - Opens modal #}
        <button class="action-btn action-btn--special"
                hx-get="{{ url_for('game.travel_modal', session_id=session_id) }}"
                hx-target="#modal-container"
                hx-swap="innerHTML">
            🗺️ Travel to...
        </button>
    </div>

    {# Actions Section #}
    <div class="actions-section">
        <div class="actions-title">Actions</div>

        {# Free Tier Actions #}
        <div class="actions-tier">
            <div class="actions-tier-label">Free Actions</div>
            <div class="actions-list">
                {% for action in actions.free %}
                    {% set available = action.context == ['any'] or location.location_type in action.context %}
                    <button class="action-btn action-btn--free"
                            hx-post="{{ url_for('game.take_action', session_id=session_id) }}"
                            hx-vals='{"action_type": "button", "prompt_id": "{{ action.prompt_id }}"}'
                            hx-target="#narrative-content"
                            hx-swap="innerHTML"
                            hx-disabled-elt="this"
                            {% if not available %}disabled title="Not available in this location"{% endif %}>
                        <span class="action-btn-text">{{ action.display_text }}</span>
                        {% if action.cooldown %}
                        <span class="action-btn-cooldown" title="{{ action.cooldown }} turn cooldown">⏱</span>
                        {% endif %}
                    </button>
                {% endfor %}
            </div>
        </div>

        {# Premium Tier Actions #}
        <div class="actions-tier">
            <div class="actions-tier-label">Premium Actions</div>
            <div class="actions-list">
                {% for action in actions.premium %}
                    {% set available = action.context == ['any'] or location.location_type in action.context %}
                    {% set locked = user_tier not in ['premium', 'elite'] %}
                    <button class="action-btn {% if locked %}action-btn--locked{% else %}action-btn--premium{% endif %}"
                            {% if not locked %}
                            hx-post="{{ url_for('game.take_action', session_id=session_id) }}"
                            hx-vals='{"action_type": "button", "prompt_id": "{{ action.prompt_id }}"}'
                            hx-target="#narrative-content"
                            hx-swap="innerHTML"
                            hx-disabled-elt="this"
                            {% endif %}
                            {% if locked %}disabled title="Requires Premium tier"{% elif not available %}disabled title="Not available in this location"{% endif %}>
                        <span class="action-btn-text">{{ action.display_text }}</span>
                        {% if locked %}
                        <span class="action-btn-lock">🔒</span>
                        {% elif action.cooldown %}
                        <span class="action-btn-cooldown" title="{{ action.cooldown }} turn cooldown">⏱</span>
                        {% endif %}
                    </button>
                {% endfor %}
            </div>
        </div>

        {# Elite Tier Actions #}
        <div class="actions-tier">
            <div class="actions-tier-label">Elite Actions</div>
            <div class="actions-list">
                {% for action in actions.elite %}
                    {% set available = action.context == ['any'] or location.location_type in action.context %}
                    {% set locked = user_tier != 'elite' %}
                    <button class="action-btn {% if locked %}action-btn--locked{% else %}action-btn--elite{% endif %}"
                            {% if not locked %}
                            hx-post="{{ url_for('game.take_action', session_id=session_id) }}"
                            hx-vals='{"action_type": "button", "prompt_id": "{{ action.prompt_id }}"}'
                            hx-target="#narrative-content"
                            hx-swap="innerHTML"
                            hx-disabled-elt="this"
                            {% endif %}
                            {% if locked %}disabled title="Requires Elite tier"{% elif not available %}disabled title="Not available in this location"{% endif %}>
                        <span class="action-btn-text">{{ action.display_text }}</span>
                        {% if locked %}
                        <span class="action-btn-lock">🔒</span>
                        {% elif action.cooldown %}
                        <span class="action-btn-cooldown" title="{{ action.cooldown }} turn cooldown">⏱</span>
                        {% endif %}
                    </button>
                {% endfor %}
            </div>
        </div>
    </div>
</div>