dot-matrix-display
Version:
DOT MATRIX DISPLAY
3 lines (2 loc) • 5.14 kB
JavaScript
"use strict";var r=require("react/jsx-runtime"),n=require("react");function e(r,n,e){if(e||2===arguments.length)for(var t,a=0,i=n.length;a<i;a++)!t&&a in n||(t||(t=Array.prototype.slice.call(n,0,a)),t[a]=n[a]);return r.concat(t||Array.prototype.slice.call(n))}"function"==typeof SuppressedError&&SuppressedError;var t={" ":[[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0],[0,0,0,0,0]],A:[[0,0,1,0,0],[0,1,0,1,0],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1]],B:[[1,1,1,0,0],[1,0,0,1,0],[1,1,1,0,0],[1,0,0,1,0],[1,1,1,0,0]],C:[[0,1,1,1,1],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[0,1,1,1,1]],D:[[1,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,0]],E:[[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,1,1,1,1]],F:[[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,0],[1,0,0,0,0],[1,0,0,0,0]],G:[[1,1,1,1,1],[1,0,0,0,0],[1,0,1,1,1],[1,0,0,0,1],[1,1,1,1,1]],H:[[1,0,0,0,1],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,0,1],[1,0,0,0,1]],I:[[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[1,1,1,1,1]],J:[[1,1,1,1,0],[0,0,0,1,0],[0,0,0,1,0],[1,0,0,1,0],[0,1,1,0,0]],K:[[1,0,0,1,0],[1,0,1,0,0],[1,1,0,0,0],[1,0,1,0,0],[1,0,0,1,0]],L:[[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,0,0,0,0],[1,1,1,1,0]],M:[[1,0,0,0,1],[1,1,0,1,1],[1,0,1,0,1],[1,0,0,0,1],[1,0,0,0,1]],N:[[1,0,0,0,1],[1,1,0,0,1],[1,0,1,0,1],[1,0,0,1,1],[1,0,0,0,1]],O:[[0,1,1,1,0],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],P:[[1,1,1,0,0],[1,1,1,1,0],[1,1,1,0,0],[1,0,0,0,0],[1,0,0,0,0]],Q:[[0,1,1,0,0],[1,0,0,1,0],[1,0,1,1,0],[1,0,0,1,0],[0,1,1,0,1]],R:[[1,1,1,1,0],[1,0,0,0,1],[1,1,1,1,1],[1,0,0,1,0],[1,0,0,0,1]],S:[[1,1,1,1,1],[1,0,0,0,0],[1,1,1,1,1],[0,0,0,0,1],[1,1,1,1,1]],T:[[1,1,1,1,1],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],U:[[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,1,1,0]],V:[[1,0,0,0,1],[1,0,0,0,1],[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0]],W:[[1,0,0,0,1],[1,0,0,0,1],[1,0,1,0,1],[1,1,0,1,1],[1,0,0,0,1]],X:[[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,1,0,1,0],[1,0,0,0,1]],Y:[[1,0,0,0,1],[0,1,0,1,0],[0,0,1,0,0],[0,0,1,0,0],[0,0,1,0,0]],Z:[[1,1,1,1,1],[0,0,0,1,0],[0,0,1,0,0],[0,1,0,0,0],[1,1,1,1,1]]};!function(r,n){void 0===n&&(n={});var e=n.insertAt;if("undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===e&&t.firstChild?t.insertBefore(a,t.firstChild):t.appendChild(a),a.styleSheet?a.styleSheet.cssText=r:a.appendChild(document.createTextNode(r))}}(".facts-wrapper {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 0.8rem;\r\n margin: 0.8rem 0;\r\n \r\n }\r\n \r\n .pattern-grid {\r\n background-color: #ffa86a11;\r\n display: grid;\r\n grid-template-rows: repeat(5, auto);\r\n gap: 2px;\r\n padding: 0.8rem;\r\n border: 1px solid #ffa86a;\r\n max-width: 100%;\r\n overflow-x: auto;\r\n scrollbar-width: none;\r\n }\r\n \r\n .pattern-row {\r\n display: flex;\r\n gap: 2px;\r\n flex-wrap: nowrap;\r\n }\r\n \r\n .pattern-cell {\r\n width: 10px;\r\n height: 12px;\r\n border: 1px black solid;\r\n }\r\n \r\n .pattern-cell.active {\r\n background-color: #ffa86a;\r\n }\r\n \r\n .pattern-cell.space-after {\r\n margin-right: 4px;\r\n }\r\n \r\n .facts-secondary-text {\r\n font-size: 1.2rem;\r\n font-weight: 600;\r\n color: #fff;\r\n text-align: center;\r\n }\r\n \r\n @media screen and (max-width: 480px) {\r\n .pattern-cell {\r\n width: 6px;\r\n height: 8px;\r\n }\r\n \r\n .pattern-grid {\r\n padding: 0.5rem;\r\n gap: 1px;\r\n }\r\n \r\n .facts-secondary-text {\r\n font-size: 1rem;\r\n }\r\n \r\n .pattern-cell.space-after {\r\n margin-right: 3px;\r\n }\r\n }");var a=function(r){var n=Array.from({length:5},(function(){return Array.from({length:30},(function(){return 0}))})),e=0;return r.split("").forEach((function(r){var a=t[r.toUpperCase()];if(a){for(var i=0;i<5;i++)for(var o=0;o<5;o++)n[i][e+o]=a[i][o];e+=5}})),n};module.exports=function(t){var i=t.texts,o=t.duration,c=void 0===o?5e3:o,s=n.useState(0),l=s[0],p=s[1],f=n.useState((function(){return a(i[l].pattern)})),d=f[0],u=f[1],m=n.useState((function(){return a(i[(l+1)%i.length].pattern)})),x=m[0],h=m[1],g=n.useState(-1);g[0];var v=g[1];n.useEffect((function(){var r=setInterval(y,c);return function(){return clearInterval(r)}}),[l,c]);var y=function(){for(var r=Math.floor(c/80),n=function(n){setTimeout((function(){v(n),u((function(r){for(var t=e([],r.map((function(r){return e([],r,!0)})),!0),a=0;a<5;a++)t[a][n]=x[a][n];return t})),29===n&&setTimeout((function(){p((function(r){return(r+1)%i.length})),v(-1)}),250)}),n*r)},t=0;t<30;t++)n(t);h(a(i[(l+2)%i.length].pattern))};return r.jsxs("div",{className:"facts-wrapper",children:[r.jsx("div",{className:"pattern-grid",children:d.map((function(n,e){return r.jsx("div",{className:"pattern-row",children:n.map((function(n,e){return r.jsx("div",{className:"pattern-cell ".concat(n?"active":"inactive"," ").concat((e+1)%5==0?"space-after":"")},e)}))},e)}))}),r.jsx("div",{className:"facts-secondary-text",children:i[l].secondary_text})]})};
//# sourceMappingURL=index.js.map