JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<p></p>

CSS

p {
    white-space: pre;
    font-family: monospace;
}

JavaScript

var name = "phloe industries_";
var chars = {
    p: "000,111,101,111,100",
    h: "100,111,101,101,000",
    l: "1,1,1,1,0",
    o: "000,111,101,111,000",
    e: "000,111,101,110,000",
    " ": "000,000,000,000,000",
    _: "0,0,0,0,1",
    i: "1,0,1,1,0",
    n: "000,111,101,101,000",
    d: "001,111,101,111,000",
    u: "000,101,101,111,000",
    s: "000,011,010,110,000",
    t: "10,11,10,11,00",
    r: "00,11,10,10,00"
};

var charLU = {};
var data = [];
var indexes = [];

Object.keys(chars).forEach(function (char) {
    charLU[char] = parseInt(chars[char].indexOf(",") + chars[char].split(",").map(function (row) {
        return parseInt(row, 2);
    }).join(""), 10);
});

var x = 0;
var length = name.length;

while (x < length) {
    var index = data.indexOf(charLU[name[x]]);
    if (index < 0) {
        data.push(charLU[name[x]]);
        index = data.length - 1;
    }
    indexes.push(index);
    x++;
}
window.console && console.log("indexes", JSON.stringify(indexes));
window.console && console.log("data", JSON.stringify(data));

data = data.map(function (value) {
    var string = value.toString(10);
    return { width: parseInt(string[0], 10), data: string.slice(1)};
});



var x = 0;
var y = 0;
var length = indexes.length;
var string = "";
var rows = data[0].data.length;

while (y < rows) {
    x = 0;
    if (y) {
        string += "\n";
    }
    string += Array(rows - y).join(" ");
    while (x < length) {
        if (x) {
            string += " ";
        }
        string += ("000" + parseInt(data[indexes[x]].data[y], 10).toString(2)).slice(-data[indexes[x]].width).replace(/(.)/g, "$1$1");
        x++;
    }
    y++;
}

string = string.replace(/0/g, " ").replace(/1/g, "X");

document.querySelector("p").innerHTML = string;