ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Continuing work on UI generation.

Browse Source
master
Ben Burlingham 9 years ago
parent 9fa006f42b
commit 16f6b87a71
7 changed files with 232 additions and 107 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 94
      index.html
  2. 37
      js/main.js
  3. 167
      js/ui.js
  4. 3
      res/diagram.css
  5. 2
      res/events.css
  6. 19
      res/rounds.css
  7. 17
      res/sort.css

94
index.html
Unescape View File

@ -38,91 +38,18 @@ body {
<link rel="stylesheet" href="res/options.css">
<link rel="stylesheet" href="res/events.css">
<link rel="stylesheet" href="res/diagram.css">
<link rel="stylesheet" href="res/sort.css">
<link rel="stylesheet" href="res/rounds.css">
</head>
<body>
<div class="visualization">
<div class="events"></div>
<div class="options">
<div class="option-item inactive">
<div class="option-text">Round Robin</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Round of 16</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Quarterfinals</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Semifinals</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Third Place</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Final</div>
<div class="option-toggle">Hide</div>
</div>
<hr class="option-divider">
<div class="option-item">
<div class="option-text">Africa</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Asia</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Australia</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">Europe</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">North America</div>
<div class="option-toggle">Hide</div>
</div>
<div class="option-item">
<div class="option-text">South America</div>
<div class="option-toggle">Hide</div>
</div>
<hr class="option-divider">
<div class="option-item">
<div class="option-text">Order By Country Name</div>
</div>
<div class="option-item">
<div class="option-text">Order By Continent Name</div>
</div>
<div class="option-item">
<div class="option-text">Order By Country Population</div>
</div>
<div class="option-item">
<div class="option-text">Order By Goals For</div>
</div>
<div class="option-item">
<div class="option-text">Order By Goals Against</div>
</div>
</div>
<div class="sort"></div>
<div class="rounds"></div>
<div class="diagram">
<svg width="700" height="700"></svg>
<svg width="800" height="700"></svg>
</div>
</div>
@ -144,8 +71,15 @@ body {
https://openfootball.github.io/questions.html
<h5>TODO</h5>
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!
</div>
</body>

37
js/main.js
Unescape View File

@ -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();

167
js/ui.js
Unescape View File

@ -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) => {
// <div class="option-item inactive">
// <div class="option-text">Round Robin</div>
// <div class="option-toggle">Hide</div>
// </div>
//
// <div class="option-item">
// <div class="option-text">Round of 16</div>
// <div class="option-toggle">Hide</div>
// </div>
//
// <div class="option-item">
// <div class="option-text">Quarterfinals</div>
// <div class="option-toggle">Hide</div>
// </div>
//
// <div class="option-item">
// <div class="option-text">Semifinals</div>
// <div class="option-toggle">Hide</div>
// </div>
//
// <div class="option-item">
// <div class="option-text">Third Place</div>
// <div class="option-toggle">Hide</div>
// </div>
//
// <div class="option-item">
// <div class="option-text">Final</div>
// <div class="option-toggle">Hide</div>
// </div>
},
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;
},
};

3
res/diagram.css
Unescape View File

@ -3,7 +3,8 @@
left: 200px;
position: absolute;
top: 0;
width: 700px;
width: 800px;
z-index: 0;
}
.group-tick line {

2
res/events.css
Unescape View File

@ -8,7 +8,7 @@
}
.event-item {
background: yellow;
background: #CBFFC0;
border-radius: 0 16px 16px 0;
cursor: pointer;
filter: grayscale(100%);

19
res/rounds.css
Unescape View File

@ -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 {
}

17
res/sort.css
Unescape View File

@ -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 {
}
Write Preview
Loading…
Cancel
Save