RaMemory/src/JavaScript/main.js

'use strict';

const RaMemoryPage = {
    howToPlayId: "how-to-play",
    aboutId: "about",
    gameId: "game",
    imprintId: "imprint",
    gdprId: "gdpr",
    settingsId: "settings",
    displayNoneClass: Css.classes.displayNone,
    howToPlayBtnClass: "btn-howto",
    gdprBtnClass: "btn-gdpr",
    imprintBtnClass: "btn-imprint",
    settingsBtnClass: "btn-settings",
    themeSwitchBtnClass: "btn-toggle-theme",
    settingsCheckUseCookiesId: "settings-use-cookies",
    settingsCheckSaveHighscoreId: "settings-save-highscore",
    settingsRadioStartValueClass: "settings-start-value",
    scrollToTimeout: 200,
    timeoutId: 0,
    prefersDarkTheme: null,
    currentTheme: null,
    closeAll: function (_this, not = "") {
        if (document.getElementById(_this.howToPlayId) && not !== _this.howToPlayId) {
            if (!document.getElementById(_this.howToPlayId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.howToPlayId).classList.add(_this.displayNoneClass);
            }
        }
        if (document.getElementById(_this.gameId) && not !== _this.gameId) {
            if (!document.getElementById(_this.gameId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.gameId).classList.add(_this.displayNoneClass);
            }
        }
        if (document.getElementById(_this.aboutId) && not !== _this.aboutId) {
            if (!document.getElementById(_this.aboutId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.aboutId).classList.add(_this.displayNoneClass);
            }
        }

        if (document.getElementById(_this.imprintId) && not !== _this.imprintId) {
            if (!document.getElementById(_this.imprintId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.imprintId).classList.add(_this.displayNoneClass);
            }
        }
        if (document.getElementById(_this.gdprId) && not !== _this.gdprId) {
            if (!document.getElementById(_this.gdprId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.gdprId).classList.add(_this.displayNoneClass);
            }
        }
        if (document.getElementById(_this.settingsId) && not !== _this.settingsId) {
            if (!document.getElementById(_this.settingsId).classList.contains(_this.displayNoneClass)) {
                document.getElementById(_this.settingsId).classList.add(_this.displayNoneClass);
            }
    }
    },
    showJust: function (id) {
        let _this = RaMemoryPage;
        _this.closeAll(_this, id);
        if (document.getElementById(id)) {
            if (document.getElementById(id).classList.contains(_this.displayNoneClass)) {
                document.getElementById(id).classList.remove(_this.displayNoneClass);
            }
        }
    },
    btnActions: function (_this, id) {
        _this.showJust(id);
        _this.timeoutId = setTimeout(function () {
            document.getElementById(id).scrollIntoView({behavior: "smooth"});
        }, _this.scrollToTimeout);
    },
    initBtnActions: function (_this) {
        document.getElementById(Memory.generateMemoryBtnId).addEventListener("click", function () {
            _this.showJust(_this.gameId);
        });
        let btns = document.getElementsByClassName(_this.howToPlayBtnClass);
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                _this.btnActions(_this, _this.howToPlayId);
            });
        }
        btns = document.getElementsByClassName(_this.gdprBtnClass);
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                _this.btnActions(_this, _this.gdprId);
            });
        }
        btns = document.getElementsByClassName(_this.imprintBtnClass);
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                _this.btnActions(_this, _this.imprintId);
            });
        }
        btns = document.getElementsByClassName(_this.settingsBtnClass);
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                _this.btnActions(_this, _this.settingsId);
            });
        }

        btns = document.getElementsByClassName(_this.themeSwitchBtnClass);
        for (let i = 0; i < btns.length; i++) {
            btns[i].addEventListener("click", function () {
                let theme = "";
                if (_this.prefersDarkTheme.matches) {
                    document.body.classList.toggle(Css.classes.lightTheme);
                    theme = document.body.classList.contains(Css.classes.lightTheme)
                            ? "light"
                            : "dark";
                } else {
                    document.body.classList.toggle(Css.classes.darkTheme);
                    theme = document.body.classList.contains(Css.classes.darkTheme)
                            ? "dark"
                            : "light";
                }
                localStorage.setItem("theme", theme);
            });
        }
        document.getElementById("save-settings").addEventListener("click", function (e) {
            if (document.getElementById(_this.settingsCheckUseCookiesId).checked) {
                _this.saveSettingsAction(_this);

                document.getElementById(_this.settingsCheckUseCookiesId).parentNode.classList.remove("bg-alert");
                document.getElementById(_this.settingsCheckUseCookiesId).parentNode.classList.remove("text-white");
            } else {
                document.getElementById(_this.settingsCheckUseCookiesId).parentNode.classList.add("bg-alert");
                document.getElementById(_this.settingsCheckUseCookiesId).parentNode.classList.add("text-white");
            }
        });
        document.getElementById("clear-settings").addEventListener("click", function (e) {
            Memory.eraseAllCookies();
            document.getElementById(_this.settingsRadioStartValueClass + "-0").checked = true;
            document.getElementById(_this.settingsCheckSaveHighscoreId).checked = false;
            document.getElementById(_this.settingsCheckUseCookiesId).checked = false;
            
                document.getElementById("settings-saved").classList.remove("d-none");
            setTimeout(function(){
                document.getElementById("settings-saved").classList.add("d-none");
            },1350);
        });
    },
    initTheme: function (_this) {
        _this.prefersDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
        _this.currentTheme = localStorage.getItem("theme");
        if (_this.currentTheme === "dark") {
            document.body.classList.toggle(Css.classes.darkTheme);
        } else if (_this.currentTheme === "light") {
            document.body.classList.toggle(Css.classes.lightTheme);
        }
    },
    initSettings: function (_this) {
        document.getElementById(_this.settingsRadioStartValueClass + "-" + Memory.cookieStartValue).checked = true;
        document.getElementById(_this.settingsCheckSaveHighscoreId).checked = Memory.cookieSaveHighscore === 0 ? false : true;
        document.getElementById(_this.settingsCheckUseCookiesId).checked = Memory.cookies;
    },
    saveSettingsAction: function (_this) {
        document.cookie = "";
        Memory.cookies = true;
        Memory.setCookieSaveHighscore(document.getElementById(_this.settingsCheckSaveHighscoreId).checked ? 1 : 0);
        Memory.setCookieStartValue(document.querySelector('input[name="' + _this.settingsRadioStartValueClass + '"]:checked').value);
         document.getElementById("settings-saved").classList.remove("d-none");
            setTimeout(function(){
                document.getElementById("settings-saved").classList.add("d-none");
            },1350);
    },
    init: function () {
        let _this = this;
        if (typeof Memory === "object") {
            Memory.init();
        }
        _this.initTheme(_this);
        _this.initBtnActions(_this);
        _this.initSettings(_this);
        if (location.hash === "#" + _this.howToPlayId ||
                location.hash === "#" + _this.settingsId ||
                location.hash === "#" + _this.gdprId ||
                location.hash === "#" + _this.imprintId
                ) {
            let id = location.hash.substr(1, location.hash.length - 1);
            if (document.getElementById(id)) {
                _this.showJust(id);
                setTimeout(function () {
                    document.getElementById(id).scrollIntoView({behavior: "smooth"});
                }, 450);
            }
        }
        _this.closeAll(_this, _this.aboutId);
    }
};

RaMemoryPage.init();


const registerServiceWorker = async () => {
    if ('serviceWorker' in navigator) {
        try {
            const registration = await navigator.serviceWorker.register(
                    './sw.js',
                    {
                        scope: './',
                    }
            );
            if (registration.installing) {
            } else if (registration.waiting) {
            } else if (registration.active) {
            }
        } catch (error) {
            console.error(`Registration failed with ${error}`);
        }
    }
};

window.addEventListener("DOMContentLoaded", async function (event) {
    registerServiceWorker();
});