From ce6b6e00c5a607762289c6a63572cb7f2d495236 Mon Sep 17 00:00:00 2001 From: myrmidex Date: Sat, 12 Jul 2025 21:55:55 +0200 Subject: [PATCH] Add number font --- public/fonts/7segment.woff | Bin 0 -> 1952 bytes resources/css/app.css | 13 +++++- .../js/components/Display/LedCounter.tsx | 42 +++++++++--------- .../js/components/Display/LedDisplay.tsx | 4 +- .../components/Settings/UserMenuContent.tsx | 2 +- resources/views/app.blade.php | 2 + 6 files changed, 38 insertions(+), 25 deletions(-) create mode 100644 public/fonts/7segment.woff diff --git a/public/fonts/7segment.woff b/public/fonts/7segment.woff new file mode 100644 index 0000000000000000000000000000000000000000..09ab3150d27946e0bf9697bc3badd40827c7d5ae GIT binary patch literal 1952 zcmZuydpy+J7T>>z5sgQV@_ytsp2rB24vFD73fCiwaLpLQkjEH@4NT@uD#aY>$le0pPlOM<^~V| zo3sGPOGd?NN&o+v_fgAz0ARP_8X4l4OdmSVh@-OsKz{%LA;NJU=pI>Oq;PcsAk0G@ zRS7T?;1bD>ii2n1kn2ex>X-mr zk|9n4-murN$afeW@F%0mj?BmoRNh zOUjw|b1NI)q-YTys;LrEgIh#PO=k|ZYousOt;)%a?Mu{ZjuXg^B~6H0{P%JyR;v9r z{DOZu*wwtT@^!#r%^MH9{OoN36Zh!f^ntdu=FY(=x`j|fPhP2TIJrRI)g3-iIFg_FTpTsb(06_LX4TrG+ z=Pig?M51_cpChd*(mW!M{(;fMWYdjlJyNyF=N(jZ`kLEOd7S=F#eKenf>9lD!rXY^-%(MpBFE};<5fT7j3QN)-#Flj>O_@V1xeX%E# z$t1ESUj_reIS`s)K47MRGVBpR*v<|LP{7-kQo#;5Cj;qih5!t%%R=@imssruw!j0> z0T)~bWuO+k0R3PVY$9^VUc?S@Lug1UQh<~pb;vX16*7-(p}SBWl#IHffoLq6juxP$ zXdT*)4xsZGz~nJK>;QHI3&divbSxJu!|r2^*b7XAO<~J8jw|5mxEW5topDe6IL^XZ zlHBJPBM}cdUN8^I91Aqt?Hdt+5E;_`9V|>S7AR7jYAVS& zllL)I;BEyX1OU|Rsr@%|rEYaebBVp)B3>1r8$Tn1e`23soU(N=7C0x*R3g{@ZoDom`+FhQUz$Dhz30k))$AnoG=4_&l8M0ddGVHta&OSt=C8u8Jxe>~ z!Jo~`;_82KqHYNqoN`PngEekZb#5M9rTltnYWZ+~W3Cc^R!-Tgsx2a*rj_Pm7?3$; zo4SAVBB|f=*6WH{JVV~;U__JSx^_TcdeszX#-sIUQ$fYN#X&-OmTH*Tgpi}19drLC z#dYo7fPO;7>9y7tt?{{G*1r^whc_AM^o~Rw4(Q#o*&G}hRi3ok^1StADMdrK)bCnH zk$zym{OS88+>d>4W}KG`9gPlO7$Vy8;~fM39q*@^U90M zC|6FBzt2{AnR7Zme$j|zTV9>PHU8rnw^F08!E`L~je1FQCz#ER)HCmYPg$#%-F&mteKqBy!A96(o19>B%ivYtgL@s; zv!^Ny+ZW{a#LVAo<907`ItAK)q@8^m!p(2fVybVzQl|mA?fbCZiPvD&>x)NffH`=K zeK|C-)6t>^F|Pq;HOLm(%Ay99%pKuOQj=PpQoCH76|tUfmY#KD@4|-h#p0t^kMio* zZjFh3ys`cRi%*w3Pgz;2Z(;d1tkoNzaw;YSqwzidNsHf(Hk4i;^c$fl?9Y80H15Tt pUeq6{?^!qzt(GUdw;OsRx#N+vH8JV#yci)!5#VE&W{(TOe*s8D?%MzW literal 0 HcmV?d00001 diff --git a/resources/css/app.css b/resources/css/app.css index 2b360a8..912a683 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -5,12 +5,23 @@ @source '../views'; @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; +@font-face { + font-family: '7Segment'; + src: url('/fonts/7segment.woff') format('woff'); + font-weight: normal; + font-style: normal; +} + +.font-digital { + font-family: '7Segment', monospace; +} + @custom-variant dark (&:is(.dark *)); @theme { --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; - + --font-mono-display: 'Major Mono Display', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace; diff --git a/resources/js/components/Display/LedCounter.tsx b/resources/js/components/Display/LedCounter.tsx index b79b497..f5c72f2 100644 --- a/resources/js/components/Display/LedCounter.tsx +++ b/resources/js/components/Display/LedCounter.tsx @@ -15,9 +15,9 @@ interface LedCounterProps { onAddMilestone?: () => void; } -export default function LedCounter({ - value, - className, +export default function LedCounter({ + value, + className, animate = true, currentPrice, onHover, @@ -45,13 +45,13 @@ export default function LedCounter({ // Milestone navigation const nextMilestone = () => { - setCurrentMilestoneIndex((prev) => + setCurrentMilestoneIndex((prev) => prev < milestones.length - 1 ? prev + 1 : 0 ); }; const prevMilestone = () => { - setCurrentMilestoneIndex((prev) => + setCurrentMilestoneIndex((prev) => prev > 0 ? prev - 1 : milestones.length - 1 ); }; @@ -72,7 +72,7 @@ export default function LedCounter({ const duration = 1000; // 1 second animation const steps = 60; // 60fps const stepValue = (value - displayValue) / steps; - + if (Math.abs(stepValue) < 0.01) { setDisplayValue(value); return; @@ -101,7 +101,7 @@ export default function LedCounter({ // Otherwise show up to 6 decimal places, removing trailing zeros return value.toFixed(6).replace(/\.?0+$/, ''); }; - + const formattedValue = formatValue(displayValue); const formatCurrency = (amount: number) => { @@ -113,7 +113,7 @@ export default function LedCounter({ }; return ( -
{/* Background glow effect */} -
+
{formattedValue}
- + {/* Main LED text */}
{/* Progress Bar */} -
@@ -213,9 +213,9 @@ export default function LedCounter({ {isCompleted && (
)} - + {/* Progress fill */} -
- + {/* Glow effect */} -
{value.toFixed(2)} / {currentMilestone.target}
- +
{currentMilestone.label}
- +
{isCompleted ? 'COMPLETED' : `${(100 - progress).toFixed(1)}% TO GO`}
@@ -287,7 +287,7 @@ export default function LedCounter({ MILE )} - + - + {/* Stats indicator */}
); -} \ No newline at end of file +} diff --git a/resources/js/components/Display/LedDisplay.tsx b/resources/js/components/Display/LedDisplay.tsx index c12f0c6..822242f 100644 --- a/resources/js/components/Display/LedDisplay.tsx +++ b/resources/js/components/Display/LedDisplay.tsx @@ -73,7 +73,7 @@ export default function LedDisplay({ >
{/* Background glow effect */} -
+
{formattedValue}
@@ -81,7 +81,7 @@ export default function LedDisplay({
+ + @routes @viteReactRefresh