towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Hang the 7-segment decimal off the preceding digit.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Towsty
2026-08-31 00:00:26 -05:00
co-authored by Cursor
parent 755aaeede8
commit 177f7b6e96
1 changed files with 36 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/SegmentDigits.vue
+36 -19
View File
@@ -1,17 +1,20 @@
<template> <template>
<div class="segment-readout flex h-11 items-center justify-center gap-px px-1.5" aria-hidden="true"> <div class="segment-readout flex h-11 items-end justify-center gap-[3px] px-1.5 pb-2.5" aria-hidden="true">
<template v-for="(ch, i) in chars" :key="i"> <span
<span v-if="ch === '.'" class="dot on" /> v-for="(item, i) in glyphs"
<span v-else class="digit" :data-n="ch"> :key="i"
<i class="seg a" :class="{ on: lit(ch, 'a') }" /> class="digit"
<i class="seg b" :class="{ on: lit(ch, 'b') }" /> :data-n="item.ch"
<i class="seg c" :class="{ on: lit(ch, 'c') }" /> >
<i class="seg d" :class="{ on: lit(ch, 'd') }" /> <i class="seg a" :class="{ on: lit(item.ch, 'a') }" />
<i class="seg e" :class="{ on: lit(ch, 'e') }" /> <i class="seg b" :class="{ on: lit(item.ch, 'b') }" />
<i class="seg f" :class="{ on: lit(ch, 'f') }" /> <i class="seg c" :class="{ on: lit(item.ch, 'c') }" />
<i class="seg g" :class="{ on: lit(ch, 'g') }" /> <i class="seg d" :class="{ on: lit(item.ch, 'd') }" />
</span> <i class="seg e" :class="{ on: lit(item.ch, 'e') }" />
</template> <i class="seg f" :class="{ on: lit(item.ch, 'f') }" />
<i class="seg g" :class="{ on: lit(item.ch, 'g') }" />
<i v-if="item.dp" class="dp on" />
</span>
</div> </div>
</template> </template>
@@ -34,9 +37,18 @@ const props = defineProps<{
value: string value: string
}>() }>()
const chars = computed(() => { const glyphs = computed(() => {
const raw = String(props.value || '0') const raw = String(props.value || '0')
return raw.split('').filter(ch => ch === '.' || MAP[ch]) const out: { ch: string; dp: boolean }[] = []
for (const ch of raw) {
if (ch === '.') {
if (out.length) out[out.length - 1].dp = true
else out.push({ ch: '0', dp: true })
continue
}
if (MAP[ch]) out.push({ ch, dp: false })
}
return out.length ? out : [{ ch: '0', dp: false }]
}) })
function lit(ch: string, seg: string) { function lit(ch: string, seg: string) {
@@ -56,6 +68,10 @@ function lit(ch: string, seg: string) {
position: relative; position: relative;
width: 0.72rem; width: 0.72rem;
height: 1.15rem; height: 1.15rem;
margin-right: 0.2rem;
}
.digit:last-child {
margin-right: 0;
} }
.seg { .seg {
position: absolute; position: absolute;
@@ -73,15 +89,16 @@ function lit(ch: string, seg: string) {
.b { top: 2px; right: 0; width: 2px; height: calc(50% - 3px); } .b { top: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
.e { bottom: 2px; left: 0; width: 2px; height: calc(50% - 3px); } .e { bottom: 2px; left: 0; width: 2px; height: calc(50% - 3px); }
.c { bottom: 2px; right: 0; width: 2px; height: calc(50% - 3px); } .c { bottom: 2px; right: 0; width: 2px; height: calc(50% - 3px); }
.dot { .dp {
position: absolute;
right: -5px;
bottom: 0;
width: 3px; width: 3px;
height: 3px; height: 3px;
margin: 0 1px 1px;
align-self: flex-end;
border-radius: 1px; border-radius: 1px;
background: rgba(251, 191, 36, 0.1); background: rgba(251, 191, 36, 0.1);
} }
.dot.on { .dp.on {
background: #fbbf24; background: #fbbf24;
box-shadow: 0 0 6px rgba(251, 191, 36, 0.65); box-shadow: 0 0 6px rgba(251, 191, 36, 0.65);
} }