Skip to content

Commit 93142ec

Browse files
PramithaMJPramithaMJ
committed
feat: Introduce new modules for JVM Architecture and Platform, including theory and simulator components.
1 parent b0cb697 commit 93142ec

13 files changed

+2832
-2
lines changed

‎src/features/architecture/ArchitectureModule.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Architecture Module - Main Container
3+
* JVM Architecture deep dive with interactive visualization
4+
*/
5+
6+
import { useNavigation } from '../../contexts';
7+
import { ArchitectureSimulator } from './ArchitectureSimulator';
8+
import { ArchitectureTheory } from './ArchitectureTheory';
9+
10+
export function ArchitectureModule() {
11+
const { activeTab } = useNavigation();
12+
13+
return activeTab === 'simulator' ? <ArchitectureSimulator /> : <ArchitectureTheory />;
14+
}

‎src/features/architecture/ArchitectureSimulator.module.css‎

Lines changed: 365 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,365 @@
1+
/* Architecture Simulator Styles */
2+
3+
.container {
4+
display: flex;
5+
flex-direction: column;
6+
width: 100%;
7+
height: 100%;
8+
overflow: hidden;
9+
}
10+
11+
@media (min-width: 768px) {
12+
.container {
13+
flex-direction: row;
14+
}
15+
}
16+
17+
/* Visualizer */
18+
.visualizer {
19+
flex: 1;
20+
background-color: var(--color-bg-primary);
21+
padding: var(--space-6);
22+
overflow-y: auto;
23+
}
24+
25+
.header {
26+
margin-bottom: var(--space-6);
27+
}
28+
29+
.title {
30+
font-size: var(--text-2xl);
31+
font-weight: 700;
32+
color: var(--color-text-primary);
33+
}
34+
35+
.subtitle {
36+
font-size: var(--text-sm);
37+
color: var(--color-text-muted);
38+
}
39+
40+
/* Phase Indicator */
41+
.phaseIndicator {
42+
background: linear-gradient(90deg, rgba(249, 115, 22, 0.2), transparent);
43+
border-left: 4px solid #f97316;
44+
padding: var(--space-3) var(--space-4);
45+
margin-bottom: var(--space-6);
46+
border-radius: 0 var(--radius-md) var(--radius-md) 0;
47+
display: flex;
48+
align-items: center;
49+
gap: var(--space-3);
50+
animation: pulse 1s ease-in-out infinite;
51+
}
52+
53+
@keyframes pulse {
54+
55+
0%,
56+
100% {
57+
opacity: 1;
58+
}
59+
60+
50% {
61+
opacity: 0.7;
62+
}
63+
}
64+
65+
.phaseLabel {
66+
font-size: var(--text-sm);
67+
color: var(--color-text-muted);
68+
}
69+
70+
.phaseName {
71+
font-weight: 700;
72+
color: #f97316;
73+
}
74+
75+
/* Runtime Data Areas */
76+
.runtimeAreas {
77+
display: grid;
78+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
79+
gap: var(--space-4);
80+
margin-bottom: var(--space-6);
81+
}
82+
83+
.areaCard {
84+
background-color: var(--color-bg-secondary);
85+
border: 1px solid var(--color-border-default);
86+
border-radius: var(--radius-lg);
87+
overflow: hidden;
88+
}
89+
90+
.areaHeader {
91+
display: flex;
92+
align-items: center;
93+
gap: var(--space-2);
94+
padding: var(--space-3) var(--space-4);
95+
background-color: rgba(0, 0, 0, 0.3);
96+
border-bottom: 1px solid var(--color-border-default);
97+
}
98+
99+
.areaIcon {
100+
font-size: var(--text-lg);
101+
}
102+
103+
.areaName {
104+
font-weight: 700;
105+
color: var(--color-text-primary);
106+
font-size: var(--text-sm);
107+
}
108+
109+
.areaCount {
110+
margin-left: auto;
111+
font-size: var(--text-xs);
112+
color: var(--color-text-muted);
113+
background-color: rgba(255, 255, 255, 0.1);
114+
padding: var(--space-1) var(--space-2);
115+
border-radius: var(--radius-full);
116+
}
117+
118+
.areaContent {
119+
padding: var(--space-4);
120+
min-height: 100px;
121+
}
122+
123+
.emptyState {
124+
color: var(--color-text-muted);
125+
font-size: var(--text-sm);
126+
font-style: italic;
127+
}
128+
129+
/* Class Items in Method Area */
130+
.classItem {
131+
display: flex;
132+
align-items: center;
133+
gap: var(--space-2);
134+
padding: var(--space-2);
135+
background-color: rgba(249, 115, 22, 0.1);
136+
border-radius: var(--radius-md);
137+
margin-bottom: var(--space-2);
138+
font-family: var(--font-mono);
139+
font-size: var(--text-sm);
140+
color: #f97316;
141+
}
142+
143+
.classIcon {
144+
font-size: var(--text-sm);
145+
}
146+
147+
/* Heap Content */
148+
.heapContent {
149+
padding: var(--space-4);
150+
display: flex;
151+
flex-wrap: wrap;
152+
gap: var(--space-2);
153+
min-height: 100px;
154+
}
155+
156+
.heapObject {
157+
display: flex;
158+
flex-direction: column;
159+
align-items: center;
160+
background-color: rgba(134, 239, 172, 0.15);
161+
border: 1px solid rgba(134, 239, 172, 0.3);
162+
padding: var(--space-2);
163+
border-radius: var(--radius-md);
164+
animation: fadeIn 0.3s ease-out;
165+
}
166+
167+
@keyframes fadeIn {
168+
from {
169+
opacity: 0;
170+
transform: scale(0.8);
171+
}
172+
173+
to {
174+
opacity: 1;
175+
transform: scale(1);
176+
}
177+
}
178+
179+
.objectType {
180+
font-size: var(--text-xs);
181+
font-weight: 600;
182+
color: #86efac;
183+
}
184+
185+
.objectId {
186+
font-size: var(--text-xs);
187+
font-family: var(--font-mono);
188+
color: var(--color-text-muted);
189+
}
190+
191+
/* Stack Content */
192+
.stackContent {
193+
padding: var(--space-4);
194+
display: flex;
195+
flex-direction: column;
196+
gap: var(--space-1);
197+
min-height: 100px;
198+
}
199+
200+
.stackFrame {
201+
background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), transparent);
202+
border-left: 3px solid rgba(168, 85, 247, 0.3);
203+
padding: var(--space-2) var(--space-3);
204+
font-family: var(--font-mono);
205+
font-size: var(--text-sm);
206+
color: var(--color-text-secondary);
207+
display: flex;
208+
align-items: center;
209+
gap: var(--space-2);
210+
}
211+
212+
.stackTop {
213+
background: linear-gradient(90deg, rgba(168, 85, 247, 0.3), transparent);
214+
border-left-color: #a855f7;
215+
color: #a855f7;
216+
font-weight: 600;
217+
}
218+
219+
.topIndicator {
220+
font-size: var(--text-xs);
221+
color: #a855f7;
222+
}
223+
224+
/* PC Card */
225+
.pcCard {
226+
background-color: var(--color-bg-secondary);
227+
border: 1px solid var(--color-border-default);
228+
border-radius: var(--radius-lg);
229+
padding: var(--space-4);
230+
display: flex;
231+
flex-direction: column;
232+
align-items: center;
233+
justify-content: center;
234+
}
235+
236+
.pcLabel {
237+
font-size: var(--text-xs);
238+
color: var(--color-text-muted);
239+
text-transform: uppercase;
240+
margin-bottom: var(--space-1);
241+
}
242+
243+
.pcValue {
244+
font-family: var(--font-mono);
245+
font-size: var(--text-xl);
246+
font-weight: 700;
247+
color: #60a5fa;
248+
}
249+
250+
/* ClassLoader Status */
251+
.loaderStatus {
252+
background-color: var(--color-bg-secondary);
253+
border: 1px solid var(--color-border-default);
254+
border-radius: var(--radius-lg);
255+
padding: var(--space-4);
256+
}
257+
258+
.loaderTitle {
259+
font-size: var(--text-sm);
260+
font-weight: 700;
261+
color: var(--color-text-muted);
262+
margin-bottom: var(--space-3);
263+
}
264+
265+
.loaderList {
266+
display: flex;
267+
flex-direction: column;
268+
gap: var(--space-2);
269+
}
270+
271+
.loaderItem {
272+
display: flex;
273+
align-items: center;
274+
gap: var(--space-3);
275+
padding: var(--space-2) var(--space-3);
276+
border-radius: var(--radius-md);
277+
font-size: var(--text-sm);
278+
}
279+
280+
.loaderItem.loading {
281+
background-color: rgba(250, 204, 21, 0.1);
282+
border: 1px solid rgba(250, 204, 21, 0.3);
283+
}
284+
285+
.loaderItem.linking {
286+
background-color: rgba(96, 165, 250, 0.1);
287+
border: 1px solid rgba(96, 165, 250, 0.3);
288+
}
289+
290+
.loaderItem.initialized {
291+
background-color: rgba(134, 239, 172, 0.1);
292+
border: 1px solid rgba(134, 239, 172, 0.3);
293+
}
294+
295+
.className {
296+
font-weight: 600;
297+
color: var(--color-text-primary);
298+
font-family: var(--font-mono);
299+
}
300+
301+
.classStatus {
302+
padding: var(--space-1) var(--space-2);
303+
border-radius: var(--radius-full);
304+
font-size: var(--text-xs);
305+
text-transform: uppercase;
306+
font-weight: 700;
307+
}
308+
309+
.loading .classStatus {
310+
background-color: rgba(250, 204, 21, 0.2);
311+
color: #fcd34d;
312+
}
313+
314+
.linking .classStatus {
315+
background-color: rgba(96, 165, 250, 0.2);
316+
color: #60a5fa;
317+
}
318+
319+
.initialized .classStatus {
320+
background-color: rgba(134, 239, 172, 0.2);
321+
color: #86efac;
322+
}
323+
324+
.classLoader {
325+
margin-left: auto;
326+
font-size: var(--text-xs);
327+
color: var(--color-text-muted);
328+
}
329+
330+
/* Control Panel */
331+
.controlPanel {
332+
width: 100%;
333+
background-color: #020617;
334+
border-left: 1px solid var(--color-border-subtle);
335+
display: flex;
336+
flex-direction: column;
337+
padding: var(--space-6);
338+
gap: var(--space-3);
339+
flex-shrink: 0;
340+
}
341+
342+
@media (min-width: 768px) {
343+
.controlPanel {
344+
width: 280px;
345+
}
346+
}
347+
348+
.controlTitle {
349+
font-size: var(--text-sm);
350+
font-weight: 700;
351+
color: var(--color-text-muted);
352+
text-transform: uppercase;
353+
margin-top: var(--space-4);
354+
margin-bottom: var(--space-2);
355+
}
356+
357+
.controlTitle:first-child {
358+
margin-top: 0;
359+
}
360+
361+
.classButtons {
362+
display: flex;
363+
flex-direction: column;
364+
gap: var(--space-2);
365+
}

0 commit comments

Comments
 (0)