JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div class="number">
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
    <div class="diode">•</div>
  </div>
<script id="font" type="text">
STARTFONT 2.1
COMMENT "$ucs-fonts: 5x7.bdf,v 1.37 2002-11-10 19:12:30+00 mgk25 Rel $"
COMMENT "Send bug reports to Markus Kuhn http://www.cl.cam.ac.uk/~mgk25/"
FONT -Misc-Fixed-Medium-R-Normal--7-70-75-75-C-50-ISO10646-1
SIZE 7 75 75
FONTBOUNDINGBOX 5 7 0 -1
STARTPROPERTIES 23
FONTNAME_REGISTRY ""
FOUNDRY "Misc"
FAMILY_NAME "Fixed"
WEIGHT_NAME "Medium"
SLANT "R"
SETWIDTH_NAME "Normal"
ADD_STYLE_NAME ""
PIXEL_SIZE 7
POINT_SIZE 70
RESOLUTION_X 75
RESOLUTION_Y 75
SPACING "C"
AVERAGE_WIDTH 50
CHARSET_REGISTRY "ISO10646"
CHARSET_ENCODING "1"
FONT_ASCENT 6
FONT_DESCENT 1
DESTINATION 1
DEFAULT_CHAR 0
COPYRIGHT "Public domain font.  Share and enjoy."
_XMBDFED_INFO "Edited with xmbdfed 4.5."
CAP_HEIGHT 6
X_HEIGHT 4
ENDPROPERTIES
CHARS 1848
STARTCHAR char0
ENCODING 0
SWIDTH 685 0
DWIDTH 5 0
BBX 5 7 0 -1
BITMAP
00
A8
00
88
00
A8
00
ENDCHAR
STARTCHAR...

CSS

* {
  box-sizing: border-box;
}



.number {
  height: 300px;
}

  .diode {
    width: 20%;
    background-color: orange;
    float: left;
    font-size: 50px;
    line-height: 40px;
    text-align: center;
    text-indent: -9999px;
    transition: .5s;
    }
    .diode.is-on {
      color: #f00;
      background-color: red;
      text-shadow: 0 0 5px rgba( 255, 0, 0, .5 );
}

JavaScript

function Character (lines) {
    this.meta = {};
    this.bits = [];
    this._parseChar(lines);
}

Character.prototype._parseChar = function (lines) {
    var bitmap = false;

    while (lines.length) {
        var line = lines.shift();

        if (!bitmap) {
            if (/^BITMAP/.test(line)) {
                bitmap = true;
            } else {
                var parts = line.split(' ');
                this.meta[parts.shift()] = parts;
            }
            continue;
        } else {
            if (/^ENDCHAR/.test(line)) {
                return;
            }
        }
        
        var padding = Math.ceil(this.meta.DWIDTH[0] / 8) * 8 - this.meta.DWIDTH[0];
        var len = 0;
        var numBytes = line.length / 2;
        var a = [];

        while (numBytes--) {
            var byte = line.slice(0, 2);
            line = line.slice(2);

            var binary = parseInt(byte, 16);
    
            if (numBytes === 0) {
                for (var i = 8; i > padding; i--) {
                    a.push((binary & (1 << i)) >> i);
                }
            } else {
                for (var i = 8; i > 0; i--) {
                    a.push((binary & (1 << i)) >> i);
                }
           }
        }
        this.bits.push(a);
        
        if(this.meta.STARTCHAR[0] === "one") {
            console.log(line, binary, a, padding);
        }
    }    
}

function Font (txt) {
    this.meta = {};
    this.charsByName = {};
    this.charsByNumber = {};
    this._parseFontFile(txt);
}

Font.prototype._parseFontFile = function (txt) {
    var lines = txt.split(/\n+/);

    while (lines.length) {
        var line = lines.shift();

        if (/^STARTCHAR/.test(line)) {
            var charLines = [line];

            while (!/^ENDCHAR/.test(line)) {
                line = lines.shift();
                charLines.push(line);
            }

            var char = new Character(charLines);

            var charName = char.meta['STARTCHAR'][0];
      ...