Roe2Js :: "canvasRenderPurse.js"

function canvasPurseTray ( ) {

    var purseSpanX = 5;
    var purseSpanY = 6;

    var ent_stats = [];

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

    var xOffset = viewSpanX * tileW;

    drawRectangle(xOffset+gutterW*2, gutterH, purseSpanX * tileW, purseSpanY * tileH, 'black', 'black');

    var ss = [];

    logFeats({ full_map: left(full_map[px][py][pz]+`________`,4)});

    ent_stats.stats = full_entity_stats[px][py];

    ss.push(ent_stats.stats);
    ss.card = {};
    ss.card.namesake = `Placeholder`;
    ss.card.actionRoster = [];

    switch(true){
    case (oobMap([px,py]) !== true):

        ss.push(ent_stats.stats);
        ss.card.namesake = `Out Of Bounds`;
        ss.card.actionRoster = [];

        break;

    case (invalidName(full_map[px][py][layers.critter],2)):

        ss.push(ent_stats.stats);
        ss.card.namesake = `Placeholder`;
        ss.card.actionRoster = [];

        break;

    case (oobMap([px,py]) === true):

        ss.push(full_entity_stats[px][py][layers.critter].stats);
        ss.card.namesake = ss.card.namesake;
        ss.card.actionRoster = sections(ss.card.action,4);

        break;
    }

    let buffer = [];

    for(let y = purseConstraints.viewMinY; y <= purseConstraints.viewMaxY; y++){
        for(let x = purseConstraints.viewMinX; x <= purseConstraints.viewMaxX; x++){

            buffer = [];

            if(y === 3){
                let z = x;
                if((z >= 0) && (z < layers.gui)){
                    if(oobMap([px,py]) === true){
                        buffer.push(
                            full_map[px][py][z]
                        );
                    }
                }
            }

            let x1 = 0;
            let purseSpanX = 5;

            let y1 = 4;
            let purseSpanY = 3;

            if((x >= x1) && (x < x1 + purseSpanX) && (y >= y1) && (y < y1 + purseSpanY)){

                let i = (x - x1) + (y - y1) * purseSpanX;

                if((i >= 0) && (i < ss.card.actionRoster.length)){
                    buffer.push( ss.card.actionRoster[i] );
                }
            }

            buffer.push(`sel2dots`);

            drawImageStack(buffer,xOffset+
            gutterW * 2 + x * tileW,gutterH + y * tileH,tileW,tileH);
        }
    }

    ss.card.namesake = ucwords(ss.card.namesake);

    switch(true){
    case (ucwords(ss.card.namesake) === "Placeholder"):
    case (ucwords(ss.card.namesake) === "Out Of Bounds"):
        break;
    default:

        renderStats(px,py,z);

        drawText(gutterW + 0 * tileW, gutterH + 8 + 12,'16px Impact','white','" ' + ss.card.namesake + ' "');

        break;
    }

    return true;
}

    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;

        z = z || pz;

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

        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;

        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, gutterW, gutterH, 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.round(100 * s.current / s.maximum);

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

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

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

    let x = gutterW;
    let y = gutterH + 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;
}