JSFiddle - React, Tailwind, and code Playground

by jcubed111

HTML

<div id="desc"></div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');

$primary: #6e8be5;
$secondary: #8b8b8b;
$decoration: #666;
$purple: #c14ffe;
$green: #3CE8AB;

body{
    font-family: 'Inconsolata', monospace;
    background: #222226;
    margin: 10px 15px;
}

#desc{
    font-size: 20px;
    white-space: pre;
    color: #c22;
}

.title { color: #eee; }

.label { color: $secondary; }

.value { color: $secondary; }

.boldValue { color: $primary; }

.dice { color: #32b089; }

.attr { color: $secondary; }

.textBlock { color: $decoration; }

.spellTitle { color: $primary; }

.noneValue { color: $decoration; }

.weaponTitle,
.helmetTitle,
.armorTitle,
.bootTitle { color: $primary; }

.note { color: $decoration; }

.bullet { color: $decoration; }

.divider { color: $decoration; }

JavaScript

function $(text, c) {
    return "<span class='"+c+"'>" + text + "</span>";
}

function title(t, className = 'title') {
    return $(t, className);
}

function labelValue(label, value, valClass='value') {
    return $(label + ': ', 'label') + $(value, valClass);
}

function bulletedAttr(value, valClass='attr') {
    return $('- ', 'bullet') + $(value, valClass);
}

function bulletedLabelValue(label, value, valClass='value') {
    return $('- ', 'bullet') + labelValue(label, value, valClass);
}

function note(t) {
    return $(t, 'note');
}

function divider() {
    return $("----------------------------------------", 'divider');
}

function indentedTextBlock(indentLevel, t, className = 'textBlock') {
    const padding = " ".repeat(indentLevel*4);
    const lineMaxLength = 40 - indentLevel*4;
    const parts = t.split(" ");

    let lines = [];
    let currentLine = "";
    while(parts.length) {
        const current = parts.shift();
        const lenToAdd = current.length;
        const spaceBefore = currentLine.length > 0 ? 1 : 0;
        if(currentLine.length + spaceBefore + lenToAdd <= lineMaxLength) {
            currentLine += spaceBefore ? ' ' : '';
            currentLine += current;
        }else{
            lines.push(currentLine);
            currentLine = current;
            while(currentLine.length > lineMaxLength) {
                lines.push(currentLine.substr(0, lineMaxLength));
                currentLine = currentLine.substr(lineMaxLength);
            }
        }
    }
    lines.push(currentLine);

    return $(lines.map(l => padding + l).join('\n'), className);
}

function padded(t, minLength, padding = " ") {
    const toAdd = Math.max(0, minLength - t.length);
    return t + padding.repeat(toAdd);
}

let html =
title("Human Bard - level 1") + '\n' +
//labelValue("Exp", "0/5") + '\n' +
labelValue("HP", "10/10", 'boldValue') + '\n' +
labelValue("AC", "7", 'boldValue') + ' ' + note("(5 base + 1 armor + 1 dodge)") + '\n'...