d3-worldcup/js/main.js

const 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();
});

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

    changeRound: (e) => {
        const target = UI.findRoot(e.target);
        main.setState({ round: target.getAttribute(UI.DATA.ROUND) });
        main.updateUI();
    },

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

    getRounds: (eventKey) => {
        const reducer = (acc, v) => (acc.indexOf(v.rId) === -1 ? acc.concat(v.rId) : acc);
        const roundIds = main.json.tourneys[eventKey].games.reduce(reducer, []);
        return roundIds.map(v => ({
                roundId: v,
                roundName: UI.getRoundName(main.json.rounds[v]),
            })
        );
    },

    generateUI: () => {
        UI.buildEventsPane(main.changeEvent);
        UI.buildSortPane(main.changeSort);
        UI.buildRoundsPane(main.changeRound);
    },

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

        UI.updateEventsPane(state.eventKey);
        UI.updateRoundsPane(rounds);
        // UI.updateSortPane(state.sort);

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

    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;
        }, {});
    },

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

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

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

fetch('worldcup.json')
    .then(main.initJSON)
    .then(main.setState.call(null, { sort: null, eventKey: "1930" }))
    .then(main.generateUI)
    .then(main.updateUI);