Tourney posters resized.

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;

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 {

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!
     </div>

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');
 

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"];

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);
     },

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 },

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}, ...]
         },
         ...    
     }