cockpit: add level icon to student info view

4 files changed, 34 insertions, 6 deletions

diff --git a/cockpit/index.css b/cockpit/index.css
index a6435ad..5e020a6 100644
--- a/cockpit/index.css
+++ b/cockpit/index.css
@@ -93,11 +93,25 @@
   display: flex;
 }
 
+#student-info-icons {
+  width: 20%;
+  position: relative;
+}
+
 #student-info-icon {
-  flex: 0 1 20%;
   margin: 0.2rem;
-  max-width: 20%;
   clip-path: circle();
+  width: 100%;
+}
+
+#student-level-icon {
+  width: 30%;
+  position: absolute;
+  top: 70%;
+  left: 70%;
+  border: solid 1px;
+  border-radius: 50%;
+  background: white;
 }
 
 #student-info-name-container {
diff --git a/cockpit/index.html b/cockpit/index.html
index 520b1f3..0607967 100644
--- a/cockpit/index.html
+++ b/cockpit/index.html
@@ -30,7 +30,10 @@
 <div id="student-content" style="display: none">
   <div id="student-info">
     <div id="student-info-top" class="student-info-banner">
-      <img id="student-info-icon" src="assets/user-profile-icon.svg"></img>
+      <div id="student-info-icons">
+        <img id="student-info-icon" src="assets/user-profile-icon.svg"></img>
+        <img id="student-level-icon"></img>
+      </div>
       <div id="student-info-name-container">
         <span id="student-info-name"></span>
         <span id="student-info-tag"></span>
diff --git a/cockpit/js/cockpit.js b/cockpit/js/cockpit.js
index 0d989da..fb3b539 100644
--- a/cockpit/js/cockpit.js
+++ b/cockpit/js/cockpit.js
@@ -144,7 +144,7 @@ function updateStudentInfo() {
 				() => pointClickHandler("red"));
 		}
 
-		renderGraduationLevel(student.graduation, document.getElementById("student-info-level"));
+		renderGraduationLevel(student.graduation);
 
 		// renderGraduationStickers(student.graduation, document.getElementById("student-info-stickers"));
 		// renderGraduationBonus(student.graduation, document.getElementById("student-info-stickers"));
@@ -155,8 +155,11 @@ function updateStudentInfo() {
 	document.getElementById("student-content").style.display = "block";
 }
 
-function renderGraduationLevel(graduation, node) {
-	node.innerHTML = graduation.getLevelName();
+function renderGraduationLevel(graduation) {
+	const label = document.getElementById("student-info-level");
+	label.innerHTML = graduation.getLevelName();
+	const icon = document.getElementById("student-level-icon");
+	icon.src = graduation.getIcon();
 }
 
 // function renderGraduationStickers(graduation, node) {
diff --git a/cockpit/webpack.config.js b/cockpit/webpack.config.js
index ec3e2fe..88aad41 100644
--- a/cockpit/webpack.config.js
+++ b/cockpit/webpack.config.js
@@ -9,6 +9,14 @@ const config = {
     output: {
         path: path.resolve(__dirname, 'dist'),
     },
+    module: {
+        rules: [
+            {
+              test: /\.png/,
+              type: 'asset/inline',
+            },
+        ],
+    },
     plugins: [
         new webpack.NormalModuleReplacementPlugin(
             /-ENV.js/,