All Other Events (Sec. C)

app.event({}, event => {
    // Check if the event corresponds to a component in the COMPONENTS map and the event value is true
    if (COMPONENTS.has(event.u) && event.v === true) {
        app.display({queue: [{add: [COMPONENTS.get(event.u)]}]});
    }
    // Various event handlers for input fields and buttons
    else if (event.u === "inpt_addtxt_name") {
        inpt_addtxt_name = event.v;
    } 
    else if (event.u === "prot1") {
        window.location.href = "index2.html";
    } 
    else if (event.u === "inpt_edit_name") {
        inpt_edit_name = event.v;
    } 
    else if (event.u === "inpt_edit_value") {
        inpt_edit_value = event.v;
    } 
    else if (event.u === "inpt_addtxt_value") {
        inpt_addtxt_value = event.v;
    } 
    else if (event.u === "inpt_print_value") {
        inpt_print_value = event.v;
    } 
    else if (event.u === "inpt_addnum_name") {
        inpt_addnum_name = event.v;
    } 
    else if (event.u === "inpt_addnum_value") {
        inpt_addnum_value = Number(event.v);
    } 
    else if (event.u === "myfile") {
        filecontent = event.v;
    } 
    else if (event.u === "btn_savejsfile") {
        app.display({save: ['javascript.json', JSON.stringify(intcode)]});
    } 
    else if (event.u === "btn_addtextvar") {
        let pushable = {type: "LET_STATEMENT", name: inpt_addtxt_name.trim(), value: inpt_addtxt_value.trim(), variableType: "STRING"};
        if (intcode.length === 0) {
            intcode.push(pushable);
        } else {
            let nameFound = false;
            for (const element of intcode) {
                if (element.name === inpt_addtxt_name.trim()) {
                    element.value = inpt_addtxt_value.trim();
                    nameFound = true;
                    app.display({U: "Your space", v: []});
                    break;
                }
            }
            if (!nameFound) {
                intcode.push(pushable);
            }
        }
        app.display({queue: [{update: ["Add a Variable"], v: null}]});
        app.display({U: "Your space", v: []});
    } 
    else if (event.u === "btn_addnumvar") {
        let pushable = {type: "LET_STATEMENT", name: inpt_addnum_name.trim(), value: inpt_addnum_value, variableType: "NUMBER"};
        if (Number.isFinite(inpt_addnum_value)) {
            if (intcode.length === 0) {
                intcode.push(pushable);
            } else {
                let numberFound = false;
                for (const element of intcode) {
                    if (element.name === inpt_addnum_name.trim()) {
                        element.value = inpt_addnum_value;
                        numberFound = true;
                        app.display({U: "Your space", v: []});
                        break;
                    }
                }
                if (!numberFound) {
                    intcode.push(pushable);
                }
            }
            app.display({queue: [{update: ["Add a num Variable"], v: null}]});
            app.display({U: "Your space", v: []});
        } else {
            app.display({add: [{c: "win", closeable: 1, modal: 1, v: ["Please enter a number in the value field."]}]});
        }
    } 
    else if (event.u === "btn_println") {
        for (const element of intcode) {
            if (element.name === inpt_print_value.trim()) {
                inpt_print_value = "ident_" + inpt_print_value.trim();
            } else {
                inpt_print_value = inpt_print_value.trim();
            }
        }
        intcode.push({type: "FUNCTION_CALL_STATEMENT", name: "print", args: [inpt_print_value.trim()]});
        app.display({queue: [{update: ["Add text to display"], v: null}]});
        app.display({U: "Your space", v: []});
    } 
    else if (event.u === "btn_loadejsfile") {
        if (event.v != undefined) {
            let filestin = JSON.parse(filecontent);
            for (const element of filestin) {
                if (element.type == "LET_STATEMENT" && element.variabletype === "STRING") {
                    newcode += ("let " + element.name + " = \"" + element.value + "\";" + "\n");
                } else if (element.type == "LET_STATEMENT" && element.variabletype === "NUMBER") {
                    newcode += ("let " + element.name + " = " + element.value + ";" + "\n");
                } else if (element.type == "FUNCTION_CALL_STATEMENT" && element.name === "print") {
                    newcode += ("console.log(\"" + element.args + "\");" + "\n");
                }
            }
            app.display({queue: [{update: ["Load the JSON File?"], v: null}]});
            app.display({U: "Your space", add: [newcode]});
        }
    } 
    else if (event.u.startsWith("btn_edit")) {
        // Display an edit interface, maybe a modal with a text input
        let currentCodeLine = parseInt(event.u.slice(-1));
        if (intcode[currentCodeLine].type == "LET_STATEMENT") { 
            app.display({queue: [{add: [{ c: "win", closeable: 1, modal: 1, id: "Edit a Variable",
                v: [{ v: intcode[currentCodeLine].name, id: "inpt_edit_name", cap: "Name", input: 1 },
                    { v: intcode[currentCodeLine].value, id: "inpt_edit_value", cap: "Value", input: 1 },
                    { c: "btn", id: "make_edit" + currentCodeLine, cap: "Change" }]
            }]}]});
        } else if (intcode[currentCodeLine].type == "FUNCTION_CALL_STATEMENT") {
            app.display({queue: [{add: [{ c: "win", closeable: 1, modal: 1, id: "Edit a Print",
                v: [{ v: intcode[currentCodeLine].args, id: "inpt_edit_name", cap: "Name", input: 1 },
                    { c: "btn", id: "make_edit" + currentCodeLine, cap: "Change" }]
            }]}]});
        }
    } 
    else if (event.u.startsWith("make_edit")) {
        let linenum = parseInt(event.u.slice(-1));
        console.log("Before Update: ", intcode[linenum]);
        if (typeof inpt_edit_name != 'undefined' && inpt_edit_name != intcode[linenum].name) {
            intcode[linenum].name = inpt_edit_name;
        } else if (typeof inpt_edit_value != 'undefined' && inpt_edit_value != intcode[linenum].value) {
            intcode[linenum].value = inpt_edit_value;
        }
        console.log("After Update: ", intcode[linenum]);
        app.display({queue: [{update: ["Edit a Variable"], v: null}]});
        app.display({queue: [{update: ["Edit a Print"], v: null}]});
        app.display({U: "Your space", v: []});
    } 
    else if (event.u.startsWith("btn_trash")) {
        let linenum = parseInt(event.u.slice(-1));
        intcode.splice(linenum, 1);
        app.display({U: "Your space", v: []});
    }
    
    /***** PUT SEPARATELY AS A FUNCTION CALLED CLEAR SCREEN AND ADD AGAIN *******/
    if (newcode !== "") {
        app.display({U: "Your space", v: [newcode]});
    } else {
        app.display({U: "Your space", v: []});
    }
    intcode.forEach((element, line) => {
        let editandline = [{c: "btn", id: "btn_edit" + line, cap: "✏️"}, {c: "btn", id: "btn_trash" + line, cap: "🗑️"}, {c: "txt", v: "let " + element.name + " = \"" + element.value + "\";"}];
        
        if (element.type == "LET_STATEMENT" && element.variableType === "STRING") {  
            app.display({U: "Your space", add: [editandline]});
        } else if (element.type == "LET_STATEMENT" && element.variableType === "NUMBER") {
            app.display({U: "Your space", add: [editandline]});
        } else if (element.type == "FUNCTION_CALL_STATEMENT" && element.name === "print") {
            let editandprint = [{c: "btn", id: "btn_edit" + line, cap: "✏️"}, {c: "btn", id: "btn_trash" + line, cap: "🗑️"}, {c: "txt", v: "console.log(\"" + element.args + "\");"}];
            app.display({U: "Your space", add: [editandprint]});
        }
        console.log("intcode: " + intcode);
    });
});

