diff --git a/css/rounds.scss b/css/rounds.scss index 44fb0cb..911bd30 100644 --- a/css/rounds.scss +++ b/css/rounds.scss @@ -18,6 +18,7 @@ $iconW: $roundW - $tinyW - $textW - (2 * $iconM) - 2; cursor: pointer; font-size: 0; line-height: $roundH; + margin-top: 5px; opacity: 0.2; } diff --git a/css/schemes.scss b/css/schemes.scss new file mode 100644 index 0000000..c90ab3c --- /dev/null +++ b/css/schemes.scss @@ -0,0 +1,32 @@ +$schemeW: 32px; + +.schemes { + font-size: 0; + height: 32px; + position: absolute; + right: 0; + top: 160px; + width: 200px; +} + +.scheme { + background-image: url('../res/scheme.svg'); + background-repeat: no-repeat; + border: 4px solid #fff; + display: inline-block; + height: 40px; + outline: 1px solid #d5d5d5; + width: 40px; +} + +.scheme1, +.scheme2, +.scheme3 { + margin-right: 13px; +} + +@for $i from 1 through 4 { + .scheme#{$i} { + background-position: -#{($i - 1) * $schemeW} 0; + } +} diff --git a/css/style.css b/css/style.css index 62a015e..6dedcd5 100644 --- a/css/style.css +++ b/css/style.css @@ -133,6 +133,39 @@ body { margin: 11px 5px; vertical-align: top; width: 18px; } +.schemes { + font-size: 0; + height: 32px; + position: absolute; + right: 0; + top: 160px; + width: 200px; } + +.scheme { + background-image: url(../res/scheme.svg); + background-repeat: no-repeat; + border: 4px solid #fff; + display: inline-block; + height: 40px; + outline: 1px solid #d5d5d5; + width: 40px; } + +.scheme1, +.scheme2, +.scheme3 { + margin-right: 13px; } + +.scheme1 { + background-position: -0px 0; } + +.scheme2 { + background-position: -32px 0; } + +.scheme3 { + background-position: -64px 0; } + +.scheme4 { + background-position: -96px 0; } .rounds { bottom: 0; position: absolute; @@ -145,6 +178,7 @@ body { cursor: pointer; font-size: 0; line-height: 40px; + margin-top: 5px; opacity: 0.2; } .round-item.active { diff --git a/index.html b/index.html index a0dee61..a79271b 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@
+
@@ -43,7 +44,7 @@ update ribbon hover // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME - + change initState to `foo = foo || "default"` color scheme pane toggle sort icon toggle round icon diff --git a/js/bundle.js b/js/bundle.js index c4b6e9c..0730c3f 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -71,6 +71,7 @@ __webpack_require__(9); __webpack_require__(10); __webpack_require__(11); + __webpack_require__(12); var main = { changeEvent: function changeEvent(e) { @@ -85,6 +86,12 @@ main.updateUI(); }, + changeScheme: function changeScheme(e) { + var target = _ui2.default.findRoot(e.target); + main.setState({ scheme: target.getAttribute(_ui2.default.DATA.SCHEME) }); + main.updateUI(); + }, + changeRound: function changeRound(e) { var target = _ui2.default.findRoot(e.target); var r = target.getAttribute(_ui2.default.DATA.ROUND); @@ -122,6 +129,7 @@ _ui2.default.buildTourneyPane(); _ui2.default.buildEventsPane(main.changeEvent); _ui2.default.buildSortPane(main.changeSort); + _ui2.default.buildSchemePane(main.changeScheme); _ui2.default.buildRoundsPane(main.changeRound); }, @@ -135,6 +143,7 @@ _ui2.default.updateTourneyPane(state.eventKey); _ui2.default.updateEventsPane(state.eventKey); _ui2.default.updateSortPane(state.sort); + _ui2.default.updateSchemePane(state.scheme); _ui2.default.updateRoundsPane(state.rounds.split(','), main.json.rounds); }, @@ -182,6 +191,10 @@ state.sort = null; } + if (state.scheme === undefined) { + state.scheme = null; + } + if (state.rounds === undefined) { state.rounds = Object.values(_ui2.default.ROUND_TYPES); } @@ -195,6 +208,7 @@ state.eventKey = next.eventKey || state.eventKey; state.rounds = next.rounds || state.rounds; + state.scheme = next.scheme || state.scheme; state.sort = next.sort || state.sort || null; var params = []; @@ -423,17 +437,16 @@ var ribbon = d3.ribbon().radius(innerRadius); - // const color = d3.scaleOrdinal(d3.schemeCategory20); - // const color = d3.scaleOrdinal(d3.schemeCategory10); - - var len = data.tourneys[eventKey].teams.length; + // 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); - var color = d3.scaleLinear().domain([0, len]).range(["gainsboro", "darkgreen"]).interpolate(d3.interpolateRgb); + // const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); - // const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"]; - // const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; + // 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 g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(sortedChords); @@ -581,6 +594,13 @@ FLAG: 'event-flag' }, + SCHEME: { + SCHEME1: 'scheme scheme1', + SCHEME2: 'scheme scheme2', + SCHEME3: 'scheme scheme3', + SCHEME4: 'scheme scheme4' + }, + SORT: { ICON: 'sort-icon', ITEM: 'sort-item', @@ -615,6 +635,7 @@ ROOT: 'data-root', EVENT: 'data-event-key', ROUND: 'data-round-key', + SCHEME: 'data-round-scheme', SORT: 'data-sort-key' }, @@ -704,6 +725,10 @@ }); }, + updateSchemePane: function updateSchemePane() { + var schemePane = document.querySelector('.schemes'); + }, + updateSortPane: function updateSortPane(sort) { var sortItems = document.querySelectorAll('.sort-item'); UI.clearActive(sortItems); @@ -807,6 +832,26 @@ }); }, + buildSchemePane: function buildSchemePane(onClick) { + var schemePane = document.querySelector('.schemes'); + + var scheme1 = document.createElement('div'); + 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; + scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2; + scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3; + scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4; + + schemePane.appendChild(scheme1); + schemePane.appendChild(scheme2); + schemePane.appendChild(scheme3); + schemePane.appendChild(scheme4); + }, + buildRoundsPane: function buildRoundsPane(onClick) { var roundsList = [{ text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM }, { text: 'Round of 16', value: UI.ROUND_TYPES.ROUNDOF16 }, { text: 'Quarterfinals', value: UI.ROUND_TYPES.QUARTERFINAL }, { text: 'Semifinals', value: UI.ROUND_TYPES.SEMIFINAL }, { text: 'Consolation', value: UI.ROUND_TYPES.CONSOLATION }, { text: 'Final', value: UI.ROUND_TYPES.FINAL }]; @@ -925,5 +970,11 @@ // removed by extract-text-webpack-plugin +/***/ }, +/* 12 */ +/***/ function(module, exports) { + + // removed by extract-text-webpack-plugin + /***/ } /******/ ]); \ No newline at end of file diff --git a/js/diagram.js b/js/diagram.js index 6d415d4..4035fa1 100644 --- a/js/diagram.js +++ b/js/diagram.js @@ -158,17 +158,16 @@ const Diagram = { const ribbon = d3.ribbon() .radius(innerRadius); - // const color = d3.scaleOrdinal(d3.schemeCategory20); - // const color = d3.scaleOrdinal(d3.schemeCategory10); - - const len = data.tourneys[eventKey].teams.length; + // 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(["gainsboro", "darkgreen"]).interpolate(d3.interpolateRgb); + // const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb); - // const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"]; - // const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]; + // 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 g = svg.append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") diff --git a/js/index.js b/js/index.js index d30e0fb..00b3379 100644 --- a/js/index.js +++ b/js/index.js @@ -9,6 +9,7 @@ require('../css/events.scss'); require('../css/tourney.scss'); require('../css/diagram.scss'); require('../css/sort.scss'); +require('../css/schemes.scss'); require('../css/rounds.scss'); const main = { @@ -24,6 +25,12 @@ const main = { main.updateUI(); }, + changeScheme: (e) => { + const target = UI.findRoot(e.target); + main.setState({ scheme: target.getAttribute(UI.DATA.SCHEME) }); + main.updateUI(); + }, + changeRound: (e) => { const target = UI.findRoot(e.target); const r = target.getAttribute(UI.DATA.ROUND) @@ -61,6 +68,7 @@ const main = { UI.buildTourneyPane(); UI.buildEventsPane(main.changeEvent); UI.buildSortPane(main.changeSort); + UI.buildSchemePane(main.changeScheme); UI.buildRoundsPane(main.changeRound); }, @@ -74,6 +82,7 @@ const main = { UI.updateTourneyPane(state.eventKey); UI.updateEventsPane(state.eventKey); UI.updateSortPane(state.sort); + UI.updateSchemePane(state.scheme); UI.updateRoundsPane(state.rounds.split(','), main.json.rounds); }, @@ -117,6 +126,10 @@ const main = { state.sort = null; } + if (state.scheme === undefined) { + state.scheme = null; + } + if (state.rounds === undefined) { state.rounds = Object.values(UI.ROUND_TYPES); } @@ -130,6 +143,7 @@ const main = { state.eventKey = next.eventKey || state.eventKey; state.rounds = next.rounds || state.rounds; + state.scheme = next.scheme || state.scheme; state.sort = next.sort || state.sort || null; const params = []; diff --git a/js/ui.js b/js/ui.js index ec9b0d8..41af7e3 100644 --- a/js/ui.js +++ b/js/ui.js @@ -12,6 +12,13 @@ const UI = { FLAG: 'event-flag', }, + SCHEME: { + SCHEME1: 'scheme scheme1', + SCHEME2: 'scheme scheme2', + SCHEME3: 'scheme scheme3', + SCHEME4: 'scheme scheme4', + }, + SORT: { ICON: 'sort-icon', ITEM: 'sort-item', @@ -46,6 +53,7 @@ const UI = { ROOT: 'data-root', EVENT: 'data-event-key', ROUND: 'data-round-key', + SCHEME: 'data-round-scheme', SORT: 'data-sort-key', }, @@ -137,6 +145,12 @@ const UI = { }); }, + updateSchemePane: () => { + const schemePane = document.querySelector('.schemes'); + + + }, + updateSortPane: (sort) => { const sortItems = document.querySelectorAll('.sort-item'); UI.clearActive(sortItems); @@ -265,6 +279,26 @@ const UI = { }); }, + buildSchemePane: (onClick) => { + const schemePane = document.querySelector('.schemes'); + + const scheme1 = document.createElement('div'); + 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; + scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2; + scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3; + scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4; + + schemePane.appendChild(scheme1); + schemePane.appendChild(scheme2); + schemePane.appendChild(scheme3); + schemePane.appendChild(scheme4); + }, + buildRoundsPane: (onClick) => { const roundsList = [ { text: 'Preliminaries', value: UI.ROUND_TYPES.PRELIM }, diff --git a/package.json b/package.json index e3dd705..022c74e 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "extend": "^3.0.0", "extract-text-webpack-plugin": "^1.0.1", "extsprintf": "^1.0.2", + "file-loader": "^0.9.0", "forever-agent": "^0.6.1", "form-data": "^2.0.0", "generate-function": "^2.0.0", diff --git a/res/scheme.svg b/res/scheme.svg new file mode 100644 index 0000000..a6a9b94 --- /dev/null +++ b/res/scheme.svg @@ -0,0 +1,249 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webpack.config.js b/webpack.config.js index 9a13e39..623c486 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -19,12 +19,8 @@ module.exports = { loader: ExtractTextPlugin.extract('css!sass?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'), }, { - test: /\.png$/, - loader: "file?name=[path][name].[ext]" - }, - { - test : /\.woff2?$/, - loader : 'file-loader' + test : /\.svg$/, + loader : 'file-loader?name=../[path][name].[ext]' } ] },