adding abilities, created skill tree template and unlock mechanics

public_web/templates/character/skills.html

@@ -0,0 +1,151 @@
+{% extends "base.html" %}
+
+{% block title %}Skill Trees - {{ character.name }} - Code of Conquest{% endblock %}
+
+{% block extra_head %}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/skills.css') }}">
+{% endblock %}
+
+{% block content %}
+{% include "character/partials/skills_container.html" %}
+
+{# Embed skill data as JSON for tooltips #}
+<script>
+// Skill data for tooltips (embedded from server)
+const skillData = {
+    {% if player_class and player_class.skill_trees %}
+    {% for tree in player_class.skill_trees %}
+    {% for node in tree.nodes %}
+    "{{ node.skill_id }}": {
+        name: "{{ node.name }}",
+        description: "{{ node.description | replace('"', '\\"') | replace('\n', ' ') }}",
+        tier: {{ node.tier }},
+        prerequisites: {{ node.prerequisites | tojson }},
+        effects: {{ node.effects | tojson if node.effects else '{}' }}
+    }{% if not loop.last %},{% endif %}
+    {% endfor %}{% if not loop.last %},{% endif %}
+    {% endfor %}
+    {% endif %}
+};
+
+// Character's unlocked skills
+const unlockedSkills = {{ character.unlocked_skills | tojson }};
+
+// Tooltip element
+const tooltip = document.getElementById('skill-tooltip');
+
+/**
+ * Show tooltip for a skill node
+ */
+function showTooltip(event, skillId) {
+    const skill = skillData[skillId];
+    if (!skill) return;
+
+    // Build tooltip HTML
+    let html = `
+        <div class="tooltip-header">
+            <h3 class="tooltip-name">${skill.name}</h3>
+            <span class="tooltip-tier">Tier ${skill.tier}</span>
+        </div>
+        <p class="tooltip-description">${skill.description}</p>
+    `;
+
+    // Stat bonuses
+    if (skill.effects && skill.effects.stat_bonuses) {
+        const bonuses = skill.effects.stat_bonuses;
+        const bonusList = Object.entries(bonuses)
+            .map(([stat, value]) => `<li>+${value} ${formatStatName(stat)}</li>`)
+            .join('');
+        html += `
+            <div class="tooltip-section">
+                <div class="tooltip-section-title">Stat Bonuses</div>
+                <ul class="tooltip-bonuses">${bonusList}</ul>
+            </div>
+        `;
+    }
+
+    // Abilities unlocked
+    if (skill.effects && skill.effects.abilities) {
+        const abilities = skill.effects.abilities;
+        const abilityList = abilities.map(a => `<li>${formatAbilityName(a)}</li>`).join('');
+        html += `
+            <div class="tooltip-section">
+                <div class="tooltip-section-title">Unlocks Ability</div>
+                <ul class="tooltip-abilities">${abilityList}</ul>
+            </div>
+        `;
+    }
+
+    // Prerequisites
+    if (skill.prerequisites && skill.prerequisites.length > 0) {
+        const prereqNames = skill.prerequisites.map(p => {
+            const prereqSkill = skillData[p];
+            const met = unlockedSkills.includes(p);
+            return `<span style="color: ${met ? 'var(--accent-green)' : 'var(--accent-red-light)'}">${prereqSkill ? prereqSkill.name : p}</span>`;
+        }).join(', ');
+        html += `
+            <div class="tooltip-section">
+                <p class="tooltip-prerequisite"><strong>Requires:</strong> ${prereqNames}</p>
+            </div>
+        `;
+    }
+
+    tooltip.innerHTML = html;
+
+    // Position tooltip
+    const rect = event.target.closest('.skill-node').getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+
+    let left = rect.right + 10;
+    let top = rect.top;
+
+    // Check if tooltip goes off right edge
+    if (left + 300 > window.innerWidth) {
+        left = rect.left - 310;
+    }
+
+    // Check if tooltip goes off bottom edge
+    if (top + tooltipRect.height > window.innerHeight) {
+        top = window.innerHeight - tooltipRect.height - 10;
+    }
+
+    tooltip.style.left = left + 'px';
+    tooltip.style.top = top + 'px';
+    tooltip.classList.add('visible');
+}
+
+/**
+ * Hide tooltip
+ */
+function hideTooltip() {
+    tooltip.classList.remove('visible');
+}
+
+/**
+ * Format stat name for display
+ */
+function formatStatName(stat) {
+    const names = {
+        strength: 'Strength',
+        dexterity: 'Dexterity',
+        constitution: 'Constitution',
+        intelligence: 'Intelligence',
+        wisdom: 'Wisdom',
+        charisma: 'Charisma',
+        luck: 'Luck',
+        defense: 'Defense',
+        resistance: 'Resistance',
+        mana_points: 'Mana',
+        hit_points: 'Hit Points'
+    };
+    return names[stat] || stat.charAt(0).toUpperCase() + stat.slice(1).replace(/_/g, ' ');
+}
+
+/**
+ * Format ability name for display
+ */
+function formatAbilityName(ability) {
+    return ability.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+}
+</script>
+{% endblock %}