adding abilities, created skill tree template and unlock mechanics
This commit is contained in:
@@ -714,22 +714,18 @@ def view_skills(character_id: str):
|
||||
api_client = get_api_client()
|
||||
|
||||
try:
|
||||
# Get character data
|
||||
# Get character data (includes full player_class with skill_trees)
|
||||
response = api_client.get(f"/api/v1/characters/{character_id}")
|
||||
character = response.get('result')
|
||||
|
||||
# Load class data to get skill trees
|
||||
class_id = character.get('class_id')
|
||||
player_class = None
|
||||
|
||||
if class_id:
|
||||
response = api_client.get(f"/api/v1/classes/{class_id}")
|
||||
player_class = response.get('result')
|
||||
# Player class is already embedded in character response
|
||||
player_class = character.get('player_class')
|
||||
|
||||
logger.info(
|
||||
"Skill tree viewed",
|
||||
user_id=user.get('id'),
|
||||
character_id=character_id
|
||||
character_id=character_id,
|
||||
class_id=player_class.get('class_id') if player_class else None
|
||||
)
|
||||
|
||||
return render_template(
|
||||
@@ -752,3 +748,145 @@ def view_skills(character_id: str):
|
||||
)
|
||||
flash('An error occurred while loading the skill tree.', 'error')
|
||||
return redirect(url_for('character_views.list_characters'))
|
||||
|
||||
|
||||
@character_bp.route('/<character_id>/skills/unlock', methods=['POST'])
|
||||
@require_auth_web
|
||||
def unlock_skill(character_id: str):
|
||||
"""
|
||||
Unlock a skill for a character (HTMX endpoint).
|
||||
|
||||
Args:
|
||||
character_id: ID of the character
|
||||
|
||||
Returns:
|
||||
Re-rendered skills container partial
|
||||
"""
|
||||
user = get_current_user()
|
||||
api_client = get_api_client()
|
||||
skill_id = request.form.get('skill_id')
|
||||
|
||||
if not skill_id:
|
||||
return _render_skills_page(
|
||||
api_client, character_id, user,
|
||||
error="No skill specified"
|
||||
)
|
||||
|
||||
try:
|
||||
# Call API to unlock skill
|
||||
api_client.post(
|
||||
f"/api/v1/characters/{character_id}/skills/unlock",
|
||||
data={'skill_id': skill_id}
|
||||
)
|
||||
|
||||
logger.info(
|
||||
"Skill unlocked",
|
||||
user_id=user.get('id'),
|
||||
character_id=character_id,
|
||||
skill_id=skill_id
|
||||
)
|
||||
|
||||
return _render_skills_page(
|
||||
api_client, character_id, user,
|
||||
message=f"Skill unlocked!"
|
||||
)
|
||||
|
||||
except APIError as e:
|
||||
logger.error(
|
||||
"Failed to unlock skill",
|
||||
user_id=user.get('id'),
|
||||
character_id=character_id,
|
||||
skill_id=skill_id,
|
||||
error=str(e)
|
||||
)
|
||||
return _render_skills_page(
|
||||
api_client, character_id, user,
|
||||
error=str(e.message) if hasattr(e, 'message') else "Failed to unlock skill"
|
||||
)
|
||||
|
||||
|
||||
@character_bp.route('/<character_id>/skills/respec', methods=['POST'])
|
||||
@require_auth_web
|
||||
def respec_skills(character_id: str):
|
||||
"""
|
||||
Respec all skills for a character (HTMX endpoint).
|
||||
|
||||
Args:
|
||||
character_id: ID of the character
|
||||
|
||||
Returns:
|
||||
Re-rendered skills container partial
|
||||
"""
|
||||
user = get_current_user()
|
||||
api_client = get_api_client()
|
||||
|
||||
try:
|
||||
# Call API to respec skills
|
||||
response = api_client.post(f"/api/v1/characters/{character_id}/skills/respec")
|
||||
result = response.get('result', {})
|
||||
|
||||
logger.info(
|
||||
"Skills respec",
|
||||
user_id=user.get('id'),
|
||||
character_id=character_id,
|
||||
cost=result.get('cost')
|
||||
)
|
||||
|
||||
return _render_skills_page(
|
||||
api_client, character_id, user,
|
||||
message=f"Skills reset! {result.get('available_points', 0)} skill points refunded."
|
||||
)
|
||||
|
||||
except APIError as e:
|
||||
logger.error(
|
||||
"Failed to respec skills",
|
||||
user_id=user.get('id'),
|
||||
character_id=character_id,
|
||||
error=str(e)
|
||||
)
|
||||
return _render_skills_page(
|
||||
api_client, character_id, user,
|
||||
error=str(e.message) if hasattr(e, 'message') else "Failed to respec skills"
|
||||
)
|
||||
|
||||
|
||||
def _render_skills_page(api_client, character_id: str, user: dict,
|
||||
message: str = None, error: str = None):
|
||||
"""
|
||||
Helper to render the skills container partial for HTMX updates.
|
||||
|
||||
Args:
|
||||
api_client: API client instance
|
||||
character_id: Character ID
|
||||
user: Current user dict
|
||||
message: Optional success message
|
||||
error: Optional error message
|
||||
|
||||
Returns:
|
||||
Rendered skills container HTML (partial, no base template)
|
||||
"""
|
||||
try:
|
||||
# Get fresh character data (includes full player_class with skill_trees)
|
||||
response = api_client.get(f"/api/v1/characters/{character_id}")
|
||||
character = response.get('result')
|
||||
|
||||
# Player class is already embedded in character response
|
||||
player_class = character.get('player_class')
|
||||
|
||||
# Use partial template for HTMX responses (no base.html wrapper)
|
||||
return render_template(
|
||||
'character/partials/skills_container.html',
|
||||
character=character,
|
||||
player_class=player_class,
|
||||
message=message,
|
||||
error=error
|
||||
)
|
||||
|
||||
except APIError as e:
|
||||
logger.error("Failed to render skills page", error=str(e))
|
||||
return render_template(
|
||||
'character/partials/skills_container.html',
|
||||
character={'character_id': character_id, 'name': 'Unknown', 'unlocked_skills': [], 'available_skill_points': 0, 'level': 1, 'gold': 0},
|
||||
player_class=None,
|
||||
error="Failed to load character data"
|
||||
)
|
||||
|
||||
531
public_web/static/css/skills.css
Normal file
531
public_web/static/css/skills.css
Normal file
@@ -0,0 +1,531 @@
|
||||
/**
|
||||
* Code of Conquest - Skill Tree Stylesheet
|
||||
* Visual skill tree UI with dual-column layout
|
||||
*/
|
||||
|
||||
/* ===== SKILL TREE CONTAINER ===== */
|
||||
.skills-container {
|
||||
max-width: 1400px;
|
||||
margin: 2rem auto;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
/* ===== HEADER ===== */
|
||||
.skills-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.skills-header h1 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-3xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.skills-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.skill-points-display {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.skill-points-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.skill-points-value {
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--accent-gold);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.btn-respec {
|
||||
background: transparent;
|
||||
border: 2px solid var(--accent-red);
|
||||
color: var(--accent-red);
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-respec:hover {
|
||||
background: var(--accent-red);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-respec:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ===== BACK LINK ===== */
|
||||
.skills-back-link {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.skills-back-link a {
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
font-size: var(--text-sm);
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.skills-back-link a:hover {
|
||||
color: var(--accent-gold);
|
||||
}
|
||||
|
||||
/* ===== DUAL TREE GRID ===== */
|
||||
.skill-trees-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* ===== INDIVIDUAL SKILL TREE ===== */
|
||||
.skill-tree {
|
||||
background: var(--bg-secondary);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.tree-header {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 2px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.tree-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-xl);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
.tree-description {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ===== TREE DIAGRAM (TIERS) ===== */
|
||||
.tree-diagram {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== SKILL TIER ROW ===== */
|
||||
.skill-tier {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tier-label {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* ===== SKILL NODES CONTAINER ===== */
|
||||
.skill-nodes {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* ===== INDIVIDUAL SKILL NODE ===== */
|
||||
.skill-node {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem;
|
||||
min-width: 120px;
|
||||
background: var(--bg-input);
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.skill-node:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ===== NODE STATES ===== */
|
||||
/* Locked (cannot unlock yet) */
|
||||
.skill-node--locked {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.skill-node--locked:hover {
|
||||
transform: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.skill-node--locked .node-icon {
|
||||
background: var(--bg-tertiary);
|
||||
border-color: var(--border-primary);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* Available (can unlock) */
|
||||
.skill-node--available {
|
||||
border-color: var(--accent-blue);
|
||||
box-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
|
||||
}
|
||||
|
||||
.skill-node--available .node-icon {
|
||||
background: var(--bg-input);
|
||||
border-color: var(--accent-blue);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.skill-node--available:hover {
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: 0 0 15px rgba(243, 156, 18, 0.4);
|
||||
}
|
||||
|
||||
/* Unlocked (already acquired) */
|
||||
.skill-node--unlocked {
|
||||
border-color: var(--accent-green);
|
||||
}
|
||||
|
||||
.skill-node--unlocked .node-icon {
|
||||
background: var(--accent-green);
|
||||
border-color: var(--accent-green);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== NODE ICON ===== */
|
||||
.node-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 50%;
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 700;
|
||||
background: var(--bg-tertiary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* ===== NODE NAME ===== */
|
||||
.node-name {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-primary);
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
max-width: 100px;
|
||||
}
|
||||
|
||||
/* ===== UNLOCK BUTTON ===== */
|
||||
.btn-unlock {
|
||||
position: absolute;
|
||||
bottom: -10px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: var(--accent-gold);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
color: var(--bg-tertiary);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
white-space: nowrap;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.btn-unlock:hover {
|
||||
background: var(--accent-gold-hover);
|
||||
transform: translateX(-50%) scale(1.05);
|
||||
}
|
||||
|
||||
/* ===== PREREQUISITE LINES ===== */
|
||||
/* Vertical line from node to previous tier */
|
||||
.skill-node--has-prereq::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background: var(--border-primary);
|
||||
}
|
||||
|
||||
.skill-node--unlocked.skill-node--has-prereq::before,
|
||||
.skill-node--available.skill-node--has-prereq::before {
|
||||
background: var(--accent-green);
|
||||
}
|
||||
|
||||
/* ===== LEGEND ===== */
|
||||
.skills-legend {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-primary);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.legend-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid var(--border-primary);
|
||||
border-radius: 50%;
|
||||
font-size: var(--text-xs);
|
||||
}
|
||||
|
||||
.legend-icon--unlocked {
|
||||
background: var(--accent-green);
|
||||
border-color: var(--accent-green);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.legend-icon--available {
|
||||
border-color: var(--accent-blue);
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.legend-icon--locked {
|
||||
background: var(--bg-tertiary);
|
||||
color: var(--text-muted);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* ===== TOOLTIP ===== */
|
||||
.skill-tooltip {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
background: var(--bg-tertiary);
|
||||
border: 2px solid var(--border-ornate);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
max-width: 300px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.skill-tooltip.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
margin-bottom: 0.75rem;
|
||||
padding-bottom: 0.5rem;
|
||||
border-bottom: 1px solid var(--border-primary);
|
||||
}
|
||||
|
||||
.tooltip-name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-lg);
|
||||
color: var(--accent-gold);
|
||||
margin: 0 0 0.25rem 0;
|
||||
}
|
||||
|
||||
.tooltip-tier {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tooltip-description {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tooltip-section {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.tooltip-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.tooltip-section-title {
|
||||
font-size: var(--text-xs);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.tooltip-bonuses {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tooltip-bonuses li {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-green);
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
.tooltip-bonuses li::before {
|
||||
content: '+ ';
|
||||
}
|
||||
|
||||
.tooltip-prerequisite {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-red-light);
|
||||
}
|
||||
|
||||
.tooltip-abilities {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tooltip-abilities li {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--accent-blue);
|
||||
padding: 0.125rem 0;
|
||||
}
|
||||
|
||||
/* ===== MESSAGES ===== */
|
||||
.skills-message {
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.skills-message--success {
|
||||
background: rgba(39, 174, 96, 0.2);
|
||||
border: 1px solid var(--accent-green);
|
||||
color: var(--accent-green);
|
||||
}
|
||||
|
||||
.skills-message--error {
|
||||
background: rgba(192, 57, 43, 0.2);
|
||||
border: 1px solid var(--accent-red);
|
||||
color: var(--accent-red-light);
|
||||
}
|
||||
|
||||
/* ===== RESPONSIVE ===== */
|
||||
@media (max-width: 1024px) {
|
||||
.skill-trees-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.skills-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.skills-info {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.skills-container {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.skill-tree {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.skill-nodes {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.skill-node {
|
||||
min-width: 100%;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.tier-label {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.skills-legend {
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.skills-header h1 {
|
||||
font-size: var(--text-xl);
|
||||
}
|
||||
|
||||
.skills-info {
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.skill-points-display {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn-respec {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
127
public_web/templates/character/partials/skills_container.html
Normal file
127
public_web/templates/character/partials/skills_container.html
Normal file
@@ -0,0 +1,127 @@
|
||||
{# Skills Container Partial - For HTMX updates #}
|
||||
{# Calculate available skill points: level minus unlocked skills count #}
|
||||
{% set skill_points = character.available_skill_points|default(character.level - (character.unlocked_skills|default([])|length), true) %}
|
||||
|
||||
<div class="skills-container" id="skills-container">
|
||||
{# Back Link #}
|
||||
<div class="skills-back-link">
|
||||
<a href="{{ url_for('character_views.view_character', character_id=character.character_id) }}">
|
||||
← Back to {{ character.name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{# Header #}
|
||||
<div class="skills-header">
|
||||
<h1>{{ character.name }}'s Skill Trees</h1>
|
||||
<div class="skills-info">
|
||||
<div class="skill-points-display">
|
||||
<span class="skill-points-label">Skill Points:</span>
|
||||
<span class="skill-points-value">{{ skill_points }}</span>
|
||||
</div>
|
||||
{% set respec_cost = character.level * 100 %}
|
||||
<button class="btn-respec"
|
||||
hx-post="{{ url_for('character_views.respec_skills', character_id=character.character_id) }}"
|
||||
hx-target="#skills-container"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Respec will reset all skills and cost {{ respec_cost }} gold. Continue?"
|
||||
{% if character.gold < respec_cost or not character.unlocked_skills %}disabled{% endif %}>
|
||||
Respec ({{ respec_cost }} gold)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Flash Messages #}
|
||||
{% if message %}
|
||||
<div class="skills-message skills-message--success">{{ message }}</div>
|
||||
{% endif %}
|
||||
{% if error %}
|
||||
<div class="skills-message skills-message--error">{{ error }}</div>
|
||||
{% endif %}
|
||||
|
||||
{# Skill Trees Grid #}
|
||||
{% if player_class and player_class.skill_trees %}
|
||||
<div class="skill-trees-grid">
|
||||
{% for tree in player_class.skill_trees %}
|
||||
<div class="skill-tree" data-tree-id="{{ tree.tree_id }}">
|
||||
{# Tree Header #}
|
||||
<div class="tree-header">
|
||||
<h2 class="tree-name">{{ tree.name }}</h2>
|
||||
<p class="tree-description">{{ tree.description }}</p>
|
||||
</div>
|
||||
|
||||
{# Tree Diagram (Tiers 5 to 1, top to bottom) #}
|
||||
<div class="tree-diagram">
|
||||
{% for tier in range(5, 0, -1) %}
|
||||
<div class="skill-tier" data-tier="{{ tier }}">
|
||||
<span class="tier-label">Tier {{ tier }}</span>
|
||||
<div class="skill-nodes">
|
||||
{% for node in tree.nodes if node.tier == tier %}
|
||||
{# Determine node state #}
|
||||
{% set is_unlocked = node.skill_id in character.unlocked_skills %}
|
||||
{% set prereqs_met = not node.prerequisites or (node.prerequisites | select('in', character.unlocked_skills) | list | length == node.prerequisites | length) %}
|
||||
{% set has_lower_tier = tier == 1 or (tree.nodes | selectattr('tier', 'equalto', tier - 1) | selectattr('skill_id', 'in', character.unlocked_skills) | list | length > 0) %}
|
||||
{% set can_unlock = not is_unlocked and prereqs_met and has_lower_tier and skill_points > 0 %}
|
||||
{% set has_prereq = node.prerequisites | length > 0 %}
|
||||
|
||||
<div class="skill-node {% if is_unlocked %}skill-node--unlocked{% elif can_unlock %}skill-node--available{% else %}skill-node--locked{% endif %}{% if has_prereq %} skill-node--has-prereq{% endif %}"
|
||||
data-skill-id="{{ node.skill_id }}"
|
||||
data-tree-id="{{ tree.tree_id }}"
|
||||
onmouseenter="showTooltip(event, '{{ node.skill_id }}')"
|
||||
onmouseleave="hideTooltip()">
|
||||
|
||||
<div class="node-icon">
|
||||
{% if is_unlocked %}
|
||||
✓
|
||||
{% elif can_unlock %}
|
||||
◇
|
||||
{% else %}
|
||||
◆
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<span class="node-name">{{ node.name }}</span>
|
||||
|
||||
{% if can_unlock %}
|
||||
<button class="btn-unlock"
|
||||
hx-post="{{ url_for('character_views.unlock_skill', character_id=character.character_id) }}"
|
||||
hx-vals='{"skill_id": "{{ node.skill_id }}"}'
|
||||
hx-target="#skills-container"
|
||||
hx-swap="outerHTML"
|
||||
onclick="event.stopPropagation()">
|
||||
Unlock
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
{# Legend #}
|
||||
<div class="skills-legend">
|
||||
<div class="legend-item">
|
||||
<span class="legend-icon legend-icon--unlocked">✓</span>
|
||||
<span>Unlocked</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-icon legend-icon--available">◇</span>
|
||||
<span>Available</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-icon legend-icon--locked">◆</span>
|
||||
<span>Locked</span>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="skills-message skills-message--error">
|
||||
Unable to load skill trees for this class.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Tooltip Container #}
|
||||
<div id="skill-tooltip" class="skill-tooltip"></div>
|
||||
</div>
|
||||
151
public_web/templates/character/skills.html
Normal file
151
public_web/templates/character/skills.html
Normal file
@@ -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 %}
|
||||
@@ -82,7 +82,7 @@ Displays character stats, resource bars, and action buttons
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Quick Actions (Inventory, Equipment, NPC, Travel) #}
|
||||
{# Quick Actions (Inventory, Equipment, Skills, NPC, Travel) #}
|
||||
<div class="quick-actions">
|
||||
{# Inventory - Opens modal #}
|
||||
<button class="action-btn action-btn--special"
|
||||
@@ -103,6 +103,16 @@ Displays character stats, resource bars, and action buttons
|
||||
⚔️ Equipment & Gear
|
||||
</button>
|
||||
|
||||
{# Skill Trees - Direct link to skills page #}
|
||||
<a class="action-btn action-btn--special"
|
||||
href="{{ url_for('character_views.view_skills', character_id=character.character_id) }}">
|
||||
🌱 Skill Trees
|
||||
{% set skill_pts = character.available_skill_points|default(character.level - (character.unlocked_skills|default([])|length), true) %}
|
||||
{% if skill_pts > 0 %}
|
||||
<span class="action-count action-count--highlight">({{ skill_pts }} pts)</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
{# Talk to NPC - Opens NPC accordion #}
|
||||
<button class="action-btn action-btn--special"
|
||||
hx-get="{{ url_for('game.npcs_accordion', session_id=session_id) }}"
|
||||
|
||||
Reference in New Issue
Block a user