diff --git a/css/style.css b/css/style.css index bc086fb..ecdd14b 100644 --- a/css/style.css +++ b/css/style.css @@ -57,11 +57,19 @@ body { top: 0; } .tourney-link { + border: 1px solid #d5d5d5; display: block; - margin-bottom: 20px; } + font-size: 0; + margin-bottom: 20px; + padding: 2px 0; + text-align: center; + width: 200px; } + .tourney-link:hover { + background: #777; } .tourney-image { - width: 200px; } + height: 260px; + width: 195px; } .tourney-country { color: #777; diff --git a/css/tourney.scss b/css/tourney.scss index 9fa3018..54cc6e0 100644 --- a/css/tourney.scss +++ b/css/tourney.scss @@ -5,12 +5,22 @@ } .tourney-link { + border: 1px solid #d5d5d5; display: block; + font-size: 0; margin-bottom: 20px; + padding: 2px 0; + text-align: center; + width: 200px; + + &:hover { + background: #777; + } } .tourney-image { - width: 200px; + height: 260px; + width: 195px; } .tourney-country { diff --git a/index.html b/index.html index 8ea4843..d76efc3 100644 --- a/index.html +++ b/index.html @@ -45,12 +45,8 @@ // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME No finals in 1954 or 1962? - change initState to `foo = foo || "default"` - color scheme pane better highlight clickable poster image edit posters - events to indices not strings: 12356 or 1,2,3,5,6 - remove dependencies from Diagram tweet it! diff --git a/js/bundle.js b/js/bundle.js index 1183ba5..466986b 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -183,21 +183,10 @@ initState: function initState() { var state = main.getState(); - if (state.eventKey === undefined) { - state.eventKey = "2014"; - } - - if (state.sort === undefined) { - state.sort = null; - } - - if (state.scheme === undefined) { - state.scheme = Math.ceil(Math.random() * 4); - } - - if (state.rounds === undefined) { - state.rounds = Object.values(_ui2.default.ROUND_TYPES); - } + state.eventKey = state.eventKey || "2014"; + state.sort = state.sort || null; + state.scheme = state.scheme || Math.ceil(Math.random() * 4); + state.rounds = state.rounds || Object.values(_ui2.default.ROUND_TYPES); main.setState(state); }, @@ -437,18 +426,13 @@ var ribbon = d3.ribbon().radius(innerRadius); - // - // const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb); - // const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb); - // const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); - var len = data.tourneys[eventKey].teams.length; var color = d3.scaleOrdinal(d3.schemeCategory20); (function () { switch (parseInt(scheme)) { case 1: - color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb); + color = d3.scaleLinear().domain([0, len]).range(["#fff", "green"]).interpolate(d3.interpolateRgb); break; case 2: var colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"]; @@ -640,12 +624,12 @@ }, ROUND_TYPES: { - PRELIM: 'prelims', - ROUNDOF16: 'round-of-16', - QUARTERFINAL: 'quarterfinals', - SEMIFINAL: 'semifinals', - CONSOLATION: 'consolation', - FINAL: 'finals' + PRELIM: '1', + ROUNDOF16: '2', + QUARTERFINAL: '3', + SEMIFINAL: '4', + CONSOLATION: '5', + FINAL: '6' }, DATA: { @@ -686,6 +670,7 @@ '1930': "Uruguay", '1934': "Italy", '1938': "France", + '1950': "Brazil", '1954': "Switzerland", '1958': "Sweden", '1962': "Chile", @@ -793,7 +778,7 @@ }, buildEventsPane: function buildEventsPane(onClick) { - var eventsList = [{ year: 1930, icon: "uy" }, { year: 1934, icon: "it" }, { year: 1938, icon: "fr" }, { 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" }]; + var 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" }]; var eventsDiv = document.querySelector('.events'); @@ -824,7 +809,7 @@ }, buildSortPane: function buildSortPane(onClick) { - var sortList = [{ text: 'Continent', value: null }, { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS }, { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY }]; + var sortList = [{ text: 'Default', value: null }, { text: 'Goals Scored', value: UI.SORT_TYPES.GOALS }, { text: 'Country Name', value: UI.SORT_TYPES.COUNTRY }]; var sortDiv = document.querySelector('.sort'); diff --git a/js/diagram.js b/js/diagram.js index 34824a0..249c414 100644 --- a/js/diagram.js +++ b/js/diagram.js @@ -158,17 +158,12 @@ const Diagram = { const ribbon = d3.ribbon() .radius(innerRadius); - // - // const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb); - // const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb); - // const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); - const len = data.tourneys[eventKey].teams.length; let color = d3.scaleOrdinal(d3.schemeCategory20); switch (parseInt(scheme)) { case 1: - color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb); + color = d3.scaleLinear().domain([0, len]).range(["#fff", "green"]).interpolate(d3.interpolateRgb); break; case 2: const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; diff --git a/js/index.js b/js/index.js index d726286..472f84f 100644 --- a/js/index.js +++ b/js/index.js @@ -118,21 +118,11 @@ const main = { initState: () => { const state = main.getState(); - if (state.eventKey === undefined) { - state.eventKey = "2014"; - } - - if (state.sort === undefined) { - state.sort = null; - } + state.eventKey = state.eventKey || "2014"; + state.sort = state.sort || null; + state.scheme = state.scheme || Math.ceil(Math.random() * 4); + state.rounds = state.rounds || Object.values(UI.ROUND_TYPES); - if (state.scheme === undefined) { - state.scheme = Math.ceil(Math.random() * 4); - } - - if (state.rounds === undefined) { - state.rounds = Object.values(UI.ROUND_TYPES); - } main.setState(state); }, diff --git a/js/ui.js b/js/ui.js index 233becf..02cb1ea 100644 --- a/js/ui.js +++ b/js/ui.js @@ -41,12 +41,12 @@ const UI = { }, ROUND_TYPES: { - PRELIM: 'prelims', - ROUNDOF16: 'round-of-16', - QUARTERFINAL: 'quarterfinals', - SEMIFINAL: 'semifinals', - CONSOLATION: 'consolation', - FINAL: 'finals', + PRELIM: '1', + ROUNDOF16: '2', + QUARTERFINAL: '3', + SEMIFINAL: '4', + CONSOLATION: '5', + FINAL: '6', }, DATA: { @@ -87,6 +87,7 @@ const UI = { '1930': "Uruguay", '1934': "Italy", '1938': "France", + '1950': "Brazil", '1954': "Switzerland", '1958': "Sweden", '1962': "Chile", @@ -200,6 +201,7 @@ const UI = { { 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" }, @@ -248,7 +250,7 @@ const UI = { buildSortPane: (onClick) => { const sortList = [ - { text: 'Continent', value: null }, + { 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 }, diff --git a/readme.md b/readme.md index 53ff0d5..ff05df4 100644 --- a/readme.md +++ b/readme.md @@ -4,25 +4,17 @@ A single JSON file is downloaded to provide the data set. Its structure is as f ``` { - 'teams': { - teamId: teamCountryId, - ... - }, 'countries': { countryId: { countryContinentId, countryName } ... }, - 'continents': { - continentId: continentName, - ... - }, 'rounds': { roundId: roundName, }, 'tourneys': { - eventName: { + YYYY: { 'games': [{ playAt, roundId, team1Id, team2Id, score1, score1et, score1p, score2, score2et, score2p }, ...], - 'teams': [teamId, ...] + 'teams': [{ countryId, goalsAgainst, goalsFor, population, teamId}, ...] }, ... } diff --git a/res/1930.jpg b/res/1930.jpg index 554c7ec..a0acdcf 100644 Binary files a/res/1930.jpg and b/res/1930.jpg differ diff --git a/res/1934.jpg b/res/1934.jpg index a0b7329..83a4624 100644 Binary files a/res/1934.jpg and b/res/1934.jpg differ diff --git a/res/1938.jpg b/res/1938.jpg index 10da875..3d85dcc 100644 Binary files a/res/1938.jpg and b/res/1938.jpg differ diff --git a/res/1950.jpg b/res/1950.jpg index 9e8605c..6b4f4c1 100644 Binary files a/res/1950.jpg and b/res/1950.jpg differ diff --git a/res/1954.jpg b/res/1954.jpg index 3c8ef92..761d9fe 100644 Binary files a/res/1954.jpg and b/res/1954.jpg differ diff --git a/res/1958.jpg b/res/1958.jpg index fe3ca91..0b12f46 100644 Binary files a/res/1958.jpg and b/res/1958.jpg differ diff --git a/res/1962.jpg b/res/1962.jpg index 0a33f1c..77becbd 100644 Binary files a/res/1962.jpg and b/res/1962.jpg differ diff --git a/res/1966.jpg b/res/1966.jpg index 67d1fe9..a473e3b 100644 Binary files a/res/1966.jpg and b/res/1966.jpg differ diff --git a/res/1970.jpg b/res/1970.jpg index 3abfb20..c26d8c2 100644 Binary files a/res/1970.jpg and b/res/1970.jpg differ diff --git a/res/1974.jpg b/res/1974.jpg index 62fe9a6..ebe281a 100644 Binary files a/res/1974.jpg and b/res/1974.jpg differ diff --git a/res/1978.jpg b/res/1978.jpg index 466750c..eeedd9d 100644 Binary files a/res/1978.jpg and b/res/1978.jpg differ diff --git a/res/1982.jpg b/res/1982.jpg index 3a11b39..94e16b6 100644 Binary files a/res/1982.jpg and b/res/1982.jpg differ diff --git a/res/1986.jpg b/res/1986.jpg index 6cd833b..706a450 100644 Binary files a/res/1986.jpg and b/res/1986.jpg differ diff --git a/res/1990.jpg b/res/1990.jpg index 5a16f63..f4cdaa7 100644 Binary files a/res/1990.jpg and b/res/1990.jpg differ diff --git a/res/1994.jpg b/res/1994.jpg index 28e4d92..5615dff 100644 Binary files a/res/1994.jpg and b/res/1994.jpg differ diff --git a/res/1998.jpg b/res/1998.jpg index b3ba4cf..5f6261e 100644 Binary files a/res/1998.jpg and b/res/1998.jpg differ diff --git a/res/2002.jpg b/res/2002.jpg index 73a2940..f497291 100644 Binary files a/res/2002.jpg and b/res/2002.jpg differ diff --git a/res/2006.jpg b/res/2006.jpg index 286592e..6913137 100644 Binary files a/res/2006.jpg and b/res/2006.jpg differ diff --git a/res/2010.jpg b/res/2010.jpg index 08df66a..b415138 100644 Binary files a/res/2010.jpg and b/res/2010.jpg differ diff --git a/res/2014.jpg b/res/2014.jpg index 7e3959f..2f82b9d 100644 Binary files a/res/2014.jpg and b/res/2014.jpg differ