Roe2Js :: "canvasRenderStats.js"

    function renderStatBar(x,y,width,height,caption,font,fg,bg){

        drawRectangle( x, y, width, height, 'black', bg );

        drawText( x, y, `${height}px ${font}`, fg, caption );

    }

    function renderStats(px,py,z){

        // var [ px, py, pz ] = cursorState ( layers.critter );

        var xOffset = viewSpanX * tileW + gutterW * 3;
        var yOffset = gutterH;

        z = z || pz;

        let s = [];
        let pct = [];

        drawText(gutterW * 3 + viewSpanX * tileW, gutterH * 2 + tileH / 2,'16px Impact','white','" ' + ucwords(full_entity_stats[px][py][layers.critter].stats.card.namesake) + ' "');

        s['health'] = full_entity_stats[px][py][layers.critter].stats.health;

        s['stamina'] = full_entity_stats[px][py][layers.critter].stats.stamina;

        s['essence'] = full_entity_stats[px][py][layers.critter].stats.essence;

        var width = purseSpanX;
        var height = gutterH * 2;
        var font = 'Small Fonts';

        drawText(
            gutterW * 3 + viewSpanX * tileW, gutterH + tileH * 3,
            `${height*0.8}px ${font}`,
            'white',
            "health:  " + s['health'].current
            +'/'+ s['health'].maximum
            );
        drawText(
            gutterW * 3 + viewSpanX * tileW, gutterH + tileH * 3 + gutterH * 2,
            `${height*0.8}px ${font}`,
            'white',
            "stam: " + s['stamina'].current
            +'/'+ s['stamina'].maximum
            );
        drawText(
            gutterW * 3 + viewSpanX * tileW, gutterH + tileH * 3 + gutterH * 4,
            `${height*0.8}px ${font}`,
            'white',
            "ess:     " + s['essence'].current
            +'/'+ s['essence'].maximum
            );

        /*
        renderStatusBar( s, 'health', tileW * viewSpanX + gutterW * 2, gutterH + gutterH * 2, tileW * purseSpanX, tileH / 2, 'black', 'red' );

        renderStatusBar( s, 'stamina', tileW * viewSpanX + gutterW * 2, gutterH + gutterH * 3, tileW * purseSpanX, tileH / 2, 'black', 'yellow' );

        renderStatusBar( s, 'essence', tileW * viewSpanX + gutterW * 2, gutterH + gutterH * 4, tileW * purseSpanX, tileH / 2, 'black', 'cyan' );
        */
    }

function renderStatusBar(stat, attrName, xOffset, yOffset, width, height, fg, bg ) {

    // var [ px, py, pz ] = cursorState ( );

    let s = stat[attrName];

    let pct = [];
    let w = [];

    s.minimum = s.minimum || 0;
    s.maximum = s.maximum || 1;
    s.current = s.current || 0;
    s.recovery = s.recovery || 0;

    pct['current'] = Math.floor(100 * s.current / s.maximum);

    pct['minimum'] = Math.floor(100 * s.minimum / s.maximum);

    pct['maximum'] = Math.floor(100 * s.maximum / s.maximum);

    pct['recovery'] = Math.floor(100 * (s.current + s.recovery) / s.maximum);

    let x = xOffset;
    let y = yOffset + tileH;

    // s.current, s.recovery
    // s.minimum, s.maximum

    let caption = `${attrName}: ${s.current} / ${s.maximum}`;

    let font = 'Small Fonts';

    // fg, bg

    w['current'] = width * curve(pct['current']) / 100;
    w['recovery'] = width * curve(pct['recovery']) / 100;

    w['minimum'] = 0;
    w['maximum'] = width * curve(1.0) / 100;

    drawRectangle( x, y, w['maximum'], height, 'black', 'gray' );

    drawRectangle( x, y + gutterH / 2, w['current'], height - gutterH / 2, 'black', bg );

    drawRectangle( x, y, w['recovery'], height - gutterH / 2, 'rgba(0,0,0,0.0)', 'rgba(255,255,255,0.7)' );

    drawRectangle( x, y, width, height, 'black', 'rgba(0,0,0,0.0)' );

    drawText( x, y + gutterH, `${height*0.8}px ${font}`, 'black', caption );

}

function curve( x = 0 ) {
    var y = Math.sqrt(1 - x * x);
    y = (x + y) / 2;
    logFeats( { curve: y } );
    return y;
}