d3-worldcup/js/index.js

import Matrices from './matrices';
import Diagram from './diagram';
import UI from './ui';
import Sorter from './sorter'

require('../res/reset.scss');
require('../res/options.scss');
require('../res/events.scss');
require('../res/diagram.scss');
require('../res/sort.scss');
require('../res/rounds.scss');

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 state = main.getState();
        const url = window.location.href.split('?')[0];

        state.eventKey = next.eventKey || state.eventKey;
        state.rounds = next.rounds || state.rounds;
        state.sort = next.sort || state.sort || null;

        const params = [];
        for (let key in state) {
            params.push(`${key}=${state[key]}`);
        }

        history.pushState(null, null, `${url}?${params.join('&')}`);
    },
}

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