diff options
| -rw-r--r-- | cockpit/index.css | 18 | ||||
| -rw-r--r-- | cockpit/index.html | 5 | ||||
| -rw-r--r-- | cockpit/js/cockpit.js | 9 | ||||
| -rw-r--r-- | cockpit/webpack.config.js | 8 |
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/, |