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.
117 lines
2.3 KiB
117 lines
2.3 KiB
<script>
|
|
import { onMount } from "svelte";
|
|
|
|
export let value;
|
|
export let goal;
|
|
|
|
let smoothValue = value;
|
|
let bars = [];
|
|
let timeout = null;
|
|
|
|
function update(value, goal) {
|
|
const bars = [];
|
|
let gold = (goal / 1000);
|
|
let red = gold + 3;
|
|
|
|
for (let i = 0;; ++i) {
|
|
let v = value - (i * 1000);
|
|
if (v > 1000) {
|
|
v = 1000;
|
|
} else if (v < 0) {
|
|
v = 0;
|
|
}
|
|
|
|
if (i >= red && v === 0) {
|
|
break;
|
|
}
|
|
|
|
bars.push({
|
|
green: i < gold,
|
|
gold: i >= gold && i < red,
|
|
red: i >= red,
|
|
value: v,
|
|
full: v === 1000,
|
|
})
|
|
}
|
|
|
|
return bars;
|
|
}
|
|
|
|
onMount(() => {
|
|
return () => clearTimeout(timeout);
|
|
})
|
|
|
|
$: bars = update(smoothValue, goal);
|
|
|
|
$: if (smoothValue !== value && timeout === null) {
|
|
timeout = setInterval(() => {
|
|
if (smoothValue < value) {
|
|
smoothValue += 100;
|
|
if (smoothValue > value) {
|
|
smoothValue = value;
|
|
}
|
|
} else if (smoothValue > value) {
|
|
smoothValue -= 100;
|
|
if (smoothValue < value) {
|
|
smoothValue = value;
|
|
}
|
|
} else {
|
|
clearTimeout(timeout);
|
|
timeout = null;
|
|
}
|
|
}, 1000/30);
|
|
}
|
|
</script>
|
|
|
|
{#each bars as bar}
|
|
<div class="bar" class:red={bar.red} class:green={bar.green} class:gold={bar.gold} class:full={bar.full}>
|
|
<div class="content" style={`height: ${bar.value / 10}%; top: ${(1000 - bar.value) / 10}%`}>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
|
|
<style>
|
|
div.bar {
|
|
display: inline-block;
|
|
background: #111;
|
|
width: 1.5ch;
|
|
height: 1em;
|
|
margin-right: 0.5ch;
|
|
}
|
|
|
|
div.bar > div.content {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
div.bar.green {
|
|
border: 0.1px solid #4da069;
|
|
}
|
|
div.bar.green > div.content {
|
|
background-color: #4da069;
|
|
}
|
|
div.bar.green.full > div.content {
|
|
background-color: #45fc82;
|
|
box-shadow: 0px 0px 2px #45fc82;
|
|
}
|
|
div.bar.gold {
|
|
border: 0.1px solid #9b7a1f;
|
|
}
|
|
div.bar.gold > div.content {
|
|
background-color: #9b7a1f;
|
|
}
|
|
div.bar.gold.full > div.content {
|
|
background-color: #ffc936;
|
|
box-shadow: 0px 0px 2px #ffc936;
|
|
}
|
|
div.bar.red {
|
|
border: 0.1px solid #880000;
|
|
}
|
|
div.bar.red > div.content {
|
|
background-color: #880000;
|
|
}
|
|
div.bar.red.full > div.content {
|
|
background-color: #bb0000;
|
|
box-shadow: 0px 0px 2px #ff0000;
|
|
}
|
|
</style>
|