diff --git a/index.html b/index.html index 56a4a54..9ce52f6 100644 --- a/index.html +++ b/index.html @@ -38,91 +38,18 @@ body { + +
- -
-
-
Round Robin
-
Hide
-
- -
-
Round of 16
-
Hide
-
- -
-
Quarterfinals
-
Hide
-
- -
-
Semifinals
-
Hide
-
- -
-
Third Place
-
Hide
-
- -
-
Final
-
Hide
-
- -
- -
-
Africa
-
Hide
-
-
-
Asia
-
Hide
-
-
-
Australia
-
Hide
-
-
-
Europe
-
Hide
-
-
-
North America
-
Hide
-
-
-
South America
-
Hide
-
- -
- -
-
Order By Country Name
-
-
-
Order By Continent Name
-
-
-
Order By Country Population
-
-
-
Order By Goals For
-
-
-
Order By Goals Against
-
-
+
+
- +
@@ -144,8 +71,15 @@ body { https://openfootball.github.io/questions.html
TODO
- add team name to each arc - build dataset + move styling out of index.html + add team country population below team name + hide rounds + round persistence + sort persistence + better layout + better colors + webpack 2 / css modules? + add three.js sketchup clone to a list somewhere tweet it! diff --git a/js/main.js b/js/main.js index 7cafc3a..4f94916 100644 --- a/js/main.js +++ b/js/main.js @@ -10,38 +10,47 @@ const fetch = (url) => new Promise((resolve, reject) => { }); const main = { - changeEvent: (evt) => { - let target = evt.target; - while (target !== document.body && target.getAttribute(UI.DATA.EVENT) === null) { - target = target.parentNode; - } - + changeEvent: (e) => { + const target = UI.findRoot(e.target); main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) }); main.updateUI(); }, - changeRound: (evt) => { - main.setState({ round: evt.year }); + changeRound: (e) => { + const target = UI.findRoot(e.target); + main.setState({ round: target.getAttribute(UI.DATA.ROUND) }); main.updateUI(); }, - changeSort: (evt) => { - main.setState({ sort: evt.year }); + 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.buildSortPane(main.changeRound); + UI.buildSortPane(main.changeSort); + UI.buildRoundsPane(main.changeRound); }, updateUI: () => { const state = main.getState(); + const rounds = main.getRounds(state.eventKey); UI.updateEventsPane(state.eventKey); - // UI.updateRounds(state); - // UI.updateSort(state); + UI.updateRoundsPane(rounds); + // UI.updateSortPane(state.sort); const matrix = Matrices.buildMatrix(main.json, state.eventKey); Diagram.clear(); diff --git a/js/ui.js b/js/ui.js index 1f3eda2..e179b34 100644 --- a/js/ui.js +++ b/js/ui.js @@ -1,20 +1,36 @@ const UI = { CLASSNAMES: { - ITEM: 'event-item', - YEAR: 'event-year', - FLAG: 'event-flag', - LOCATION: 'event-location', + EVENT: { + ITEM: 'event-item', + YEAR: 'event-year', + FLAG: 'event-flag', + LOCATION: 'event-location', + }, + + SORT: { + ITEM: 'sort-item', + TEXT: 'sort-text', + }, }, DATA: { + ROOT: 'data-root', EVENT: 'data-event-key', ROUND: 'data-round-key', SORT: 'data-sort-key', }, + findRoot: (node) => { + while (node !== document.body && node.getAttribute(UI.DATA.EVENT) === null) { + node = node.parentNode; + } + + return node; + }, + updateEventsPane: (eventKey) => { - const events = document.querySelectorAll(`.${UI.CLASSNAMES.ITEM}`); - + const events = document.querySelectorAll(`.${UI.CLASSNAMES.EVENT.ITEM}`); + events.forEach(node => { const classes = node.className.split(' '); classes.splice(1, classes.indexOf('active')); @@ -25,6 +41,34 @@ const UI = { activeEventNode.className += ' active'; }, + updateRoundsPane: (rounds) => { + const roundsDiv = document.querySelector('.rounds'); + + while (roundsDiv.hasChildNodes()) { + roundsDiv.firstChild.remove(); + } + + console.warn(rounds) + + rounds.forEach(round => { + const item = document.createElement('div'); + item.className = 'round-item'; + item.setAttribute('data-round-id', round.roundId); + + const hide = document.createElement('div'); + hide.className = 'round-hide'; + hide.innerHTML = 'hide'; + + const text = document.createElement('div'); + text.className = 'round-text'; + text.innerHTML = round.roundName; + + item.appendChild(text); + item.appendChild(hide); + roundsDiv.appendChild(item); + }); + }, + buildEventsPane: (onClick) => { const eventsList = [ { year: 1930, location: "Uruguay", icon: "uy" }, @@ -61,13 +105,13 @@ const UI = { const flag = document.createElement('div'); const flagIcon = document.createElement('div'); - item.className = UI.CLASSNAMES.ITEM; - year.className = UI.CLASSNAMES.YEAR; - location.className = UI.CLASSNAMES.LOCATION; - flag.className = UI.CLASSNAMES.FLAG; + item.className = UI.CLASSNAMES.EVENT.ITEM; + year.className = UI.CLASSNAMES.EVENT.YEAR; + location.className = UI.CLASSNAMES.EVENT.LOCATION; + flag.className = UI.CLASSNAMES.EVENT.FLAG; item.addEventListener('click', onClick); - item.setAttribute('data-event-key', evt.year); + item.setAttribute(UI.DATA.EVENT, evt.year); year.innerHTML = evt.year; location.innerHTML = evt.location; @@ -81,4 +125,105 @@ const UI = { eventsDiv.appendChild(item); }); }, + + buildSortPane: (onClick) => { + const sortList = [ + { text: 'Order by continent', value: null }, + { text: 'Order by goals scored', value: 'goals-scored' }, + { text: 'Order by country name', value: 'country-name' }, + { text: 'Order by country population', value: 'country-population' }, + ]; + + const sortDiv = document.querySelector('.sort'); + + while (sortDiv.hasChildNodes()) { + sortDiv.firstChild.remove(); + } + + sortList.forEach(sort => { + const item = document.createElement('div'); + const text = document.createElement('div'); + + item.className = UI.CLASSNAMES.SORT.ITEM; + item.addEventListener('click', onClick); + item.setAttribute(UI.DATA.SORT, sort.value); + + text.className = UI.CLASSNAMES.SORT.TEXT; + text.innerHTML = sort.text; + + item.appendChild(text); + sortDiv.appendChild(item); + }); + }, + + buildRoundsPane: (onClick) => { + //
+ //
Round Robin
+ //
Hide
+ //
+ // + //
+ //
Round of 16
+ //
Hide
+ //
+ // + //
+ //
Quarterfinals
+ //
Hide
+ //
+ // + //
+ //
Semifinals
+ //
Hide
+ //
+ // + //
+ //
Third Place
+ //
Hide
+ //
+ // + //
+ //
Final
+ //
Hide
+ //
+ + }, + + getRoundName: (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 "Preliminaries"; + case 'Round of 16': + return "Round of 16"; + case 'Quarter-finals': + case 'Quarter-finals replays': + return "Quarter Finals"; + case 'Semi-finals': + return "Semi Finals"; + case 'Third place match': + case 'Third-place match': + case 'Match for third place': + case 'Third place play-off': + case 'Third-place play-off': + return "Third Place Match"; + case 'Quarterfinals': + return "Quarterfinals"; + case 'Semifinals': + return "Semifinals"; + case 'Final': + case 'Finals': + return "Final"; + } + + console.error(`Unknown round name: ${name}`); + return name; + }, }; diff --git a/res/diagram.css b/res/diagram.css index b7a222e..ab7fd96 100644 --- a/res/diagram.css +++ b/res/diagram.css @@ -3,7 +3,8 @@ left: 200px; position: absolute; top: 0; - width: 700px; + width: 800px; + z-index: 0; } .group-tick line { diff --git a/res/events.css b/res/events.css index 33ec001..ddb26de 100644 --- a/res/events.css +++ b/res/events.css @@ -8,7 +8,7 @@ } .event-item { - background: yellow; + background: #CBFFC0; border-radius: 0 16px 16px 0; cursor: pointer; filter: grayscale(100%); diff --git a/res/rounds.css b/res/rounds.css new file mode 100644 index 0000000..71f697c --- /dev/null +++ b/res/rounds.css @@ -0,0 +1,19 @@ +.rounds { + bottom: 0; + color: #000; + height: 500px; + position: absolute; + right: 0; + text-align: right; + width: 200px; + z-index: 1; +} + +.round-item { +} + +.round-hide { +} + +.round-text { +} diff --git a/res/sort.css b/res/sort.css new file mode 100644 index 0000000..9b51453 --- /dev/null +++ b/res/sort.css @@ -0,0 +1,17 @@ +.sort { + + position: absolute; + right: 0; + text-align: right; + top: 0; + width: 200px; + z-index: 1; +} + +.sort-item { + border: 1px solid brickred; +} + +.sort-text { + +}