From 0226757f81962e96599a51945d9c8cec5531463e Mon Sep 17 00:00:00 2001 From: Graham McGregor Date: Sat, 7 Oct 2017 16:03:18 -0400 Subject: [PATCH] Upgrade prettier and format code --- .../services/pitch_statistic_service.js | 24 ++++++++-- .../services/rhythm_statistic_service.js | 14 ++++-- app/scripts/views/animated_number.js | 5 +- app/scripts/views/beat_visualization.js | 22 ++++----- app/scripts/views/claviature_view.js | 4 +- app/scripts/views/game_button.js | 20 +++----- app/scripts/views/level_view.js | 4 +- app/scripts/views/metronome_view.js | 4 +- app/scripts/views/pitch_reading_view.js | 22 ++++----- app/scripts/views/pitch_settings_view.js | 40 ++++++++-------- app/scripts/views/rhythm_reading_view.js | 28 +++++------ app/scripts/views/rhythm_statistic_view.js | 8 ++-- app/scripts/views/setting_line.js | 4 +- app/scripts/views/stave_renderer.js | 10 +++- app/styles/chartist_modifications.less | 6 ++- app/styles/checkbox.css | 22 +++++---- app/styles/claviature.less | 29 ++++++------ app/styles/index.less | 46 ++++++++++--------- app/styles/star_animation.less | 16 +++++-- package.json | 4 +- webpack.config.js | 5 +- 21 files changed, 183 insertions(+), 154 deletions(-) diff --git a/app/scripts/services/pitch_statistic_service.js b/app/scripts/services/pitch_statistic_service.js index f9ac113..24dc694 100644 --- a/app/scripts/services/pitch_statistic_service.js +++ b/app/scripts/services/pitch_statistic_service.js @@ -28,7 +28,9 @@ class PitchStatisticService { this.stats = localStorage.getItem(localStoragePitchStatsKey); if (this.stats) { - this.stats = JSON.parse(this.stats).map(this.transformDate).map(StatEvolver.evolveToLatestSchema); + this.stats = JSON.parse(this.stats) + .map(this.transformDate) + .map(StatEvolver.evolveToLatestSchema); } else { this.stats = []; } @@ -45,7 +47,9 @@ class PitchStatisticService { } getSuccessCount() { - return _(this.stats).filter(el => el.success).value().length; + return _(this.stats) + .filter(el => el.success) + .value().length; } rateEvent(event) { @@ -67,7 +71,10 @@ class PitchStatisticService { } getLastTimes(n = 10) { - return this.stats.filter(el => el.success).map(el => el.time).slice(-n); + return this.stats + .filter(el => el.success) + .map(el => el.time) + .slice(-n); } computeAverage(array) { @@ -83,11 +90,18 @@ class PitchStatisticService { } getTotalAmountOfChords() { - return _(this.stats).filter(el => el.success).map(el => el.keys).size(); + return _(this.stats) + .filter(el => el.success) + .map(el => el.keys) + .size(); } getTotalAmountOfKeys() { - return _(this.stats).filter(el => el.success).map(el => el.keys).flatten().size(); + return _(this.stats) + .filter(el => el.success) + .map(el => el.keys) + .flatten() + .size(); } getSuccessRate() { diff --git a/app/scripts/services/rhythm_statistic_service.js b/app/scripts/services/rhythm_statistic_service.js index bdf829b..f798f63 100644 --- a/app/scripts/services/rhythm_statistic_service.js +++ b/app/scripts/services/rhythm_statistic_service.js @@ -64,7 +64,9 @@ class RhythmStatisticService { } getSuccessCount() { - return _(this.stats).filter(el => el.success).value().length; + return _(this.stats) + .filter(el => el.success) + .value().length; } getLastScores(n) { @@ -72,7 +74,10 @@ class RhythmStatisticService { } getLastTimes(n = 10) { - return this.stats.filter(el => el.success).map(el => el.time).slice(-n); + return this.stats + .filter(el => el.success) + .map(el => el.time) + .slice(-n); } computeAverage(array) { @@ -88,7 +93,10 @@ class RhythmStatisticService { } getTotalAmountOfBeats() { - return _(this.stats).map(el => el.durations).flatten().size(); + return _(this.stats) + .map(el => el.durations) + .flatten() + .size(); } getTotalRhythmTime() { diff --git a/app/scripts/views/animated_number.js b/app/scripts/views/animated_number.js index 03269b6..6c7cf22 100644 --- a/app/scripts/views/animated_number.js +++ b/app/scripts/views/animated_number.js @@ -12,10 +12,7 @@ export default class AnimatedNumber extends Component { const number = this.props.number; return ( - {value => - - {formatter ? formatter(value.x) : Math.round(value.x)} - } + {value => {formatter ? formatter(value.x) : Math.round(value.x)}} ); } diff --git a/app/scripts/views/beat_visualization.js b/app/scripts/views/beat_visualization.js index 03bdfa3..252181b 100644 --- a/app/scripts/views/beat_visualization.js +++ b/app/scripts/views/beat_visualization.js @@ -27,11 +27,11 @@ export default class BeatVisualization extends Component { const ticks = necessaryBeatNames.slice(tickIndex, tickIndex + tickStepCount); return (
- {ticks.map((beatName, index) => + {ticks.map((beatName, index) => (
{beatName}
- )} + ))}
); } @@ -53,11 +53,11 @@ export default class BeatVisualization extends Component { currentX = x + width; return [ - marginLeft > 0 - ?
- {beatNamesRest} -
- : null, + marginLeft > 0 ? ( +
+ {beatNamesRest} +
+ ) : null,
{beatNames}
@@ -99,12 +99,8 @@ export default class BeatVisualization extends Component { // uniqueId avoids that different beat bars are animated into each other return (
-
- {expectedBeats} -
-
- {actualBeats} -
+
{expectedBeats}
+
{actualBeats}
); } diff --git a/app/scripts/views/claviature_view.js b/app/scripts/views/claviature_view.js index 16eb8c7..db928c6 100644 --- a/app/scripts/views/claviature_view.js +++ b/app/scripts/views/claviature_view.js @@ -111,9 +111,7 @@ export default class ClaviatureView extends Component { ].map(args => this.renderKey.apply(this, args)); return (
-
    - {keys} -
+
    {keys}
); } diff --git a/app/scripts/views/game_button.js b/app/scripts/views/game_button.js index bf69246..6bd5b67 100644 --- a/app/scripts/views/game_button.js +++ b/app/scripts/views/game_button.js @@ -39,22 +39,16 @@ export default class GameButton extends Component { } render() { - const subtext = this.props.shortcutLetter - ?
- - Or press ‘{this.props.shortcutLetter}’ - -
- : null; + const subtext = this.props.shortcutLetter ? ( +
+ Or press ‘{this.props.shortcutLetter}’ +
+ ) : null; return ( ); } diff --git a/app/scripts/views/level_view.js b/app/scripts/views/level_view.js index 7dd7555..81d4773 100644 --- a/app/scripts/views/level_view.js +++ b/app/scripts/views/level_view.js @@ -65,9 +65,7 @@ export default class LevelView extends Component { return (
{content} -
- Current level: {levelIndex + 2} -
+
Current level: {levelIndex + 2}
); } diff --git a/app/scripts/views/metronome_view.js b/app/scripts/views/metronome_view.js index aa1c818..cd242d0 100644 --- a/app/scripts/views/metronome_view.js +++ b/app/scripts/views/metronome_view.js @@ -65,9 +65,7 @@ export default class MetronomeView extends Component { opacityOut: (this.state.currentMetronomeBeat + 1) % 4 === 0 })} > -

- {this.state.currentMetronomeBeat + 1} -

+

{this.state.currentMetronomeBeat + 1}

); } diff --git a/app/scripts/views/pitch_reading_view.js b/app/scripts/views/pitch_reading_view.js index 5ba0db2..0cee583 100644 --- a/app/scripts/views/pitch_reading_view.js +++ b/app/scripts/views/pitch_reading_view.js @@ -141,15 +141,15 @@ export default class PitchReadingView extends Component { const isMidiAvailable = this.props.settings.midi.inputs.get().length > 0; const noErrors = this.state.errorMessage !== null; const miniClaviature = - isMidiAvailable && noErrors - ? null - : ; + isMidiAvailable && noErrors ? null : ( + + ); const startStopButton = ( -

- {this.state.errorMessage} -

+

{this.state.errorMessage}

diff --git a/app/scripts/views/pitch_settings_view.js b/app/scripts/views/pitch_settings_view.js index f8e809b..1161346 100644 --- a/app/scripts/views/pitch_settings_view.js +++ b/app/scripts/views/pitch_settings_view.js @@ -50,26 +50,26 @@ export default class PitchSettingsView extends Component { const midiSettings = this.props.settings.midi; const midiInputs = midiSettings.inputs.get(); const isMidiAvailable = midiInputs.length > 0; - const deviceSelector = !isMidiAvailable - ? null - : - - ; + const deviceSelector = !isMidiAvailable ? null : ( + + + + ); const useAutomaticDifficulty = this.props.settings.useAutomaticDifficulty; diff --git a/app/scripts/views/rhythm_reading_view.js b/app/scripts/views/rhythm_reading_view.js index 1bf9b0b..d3d8a0a 100644 --- a/app/scripts/views/rhythm_reading_view.js +++ b/app/scripts/views/rhythm_reading_view.js @@ -262,17 +262,19 @@ export default class RhythmReadingView extends Component { ); const buttons = - this.state.phase !== Phases.feedback - ? - : this.state.result.success - ?
- - -
- :
- - -
; + this.state.phase !== Phases.feedback ? ( + + ) : this.state.result.success ? ( +
+ + +
+ ) : ( +
+ + +
+ ); return (
@@ -296,9 +298,7 @@ export default class RhythmReadingView extends Component {
-
- {buttons} -
+
{buttons}
diff --git a/app/scripts/views/rhythm_statistic_view.js b/app/scripts/views/rhythm_statistic_view.js index 23ce513..1525224 100644 --- a/app/scripts/views/rhythm_statistic_view.js +++ b/app/scripts/views/rhythm_statistic_view.js @@ -24,19 +24,19 @@ export default class RhythmStatisticView extends Component { unit: "y" }, { - amount: Math.floor(seconds % 31536000 / 86400), + amount: Math.floor((seconds % 31536000) / 86400), unit: "d" }, { - amount: Math.floor(seconds % 31536000 % 86400 / 3600), + amount: Math.floor(((seconds % 31536000) % 86400) / 3600), unit: "h" }, { - amount: Math.floor(seconds % 31536000 % 86400 % 3600 / 60), + amount: Math.floor((((seconds % 31536000) % 86400) % 3600) / 60), unit: "m" }, { - amount: seconds % 31536000 % 86400 % 3600 % 60, + amount: (((seconds % 31536000) % 86400) % 3600) % 60, unit: "s" } ] diff --git a/app/scripts/views/setting_line.js b/app/scripts/views/setting_line.js index f6545e6..52013af 100644 --- a/app/scripts/views/setting_line.js +++ b/app/scripts/views/setting_line.js @@ -26,9 +26,7 @@ export default class SettingLine extends Component {
{this.props.label}
-
- {this.props.children} -
+
{this.props.children}
); } diff --git a/app/scripts/views/stave_renderer.js b/app/scripts/views/stave_renderer.js index 0d81318..027817b 100644 --- a/app/scripts/views/stave_renderer.js +++ b/app/scripts/views/stave_renderer.js @@ -85,10 +85,16 @@ class StaveRenderer extends PureComponent { this.setCanvasExtent(canvas, width, height, ratio); const rightHandStave = new Vex.Flow.Stave(10, 0, staveWidth); - rightHandStave.addClef("treble").setKeySignature(this.props.keySignature).setContext(ctx); + rightHandStave + .addClef("treble") + .setKeySignature(this.props.keySignature) + .setContext(ctx); const leftHandStave = new Vex.Flow.Stave(10, 80, staveWidth); - leftHandStave.addClef("bass").setKeySignature(this.props.keySignature).setContext(ctx); + leftHandStave + .addClef("bass") + .setKeySignature(this.props.keySignature) + .setContext(ctx); this.colorizeKeys(); diff --git a/app/styles/chartist_modifications.less b/app/styles/chartist_modifications.less index c35d793..51663e9 100644 --- a/app/styles/chartist_modifications.less +++ b/app/styles/chartist_modifications.less @@ -1,6 +1,9 @@ /* override chartist color */ -.ct-chart .ct-series.ct-series-a .ct-bar, .ct-chart .ct-series.ct-series-a .ct-line, .ct-chart .ct-series.ct-series-a .ct-point, .ct-chart .ct-series.ct-series-a .ct-slice.ct-donut { +.ct-chart .ct-series.ct-series-a .ct-bar, +.ct-chart .ct-series.ct-series-a .ct-line, +.ct-chart .ct-series.ct-series-a .ct-point, +.ct-chart .ct-series.ct-series-a .ct-slice.ct-donut { stroke: #333 !important; } @@ -21,7 +24,6 @@ stroke-width: 6px; } - .graph-stats .ct-slice-donut { stroke: #449d44; } diff --git a/app/styles/checkbox.css b/app/styles/checkbox.css index 8414f78..6a85b53 100644 --- a/app/styles/checkbox.css +++ b/app/styles/checkbox.css @@ -1,4 +1,4 @@ -input[type=checkbox] { +input[type="checkbox"] { visibility: hidden; } @@ -11,23 +11,30 @@ input[type=checkbox] { top: 0; border-radius: 4px; - -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); - -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); - box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,.4); + -webkit-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), + 0px 1px 0px rgba(255, 255, 255, 0.4); + -moz-box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), + 0px 1px 0px rgba(255, 255, 255, 0.4); + box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), + 0px 1px 0px rgba(255, 255, 255, 0.4); background: -webkit-linear-gradient(top, #222 0%, #45484d 100%); background: -moz-linear-gradient(top, #222 0%, #45484d 100%); background: -o-linear-gradient(top, #222 0%, #45484d 100%); background: -ms-linear-gradient(top, #222 0%, #45484d 100%); background: linear-gradient(top, #222 0%, #45484d 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 ); + filter: progid:DXImageTransform.Microsoft.gradient( + startColorstr="#222", + endColorstr="#45484d", + GradientType=0 + ); } .setting_checkbox label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0; - content: ''; + content: ""; position: absolute; width: 8px; height: 5px; @@ -51,9 +58,8 @@ input[type=checkbox] { opacity: 0.3; } -.setting_checkbox input[type=checkbox]:checked + label:after { +.setting_checkbox input[type="checkbox"]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1; } - diff --git a/app/styles/claviature.less b/app/styles/claviature.less index 06064fb..a6f63b1 100644 --- a/app/styles/claviature.less +++ b/app/styles/claviature.less @@ -8,22 +8,22 @@ top: 0px; z-index: 1; font-size: 1.5rem; - background: linear-gradient(to bottom, #F3F3F3, #f0f0f0 10%, #FBFAFA); + background: linear-gradient(to bottom, #f3f3f3, #f0f0f0 10%, #fbfafa); transition: all 0.1s ease-in-out; margin: 0; display: inline-block; border: 1px solid #ccc; padding: 160px 15px 50px; border-radius: 0 0 5px 5px; - box-shadow: 0 3px 3px rgba(170, 170, 170, 0.50); + box-shadow: 0 3px 3px rgba(170, 170, 170, 0.5); position: relative; cursor: pointer; color: rgba(255, 255, 255, 0); &:hover { - color: #171C1A; + color: #171c1a; } - &:active{ + &:active { box-shadow: 0 0 0 rgb(0, 0, 0, 0); top: 3px; color: #333; @@ -44,7 +44,7 @@ border-width: 0 6px 12px; border-color: #000; border-bottom-color: #424546; - background: #171C1A; + background: #171c1a; &:hover { color: #faf0e6; } @@ -55,21 +55,22 @@ } } - li:active, li.active { + li:active, + li.active { // by default all keys are wrong which is shown when clicked - background: linear-gradient(to bottom, #B50C0C, #D81313 10%, #D20909); + background: linear-gradient(to bottom, #b50c0c, #d81313 10%, #d20909); &.black-note { - border-color: #790C0C; - border-bottom-color: #5A0202; + border-color: #790c0c; + border-bottom-color: #5a0202; } } - li.green:active, li.green.active { + li.green:active, + li.green.active { color: white; - background: linear-gradient(to bottom, #158C0D, #2DAD3D 10%, #09A915); + background: linear-gradient(to bottom, #158c0d, #2dad3d 10%, #09a915); &.black-note { - border-color: #18790C; - border-bottom-color: #025A1D; + border-color: #18790c; + border-bottom-color: #025a1d; } } - } diff --git a/app/styles/index.less b/app/styles/index.less index ea9642e..20725da 100644 --- a/app/styles/index.less +++ b/app/styles/index.less @@ -44,7 +44,7 @@ footer { } } h2 { - color: #ECECEC; + color: #ececec; } div.left { text-align: left; @@ -55,19 +55,23 @@ footer { } .form-control:focus { - border-color: #E0E0E0; + border-color: #e0e0e0; outline: 0; - -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6); - box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(224, 224, 224, 0.6); + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), + 0 0 8px rgba(102, 175, 233, 0.6); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), + 0 0 8px rgba(224, 224, 224, 0.6); } - .btn, .btn:focus { + .btn, + .btn:focus { transition: all 0.5s ease; background-color: transparent; border: 1px solid white; color: white; outline: none; - &:hover, &:active { + &:hover, + &:active { background-color: rgba(255, 255, 255, 0.15); border-color: white; } @@ -93,7 +97,6 @@ footer { } } - .jumbotron { background-color: rgba(0, 0, 0, 0.7); padding-top: 24px; @@ -105,7 +108,7 @@ footer { .jumbotron > h1 { /*Kozuka Gothic ...*/ text-align: center; - font-family: 'Poiret One', sans-serif; + font-family: "Poiret One", sans-serif; font-size: 70pt; font-weight: 100; color: white; @@ -116,11 +119,10 @@ footer { text-align: center; color: white; margin-top: 10px; - font-family: 'Poiret One', sans-serif; + font-family: "Poiret One", sans-serif; margin-bottom: 20px; } - #image-background { min-height: 100%; min-width: 1600px; @@ -138,7 +140,6 @@ footer { right: 10px; } - h1 { font-size: 50*2px; } @@ -209,7 +210,8 @@ h1 { transition: all 0.5s ease; } -li.modeNavItem a, li.modeNavItem a:focus { +li.modeNavItem a, +li.modeNavItem a:focus { background-color: transparent; border: 1px solid white; color: white; @@ -218,7 +220,8 @@ li.modeNavItem a, li.modeNavItem a:focus { } } -li.modeNavItem.active a:focus, li.modeNavItem.active a { +li.modeNavItem.active a:focus, +li.modeNavItem.active a { background-color: white; border: 1px solid white; color: black; @@ -229,10 +232,7 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a { } .transition { - transition: - max-height 0.4s ease, - height 0.4s ease, - margin 0.4s ease, + transition: max-height 0.4s ease, height 0.4s ease, margin 0.4s ease, opacity 0.75s ease; opacity: 1; overflow: hidden; @@ -280,7 +280,14 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a { margin: 25px 0; height: 1px; background: black; - background: -webkit-gradient(linear, 0 0, 100% 0, from(rgba(255, 255, 255, 0.0)), to(rgba(255, 255, 255, 0.0)), color-stop(50%, white)); + background: -webkit-gradient( + linear, + 0 0, + 100% 0, + from(rgba(255, 255, 255, 0)), + to(rgba(255, 255, 255, 0)), + color-stop(50%, white) + ); } .inlineBlock { @@ -293,7 +300,6 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a { margin-left: 0.5%; } - .noSelect { -webkit-touch-callout: none; -webkit-user-select: none; @@ -311,8 +317,6 @@ li.modeNavItem.active a:focus, li.modeNavItem.active a { display: none; } - - .gameContainer { white-space: nowrap; overflow: hidden; diff --git a/app/styles/star_animation.less b/app/styles/star_animation.less index 998fa49..d15ff90 100644 --- a/app/styles/star_animation.less +++ b/app/styles/star_animation.less @@ -17,11 +17,19 @@ } @keyframes rotation-1 { - from {transform: rotate(0deg); } - to {transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } @keyframes rotation-2 { - from {transform: rotate(0deg); } - to {transform: rotate(360deg); } + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } } diff --git a/package.json b/package.json index 1f3cd3e..d26d2d5 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "babel-preset-stage-0": "^6.3.13", "css-loader": "^0.23.1", "eslint": "^3.14.1", - "eslint-plugin-prettier": "^2.1.2", + "eslint-plugin-prettier": "^2.3.1", "eslint-plugin-react": "^7.1.0", "font-awesome-webpack": "0.0.4", "jasmine-core": "^2.4.1", @@ -55,7 +55,7 @@ "less": "^2.6.0", "less-loader": "^2.2.2", "phantomjs-prebuilt": "^2.1.6", - "prettier": "^1.5.0", + "prettier": "^1.7.4", "react-transform-hmr": "^1.0.1", "style-loader": "^0.13.0", "url-loader": "^0.5.7", diff --git a/webpack.config.js b/webpack.config.js index 980f345..9c0fe0d 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -76,7 +76,10 @@ module.exports = { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&minetype=application/font-woff" }, - { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }, + { + test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, + loader: "file-loader" + }, { test: /\.html/, loader: "file?name=[name].[ext]" } ] }