You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
13 KiB
408 lines
13 KiB
const UI = {
|
|
CLASSNAMES: {
|
|
TOURNEY: {
|
|
LINK: 'tourney-link',
|
|
IMAGE: 'tourney-image',
|
|
COUNTRY: 'tourney-country',
|
|
YEAR: 'tourney-year',
|
|
},
|
|
EVENT: {
|
|
ITEM: 'event-item',
|
|
YEAR: 'event-year',
|
|
FLAG: 'event-flag',
|
|
},
|
|
|
|
SCHEME: {
|
|
SCHEME1: 'scheme-item scheme1',
|
|
SCHEME2: 'scheme-item scheme2',
|
|
SCHEME3: 'scheme-item scheme3',
|
|
SCHEME4: 'scheme-item scheme4',
|
|
},
|
|
|
|
SORT: {
|
|
ICON: 'sort-icon',
|
|
ITEM: 'sort-item',
|
|
TEXT: 'sort-text',
|
|
TINY: 'sort-tiny',
|
|
},
|
|
|
|
ROUND: {
|
|
ICON: 'round-icon',
|
|
ITEM: 'round-item',
|
|
TEXT: 'round-text',
|
|
TINY: 'round-tiny',
|
|
},
|
|
},
|
|
|
|
SORT_TYPES: {
|
|
GOALS: 'goals',
|
|
COUNTRY: 'country',
|
|
POPULATION: 'population',
|
|
},
|
|
|
|
ROUND_TYPES: {
|
|
PRELIM: '1',
|
|
ROUNDOF16: '2',
|
|
QUARTERFINAL: '3',
|
|
SEMIFINAL: '4',
|
|
CONSOLATION: '5',
|
|
FINAL: '6',
|
|
},
|
|
|
|
DATA: {
|
|
ROOT: 'data-root',
|
|
EVENT: 'data-event-key',
|
|
ROUND: 'data-round-key',
|
|
SCHEME: 'data-round-scheme',
|
|
SORT: 'data-sort-key',
|
|
},
|
|
|
|
I18N: {
|
|
HIDE: 'hide',
|
|
SHOW: 'show',
|
|
},
|
|
|
|
findRoot: (node) => {
|
|
while (node !== document.body && node.getAttribute(UI.DATA.ROOT) === null) {
|
|
node = node.parentNode;
|
|
}
|
|
|
|
return node;
|
|
},
|
|
|
|
clearActive: (nodes) => {
|
|
nodes.forEach(node => {
|
|
const classes = node.className.split(' ');
|
|
const i = classes.indexOf('active');
|
|
|
|
if (i !== -1) {
|
|
classes.splice(i, 1);
|
|
node.className = classes.join(' ');
|
|
}
|
|
});
|
|
},
|
|
|
|
updateTourneyPane: (eventKey) => {
|
|
const tourneyList = {
|
|
'1930': "Uruguay",
|
|
'1934': "Italy",
|
|
'1938': "France",
|
|
'1950': "Brazil",
|
|
'1954': "Switzerland",
|
|
'1958': "Sweden",
|
|
'1962': "Chile",
|
|
'1966': "England",
|
|
'1970': "Mexico",
|
|
'1974': "West Germany",
|
|
'1978': "Argentina",
|
|
'1982': "Spain",
|
|
'1986': "Mexico",
|
|
'1990': "Italy",
|
|
'1994': "USA",
|
|
'1998': "France",
|
|
'2002': "Japan / South Korea",
|
|
'2006': "Germany",
|
|
'2010': "Johannesburg",
|
|
'2014': "Brazil",
|
|
};
|
|
|
|
const ek = (tourneyList[eventKey] === undefined ? null : eventKey);
|
|
|
|
const tourneyPane = document.querySelector('.tourney');
|
|
|
|
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`;
|
|
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.LINK}`).href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`;
|
|
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek];
|
|
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek;
|
|
},
|
|
|
|
updateEventsPane: (eventKey) => {
|
|
const eventItems = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`);
|
|
UI.clearActive(eventItems);
|
|
|
|
const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
|
|
activeEventNode.className += ' active';
|
|
},
|
|
|
|
updateRoundsPane: (roundsToShow, allRounds) => {
|
|
const roundsItems = document.querySelectorAll(`.${UI.CLASSNAMES.ROUND.ITEM}`);
|
|
UI.clearActive(roundsItems);
|
|
|
|
roundsItems.forEach(item => {
|
|
const type = item.getAttribute(UI.DATA.ROUND);
|
|
const tiny = item.querySelector(`.${UI.CLASSNAMES.ROUND.TINY}`);
|
|
tiny.innerHTML = UI.I18N.SHOW;
|
|
|
|
if (roundsToShow.indexOf(type) > -1) {
|
|
item.className += ' active';
|
|
tiny.innerHTML = UI.I18N.HIDE;
|
|
}
|
|
});
|
|
|
|
const ribbons = document.querySelectorAll('.ribbon');
|
|
ribbons.forEach(ribbon => {
|
|
const name = allRounds[ribbon.getAttribute("data-round-id")];
|
|
const type = UI.getRoundType(name);
|
|
|
|
roundsToShow.indexOf(type) === -1
|
|
? ribbon.style.display = 'none'
|
|
: ribbon.style.display = 'inline';
|
|
});
|
|
},
|
|
|
|
updateSchemePane: (scheme) => {
|
|
const schemeItems = document.querySelectorAll('.scheme-item');
|
|
UI.clearActive(schemeItems);
|
|
|
|
schemeItems.forEach(node => {
|
|
if (node.getAttribute(UI.DATA.SCHEME) === scheme) {
|
|
node.className += ' active';
|
|
}
|
|
});
|
|
},
|
|
|
|
updateSortPane: (sort) => {
|
|
const sortItems = document.querySelectorAll('.sort-item');
|
|
UI.clearActive(sortItems);
|
|
|
|
sortItems.forEach(node => {
|
|
if (node.getAttribute(UI.DATA.SORT) === sort) {
|
|
node.className += ' active';
|
|
}
|
|
});
|
|
},
|
|
|
|
buildTourneyPane: () => {
|
|
const link = document.createElement('a');
|
|
const img = document.createElement('img');
|
|
const country = document.createElement('div');
|
|
const year = document.createElement('year');
|
|
|
|
link.className = UI.CLASSNAMES.TOURNEY.LINK;
|
|
link.target = '_blank';
|
|
|
|
img.className = UI.CLASSNAMES.TOURNEY.IMAGE;
|
|
|
|
country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
|
|
|
|
year.className = UI.CLASSNAMES.TOURNEY.YEAR;
|
|
|
|
const tourneyPane = document.querySelector('.tourney');
|
|
|
|
link.appendChild(img);
|
|
|
|
tourneyPane.appendChild(link);
|
|
tourneyPane.appendChild(year);
|
|
tourneyPane.appendChild(country);
|
|
},
|
|
|
|
buildEventsPane: (onClick) => {
|
|
const eventsList = [
|
|
{ year: 1930, icon: "uy" },
|
|
{ year: 1934, icon: "it" },
|
|
{ year: 1938, icon: "fr" },
|
|
{ year: 1950, icon: "br" },
|
|
{ year: 1954, icon: "ch" },
|
|
{ year: 1958, icon: "se" },
|
|
{ year: 1962, icon: "cl" },
|
|
{ year: 1966, icon: "gb" },
|
|
{ year: 1970, icon: "mx" },
|
|
{ year: 1974, icon: "de" },
|
|
{ year: 1978, icon: "ar" },
|
|
{ year: 1982, icon: "es" },
|
|
{ year: 1986, icon: "mx" },
|
|
{ year: 1990, icon: "it" },
|
|
{ year: 1994, icon: "us" },
|
|
{ year: 1998, icon: "fr" },
|
|
{ year: 2002, icon: "jp" },
|
|
{ year: 2006, icon: "de" },
|
|
{ year: 2010, icon: "za" },
|
|
{ year: 2014, icon: "br" },
|
|
];
|
|
|
|
const eventsDiv = document.querySelector('.events');
|
|
|
|
while (eventsDiv.hasChildNodes()) {
|
|
eventsDiv.firstChild.remove();
|
|
}
|
|
|
|
eventsList.forEach((evt) => {
|
|
const item = document.createElement('div');
|
|
const year = document.createElement('div');
|
|
const flag = document.createElement('div');
|
|
|
|
item.className = UI.CLASSNAMES.EVENT.ITEM;
|
|
item.addEventListener('click', onClick);
|
|
item.setAttribute(UI.DATA.EVENT, evt.year);
|
|
item.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
year.className = UI.CLASSNAMES.EVENT.YEAR;
|
|
year.innerHTML = evt.year;
|
|
|
|
flag.className = `${UI.CLASSNAMES.EVENT.FLAG} flag-icon flag-icon-${evt.icon}`;
|
|
|
|
item.appendChild(year);
|
|
item.appendChild(flag);
|
|
|
|
eventsDiv.appendChild(item);
|
|
});
|
|
},
|
|
|
|
buildSortPane: (onClick) => {
|
|
const sortList = [
|
|
{ text: 'Default', value: null },
|
|
{ text: 'Goals Scored', value: UI.SORT_TYPES.GOALS },
|
|
{ text: 'Country Name', value: UI.SORT_TYPES.COUNTRY },
|
|
// { text: 'Order by country population', value: UI.SORT_TYPES.POPULATION },
|
|
];
|
|
|
|
const sortDiv = document.querySelector('.sort');
|
|
|
|
while (sortDiv.hasChildNodes()) {
|
|
sortDiv.firstChild.remove();
|
|
}
|
|
|
|
sortList.forEach(sort => {
|
|
const icon = document.createElement('img');
|
|
const item = document.createElement('div');
|
|
const text = document.createElement('div');
|
|
const tiny = document.createElement('div');
|
|
|
|
item.className = UI.CLASSNAMES.SORT.ITEM;
|
|
item.addEventListener('click', onClick);
|
|
item.setAttribute(UI.DATA.SORT, sort.value);
|
|
item.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
text.className = UI.CLASSNAMES.SORT.TEXT;
|
|
text.innerHTML = sort.text;
|
|
|
|
tiny.className = UI.CLASSNAMES.SORT.TINY;
|
|
tiny.innerHTML = 'sort';
|
|
|
|
icon.className = UI.CLASSNAMES.SORT.ICON;
|
|
icon.src = 'res/sort.svg';
|
|
|
|
item.appendChild(icon);
|
|
item.appendChild(text);
|
|
item.appendChild(tiny);
|
|
|
|
sortDiv.appendChild(item);
|
|
});
|
|
},
|
|
|
|
buildSchemePane: (onClick) => {
|
|
const schemePane = document.querySelector('.schemes');
|
|
|
|
const scheme1 = document.createElement('div');
|
|
const scheme2 = document.createElement('div');
|
|
const scheme3 = document.createElement('div');
|
|
const scheme4 = document.createElement('div');
|
|
|
|
scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
|
|
scheme1.setAttribute(UI.DATA.SCHEME, 1);
|
|
scheme1.addEventListener('click', onClick);
|
|
scheme1.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
|
|
scheme2.setAttribute(UI.DATA.SCHEME, 2);
|
|
scheme2.addEventListener('click', onClick);
|
|
scheme2.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
|
|
scheme3.setAttribute(UI.DATA.SCHEME, 3);
|
|
scheme3.addEventListener('click', onClick);
|
|
scheme3.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
|
|
scheme4.setAttribute(UI.DATA.SCHEME, 4);
|
|
scheme4.addEventListener('click', onClick);
|
|
scheme4.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
schemePane.appendChild(scheme1);
|
|
schemePane.appendChild(scheme2);
|
|
schemePane.appendChild(scheme3);
|
|
schemePane.appendChild(scheme4);
|
|
},
|
|
|
|
buildRoundsPane: (onClick) => {
|
|
const roundsList = [
|
|
{ text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM },
|
|
{ text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 },
|
|
{ text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL },
|
|
{ text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL },
|
|
{ text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION },
|
|
{ text: 'Final', value: UI.ROUND_TYPES.FINAL },
|
|
];
|
|
|
|
const roundsDiv = document.querySelector('.rounds');
|
|
|
|
while (roundsDiv.hasChildNodes()) {
|
|
roundsDiv.firstChild.remove();
|
|
}
|
|
|
|
roundsList.forEach(round => {
|
|
const icon = document.createElement('img');
|
|
const item = document.createElement('div');
|
|
const text = document.createElement('div');
|
|
const tiny = document.createElement('div');
|
|
|
|
item.className = UI.CLASSNAMES.ROUND.ITEM;
|
|
item.addEventListener('click', onClick);
|
|
item.setAttribute(UI.DATA.ROUND, round.value);
|
|
item.setAttribute(UI.DATA.ROOT, true);
|
|
|
|
tiny.className = UI.CLASSNAMES.ROUND.TINY;
|
|
tiny.innerHTML = 'hide';
|
|
|
|
text.className = UI.CLASSNAMES.ROUND.TEXT;
|
|
text.innerHTML = round.text;
|
|
|
|
icon.className = UI.CLASSNAMES.ROUND.ICON;
|
|
icon.src = 'res/check.svg';
|
|
|
|
item.appendChild(icon);
|
|
item.appendChild(text);
|
|
item.appendChild(tiny);
|
|
|
|
roundsDiv.appendChild(item);
|
|
});
|
|
},
|
|
|
|
getRoundType: (name) => {
|
|
const name2 = name.match(/^Matchday/) ? 'First round' : name;
|
|
|
|
switch (name2) {
|
|
case 'Preliminary round':
|
|
case 'First round':
|
|
case 'First round replays':
|
|
case 'Group-1 Play-off':
|
|
case 'Group-2 Play-off':
|
|
case 'Group-3 Play-off':
|
|
case 'Group-4 Play-off':
|
|
return UI.ROUND_TYPES.PRELIM;
|
|
case 'Round of 16':
|
|
return UI.ROUND_TYPES.ROUNDOF16;
|
|
case 'Third place match':
|
|
case 'Third-place match':
|
|
case 'Match for third place':
|
|
case 'Third place play-off':
|
|
case 'Third-place play-off':
|
|
return UI.ROUND_TYPES.CONSOLATION;
|
|
case 'Quarterfinals':
|
|
case 'Quarter-finals':
|
|
case 'Quarter-finals replays':
|
|
return UI.ROUND_TYPES.QUARTERFINAL;
|
|
case 'Semifinals':
|
|
case 'Semi-finals':
|
|
return UI.ROUND_TYPES.SEMIFINAL;
|
|
case 'Final':
|
|
case 'Finals':
|
|
return UI.ROUND_TYPES.FINAL;
|
|
}
|
|
|
|
console.error(`Unknown round name: ${name}`);
|
|
return name;
|
|
},
|
|
};
|
|
|
|
export default UI;
|
|
|