combat testing and polishing in the dev console, many bug fixes

public_web/templates/dev/partials/ability_modal.html

@@ -0,0 +1,62 @@
+<!-- Ability Selection Modal -->
+
+<div class="modal-overlay" onclick="closeModal()">
+    <div class="modal-content" onclick="event.stopPropagation()">
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
+            <h3 style="margin: 0; color: #f59e0b;">Select Ability</h3>
+            <button onclick="closeModal()" style="background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer;">&times;</button>
+        </div>
+
+        {% if abilities %}
+        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
+            {% for ability in abilities %}
+            <button style="
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 1rem;
+                background: {{ '#2a2a3a' if ability.available else '#1a1a2a' }};
+                border: 1px solid {{ '#4a4a5a' if ability.available else '#3a3a4a' }};
+                border-radius: 6px;
+                cursor: {{ 'pointer' if ability.available else 'not-allowed' }};
+                opacity: {{ '1' if ability.available else '0.5' }};
+                text-align: left;
+                transition: all 0.2s;
+            "
+            {% if ability.available %}
+            hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
+            hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
+            hx-target="#combat-log"
+            hx-swap="beforeend"
+            onclick="closeModal()"
+            {% else %}
+            disabled
+            {% endif %}>
+                <div>
+                    <div style="color: #e5e7eb; font-weight: 500;">{{ ability.name }}</div>
+                    {% if ability.description %}
+                    <div style="color: #9ca3af; font-size: 0.8rem; margin-top: 0.25rem;">{{ ability.description[:100] }}{% if ability.description|length > 100 %}...{% endif %}</div>
+                    {% endif %}
+                </div>
+                <div style="text-align: right;">
+                    {% if ability.mp_cost > 0 %}
+                    <div style="color: #60a5fa; font-size: 0.85rem;">{{ ability.mp_cost }} MP</div>
+                    {% endif %}
+                    {% if ability.cooldown > 0 %}
+                    <div style="color: #f59e0b; font-size: 0.75rem;">CD: {{ ability.cooldown }}</div>
+                    {% endif %}
+                </div>
+            </button>
+            {% endfor %}
+        </div>
+        {% else %}
+        <div style="text-align: center; color: #6b7280; padding: 2rem;">
+            No abilities available.
+        </div>
+        {% endif %}
+
+        <button class="modal-close" onclick="closeModal()" style="width: 100%; margin-top: 1rem;">
+            Cancel
+        </button>
+    </div>
+</div>