Skip to content

Commit 9680b26

Browse files
pgallinoMegaRedHand
pgallino
and
MegaRedHand
authored
feat: add default information display in right bar (#253)
close #189 Co-authored-by: Tomás Grüner <[email protected]>
1 parent 6941b2c commit 9680b26

File tree

2 files changed

+202
-0
lines changed

2 files changed

+202
-0
lines changed

‎src/graphics/right_bar.ts‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export class RightBar {
2828
const infoContent = document.createElement("div");
2929
infoContent.id = "info-content";
3030
this.rightBar.appendChild(infoContent);
31+
this.showDefaultInfo();
3132
}
3233

3334
// Method to clear only the content of info-content
@@ -36,6 +37,7 @@ export class RightBar {
3637
if (infoContent) {
3738
infoContent.innerHTML = ""; // Clears only the content of info-content
3839
}
40+
this.showDefaultInfo(); // Show default info
3941
}
4042

4143
// Shows specific information of an element in info-content
@@ -45,4 +47,81 @@ export class RightBar {
4547
infoContent.replaceChildren(...info.toHTML());
4648
}
4749
}
50+
51+
getDefaultInfoHtml(): string {
52+
return `
53+
<div id="default-info" class="default-info">
54+
<h2 class="default-info-title">Welcome to GEduNet! <span class="default-info-emoji">🌐</span></h2>
55+
<p class="default-info-lead">
56+
<strong>GEduNet</strong> is a <b>Graphical Educational Computer Network Simulator</b>.
57+
</p>
58+
<p class="default-info-lead">
59+
It's meant as an aid to students trying to understand computer networks, along with their teachers.
60+
</p>
61+
62+
<h3 class="default-info-section">User Manual</h3>
63+
<p>GEduNet consists of four main on-screen components:</p>
64+
<ul>
65+
<li><b>Right bar:</b> Shows information about the selected device, edge or packet.</li>
66+
<li><b>Left bar:</b> Contains buttons to add devices to the network.</li>
67+
<li><b>Canvas:</b> The main area where the network is built and displayed.</li>
68+
<li><b>Top bar:</b> Simulation controls, file operations, help, and settings.</li>
69+
</ul>
70+
71+
<h4 class="default-info-subsection">Left Bar</h4>
72+
<p>Add devices by clicking their buttons. Devices appear in the center of the canvas.</p>
73+
<ul>
74+
<li><b>Host:</b> End device that sends/receives packets.</li>
75+
<li><b>Router:</b> Forwards packets between networks.</li>
76+
<li><b>Switch:</b> Forwards packets within a local network using MAC addresses.</li>
77+
</ul>
78+
<p>The available devices depend on the selected network layer:</p>
79+
<ul>
80+
<li><b>App Layer:</b> Host</li>
81+
<li><b>Transport Layer:</b> Host</li>
82+
<li><b>Network Layer:</b> Host, Router</li>
83+
<li><b>Link Layer:</b> Host, Router, Switch</li>
84+
</ul>
85+
86+
<h4 class="default-info-subsection">Right Bar</h4>
87+
<p>Displays context-sensitive information for the selected item in the canvas. Click a device, edge or packet to inspect it.</p>
88+
89+
<h4 class="default-info-subsection">Top Bar</h4>
90+
<p>Provides control over the simulation and file operations:</p>
91+
<ul>
92+
<li><b>New:</b> Reset the current network.</li>
93+
<li><b>Save:</b> Download the network as a JSON file.</li>
94+
<li><b>Load:</b> Upload a network from a JSON file.</li>
95+
<li><b>Print:</b> Save a PNG snapshot of the canvas.</li>
96+
<li><b>Help:</b> View shortcuts and settings.</li>
97+
</ul>
98+
99+
<h4 class="default-info-subsection">Canvas</h4>
100+
<p>The main area where you interact with the network. You can:</p>
101+
<ul>
102+
<li>Drag and position devices</li>
103+
<li>Zoom in/out with the mouse wheel</li>
104+
<li>Observe packet flow across the network</li>
105+
</ul>
106+
<p>Canvas controls above the network area include:</p>
107+
<ul>
108+
<li><b>Play/Pause:</b> Start or stop the simulation</li>
109+
<li><b>Undo/Redo:</b> Fix recent actions</li>
110+
<li><b>Packet Speed:</b> Adjust how fast packets travel</li>
111+
<li><b>Layer Selection:</b> Switch between OSI layers</li>
112+
</ul>
113+
114+
<h3 class="default-info-section">GitHub</h3>
115+
<p>GEduNet is open-source! You can find the full project on GitHub:</p>
116+
<a class="default-info-link" href="https://github.com/MegaRedHand/network-simulator" target="_blank" rel="noopener">View on GitHub</a>
117+
</div>
118+
`;
119+
}
120+
121+
showDefaultInfo() {
122+
const infoContent = document.getElementById("info-content");
123+
if (infoContent) {
124+
infoContent.innerHTML = this.getDefaultInfoHtml();
125+
}
126+
}
48127
}

