feat: create the level 1-5 representation component

src/components/LevelDisplay.vue

@@ -0,0 +1,80 @@
+<template>
+	<div class='level' >
+		<div ref='l1' class='l1'/>
+		<div ref='l2' class='l2'/>
+		<div ref='l3' class='l3'/>
+		<div ref='l4' class='l4'/>
+		<div ref='l5' class='l5'/>
+	</div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+@Component({})
+export default class LevelDisplay extends Vue {
+	// id of the skill to display (number representation)
+	@Prop(Number) private level: number|undefined;
+
+	protected mounted(){
+		this.update(this.level);
+	}
+
+	@Watch('level')
+  	protected onLevelChanged(val: number|undefined, oldVal: number|undefined) {
+		this.update(val);
+	}
+
+	private update(level: number|undefined) {
+		if( level == undefined ){
+			return;
+		}
+
+		const els : HTMLElement[] = [
+			this.$refs.l1 as HTMLElement,
+			this.$refs.l2 as HTMLElement,
+			this.$refs.l3 as HTMLElement,
+			this.$refs.l4 as HTMLElement,
+			this.$refs.l5 as HTMLElement,
+		];
+		for( let i = 0 ; i < els.length ; i++ ){
+			if( els[i] == undefined ){
+				continue;
+			}
+			els[i].classList.remove("active");
+			if( i < level ){
+				els[i].classList.add("active");
+			}
+		}
+	}
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+	.level {
+		display: flex;
+
+		flex-flow: row nowrap;
+
+		div {
+			display: block;
+			position: relative;
+				width:  .8em;
+				height: .8em;
+
+			margin: 0 .2em;
+
+			border-radius: 50%;
+			background: #141619;
+
+			&.active {
+				background: #6252c6;
+			}
+		}
+
+		.l1 {
+			margin-left: 0;
+		}
+	}
+</style>