86 lines
2.3 KiB
Svelte
86 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
const segLength = 0.9;
|
|
const segWidth = 0.2;
|
|
const aspectRatio = 0.6;
|
|
const padding = 0.15;
|
|
|
|
const digitPatterns: Record<number, number[]> = {
|
|
0: [1, 1, 1, 1, 1, 1, 0, 1],
|
|
1: [0, 1, 1, 0, 0, 0, 0, 1],
|
|
2: [1, 1, 0, 1, 1, 0, 1, 1],
|
|
3: [1, 1, 1, 1, 0, 0, 1, 1],
|
|
4: [0, 1, 1, 0, 0, 1, 1, 1],
|
|
5: [1, 0, 1, 1, 0, 1, 1, 1],
|
|
6: [1, 0, 1, 1, 1, 1, 1, 1],
|
|
7: [1, 1, 1, 0, 0, 0, 0, 1],
|
|
8: [1, 1, 1, 1, 1, 1, 1, 1],
|
|
9: [1, 1, 1, 1, 0, 1, 1, 1]
|
|
};
|
|
|
|
let { digit, decimal = false }: { digit: number; decimal: boolean } = $props();
|
|
|
|
let pattern = $derived(digitPatterns[digit]);
|
|
</script>
|
|
|
|
{#snippet segment(index: number, position: string, vertical: boolean, dot: boolean = false)}
|
|
<div
|
|
class="absolute {!dot
|
|
? 'rounded-[2px]'
|
|
: 'rounded-[1.5px]'} transition-colors [transition-duration:50ms]
|
|
{digitPatterns[digit][index]
|
|
? 'bg-lime-500 shadow-2xl shadow-black drop-shadow'
|
|
: 'bg-white/10'}"
|
|
style="height: {vertical && !dot ? segLength : segWidth}rem; width: {vertical || dot
|
|
? segWidth
|
|
: segLength * aspectRatio}rem; {position}; scale: {vertical || dot
|
|
? 1
|
|
: (segLength + segWidth / 1) / segLength} 1;"
|
|
></div>
|
|
{/snippet}
|
|
|
|
<div
|
|
class="relative"
|
|
style="width: {(segLength * aspectRatio + 2 * segWidth) * (1 + padding)}rem; height: {(segLength *
|
|
2 +
|
|
3 * segWidth) *
|
|
(1 + padding)}rem"
|
|
>
|
|
{#if pattern}
|
|
<!-- Segment A -->
|
|
{@render segment(0, `left: ${segWidth * (1 + 2 * padding)}rem; top: 0;`, false)}
|
|
|
|
<!-- Segment B -->
|
|
{@render segment(1, `right: 0; top: ${segWidth * (1 + (2 * padding) / aspectRatio)}rem;`, true)}
|
|
|
|
<!-- Segment C -->
|
|
{@render segment(
|
|
2,
|
|
`bottom: ${segWidth * (1 + (2 * padding) / aspectRatio)}rem; right: 0;`,
|
|
true
|
|
)}
|
|
|
|
<!-- Segment D -->
|
|
{@render segment(3, `bottom: 0; left: ${segWidth * (1 + 2 * padding)}rem;`, false)}
|
|
|
|
<!-- Segment E -->
|
|
{@render segment(
|
|
4,
|
|
`bottom: ${segWidth * (1 + (2 * padding) / aspectRatio)}rem; left: 0;`,
|
|
true
|
|
)}
|
|
|
|
<!-- Segment F -->
|
|
{@render segment(5, `left: 0; top: ${segWidth * (1 + (2 * padding) / aspectRatio)}rem;`, true)}
|
|
|
|
<!-- Segment G -->
|
|
{@render segment(
|
|
6,
|
|
`left: ${segWidth * (1 + 2 * padding)}rem; top: 50%; margin-top: -${segWidth / 2}rem;`,
|
|
false
|
|
)}
|
|
|
|
{#if decimal}
|
|
{@render segment(7, `bottom: 0; right: -${segWidth / aspectRatio}rem;`, false, true)}
|
|
{/if}
|
|
{/if}
|
|
</div>
|