Source: pages/simplifierPage.js

/**
 * Special case of a class. This manages the page layout when a circuit is selected and represents the different modes
 * simpliPFy supports e.g. stepwise, kirchhoff, wheatstone ...
 * Each mode has to be derived from this class. Each mode writes to the same div "content-col" that is accessible with
 * this.contentDiv
 * @abstract
 * @extends Page
 */
class SimplifierPage extends Page{
    /** @type {HTMLDivElement} */
    contentDiv = document.getElementById("content-col"); // also adjust in clear() when changed
    constructor(content, title){
        content.gameOverModal = new GameOverModal();
        content.extraLiveModal = new ExtraLiveModal();
        super(content, "simplifier-page-container", title);
    }

    matomoEvent(){
        pushPageViewMatomo(state.currentCircuitMap.selectorGroup + "/" + state.currentCircuitMap.circuitFile);
    }

    show(){
        pageManager.pages.newNavigation.disableSettings();
        this.contentDiv.style.display = "block";
        return super.show();
    }


    hide() {
        super.hide();
        this.contentDiv.style.display = "none";
        pageManager.pages.newNavigation.enableSettings();
    }

    static createSolvers(worker){
        state.solvers.stepwise = new StepSolverAPI(worker)
        state.solvers.kirchhoff = new KirchhoffSolverAPI(worker)
        state.solvers.wheatstone = new WheatstoneSolverAPI(worker)
    }

    static initSolvers(){
        for (let solver of Object.values(state.solvers)){
            if (solver) solver.init(state.currentCircuitMap);
        }
    }

    static resetSolvers(){
        for (let solver of Object.values(state.solvers)){
            if (solver) solver.reset()
        }
    }

    reset(){
        throw Error("Implement in Child")
    }

    resetBtn(){
        this.reset(true)
        if (this.wasAborted) pushCircuitEventMatomo(circuitActions.Aborted, state.pictureCounter);
    }

    updateContent(){
        this.reset()
        pageManager.changePage(this, true);
    }

    static clear(){
        document.getElementById("content-col").innerHTML = "";
    }

    get wasAborted(){
        let checkBtnParallel = document.getElementById("check-btn-parallel");
        let checkBtnSeries = document.getElementById("check-btn-series");

        if (state.currentCircuitMap !== null && checkBtnParallel && checkBtnSeries) {
            // If the check btn is disabled, the user has finished the simplification
            // That means if the page is reset, the user aborted the simplification
            // If calledFromResetBtn, then don't push the event because it's reset, and not aborted
            // Also don't push the event if the user is on the first picture, maybe it was just a miss click
            let checkBtnParallelDisabled = checkBtnParallel.classList.contains("disabled");
            let checkBtnSeriesDisabled = checkBtnSeries.classList.contains("disabled");
            if (!checkBtnParallelDisabled && state.pictureCounter > 1){
                return true;
            }
            if(!checkBtnSeriesDisabled && state.pictureCounter > 1){
                return true;
            }
        }
        return false;
    }

    beforeSetup() {
        if (!super.beforeSetup()) return false;
        if(!document.getElementById(this.content.gameOverModal.mainID))
            document.body.appendChild(this.content.gameOverModal.setup())
        if(!document.getElementById(this.content.extraLiveModal.mainID))
            document.body.appendChild(this.content.extraLiveModal.setup())
        return true;
    }

    afterInit(){
        if (state.gamification) {
            setupShakeAnimation();
        }
        super.afterInit();
    }

    updateColor() {
        super.updateColor();
        // Toggle buttons
        const toggleViewButtons = this.pageDiv.getElementsByClassName("toggle-view");
        for (const toggleViewButton of toggleViewButtons) {
            toggleViewButton.style.color = colors.currentForeground;
        }
    }
}