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: () => {
        const state = main.getState();

        UI.buildEventsPane(main.changeEvent);
        UI.buildSortPane(main.changeSort, CONSTANTS.SORT_TYPES);
        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, state.sort, CONSTANTS.SORT_TYPES, 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;
        }, {});
    },

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

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

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

        if (state.rounds === undefined) {
        }

        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 || null;
        const sort = next.sort || prev.sort || null;

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

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