Story05Js :: "canvasPageLogic.js"

var pageviews = {};
var keysPressed = {};

window.onkeydown=e=>{keysPressed[e.code] = "down";}
window.onkeyup=e=>{keysPressed[e.code] = "up";}

function initializepageviews(pageviews, book, page) {
    if (typeof pageviews === 'undefined') {
        pageviews = {};
    }

    if (typeof pageviews[book] === 'undefined') {
        pageviews[book] = {};
    }

    if (typeof pageviews[book][page] === 'undefined') {
        pageviews[book][page] = 0;
    }

    if (pageviews[book][page] === 0) {
        pageviews[book][page] = 1;
    }

    return pageviews;
}

var defaultRowspan = 12;

canvasCheckPage ( );

function canvasCheckPage() {
    const [px, py, pz] = cursorState(layers.gui);

    if (typeof book === 'undefined') {
        // book = `"Puzzlum's Palace" (No.1)`;
        if (books.length > 0) {
            book = Object.keys(books[0])[0];
        }
    }

    if (typeof page === 'undefined') {
        // page = `"Puzzlum's Palace" (No.1)`;
        if (books[book].length > 0) {
            page = Object.keys(books[book][0])[0];
        }
    }

    return true;
}

// Function to handle key captures and page rendering
function canvasRenderPage() {

    if ( book === page ) {
        pageviews[book] = [];
        pageviews[book][page] = 1;
    }

    backContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);

    initializepageviews(pageviews, book, page);

    const width = backContext.width;
    const height = backContext.height;
    // const defaultRowspan = 12;
    let rowspan = defaultRowspan;
    let row = 0;
    let xOffset = 0;
    let yOffset = 0;

    function incrementRow() {
        yOffset += (row + 1) * rowspan;
        row = 0;
    }

    function renderText(text, font = '12px Arial', color = '#000000') {
        yOffset = wrapText(xOffset, yOffset + row * rowspan, backCanvas.width, rowspan * 2, font, color, text);
        row++;
    }

    // incrementRow();
    // renderText(book.split(`"`)[1], `${rowspan}px Arial`);

    incrementRow();

    incrementRow();

    const captionCount = parseInt(books[book][page]['caption']['count']);
    for (let caption = 1; caption <= captionCount; caption++) {
        let text = books[book][page]['caption'][caption]['caption'];
        if (text) {

            renderText(text, `${rowspan}px Small Fonts`);

            // wrapText(xOffset, yOffset, backCanvas.w, `${rowspan}`, `${rowspan}px Small Fonts`, `black`, text);

            incrementRow();

        }
    }

    var illustration = loadImage( `/assets`+books[book][page]['header'][1]['illustration'] );

    backContext.drawImage( illustration, ( backCanvas.width - illustration.naturalWidth ) / 2, yOffset - rowspan );

    yOffset += illustration.height;

    incrementRow();
    incrementRow();
    incrementRow();

    const entityCount = parseInt(books[book][page]['entity']['count']);
    for (let entity = 1; entity <= entityCount; entity++) {

        let { name, sprite, text, mood } = books[book][page]['entity'][entity];

        if (text) {
            renderText(`${mood} ${name}: ${text}`, '12px Small Fonts');
        }
    }

    incrementRow();
    incrementRow();

    triggerKeys = {};

    const optionCount = parseInt(books[book][page]['option']['count']);

    for (let option = 1; option <= optionCount; option++) {

        let key = books[book][page]['option'][option]['key'];
        let dest = books[book][page]['option'][option]['dest'];
        let preq = books[book][page]['option'][option]['preq'];
        let caption = books[book][page]['option'][option]['caption'];
        let condition = books[book][page]['option'][option]['condition'];

        console.log(key);

        var approval = false;

        switch (ucwords(condition)) {
        case "Contrary":
            if (!pageviews[book][preq] === 0) {
                approval = true;
            }
            break;
        case "Mandatory":
            if (pageviews[book][preq] > 0) {
                approval = true;
            }
            break;
        case "Elective":
            approval = true;
            break;
        }

        if (approval) {

            renderText(`${key}: ${caption}`, '12px Small Fonts');

            var match = key.match(/\(([a-z])\)[a-z]*/);

            if ( match !== null ) {
                key = `Key` + ucase ( match[1] );
            }

            if ( keysPressed[key] === "up" ) {
                console.log ( key );
                pageviews[book][dest]++;
                page = dest;
            }
        }
    }

    incrementRow();
    incrementRow();

    var visitedPagesCount = visitedSum ( book, page );

    var totalPagesCount = visitedCount ( book, page );

    var efficiency = `${Math.round( 100 * visitedPagesCount / totalPagesCount )}%`;

    renderText(`Pages visited: ${visitedPagesCount} of ${totalPagesCount} ( ${efficiency} efficiency )`, '12px Small Fonts');

    frontContext.clearRect(0, 0, frontCanvas.width, frontCanvas.height);
    frontContext.drawImage( backCanvas, 0, 0 );

    return true;
}

// Set up the interval to check key presses every 100 milliseconds
setInterval(canvasRenderPage, 100);