Skip to content

Commit b0cb697

Browse files
PramithaMJPramithaMJ
committed
feat: Enhance GC simulator visualization with a new UI, real-time stats, and a "Stop The World" truck animation.
1 parent 14a2454 commit b0cb697

File tree

7 files changed

+725
-209
lines changed

7 files changed

+725
-209
lines changed

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,6 @@
88
</head>
99
<body>
1010
<div id="root"></div>
11-
<script type="module" src="/src/main.tsx"></script>
11+
<script type="module" src="./src/main.tsx"></script>
1212
</body>
1313
</html>

‎src/components/UI/MemoryBlock.module.css‎

Lines changed: 97 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,52 +1,136 @@
11
.block {
2-
width: 24px;
3-
height: 24px;
4-
border-radius: var(--radius-sm);
5-
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
2+
width: 64px;
3+
height: 64px;
4+
border-radius: var(--radius-md);
5+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
66
position: relative;
77
cursor: pointer;
88
animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
9+
border: 2px solid;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
overflow: hidden;
15+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
16+
}
17+
18+
.block:hover {
19+
transform: scale(1.05);
920
}
1021

1122
.block:hover::after {
1223
content: attr(data-age);
1324
position: absolute;
14-
top: -25px;
25+
top: -30px;
1526
left: 50%;
1627
transform: translateX(-50%);
1728
background: var(--color-bg-secondary);
18-
padding: 2px 6px;
29+
padding: 4px 8px;
1930
border-radius: var(--radius-sm);
2031
font-size: var(--text-xs);
2132
z-index: 10;
2233
white-space: nowrap;
2334
color: var(--color-text-primary);
35+
border: 1px solid var(--color-border-default);
2436
}
2537

38+
/* Empty slot */
39+
.emptySlot {
40+
width: 64px;
41+
height: 64px;
42+
border-radius: var(--radius-md);
43+
border: 2px dashed #374151;
44+
background-color: rgba(17, 24, 39, 0.3);
45+
transition: all 0.3s ease;
46+
}
47+
48+
/* Live object colors */
2649
.eden {
27-
background-color: var(--color-eden);
50+
background-color: #10b981;
51+
border-color: #6ee7b7;
2852
}
2953

3054
.survivor {
31-
background-color: var(--color-survivor);
55+
background-color: #3b82f6;
56+
border-color: #93c5fd;
3257
}
3358

3459
.old {
35-
background-color: var(--color-old);
60+
background-color: #6366f1;
61+
border-color: #a5b4fc;
62+
}
63+
64+
/* Garbage styling */
65+
.garbage {
66+
background-color: rgba(159, 18, 57, 0.6);
67+
border-color: #f43f5e;
68+
}
69+
70+
/* Content inside blocks */
71+
.liveContent {
72+
display: flex;
73+
flex-direction: column;
74+
align-items: center;
75+
justify-content: center;
76+
height: 100%;
77+
width: 100%;
78+
}
79+
80+
.objLabel {
81+
font-size: 10px;
82+
font-weight: 700;
83+
color: white;
84+
}
85+
86+
.ageLabel {
87+
font-size: 8px;
88+
color: rgba(255, 255, 255, 0.8);
3689
}
3790

38-
.dead {
39-
background-color: var(--color-dead) !important;
40-
opacity: 0.5;
41-
transform: scale(0.8);
91+
.garbageContent {
92+
display: flex;
93+
align-items: center;
94+
justify-content: center;
95+
height: 100%;
96+
width: 100%;
97+
}
98+
99+
.garbageIcon {
100+
font-size: 18px;
101+
animation: pulse 1s ease-in-out infinite;
102+
}
103+
104+
/* Memory address */
105+
.memoryAddress {
106+
position: absolute;
107+
bottom: 2px;
108+
right: 3px;
109+
font-size: 6px;
110+
font-family: var(--font-mono);
111+
color: rgba(255, 255, 255, 0.5);
42112
}
43113

44114
@keyframes popIn {
45115
0% {
46116
transform: scale(0);
117+
opacity: 0;
47118
}
48119

49120
100% {
50121
transform: scale(1);
122+
opacity: 1;
123+
}
124+
}
125+
126+
@keyframes pulse {
127+
128+
0%,
129+
100% {
130+
opacity: 1;
131+
}
132+
133+
50% {
134+
opacity: 0.5;
51135
}
52136
}

‎src/components/UI/MemoryBlock.tsx‎

Lines changed: 45 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,60 @@
11
/**
22
* MemoryBlock Component
3-
* Animated memory block for GC visualization
3+
* Enhanced memory block for GC visualization with empty slot and garbage support
44
*/
55

6-
import type { IHeapObject } from '../../types';
6+
import type { MemorySlot, MemoryLocation } from '../../types';
77
import styles from './MemoryBlock.module.css';
88

99
interface MemoryBlockProps {
10-
object: IHeapObject;
11-
onClick: () => void;
10+
slot: MemorySlot;
11+
location: MemoryLocation;
12+
onClick?: () => void;
1213
}
1314

14-
export function MemoryBlock({ object, onClick }: MemoryBlockProps) {
15-
const generationClass = styles[object.generation];
16-
const deadClass = !object.isAlive ? styles.dead : '';
15+
export function MemoryBlock({ slot, location, onClick }: MemoryBlockProps) {
16+
// Empty slot rendering
17+
if (!slot) {
18+
return <div className={styles.emptySlot} />;
19+
}
20+
21+
const { id, age, status } = slot;
22+
23+
// Garbage object
24+
if (status === 'garbage') {
25+
return (
26+
<div
27+
className={`${styles.block} ${styles.garbage}`}
28+
onClick={onClick}
29+
title={`ID: 0x${id.toString(16).toUpperCase()}, GARBAGE`}
30+
>
31+
<div className={styles.garbageContent}>
32+
<span className={styles.garbageIcon}>🗑</span>
33+
</div>
34+
<div className={styles.memoryAddress}>
35+
0x{id.toString(16).padStart(4, '0').toUpperCase()}
36+
</div>
37+
</div>
38+
);
39+
}
40+
41+
// Live object
42+
const locationClass = location === 'OLD' ? styles.old : location === 'SURVIVOR' ? styles.survivor : styles.eden;
1743

1844
return (
1945
<div
20-
className={`${styles.block} ${generationClass} ${deadClass}`}
46+
className={`${styles.block} ${locationClass}`}
2147
onClick={onClick}
22-
data-age={`Age: ${object.age}`}
23-
title={`ID: ${object.id}, Age: ${object.age}, ${object.isAlive ? 'Alive' : 'Dead'}`}
24-
/>
48+
data-age={`Age: ${age}`}
49+
title={`ID: 0x${id.toString(16).toUpperCase()}, Age: ${age}, Live`}
50+
>
51+
<div className={styles.liveContent}>
52+
<div className={styles.objLabel}>OBJ</div>
53+
<div className={styles.ageLabel}>Age: {age}</div>
54+
</div>
55+
<div className={styles.memoryAddress}>
56+
0x{id.toString(16).padStart(4, '0').toUpperCase()}
57+
</div>
58+
</div>
2559
);
2660
}

0 commit comments

Comments
 (0)