updating hash table animation

animations/hash_tables/main.js

@@ -98,9 +98,10 @@ const steps =
     {mainHighlight: [2], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [2], funcHighlight: [16], action: null, console: "Setting name: dan"},
     {mainHighlight: [2], funcHighlight: [17], action: null, console: "Setting number: 5182764321"},
-    {mainHighlight: [2], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [2], funcHighlight: [18], action: {type: 'highlight_memory', index: 1, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [2], funcHighlight: [19], action: {type: 'add', index: 1, name: 'dan', number: '5182764321'}, console: "Adding node to index 1"},
+    {mainHighlight: [2], funcHighlight: [19], action: {type: 'add', index: 1, name: 'dan', number: '5182764321', color: '#0000FF'}, console: "Adding node to index 1"},
-    {mainHighlight: [2], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [2], funcHighlight: [20], action: {type: 'highlight_memory', index: 1, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [2], funcHighlight: [20], action: {type: 'highlight_person', index: 1, name: 'dan', number: '5182764321', color: '#222'}, console: "Returning from add function"},
     
     // Add fred
     {mainHighlight: [3], funcHighlight: [], action: null, console: "Adding entry: fred (6173551212)"},
@@ -112,9 +113,10 @@ const steps =
     {mainHighlight: [3], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [3], funcHighlight: [16], action: null, console: "Setting name: fred"},
     {mainHighlight: [3], funcHighlight: [17], action: null, console: "Setting number: 6173551212"},
-    {mainHighlight: [3], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [3], funcHighlight: [18], action: {type: 'highlight_memory', index: 2, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [3], funcHighlight: [19], action: {type: 'add', index: 2, name: 'fred', number: '6173551212'}, console: "Adding node to index 2"},
+    {mainHighlight: [3], funcHighlight: [19], action: {type: 'add', index: 2, name: 'fred', number: '6173551212', color: '#0000FF'}, console: "Adding node to index 2"},
-    {mainHighlight: [3], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [3], funcHighlight: [20], action: {type: 'highlight_memory', index: 2, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [3], funcHighlight: [20], action: {type: 'highlight_person', index: 2, name: 'fred', number: '6173551212', color: '#222'}, console: "Returning from add function"},
     
     // Add alice
     {mainHighlight: [4], funcHighlight: [], action: null, console: "Adding entry: alice (5182761234)"},
@@ -126,9 +128,10 @@ const steps =
     {mainHighlight: [4], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [4], funcHighlight: [16], action: null, console: "Setting name: alice"},
     {mainHighlight: [4], funcHighlight: [17], action: null, console: "Setting number: 5182761234"},
-    {mainHighlight: [4], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [4], funcHighlight: [18], action: {type: 'highlight_memory', index: 4, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [4], funcHighlight: [19], action: {type: 'add', index: 4, name: 'alice', number: '5182761234'}, console: "Adding node to index 4"},
+    {mainHighlight: [4], funcHighlight: [19], action: {type: 'add', index: 4, name: 'alice', number: '5182761234', color: '#0000FF'}, console: "Adding node to index 4"},
-    {mainHighlight: [4], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [4], funcHighlight: [20], action: {type: 'highlight_memory', index: 4, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [4], funcHighlight: [20], action: {type: 'highlight_person', index: 4, name: 'alice', number: '5182761234', color: '#222'}, console: "Returning from add function"},
     
     // Add carol
     {mainHighlight: [5], funcHighlight: [], action: null, console: "Adding entry: carol (5182761267)"},
@@ -140,9 +143,10 @@ const steps =
     {mainHighlight: [5], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [5], funcHighlight: [16], action: null, console: "Setting name: carol"},
     {mainHighlight: [5], funcHighlight: [17], action: null, console: "Setting number: 5182761267"},
-    {mainHighlight: [5], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [5], funcHighlight: [18], action: {type: 'highlight_memory', index: 7, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [5], funcHighlight: [19], action: {type: 'add', index: 7, name: 'carol', number: '5182761267'}, console: "Adding node to index 7"},
+    {mainHighlight: [5], funcHighlight: [19], action: {type: 'add', index: 7, name: 'carol', number: '5182761267', color: '#0000FF'}, console: "Adding node to index 7"},
-    {mainHighlight: [5], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [5], funcHighlight: [20], action: {type: 'highlight_memory', index: 7, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [5], funcHighlight: [20], action: {type: 'highlight_person', index: 7, name: 'carol', number: '5182761267', color: '#222'}, console: "Returning from add function"},
     
     // Add bob
     {mainHighlight: [6], funcHighlight: [], action: null, console: "Adding entry: bob (5182765678)"},
@@ -154,9 +158,10 @@ const steps =
     {mainHighlight: [6], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [6], funcHighlight: [16], action: null, console: "Setting name: bob"},
     {mainHighlight: [6], funcHighlight: [17], action: null, console: "Setting number: 5182765678"},
-    {mainHighlight: [6], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [6], funcHighlight: [18], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [6], funcHighlight: [19], action: {type: 'add', index: 8, name: 'bob', number: '5182765678'}, console: "Adding node to index 8"},
+    {mainHighlight: [6], funcHighlight: [19], action: {type: 'add', index: 8, name: 'bob', number: '5182765678', color: '#0000FF'}, console: "Adding node to index 8"},
-    {mainHighlight: [6], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [6], funcHighlight: [20], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [6], funcHighlight: [20], action: {type: 'highlight_person', index: 8, name: 'bob', number: '5182765678', color: '#222'}, console: "Returning from add function"},
     
     // Add erin
     {mainHighlight: [7], funcHighlight: [], action: null, console: "Adding entry: erin (5182764488)"},
@@ -168,9 +173,10 @@ const steps =
     {mainHighlight: [7], funcHighlight: [15], action: null, console: "Creating new node"},
     {mainHighlight: [7], funcHighlight: [16], action: null, console: "Setting name: erin"},
     {mainHighlight: [7], funcHighlight: [17], action: null, console: "Setting number: 5182764488"},
-    {mainHighlight: [7], funcHighlight: [18], action: null, console: "Setting next pointer"},
+    {mainHighlight: [7], funcHighlight: [18], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Setting next pointer"},
-    {mainHighlight: [7], funcHighlight: [19], action: {type: 'add', index: 8, name: 'erin', number: '5182764488', chain: true}, console: "Adding node to index 8 (chaining)"},
+    {mainHighlight: [7], funcHighlight: [19], action: {type: 'add', index: 8, name: 'erin', number: '5182764488', chain: true, color: '#0000FF'}, console: "Adding node to index 8 (chaining)"},
-    {mainHighlight: [7], funcHighlight: [20], action: null, console: "Returning from add function"},
+    {mainHighlight: [7], funcHighlight: [20], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Returning from add function"},
+    {mainHighlight: [7], funcHighlight: [20], action: {type: 'highlight_person', index: 8, name: 'erin', number: '5182764488', color: '#222'}, console: "Returning from add function"},
     
     // Identify dan
     {mainHighlight: [8], funcHighlight: [], action: null, console: "Searching for number: 5182764321"},
@@ -179,12 +185,12 @@ const steps =
     {mainHighlight: [8], funcHighlight: [10], action: null, console: "Entering hash_function"},
     {mainHighlight: [8], funcHighlight: [11], action: null, console: "5182764321 % 10 = 1"},
     {mainHighlight: [8], funcHighlight: [22], action: null, console: "Hash index: 1"},
-    {mainHighlight: [8], funcHighlight: [23], action: null, console: "Starting search at index 1"},
+    {mainHighlight: [8], funcHighlight: [23], action: {type: 'highlight_memory', index: 1, color: '#00FF00'}, console: "Starting search at index 1"},
     {mainHighlight: [8], funcHighlight: [24], action: null, console: "phonebook[1] is not nullptr(true)"},
     {mainHighlight: [8], funcHighlight: [25], action: null, console: "5182764321 == 5182764321(true)"},
-    {mainHighlight: [8], funcHighlight: [26], action: null, console: "Returning: dan"},
+    {mainHighlight: [8], funcHighlight: [26], action: {type: 'idan', index: 1, name: 'dan', color: '#0000FF'}, console: "Returning: dan"},
-    {mainHighlight: [8], funcHighlight: [31], action: null, console: "Returning from identify function"},
+    {mainHighlight: [8], funcHighlight: [31], action: {type: 'idan', index: 1, name: 'dan', color: '#222'}, console: "Returning from identify function"},
-    {mainHighlight: [8], funcHighlight: [], action: null, console: "Identify 5182764321: dan"},
+    {mainHighlight: [8], funcHighlight: [], action: {type: 'highlight_memory', index: 1, color: '#343434'}, console: "Identify 5182764321: dan"},
     
     // Identify erin
     {mainHighlight: [9], funcHighlight: [], action: null, console: "Searching for number: 5182764488"},
@@ -193,15 +199,15 @@ const steps =
     {mainHighlight: [9], funcHighlight: [10], action: null, console: "Entering hash_function"},
     {mainHighlight: [9], funcHighlight: [11], action: null, console: "5182764488 % 10 = 8"},
     {mainHighlight: [9], funcHighlight: [22], action: null, console: "Hash index: 8"},
-    {mainHighlight: [9], funcHighlight: [23], action: null, console: "Starting search at index 8"},
+    {mainHighlight: [9], funcHighlight: [23], action: {type: 'highlight_memory', index: 8, color: '#00FF00'}, console: "Starting search at index 8"},
     {mainHighlight: [9], funcHighlight: [24], action: null, console: "phonebook[8] is not nullptr(true)"},
     {mainHighlight: [9], funcHighlight: [25], action: null, console: "5182765678 != 5182764488(false)"},
     {mainHighlight: [9], funcHighlight: [28], action: null, console: "Moving to next node"},
     {mainHighlight: [9], funcHighlight: [24], action: null, console: "phonebook[8]->next is not nullptr(true)"},
     {mainHighlight: [9], funcHighlight: [25], action: null, console: "5182764488 == 5182764488(true)"},
-    {mainHighlight: [9], funcHighlight: [26], action: null, console: "Returning: erin"},
+    {mainHighlight: [9], funcHighlight: [26], action: {type: 'ierin', index: 8, name: 'erin', color: '#0000FF'}, console: "Returning: erin"},
-    {mainHighlight: [9], funcHighlight: [31], action: null, console: "Returning from identify function"},
+    {mainHighlight: [9], funcHighlight: [31], action: {type: 'ierin', index: 8, name: 'erin', color: '#222'}, console: "Returning from identify function"},
-    {mainHighlight: [9], funcHighlight: [], action: null, console: "Identify 5182764488: erin"},
+    {mainHighlight: [9], funcHighlight: [], action: {type: 'highlight_memory', index: 8, color: '#343434'}, console: "Identify 5182764488: erin"},
     
     // Identify fred
     {mainHighlight: [10], funcHighlight: [], action: null, console: "Searching for number: 6173551212"},
@@ -210,12 +216,12 @@ const steps =
     {mainHighlight: [10], funcHighlight: [10], action: null, console: "Entering hash_function"},
     {mainHighlight: [10], funcHighlight: [11], action: null, console: "6173551212 % 10 = 2"},
     {mainHighlight: [10], funcHighlight: [22], action: null, console: "Hash index: 2"},
-    {mainHighlight: [10], funcHighlight: [23], action: null, console: "Starting search at index 2"},
+    {mainHighlight: [10], funcHighlight: [23], action: {type: 'highlight_memory', index: 2, color: '#00FF00'}, console: "Starting search at index 2"},
     {mainHighlight: [10], funcHighlight: [24], action: null, console: "phonebook[2] is not nullptr(true)"},
     {mainHighlight: [10], funcHighlight: [25], action: null, console: "6173551212 == 6173551212(true)"},
-    {mainHighlight: [10], funcHighlight: [26], action: null, console: "Returning: fred"},
+    {mainHighlight: [10], funcHighlight: [26], action: {type: 'ifred', index: 2, name: 'fred', color: '#0000FF'}, console: "Returning: fred"},
-    {mainHighlight: [10], funcHighlight: [31], action: null, console: "Returning from identify function"},
+    {mainHighlight: [10], funcHighlight: [31], action: {type: 'ifred', index: 2, name: 'fred', color: '#222'}, console: "Returning from identify function"},
-    {mainHighlight: [10], funcHighlight: [], action: null, console: "Identify 6173551212: fred"},
+    {mainHighlight: [10], funcHighlight: [], action: {type: 'highlight_memory', index: 2, color: '#343434'}, console: "Identify 6173551212: fred"},
     
     // Identify not found
     {mainHighlight: [11], funcHighlight: [], action: null, console: "Searching for number: 1234567890"},
@@ -281,9 +287,34 @@ function nextstep()
     highlightCodeLines(step.mainHighlight, step.funcHighlight);
     
     // Perform the action first
-    if (step.action && step.action.type === 'add')
+    if (step.action) 
     {
-        addNodeToMemory(step.action.index, step.action.name, step.action.number, step.action.chain);
+        if (step.action.type === 'add')
+        {
+            addNodeToMemory(step.action.index, step.action.name, step.action.number, step.action.chain, step.action.color);
+        }
+        else if (step.action.type === 'highlight_memory')
+        {
+            highlightMemoryBox(step.action.index, step.action.color);
+        }
+        else if (step.action.type === 'idan')
+        {
+            highlightPersonBox(step.action.index, step.action.name, 5182764321, step.action.color);
+        }
+        else if (step.action.type === 'ierin')
+        {
+            highlightPersonBox(step.action.index, step.action.name, 5182764488, step.action.color);
+        }
+        else if (step.action.type === 'ifred')
+        {
+            highlightPersonBox(step.action.index, step.action.name, 6173551212, step.action.color);
+        }
+        else if (step.action.type === 'highlight_person')
+        {
+            highlightPersonBox(step.action.index, step.action.name, step.action.number, step.action.color);
+        }
+    }
+    
     // Then show the console message
     if (step.console)
     {
@@ -292,23 +323,6 @@ function nextstep()
     
     layer.draw();
     ++stepIndex;
-
-    }
-    else if (step.action && step.action.type === 'identify')
-    {
-        highlightIdentifyPath(step.action.index, step.action.path);
-    }
-    else
-    {
-        // No action, just show console message
-        if (step.console)
-        {
-            addConsoleText(step.console);
-        }
-        
-        layer.draw();
-        ++stepIndex;
-    }
 }
 
 window.nextstep = nextstep;
@@ -577,7 +591,7 @@ for (let i = 0; i < funcCodeLines.length; ++i)
 
 let memoryNodes = {};
 
-function addNodeToMemory(index, name, number, chain = false)
+function addNodeToMemory(index, name, number, chain = false, color = '#222')
 {
     if (!memoryNodes[index]) memoryNodes[index] = [];
     let y = 60 + index * 50 + 10;
@@ -593,8 +607,8 @@ function addNodeToMemory(index, name, number, chain = false)
         width: 100,
         height: 30,
         fill: '#fff',
-        stroke: '#222',
+        stroke: color,
-        strokeWidth: 2,
+        strokeWidth: 4,
         cornerRadius: 5,
     });
 
@@ -602,7 +616,7 @@ function addNodeToMemory(index, name, number, chain = false)
     ({
         x: x + 5,
         y: y + 2,
-        text: number,
+        text: String(number),
         fontSize: 12,
         fontFamily: 'Consolas',
         fill: '#333',
@@ -657,3 +671,64 @@ function addNodeToMemory(index, name, number, chain = false)
     layer.add(arrow);
     memoryNodes[index].push({group, arrow});
 }
+
+function highlightMemoryBox(index, color)
+{
+    // Find the memory box by its ID
+    const memoryBox = layer.findOne('#brec' + index);
+
+    if (memoryBox)
+    {
+        memoryBox.stroke(color);
+        memoryBox.strokeWidth(5);
+        layer.draw();
+    }
+}
+
+function highlightPersonBox(index, name, number, color)
+{
+    let y = 60 + index * 50 + 10;
+    let x = 1725 + (memoryNodes[index].length - 1) * 150;
+
+    // Draw node group (rectangle + text)
+    let group = new Konva.Group();
+
+    let nodeRect = new Konva.Rect
+    ({
+        x: x,
+        y: y,
+        width: 100,
+        height: 30,
+        fill: '#fff',
+        stroke: color,
+        strokeWidth: 4,
+        cornerRadius: 5,
+    });
+
+    let numberText = new Konva.Text
+    ({
+        x: x + 5,
+        y: y + 2,
+        text: String(number),
+        fontSize: 12,
+        fontFamily: 'Consolas',
+        fill: '#333',
+    });
+
+    let nameText = new Konva.Text
+    ({
+        x: x + 5,
+        y: y + 15,
+        text: name,
+        fontSize: 15,
+        fontFamily: 'Calibri',
+        fill: '#000',
+        fontStyle: 'bold',
+    });
+
+    group.add(nodeRect);
+    group.add(numberText);
+    group.add(nameText);
+    layer.add(group);
+    layer.draw();
+}