You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
1.5 KiB
80 lines
1.5 KiB
<script lang="ts" context="module">
|
|
const COLORS = [
|
|
"none",
|
|
"bronze",
|
|
"silver",
|
|
"gold",
|
|
"diamond"
|
|
]
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
export let target = 1;
|
|
export let count = 0;
|
|
|
|
let offClass = COLORS[0];
|
|
let onClass = COLORS[1];
|
|
let ons = 0;
|
|
let offs = 1;
|
|
|
|
$: {
|
|
let level = Math.floor(count / target);
|
|
if (level >= COLORS.length - 1) {
|
|
offs = 0;
|
|
ons = target;
|
|
offClass = "gold";
|
|
onClass = "diamond";
|
|
} else {
|
|
if (count > 0 && count == (level * target)) {
|
|
level -= 1;
|
|
}
|
|
|
|
ons = count - (level * target);
|
|
offs = target - ons;
|
|
offClass = COLORS[level];
|
|
onClass = COLORS[level + 1];
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="bar">
|
|
{#each {length: ons} as _}
|
|
<div class={"on " + onClass}></div>
|
|
{/each}
|
|
{#each {length: offs} as _}
|
|
<div class={"off " + offClass}></div>
|
|
{/each}
|
|
</div>
|
|
|
|
<style>
|
|
div.bar {
|
|
display: flex;
|
|
flex-direction: row;
|
|
margin: 0;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
height: 1em;
|
|
}
|
|
|
|
div.bar > div {
|
|
flex-grow: 1;
|
|
flex-basis: 0;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
border: 0.1px solid #000;
|
|
}
|
|
|
|
div.none { background-color: #555555; }
|
|
div.bronze { background-color: #f4b083; }
|
|
div.silver { background-color: #d8dce4; }
|
|
div.gold { background-color: #ffd966; }
|
|
div.diamond { background-color: #84f5ff; }
|
|
|
|
div.on {
|
|
opacity: 0.75;
|
|
}
|
|
|
|
div.off {
|
|
opacity: 0.33;
|
|
}
|
|
</style>
|