d3-worldcup/js/main.js

const main = {
    changeEvent: (e) => {
        const target = UI.findRoot(e.target);
        main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
        main.updateUI();
    },

    changeSort: (e) => {
        const target = UI.findRoot(e.target);
        main.setState({ sort: target.getAttribute(UI.DATA.SORT) });
        main.updateUI();
    },

    changeRound: (e) => {
        const target = UI.findRoot(e.target);
        const r = target.getAttribute(UI.DATA.ROUND)

        const state = main.getState();
        const roundsToShow = state.rounds ? state.rounds.split(',') : [];
        const i = roundsToShow.indexOf(r);
        (i === -1) ? roundsToShow.push(r) : roundsToShow.splice(i, 1);

        main.setState({ rounds: roundsToShow });
        main.updateUI();
    },

    getRounds: (eventKey) => {
        const rounds = {};

        main.json.tourneys[eventKey].games.forEach(game => {
            const name = UI.getRoundName(main.json.rounds[game.rId]);
            if (rounds[name] === undefined) {
                rounds[name] = [];
            }

            rounds[name].push({
                id: game.rId,
                name: name,
            });
        });

        return rounds;
    },

    generateUI: () => {
        const state = main.getState();

        UI.buildEventsPane(main.changeEvent);
        UI.buildSortPane(main.changeSort);
        UI.buildRoundsPane(main.changeRound);
    },

    updateUI: () => {
        const state = main.getState();

        const matrix = Matrices.buildMatrix(main.json, state.eventKey);
        Diagram.clear();
        Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix);

        UI.updateEventsPane(state.eventKey);
        UI.updateSortPane(state.sort);
        UI.updateRoundsPane(state.rounds.split(','), main.json.rounds);
    },

    fetch: (url) => new Promise((resolve, reject) => {
        const listener = ({ srcElement: req }) => {
            req.status === 200 ? resolve(req.responseText) : reject("busted");
        };

        const req = new XMLHttpRequest();
        req.addEventListener('load', listener);
        req.open('GET', url);
        req.send();
    }),

    initJSON: (strData) => {
        main.json = JSON.parse(strData);
    },

    getState: () => {
        const params = window.location.href.split('?')[1];

        if (!params) {
            return {};
        }

        return params.split('&').reduce((acc, v) => {
            const tmp = v.split('=');
            acc[tmp[0]] = tmp[1];
            return acc;
        }, {});
    },

    initState: () => {
        const state = main.getState();

        if (state.eventKey === undefined) {
            state.eventKey = "1930";
        }

        if (state.sort === undefined) {
            state.sort = null;
        }

        if (state.rounds === undefined) {
            state.rounds = Object.values(UI.ROUND_TYPES);
        }

        main.setState(state);
    },

    setState: (next) => {
        const prev = main.getState();
        const url = window.location.href.split('?')[0];

        const eventKey = next.eventKey || prev.eventKey;
        const rounds = next.rounds || prev.rounds;
        const sort = next.sort || prev.sort || null;

        history.pushState(null, null, `${url}?eventKey=${eventKey}&sort=${sort}&rounds=${rounds}`);
    },
}

main.fetch('worldcup.json')
    .then(main.initJSON)
    .then(main.initState)
    .then(main.generateUI)
    .then(main.updateUI);