Skip to content

Commit dc70592

Browse files
DerekGoodingDerekGooding
committed
advanced view is working
1 parent f78de13 commit dc70592

8 files changed

Lines changed: 180 additions & 181 deletions

File tree

‎Mythril.Blazor/wwwroot/data/content_graph.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -816,7 +816,7 @@
816816
},
817817
"in_edges": {
818818
"requires_quest": [
819-
"quest_learn_about_cadences"
819+
"quest_recover_the_ancient_tome"
820820
]
821821
},
822822
"out_edges": {

‎Mythril.Blazor/wwwroot/data/quest_unlocks.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
{
9393
"Quest": "Ancient Inscriptions",
9494
"Requires": [
95-
"Learn About Cadences"
95+
"Recover the Ancient Tome"
9696
]
9797
},
9898
{

‎modules/visualization/lattice_data.js‎

Lines changed: 3 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,5 @@
1-
function processData() {
2-
nodes = nodesData.map(d => ({
3-
...d
4-
}));
5-
6-
nodeMap = new Map(nodes.map(n => [n.id, n]));
7-
allEdges = [];
8-
9-
const progressionTypes = ['unlocks_cadence', 'unlocks_location', 'requires_quest', 'contains', 'provides_ability', 'requires_ability'];
10-
11-
nodes.forEach(node => {
12-
if (node.out_edges) {
13-
Object.entries(node.out_edges).forEach(([type, targetList]) => {
14-
targetList.forEach(target => {
15-
const targetId = typeof target === 'string' ? target : target.targetId;
16-
if (nodeMap.has(targetId)) {
17-
allEdges.push({
18-
id: `edge-${node.id}-${targetId}`,
19-
source: node.id, target: targetId,
20-
type: type,
21-
category: progressionTypes.includes(type) ? 'progression' : 'economy'
22-
});
23-
}
24-
});
25-
});
26-
}
27-
if (node.in_edges) {
28-
Object.entries(node.in_edges).forEach(([type, sourceList]) => {
29-
sourceList.forEach(sourceId => {
30-
if (nodeMap.has(sourceId)) {
31-
allEdges.push({
32-
id: `edge-${sourceId}-${node.id}`,
33-
source: sourceId, target: node.id,
34-
type: type,
35-
category: progressionTypes.includes(type) ? 'progression' : 'economy'
36-
});
37-
}
38-
});
39-
});
40-
}
41-
});
42-
43-
const seenEdges = new Set();
44-
allEdges = allEdges.filter(e => {
45-
const key = `${e.source}-${e.target}-${e.type}`;
46-
if (seenEdges.has(key)) return false;
47-
seenEdges.add(key);
48-
return true;
49-
});
50-
51-
filterEdges();
52-
}
53-
54-
function filterEdges() {
55-
edges = allEdges.filter(e => {
56-
const sourceNode = nodeMap.get(e.source);
57-
const targetNode = nodeMap.get(e.target);
58-
59-
// Hub filtering
60-
if (!showHubs) {
61-
if (sourceNode.is_hub || targetNode.is_hub) return false;
62-
}
63-
64-
// Progression Only filtering
65-
if (showProgressionOnly) {
66-
if (e.category !== 'progression') return false;
67-
}
68-
69-
return true;
70-
});
71-
72-
// Handle node visibility (dimming)
73-
nodes.forEach(n => {
74-
n.visible = true;
75-
if (!showHubs && n.is_hub) n.visible = false;
76-
});
77-
}
78-
1+
// No longer used, replaced by inline processing in renderQuestFlow to maintain distillation
792
function updateStats() {
80-
document.getElementById('stats').innerText = `NODES: ${nodes.filter(n=>n.visible).length}/${nodes.length} | EDGES: ${edges.length} | TIERS: ${Math.max(...nodes.map(n=>n.tier))+1}`;
3+
const totalNodes = nodesData.length;
4+
document.getElementById('stats').innerText = `TOTAL NODES: ${totalNodes}`;
815
}

‎modules/visualization/lattice_interactions.js‎

Lines changed: 44 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,25 +12,45 @@ function selectNode(node) {
1212
}
1313

1414
if (node.data.quest_type) content += `<div style="margin: 10px 0; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px;"><strong>Quest Type:</strong> ${node.data.quest_type}</div>`;
15-
if (node.data.primary_stat) content += `<div style="margin: 10px 0; background: rgba(255,255,255,0.05); padding: 8px; border-radius: 4px;"><strong>Primary Stat:</strong> ${node.data.primary_stat}</div>`;
1615

16+
// Categorize Edges
17+
const consumeTypes = ['consumes', 'requires_stat', 'requires_ability', 'requires_quest'];
18+
const produceTypes = ['rewards', 'stat_rewards', 'provides_ability', 'unlocks_cadence', 'unlocks_location'];
19+
1720
const upstream = allEdges.filter(e => e.target === node.id);
18-
if (upstream.length > 0) {
19-
content += '<h4 style="border-bottom: 1px solid #30363d;">Requirements</h4><ul>';
20-
upstream.forEach(r => { const src = nodeMap.get(r.source); content += `<li>${src ? src.name : r.source} <span style="font-size:11px;">(${r.type})</span></li>`; });
21+
const downstream = allEdges.filter(e => e.source === node.id);
22+
23+
// Sidebar: Requirements / Consumes
24+
const consumes = upstream.filter(e => consumeTypes.includes(e.type));
25+
if (consumes.length > 0) {
26+
content += '<h4 style="border-bottom: 1px solid #30363d; margin-bottom: 10px;">Consumes / Requires</h4><ul>';
27+
consumes.forEach(e => {
28+
const src = nodeMap.get(e.source);
29+
content += `<li style="margin-bottom: 4px;">${src ? src.name : e.source} <span style="font-size:11px; opacity:0.6;">(${e.type})</span></li>`;
30+
});
2131
content += '</ul>';
2232
}
23-
const downstream = allEdges.filter(e => e.source === node.id);
24-
if (downstream.length > 0) {
25-
content += '<h4 style="border-bottom: 1px solid #30363d;">Unlocks</h4><ul>';
26-
downstream.forEach(u => { const tgt = nodeMap.get(u.target); content += `<li>${tgt ? tgt.name : u.target} <span style="font-size:11px;">(${u.type})</span></li>`; });
33+
34+
// Sidebar: Produces / Unlocks
35+
const produces = downstream.filter(e => produceTypes.includes(e.type));
36+
if (produces.length > 0) {
37+
content += '<h4 style="border-bottom: 1px solid #30363d; margin-bottom: 10px;">Produces / Unlocks</h4><ul>';
38+
produces.forEach(e => {
39+
const tgt = nodeMap.get(e.target);
40+
content += `<li style="margin-bottom: 4px;">${tgt ? tgt.name : e.target} <span style="font-size:11px; opacity:0.6;">(${e.type})</span></li>`;
41+
});
2742
content += '</ul>';
2843
}
44+
2945
document.getElementById('side-content').innerHTML = content;
3046
highlightPaths(node.id);
3147
}
3248

3349
function highlightPaths(targetId) {
50+
// Reset all previous highlights
51+
document.querySelectorAll('.node').forEach(el => el.classList.remove('dimmed', 'highlighted'));
52+
document.querySelectorAll('.edge').forEach(el => el.classList.remove('dimmed', 'highlighted-up', 'highlighted-down'));
53+
3454
const upN = new Set(), downN = new Set(), upE = new Set(), downE = new Set();
3555
const traceUp = (id) => { allEdges.forEach(e => { if (e.target === id && !upE.has(e.id)) { upE.add(e.id); upN.add(e.source); traceUp(e.source); } }); };
3656
const traceDown = (id) => { allEdges.forEach(e => { if (e.source === id && !downE.has(e.id)) { downE.add(e.id); downN.add(e.target); traceDown(e.target); } }); };
@@ -41,7 +61,6 @@ function highlightPaths(targetId) {
4161
const idAttr = el.getAttribute('id');
4262
const nodeId = idAttr.replace('node-', '');
4363

44-
el.classList.remove('dimmed', 'highlighted');
4564
if (nodeId === targetId || nodeId.includes(targetId) || upN.has(nodeId) || downN.has(nodeId)) {
4665
el.classList.add('highlighted');
4766
} else {
@@ -52,14 +71,29 @@ function highlightPaths(targetId) {
5271
const visibleEdges = document.querySelectorAll('.edge');
5372
visibleEdges.forEach(el => {
5473
const edgeId = el.getAttribute('id');
55-
el.classList.remove('dimmed', 'highlighted-up', 'highlighted-down');
74+
// Check if edge is part of the flow
5675
if (upE.has(edgeId) || upE.some(ue => edgeId.includes(ue))) el.classList.add('highlighted-up');
5776
else if (downE.has(edgeId) || downE.some(de => edgeId.includes(de))) el.classList.add('highlighted-down');
5877
else el.classList.add('dimmed');
5978
});
6079
}
6180

81+
6282
function setupInteractions() {
83+
document.getElementById('btn-standard').addEventListener('click', () => {
84+
currentView = 'standard';
85+
document.getElementById('btn-standard').classList.add('active');
86+
document.getElementById('btn-advanced').classList.remove('active');
87+
renderQuestFlow();
88+
});
89+
90+
document.getElementById('btn-advanced').addEventListener('click', () => {
91+
currentView = 'advanced';
92+
document.getElementById('btn-advanced').classList.add('active');
93+
document.getElementById('btn-standard').classList.remove('active');
94+
renderQuestFlow();
95+
});
96+
6397
let isDragging = false, startPos = { x: 0, y: 0 };
6498
svg.addEventListener('mousedown', e => {
6599
if (e.target === svg || e.target.closest('#tiers-layer')) {

‎modules/visualization/lattice_main.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
// --- Initialization ---
22
function init() {
3-
processData();
43
setupInteractions();
54
renderQuestFlow();
65
updateStats();

0 commit comments

Comments
 (0)