Detailed Breakdown

  1. Component Check and Display:

    if (COMPONENTS.has(event.u) && event.v === true) {
    app.display({queue: [{add: [COMPONENTS.get(event.u)]}]});
}

    • If the event u corresponds to a key in the COMPONENTS map and event.v is true, it adds the component to the display queue.

  2. Input Field Handlers:

    • These handlers update various input variables (inpt_addtxt_name, inpt_edit_name, etc.) with the values from the events.

    • They use straightforward assignment, ensuring the appropriate variable is updated based on the event.

  3. Button Handlers:

    • Save JSON File:

      else if (event.u === "btn_savejsfile") {
    app.display({save: ['javascript.json', JSON.stringify(intcode)]});
}

      • This saves the current intcode as a JSON file named javascript.json.

    • Add Text Variable:

      else if (event.u === "btn_addtextvar") {
    // Create a new LET_STATEMENT for a text variable
    let pushable = {type: "LET_STATEMENT", name: inpt_addtxt_name.trim(), value: inpt_addtxt_value.trim(), variableType: "STRING"};
    if (intcode.length === 0) {
        intcode.push(pushable);
    } else {
        let nameFound = false;
        for (const element of intcode) {
            if (element.name === inpt_addtxt_name.trim()) {
                element.value = inpt_addtxt_value.trim();
                nameFound = true;
                app.display({U: "Your space", v: []});
                break;
            }
        }
        if (!nameFound) {
            intcode.push(pushable);
        }
    }
    app.display({queue: [{update: ["Add a Variable"], v: null}]});
    app.display({U: "Your space", v: []});
}

      • Adds a new text variable or updates an existing one if the name matches.

    • Add Number Variable:

      else if (event.u === "btn_addnumvar") {
    let pushable = {type: "LET_STATEMENT", name: inpt_addnum_name.trim(), value: inpt_addnum_value, variableType: "NUMBER"};
    if (Number.isFinite(inpt_addnum_value)) {
        if (intcode.length === 0) {
            intcode.push(pushable);
        } else {
            let numberFound = false;
            for (const element of intcode) {
                if (element.name === inpt_addnum_name.trim()) {
                    element.value = inpt_addnum_value;
                    numberFound = true;
                    app.display({U: "Your space", v: []});
                    break;
                }
            }
            if (!numberFound) {
                intcode.push(pushable);
            }
        }
        app.display({queue: [{update: ["Add a num Variable"], v: null}]});
        app.display({U: "Your space", v: []});
    } else {
        app.display({add: [{c: "win", closeable: 1, modal: 1, v: ["Please enter a number in the value field."]}]});
    }
}

      • Adds a new number variable or updates an existing one if the name matches.

    • Print Line:

      else if (event.u === "btn_println") {
    for (const element of intcode) {
        if (element.name === inpt_print_value.trim()) {
            inpt_print_value = "ident_" + inpt_print_value.trim();
        } else {
            inpt_print_value = inpt_print_value.trim();
        }
    }
    intcode.push({type: "FUNCTION_CALL_STATEMENT", name: "print", args: [inpt_print_value.trim()]});
    app.display({queue: [{update: ["Add text to display"], v: null}]});
    app.display({U: "Your space", v: []});
}

      • Adds a print function call to intcode, prefixing with ident_ if the variable exists.

    • Load JSON File:

      else if (event.u === "btn_loadejsfile") {
    if (event.v != undefined) {
        let filestin = JSON.parse(filecontent);
        for (const element of filestin) {
            if (element.type == "LET_STATEMENT" && element.variabletype === "STRING") {
                newcode += ("let " + element.name + " = \"" + element.value + "\";" + "\n");
            } else if (element.type == "LET_STATEMENT" && element.variabletype === "NUMBER") {
                newcode += ("let " + element.name + " = " + element.value + ";" + "\n");
            } else if (element.type == "FUNCTION_CALL_STATEMENT" && element.name === "print") {
                newcode += ("console.log(\"" + element.args + "\");" + "\n");
            }
        }
        app.display({queue: [{update: ["Load the JSON File?"], v: null}]});
        app.display({U: "Your space", add: [newcode]});
    }
}

      • Loads and parses a JSON file, converting its contents to JavaScript code and displaying it.

    • Edit Variable or Print Statement:

      else if (event.u.startsWith("btn_edit")) {
    // Display an edit interface, maybe a modal with a text input
    let currentCodeLine = parseInt(event.u.slice(-1));
    if (intcode[currentCodeLine].type == "LET_STATEMENT") { 
        app.display({queue: [{add: [{ c: "win", closeable: 1, modal: 1, id: "Edit a Variable",
            v: [{ v: intcode[currentCodeLine].name, id: "inpt_edit_name", cap: "Name", input: 1 },
                { v: intcode[currentCodeLine].value, id: "inpt_edit_value", cap: "Value", input: 1 },
                { c: "btn", id: "make_edit" + currentCodeLine, cap: "Change" }]
        }]}]});
    } else if (intcode[currentCodeLine].type == "FUNCTION_CALL_STATEMENT") {
        app.display({queue: [{add: [{ c: "win", closeable: 1, modal: 1, id: "Edit a Print",
            v: [{ v: intcode[currentCodeLine].args, id: "inpt_edit_name", cap: "Name", input: 1 },
                { c: "btn", id: "make_edit" + currentCodeLine, cap: "Change" }]
        }]}]});
    }
}

      • Displays an edit interface for the selected variable or print statement.

    • Make Edit:

      else if (event.u.startsWith("make_edit")) {
    let linenum = parseInt(event.u.slice(-1));
    console.log("Before Update: ", intcode[linenum]);
    if (typeof inpt_edit_name != 'undefined' && inpt_edit_name != intcode[linenum].name) {
        intcode[linenum].name = inpt_edit_name;
    } else if (typeof inpt_edit_value != 'undefined' && inpt_edit_value != intcode[linenum].value) {
        intcode[linenum].value = inpt_edit_value;
    }
    console.log("After Update: ", intcode[linenum]);
    app.display({queue: [{update: ["Edit a Variable"], v: null}]});
    app.display({queue: [{update: ["Edit a Print"], v: null}]});
    app.display({U: "Your space", v: []});
}

      • Updates the selected variable or print statement based on the input from the edit interface.

    • Delete Variable or Print Statement:

      else if (event.u.startsWith("btn_trash")) {
    let linenum = parseInt(event.u.slice(-1));
    intcode.splice(linenum, 1);
    app.display({U: "Your space", v: []});
}

      • Deletes the selected variable or print statement from intcode.

  4. Clear Screen and Re-Add Elements:

    if (newcode !== "") {
    app.display({U: "Your space", v: [newcode]});
} else {
    app.display({U: "Your space", v: []});
}
intcode.forEach((element, line) => {
    let editandline = [{c: "btn", id: "btn_edit" + line, cap: "✏️"}, {c: "btn", id: "btn_trash" + line, cap: "🗑️"}, {c: "txt", v: "let " + element.name + " = \"" + element.value + "\";"}];
    
    if (element.type == "LET_STATEMENT" && element.variableType === "STRING") {  
        app.display({U: "Your space", add: [editandline]});
    } else if (element.type == "LET_STATEMENT" && element.variableType === "NUMBER") {
        app.display({U: "Your space", add: [editandline]});
    } else if (element.type == "FUNCTION_CALL_STATEMENT" && element.name === "print") {
        let editandprint = [{c: "btn", id: "btn_edit" + line, cap: "✏️"}, {c: "btn", id: "btn_trash" + line, cap: "🗑️"}, {c: "txt", v: "console.log(\"" + element.args + "\");"}];
        app.display({U: "Your space", add: [editandprint]});
    }
    console.log("intcode: " + intcode);
});

In Summary, this code snippet manages various events, primarily involving the addition, editing, deletion, and display of variables and print statements. It ensures that user inputs are properly handled, variables are managed efficiently, and the UI is updated to reflect changes dynamically.

Credit: The above outline was built using ChatGPT.

PreviousApp Start (Sec. B)NextApp Support

Last updated

Was this helpful?