💄 Add progressbars to profile page.

profile/index.html

@@ -219,15 +219,84 @@
             return this.steps[this.fulfilledSteps]
         }
     }
+    export class ProgressBarView extends LitElement {
+        static properties = {
+            value: { attribute: true }
+        }
+
+        static styles = css`
+        .progress-bar {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            overflow: hidden;
+            text-align: center;
+            white-space: nowrap;
+            transition: 
+                width 0.6s ease,
+                background-color 0.6s ease;
+        }
+        .progress, .progress-stacked {
+            display: flex; 
+            height: 6pt;
+            overflow: hidden;
+            background-color: white;
+            border-radius: 6pt;
+        }
+        `;
+
+        get percentValue() { return Math.round(this.value * 100) }
+
+        render() {
+            return html`
+            <div class="progress" role="progressbar">
+                <div class="progress-bar" style="width: ${this.percentValue}%"></div>
+            </div>
+            `;
+        }
+
+        firstUpdated() {
+        }
+
+        interpolateColorComponent(start, end, progress) {
+            return Math.round(start + progress * (end - start))
+        }
+
+        interpolateColors(start, end, progress) {
+            return [
+                this.interpolateColorComponent(start[0], end[0], progress),
+                this.interpolateColorComponent(start[1], end[1], progress),
+                this.interpolateColorComponent(start[2], end[2], progress),
+            ]
+        }
+
+        updated() {
+            const color1 = [249, 124, 27]
+            const color2 = [154, 212, 201]
+            const progressbar = this.renderRoot.querySelector('.progress-bar')
+
+            const interpolatedColor = this.interpolateColors(color1, color2, this.value)
+            progressbar.style.backgroundColor = `rgb(${interpolatedColor[0]},${interpolatedColor[1]},${interpolatedColor[2]})`
+
+        }
+    }
+    customElements.define('progress-bar', ProgressBarView);
+
     export class GlobalProgressView extends LitElement {
         static properties = {
             /** @type {GlobalProgress} */
             globalProgress: { attribute: false }
         }
 
-
         // Define scoped styles right with your component, in plain CSS
         static styles = css`
+        h2 {
+            margin-bottom: 8pt
+        }
+        ul {
+            list-style: none;
+            padding-left: 0;
+        }
         `;
 
         constructor() {
@@ -273,8 +342,8 @@
          */
         renderProgression(that, progression) {
             return html`<section>
-                <h2>${progression.title} : ${Math.round(progression.progress * 100)}%</h2>
-
+                <h2>${progression.title} : </h2>
+                <progress-bar value="${progression.progress}"></progress-bar>
                 <ul>
                     ${progression.items.map((item) => that.renderProgressionItem(that, progression, item))}
                 </ul>
@@ -284,7 +353,7 @@ <h2>${progression.title} : ${Math.round(progression.progress * 100)}%</h2>
         // Render the UI as a function of component state
         render() {
             return html`
-            <div>Global progress : ${this.globalProgress.fulfilledSteps}  / ${this.globalProgress.steps.length - 1} </div>
+            <div>Global progress : ${this.globalProgress.fulfilledSteps} / ${this.globalProgress.steps.length - 1} </div>
             <div>${this.globalProgress.currentStepLabel}</div>
             ${this.globalProgress.progressions.map((progression) => this.renderProgression(this, progression))}
             `;