real-digital-clock
Version:
Classic 7-segment based real digital clock for react apps!
94 lines (82 loc) • 6.46 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
var react = require('react');
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ":root{--coloncolor:red;--neon:rgba(255,0,0,.75);--themecolor:#000}*{box-sizing:border-box;margin:0;padding:0}h1{margin-bottom:0;text-align:center}.seven-segment-clock-container{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.seven-segment-main-time{align-items:center;display:flex;gap:1.1233975%;height:100%}.seven-segment-main-time svg{height:100%;margin:0 .5%;width:auto}.seven-segment-main-time svg g polygon{fill:hsla(0,0%,4%,.2);stroke:var(--coloncolor);stroke-width:.1px;transition:fill .1s ease-in-out,filter .1s ease-in-out}.seven-segment-main-time svg g polygon.segment-on{fill:var(--coloncolor);filter:drop-shadow(0 0 8vmin rgba(255,0,0,.35)) drop-shadow(0 0 1.25vmin var(--neon))}.seven-segment-main-time svg g polygon.segment-off{fill:hsla(0,83%,88%,.15);stroke:rgba(255,0,0,.5)}.seven-segment-colon{align-items:center;display:flex;flex-shrink:0;height:100%;justify-content:center;margin:0 .5%;padding:0 1%}.seven-segment-colon circle{fill:var(--coloncolor);filter:drop-shadow(0 0 8vmin rgba(255,0,0,.35)) drop-shadow(0 0 1.25vmin var(--neon))}.seven-segment-colon.colon-blink svg .dot{animation:colonBlink 1s steps(1) infinite}@media (min-width:1200px){.seven-segment-main-time svg{margin:0 .25%}.seven-segment-colon{margin:0 .25%;padding:0 .3%}.seven-segment-main-time svg g polygon.segment-on{filter:drop-shadow(0 0 4vmin rgba(255,0,0,.35)) drop-shadow(0 0 1vmin var(--neon))}}@keyframes colonBlink{0%,49%{opacity:1}50%,to{opacity:0}}";
styleInject(css_248z);
const dig = {
1: "one",
2: "two",
3: "three",
4: "four",
5: "five",
6: "six",
7: "seven",
};
const encode = {
0: [1, 2, 3, 5, 6, 7],
1: [3, 6],
2: [1, 3, 4, 5, 7],
3: [1, 3, 4, 6, 7],
4: [2, 4, 3, 6],
5: [1, 2, 4, 6, 7],
6: [1, 2, 5, 4, 6, 7],
7: [1, 3, 6],
8: [1, 2, 3, 4, 5, 6, 7],
9: [1, 2, 3, 4, 6, 7],
};
const SevenSegmentDigit = ({ digit, prefix, }) => {
const segmentsToLight = react.useMemo(() => {
return encode[digit] || [];
}, [digit]);
const isSegmentLit = (segmentNum) => segmentsToLight.includes(segmentNum);
return (jsxRuntime.jsx("svg", { version: "1.1", id: `Layer_1_${prefix}`, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", width: "283px", height: "500px", viewBox: "108.5 0 283 500", enableBackground: "new 108.5 0 283 500", xmlSpace: "preserve", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[5]} ${isSegmentLit(5) ? "segment-on" : "segment-off"}`, points: "163.5,280.557 163.5,441.87 140.532,465.189 117.5,442.08 117.5,280.557 140.5,257.656" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[2]} ${isSegmentLit(2) ? "segment-on" : "segment-off"}`, points: "163.5,59.557 163.5,220.87 140.532,244.189 117.5,221.08 117.5,59.557 140.5,36.656" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[6]} ${isSegmentLit(6) ? "segment-on" : "segment-off"}`, points: "383.5,280.557 383.5,441.87 360.532,465.189 337.5,442.08 337.5,280.557 360.5,257.656" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[3]} ${isSegmentLit(3) ? "segment-on" : "segment-off"}`, points: "383.5,59.557 383.5,220.87 360.532,244.189 337.5,221.08 337.5,59.557 360.5,36.656" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[7]} ${isSegmentLit(7) ? "segment-on" : "segment-off"}`, points: "331.365,493.5 170.052,493.5 146.732,470.532 169.842,447.5 331.365,447.5 354.266,470.5" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[4]} ${isSegmentLit(4) ? "segment-on" : "segment-off"}`, points: "331.365,274.5 170.052,274.5 146.732,251.532 169.842,228.5 331.365,228.5 354.266,251.5" }), jsxRuntime.jsx("polygon", { className: `${prefix}-${dig[1]} ${isSegmentLit(1) ? "segment-on" : "segment-off"}`, points: "331.365,52.5 170.052,52.5 146.732,29.532 169.842,6.5 331.365,6.5 354.266,29.5" })] }) }));
};
const DigitalClockDisplay = ({ jsTime, }) => {
const [internalTime, setInternalTime] = react.useState(new Date());
const isLiveClock = jsTime === undefined;
const displayTime = isLiveClock ? internalTime : jsTime;
react.useEffect(() => {
let timerId;
if (isLiveClock) {
timerId = setInterval(() => {
setInternalTime(new Date());
}, 500);
}
return () => {
if (timerId) {
clearInterval(timerId);
}
};
}, [isLiveClock]);
const hours = displayTime.getHours();
const minutes = displayTime.getMinutes();
const h1 = Math.floor(hours / 10);
const h2 = hours % 10;
const m1 = Math.floor(minutes / 10);
const m2 = minutes % 10;
return (jsxRuntime.jsx("div", { className: "seven-segment-clock-container", children: jsxRuntime.jsxs("div", { className: "seven-segment-main-time", children: [jsxRuntime.jsx(SevenSegmentDigit, { digit: h1, prefix: "hhone" }), jsxRuntime.jsx(SevenSegmentDigit, { digit: h2, prefix: "hhtwo" }), jsxRuntime.jsx("div", { className: "seven-segment-colon colon-blink", role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsxs("svg", { viewBox: "0 0 40 100", width: "auto", height: "100%", xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid meet", children: [jsxRuntime.jsx("circle", { className: "dot dot-on", cx: "20", cy: "32", r: "7" }), jsxRuntime.jsx("circle", { className: "dot dot-on", cx: "20", cy: "68", r: "7" })] }) }), jsxRuntime.jsx(SevenSegmentDigit, { digit: m1, prefix: "mmone" }), jsxRuntime.jsx(SevenSegmentDigit, { digit: m2, prefix: "mmtwo" })] }) }));
};
exports.DigitalClockDisplay = DigitalClockDisplay;
//# sourceMappingURL=index.cjs.js.map