diff --git a/css/schemes.scss b/css/schemes.scss index c90ab3c..c72aeb5 100644 --- a/css/schemes.scss +++ b/css/schemes.scss @@ -9,14 +9,28 @@ $schemeW: 32px; width: 200px; } -.scheme { +.scheme-item { background-image: url('../res/scheme.svg'); background-repeat: no-repeat; border: 4px solid #fff; + cursor: pointer; display: inline-block; height: 40px; + opacity: 0.2; outline: 1px solid #d5d5d5; width: 40px; + + &:hover { + opacity: 0.6; + } + + &.active { + opacity: 1; + + .sort-icon { + visibility: visible; + } + } } .scheme1, diff --git a/css/style.css b/css/style.css index 3627c99..bc086fb 100644 --- a/css/style.css +++ b/css/style.css @@ -144,14 +144,22 @@ body { top: 160px; width: 200px; } -.scheme { +.scheme-item { background-image: url(../res/scheme.svg); background-repeat: no-repeat; border: 4px solid #fff; + cursor: pointer; display: inline-block; height: 40px; + opacity: 0.2; outline: 1px solid #d5d5d5; width: 40px; } + .scheme-item:hover { + opacity: 0.6; } + .scheme-item.active { + opacity: 1; } + .scheme-item.active .sort-icon { + visibility: visible; } .scheme1, .scheme2, diff --git a/index.html b/index.html index 27d6ad4..8ea4843 100644 --- a/index.html +++ b/index.html @@ -43,16 +43,13 @@ 1974 two germanies? update ribbon hover // 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 + No finals in 1954 or 1962? change initState to `foo = foo || "default"` color scheme pane - toggle sort icon - toggle round icon + better highlight clickable poster image edit posters - fix SVG icons to be smaller and inline - - better colors + 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 e21f270..1183ba5 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -138,7 +138,7 @@ var matrix = _matrices2.default.buildMatrix(main.json, state.eventKey); _diagram2.default.clear(); - _diagram2.default.build(main.json, state.eventKey, state.sort, _ui2.default.SORT_TYPES, matrix); + _diagram2.default.build(main.json, state.eventKey, state.sort, state.scheme, _ui2.default.SORT_TYPES, matrix); _ui2.default.updateTourneyPane(state.eventKey); _ui2.default.updateEventsPane(state.eventKey); @@ -192,7 +192,7 @@ } if (state.scheme === undefined) { - state.scheme = null; + state.scheme = Math.ceil(Math.random() * 4); } if (state.rounds === undefined) { @@ -410,7 +410,7 @@ return team.ga; }, - build: function build(data, eventKey, sort, SORT_TYPES, matrix) { + build: function build(data, eventKey, sort, scheme, SORT_TYPES, matrix) { var svg = d3.select("svg"), width = svg.attr("width"), height = svg.attr("height"), @@ -437,16 +437,33 @@ var ribbon = d3.ribbon().radius(innerRadius); - // const len = data.tourneys[eventKey].teams.length; + // // 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 colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; - var colors = ["#f70000", "#fbad20", "#f5eb13", "#b8d433", "#6bc9c6", "#058bc5", "#34469d", "#7e4d9f", "#c63d96"]; - // const color = i => colors[i % colors.length]; - // const color = d3.scaleOrdinal(d3.schemeCategory20); - var color = d3.scaleOrdinal(d3.schemeCategory10); + 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); + break; + case 2: + var colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"]; + color = function color(i) { + return colors[i % colors.length]; + }; + break; + case 3: + color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); + break; + case 4: + color = d3.scaleOrdinal(d3.schemeCategory10); + break; + } + })(); var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(sortedChords); @@ -595,10 +612,10 @@ }, SCHEME: { - SCHEME1: 'scheme scheme1', - SCHEME2: 'scheme scheme2', - SCHEME3: 'scheme scheme3', - SCHEME4: 'scheme scheme4' + SCHEME1: 'scheme-item scheme1', + SCHEME2: 'scheme-item scheme2', + SCHEME3: 'scheme-item scheme3', + SCHEME4: 'scheme-item scheme4' }, SORT: { @@ -655,8 +672,12 @@ clearActive: function clearActive(nodes) { nodes.forEach(function (node) { var classes = node.className.split(' '); - classes.splice(1, classes.indexOf('active')); - node.className = classes.join(' '); + var i = classes.indexOf('active'); + + if (i !== -1) { + classes.splice(i, 1); + node.className = classes.join(' '); + } }); }, @@ -719,15 +740,21 @@ var ribbons = document.querySelectorAll('.ribbon'); ribbons.forEach(function (ribbon) { var name = allRounds[ribbon.getAttribute("data-round-id")]; - console.warn(name); var type = UI.getRoundType(name); roundsToShow.indexOf(type) === -1 ? ribbon.style.display = 'none' : ribbon.style.display = 'inline'; }); }, - updateSchemePane: function updateSchemePane() { - var schemePane = document.querySelector('.schemes'); + updateSchemePane: function updateSchemePane(scheme) { + var schemeItems = document.querySelectorAll('.scheme-item'); + UI.clearActive(schemeItems); + + schemeItems.forEach(function (node) { + if (node.getAttribute(UI.DATA.SCHEME) === scheme) { + node.className += ' active'; + } + }); }, updateSortPane: function updateSortPane(sort) { @@ -840,12 +867,26 @@ var scheme2 = document.createElement('div'); var scheme3 = document.createElement('div'); var scheme4 = document.createElement('div'); - var scheme5 = 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); diff --git a/js/diagram.js b/js/diagram.js index 4035fa1..34824a0 100644 --- a/js/diagram.js +++ b/js/diagram.js @@ -120,7 +120,7 @@ const Diagram = { return team.ga; }, - build: (data, eventKey, sort, SORT_TYPES, matrix) => { + build: (data, eventKey, sort, scheme, SORT_TYPES, matrix) => { const svg = d3.select("svg"), width = (svg.attr("width")), height = (svg.attr("height")), @@ -158,16 +158,29 @@ const Diagram = { const ribbon = d3.ribbon() .radius(innerRadius); - // const len = data.tourneys[eventKey].teams.length; + // // 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 colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; - const colors = ["#f70000","#fbad20","#f5eb13","#b8d433","#6bc9c6","#058bc5","#34469d","#7e4d9f","#c63d96"]; - // const color = i => colors[i % colors.length]; - // const color = d3.scaleOrdinal(d3.schemeCategory20); - const color = d3.scaleOrdinal(d3.schemeCategory10); + 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); + break; + case 2: + const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; + color = i => colors[i % colors.length]; + break; + case 3: + color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); + break; + case 4: + color = d3.scaleOrdinal(d3.schemeCategory10); + break; + } const g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") diff --git a/js/index.js b/js/index.js index 00b3379..d726286 100644 --- a/js/index.js +++ b/js/index.js @@ -77,7 +77,7 @@ const main = { const matrix = Matrices.buildMatrix(main.json, state.eventKey); Diagram.clear(); - Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix); + Diagram.build(main.json, state.eventKey, state.sort, state.scheme, UI.SORT_TYPES, matrix); UI.updateTourneyPane(state.eventKey); UI.updateEventsPane(state.eventKey); @@ -127,7 +127,7 @@ const main = { } if (state.scheme === undefined) { - state.scheme = null; + state.scheme = Math.ceil(Math.random() * 4); } if (state.rounds === undefined) { diff --git a/js/ui.js b/js/ui.js index d77c043..233becf 100644 --- a/js/ui.js +++ b/js/ui.js @@ -13,10 +13,10 @@ const UI = { }, SCHEME: { - SCHEME1: 'scheme scheme1', - SCHEME2: 'scheme scheme2', - SCHEME3: 'scheme scheme3', - SCHEME4: 'scheme scheme4', + SCHEME1: 'scheme-item scheme1', + SCHEME2: 'scheme-item scheme2', + SCHEME3: 'scheme-item scheme3', + SCHEME4: 'scheme-item scheme4', }, SORT: { @@ -73,8 +73,12 @@ const UI = { clearActive: (nodes) => { nodes.forEach(node => { const classes = node.className.split(' '); - classes.splice(1, classes.indexOf('active')); - node.className = classes.join(' '); + const i = classes.indexOf('active'); + + if (i !== -1) { + classes.splice(i, 1); + node.className = classes.join(' '); + } }); }, @@ -137,7 +141,6 @@ const UI = { const ribbons = document.querySelectorAll('.ribbon'); ribbons.forEach(ribbon => { const name = allRounds[ribbon.getAttribute("data-round-id")]; - console.warn(name) const type = UI.getRoundType(name); roundsToShow.indexOf(type) === -1 @@ -146,10 +149,15 @@ const UI = { }); }, - updateSchemePane: () => { - const schemePane = document.querySelector('.schemes'); - + 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) => { @@ -287,12 +295,26 @@ const UI = { const scheme2 = document.createElement('div'); const scheme3 = document.createElement('div'); const scheme4 = document.createElement('div'); - const scheme5 = 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);