Skip to content

Commit 4bcfe64

Browse files
carlieyungcarlieyung
committed
Linked List Data Structure and List Data Structure Added
1 parent a7ee23f commit 4bcfe64

File tree

7 files changed

+450
-258
lines changed

7 files changed

+450
-258
lines changed

‎.idea/workspace.xml

Lines changed: 50 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/algorithms/controllers/Prototype.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ function isBuildHeapExpanded() {
6363
function isDownHeapkExpanded() {
6464
return areExpanded(['BuildHeap', 'DownHeapk']);
6565
}
66+
6667
import ListTracer from '../../components/DataStructures/List/ListTracer.js';
6768

6869
export default {
@@ -73,16 +74,17 @@ export default {
7374
order: 0,
7475
}
7576
};
76-
},
7777

78+
},
7879
run(chunker, {values}) {
7980

8081
chunker.add(
81-
0,
82+
1,
8283
(vis, list) => {
8384
vis.list.set(list, "Prototype");
8485
},
8586
[values]
8687
);
8788
}
89+
8890
};

‎src/algorithms/pseudocode/PROTOTYPE.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,4 @@ MergeLeftRight(left, right)
8383
result <- right \\B 7
8484
result.next = MergeLeftRight(left, result.next)
8585
\\Code}
86-
`);
86+
`);

‎src/components/DataStructures/LinkedList/LinkedListRenderer/LinkedListRenderer.module.scss

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
@import "../../common/stylesheet/index";
2+
3+
.linked_list {
4+
display: flex;
5+
align-items: center;
6+
justify-content: center;
7+
padding: 20px;
8+
flex-wrap: wrap;
9+
10+
.node {
11+
display: flex;
12+
align-items: center;
13+
background-color: var(--linked-list-node-bg);
14+
border: 2px solid var(--linked-list-node-border);
15+
border-radius: 8px;
16+
padding: 10px;
17+
margin: 0 10px;
18+
min-width: 60px;
19+
text-align: center;
20+
21+
.value {
22+
font-size: 16px;
23+
font-weight: bold;
24+
color: var(--linked-list-node-value-color);
25+
}
26+
27+
&.head {
28+
background-color: var(--linked-list-head-bg);
29+
border-color: var(--linked-list-head-border);
30+
31+
.value {
32+
color: var(--linked-list-head-value-color);
33+
}
34+
}
35+
36+
&.tail {
37+
background-color: var(--linked-list-tail-bg);
38+
border-color: var(--linked-list-tail-border);
39+
40+
.value {
41+
color: var(--linked-list-tail-value-color);
42+
}
43+
}
44+
45+
&.selected {
46+
background-color: var(--linked-list-selected-bg);
47+
border-color: var(--linked-list-selected-border);
48+
49+
.value {
50+
color: var(--linked-list-selected-value-color);
51+
}
52+
}
53+
54+
&.highlighted {
55+
background-color: var(--linked-list-highlighted-bg);
56+
border-color: var(--linked-list-highlighted-border);
57+
58+
.value {
59+
color: var(--linked-list-highlighted-value-color);
60+
}
61+
}
62+
}
63+
64+
.arrow {
65+
width: 40px;
66+
height: 2px;
67+
background-color: var(--linked-list-arrow-color);
68+
position: relative;
69+
margin: 0 5px;
70+
71+
&::before {
72+
content: '';
73+
position: absolute;
74+
top: -5px;
75+
right: -10px;
76+
border: 6px solid transparent;
77+
border-left-color: var(--linked-list-arrow-color);
78+
}
79+
}
80+
81+
.caption {
82+
text-align: center;
83+
font-size: 14px;
84+
color: var(--linked-list-caption-color);
85+
margin-top: 10px;
86+
}
87+
}
88+
89+
// Sample color variable definitions (to be included in your variables file or inline)
90+
:root {
91+
--linked-list-node-bg: #ffffff;
92+
--linked-list-node-border: #cccccc;
93+
--linked-list-node-value-color: #333333;
94+
95+
--linked-list-head-bg: #d1e7dd;
96+
--linked-list-head-border: #0f5132;
97+
--linked-list-head-value-color: #0f5132;
98+
99+
--linked-list-tail-bg: #f8d7da;
100+
--linked-list-tail-border: #842029;
101+
--linked-list-tail-value-color: #842029;
102+
103+
--linked-list-selected-bg: #cfe2ff;
104+
--linked-list-selected-border: #084298;
105+
--linked-list-selected-value-color: #084298;
106+
107+
--linked-list-highlighted-bg: #fff3cd;
108+
--linked-list-highlighted-border: #856404;
109+
--linked-list-highlighted-value-color: #856404;
110+
111+
--linked-list-arrow-color: #6c757d;
112+
113+
--linked-list-caption-color: #6c757d;
114+
}

‎src/components/DataStructures/LinkedList/LinkedListRenderer/index.js

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import React from 'react';
2+
import { motion, AnimateSharedLayout } from 'framer-motion';
3+
import Renderer from '../../common/Renderer/index';
4+
import styles from './LinkedListRenderer.module.scss';
5+
import { classes } from '../../common/util';
6+
7+
class LinkedListRenderer extends Renderer{
8+
constructor(props) {
9+
super(props);
10+
11+
this.state = {
12+
nodes: props.data.nodes, // assuming the linked list data is passed as props
13+
};
14+
}
15+
16+
renderData() {
17+
const { nodes } = this.state;
18+
19+
return (
20+
<div className={styles.linkedListContainer}>
21+
<AnimateSharedLayout>
22+
{nodes.map((node, index) => (
23+
<div className={styles.nodeContainer} key={index}>
24+
<motion.div
25+
layoutId={`node-${index}`}
26+
className={styles.node}
27+
initial={{ opacity: 0 }}
28+
animate={{ opacity: 1 }}
29+
transition={{ type: 'spring', stiffness: 100 }}
30+
>
31+
<div className={styles.value}>{node.value}</div>
32+
<div className={styles.pointer}>
33+
{node.next !== null ? (
34+
<motion.div
35+
className={styles.arrow}
36+
layoutId={`arrow-${index}`}
37+
>
38+
→
39+
</motion.div>
40+
) : (
41+
<motion.div className={styles.null}>null</motion.div>
42+
)}
43+
</div>
44+
</motion.div>
45+
</div>
46+
))}
47+
</AnimateSharedLayout>
48+
</div>
49+
);
50+
}
51+
}
52+
53+
export default LinkedListRenderer;

0 commit comments

Comments
 (0)