‎src/styles/right-bar.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,126 @@
3535
-ms-overflow-style: none; /* Hides the scrollbar in IE and Edge */
3636
scrollbar-width: none; /* Hides the scrollbar in Firefox */
3737
}
38+
39+
/* ...otros estilos... */
40+
41+
.default-info {
42+
font-family: "Segoe UI", Arial, sans-serif;
43+
color: #2b2b2b;
44+
padding: 24px 18px 24px 18px;
45+
border-radius: 8px;
46+
margin: 0;
47+
font-size: 1.05em;
48+
}
49+
50+
.default-info-title {
51+
font-size: 2.1em;
52+
margin-bottom: 0.2em;
53+
font-weight: bold;
54+
letter-spacing: 0.01em;
55+
display: flex;
56+
align-items: center;
57+
gap: 0.3em;
58+
color: #2b2b2b;
59+
}
60+
61+
.default-info-emoji {
62+
font-size: 1.1em;
63+
}
64+
65+
.default-info-lead {
66+
font-size: 1.1em;
67+
margin-bottom: 0.7em;
68+
color: #2b2b2b;
69+
}
70+
71+
.default-info-section {
72+
color: #007bff;
73+
margin-top: 1.2em;
74+
margin-bottom: 0.3em;
75+
font-size: 1.15em;
76+
font-weight: 600;
77+
display: flex;
78+
align-items: center;
79+
gap: 0.3em;
80+
}
81+
82+
.default-info-subsection {
83+
color: #007bff;
84+
margin-top: 1em;
85+
margin-bottom: 0.2em;
86+
font-size: 1.07em;
87+
font-weight: 500;
88+
display: flex;
89+
align-items: center;
90+
gap: 0.3em;
91+
}
92+
93+
.default-info-icon {
94+
font-size: 1.1em;
95+
}
96+
97+
.default-info-link {
98+
color: #007bff;
99+
text-decoration: underline;
100+
font-weight: 500;
101+
transition: color 0.2s;
102+
}
103+
.default-info-link:hover {
104+
color: #0d47a1;
105+
}
106+
107+
.default-info ul {
108+
margin: 0.3em 0 0.7em 1.5em;
109+
padding: 0;
110+
color: #2b2b2b;
111+
}
112+
113+
.default-info code {
114+
border-radius: 3px;
115+
padding: 2px 6px;
116+
font-size: 0.97em;
117+
color: #111;
118+
}
119+
120+
.default-info h2,
121+
.default-info h3,
122+
.default-info h4 {
123+
font-family: inherit;
124+
color: #2b2b2b;
125+
margin-top: 1.2em;
126+
margin-bottom: 0.4em;
127+
font-weight: bold;
128+
}
129+
130+
.default-info h2 {
131+
font-size: 2.1em;
132+
margin-top: 0.2em;
133+
margin-bottom: 0.3em;
134+
}
135+
136+
.default-info h3 {
137+
font-size: 1.25em;
138+
color: #007bff;
139+
}
140+
141+
.default-info h4 {
142+
font-size: 1.1em;
143+
color: #007bff;
144+
}
145+
146+
.default-info p {
147+
color: #2b2b2b;
148+
margin-bottom: 0.7em;
149+
margin-top: 0.3em;
150+
}
151+
152+
@media (max-width: 600px) {
153+
.default-info {
154+
padding: 12px 4px;
155+
font-size: 0.98em;
156+
}
157+
.default-info-title {
158+
font-size: 1.3em;
159+
}
160+
}

0 commit comments

Comments
 (0)