+
{this.props.label}
diff --git a/app/scripts/views/star_animation.js b/app/scripts/views/star_animation.js
index 707be0d..2f678f4 100644
--- a/app/scripts/views/star_animation.js
+++ b/app/scripts/views/star_animation.js
@@ -1,7 +1,10 @@
-import React, {Component} from "react";
-import {Motion, spring} from 'react-motion';
+import React, { Component } from "react";
export default class StarAnimation extends Component {
+ static propTypes = {
+ number: React.PropTypes.number
+ };
+
constructor() {
super();
this.state = {
@@ -18,6 +21,6 @@ export default class StarAnimation extends Component {
}
render() {
const className = "fa fa-star star-animation-" + this.state.animationCount % 2;
- return
+ return ;
}
}
diff --git a/app/scripts/views/stave_renderer.js b/app/scripts/views/stave_renderer.js
index fc70052..36a2fc5 100644
--- a/app/scripts/views/stave_renderer.js
+++ b/app/scripts/views/stave_renderer.js
@@ -1,21 +1,19 @@
import Vex from "vexflow";
-import React, {Component} from "react";
-import classNames from "classnames";
+import React, { Component } from "react";
import _ from "lodash";
-import PureRenderMixin from 'react-addons-pure-render-mixin';
+import PureRenderMixin from "react-addons-pure-render-mixin";
class StaveRenderer extends Component {
-
static defaultProps = {
staveCount: 2
- }
+ };
- propTypes: {
+ static propTypes = {
keys: React.PropTypes.array,
chordIndex: React.PropTypes.number,
keySignature: React.PropTypes.string,
- staveCount: React.PropTypes.number,
- }
+ staveCount: React.PropTypes.number
+ };
constructor(props) {
super(props);
@@ -40,7 +38,6 @@ class StaveRenderer extends Component {
window.addEventListener("resize", this.debouncedResizeHandler);
}
-
setCanvasExtent(canvas, width, height, ratio) {
canvas.width = ratio * width;
canvas.height = ratio * height;
@@ -52,11 +49,13 @@ class StaveRenderer extends Component {
getPixelRatio() {
const ctx = this.ctx,
dpr = window.devicePixelRatio || 1,
- bsr = ctx.webkitBackingStorePixelRatio ||
- ctx.mozBackingStorePixelRatio ||
- ctx.msBackingStorePixelRatio ||
- ctx.oBackingStorePixelRatio ||
- ctx.backingStorePixelRatio || 1;
+ bsr =
+ ctx.webkitBackingStorePixelRatio ||
+ ctx.mozBackingStorePixelRatio ||
+ ctx.msBackingStorePixelRatio ||
+ ctx.oBackingStorePixelRatio ||
+ ctx.backingStorePixelRatio ||
+ 1;
return dpr / bsr;
}
@@ -65,9 +64,7 @@ class StaveRenderer extends Component {
this.renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
this.ctx = this.renderer.getContext();
- const windowWidth = window.innerWidth
- || document.documentElement.clientWidth
- || document.body.clientWidth;
+ const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
const widthThreshold = 600;
const margin = 20;
@@ -82,16 +79,10 @@ class StaveRenderer extends Component {
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();
@@ -104,20 +95,17 @@ class StaveRenderer extends Component {
});
}
-
colorizeKeys() {
- Object.keys(this.props.keys).map((key) => {
+ Object.keys(this.props.keys).map(key => {
const clef = this.props.keys[key];
clef.forEach((staveNote, index) => {
const color = index < this.props.chordIndex ? "#398439" : "black";
- _.range(staveNote.getKeys().length).map((noteIndex) => {
- staveNote.setKeyStyle(noteIndex, {fillStyle: color});
+ _.range(staveNote.getKeys().length).map(noteIndex => {
+ staveNote.setKeyStyle(noteIndex, { fillStyle: color });
});
});
});
}
-
}
-
export default StaveRenderer;
diff --git a/karma.conf.js b/karma.conf.js
index 6057870..a6a3f15 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -3,43 +3,35 @@ var webpackConfig = require("./webpack.config");
module.exports = function(config) {
config.set({
-
// base path that will be used to resolve all patterns (eg. files, exclude)
- basePath: 'app',
+ basePath: "app",
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
- frameworks: ['jasmine'],
-
+ frameworks: ["jasmine"],
// list of files / patterns to load in the browser
- files: [
- 'scripts/spec/*.js'
- ],
-
+ files: ["scripts/spec/*.js"],
// list of files to exclude
- exclude: [
- 'bower_components/**/*spec.js'
- ],
-
+ exclude: ["bower_components/**/*spec.js"],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
// add webpack as preprocessor
- 'scripts/spec/*.js': ['webpack', 'sourcemap']
+ "scripts/spec/*.js": ["webpack", "sourcemap"]
},
webpack: {
- devtool: 'inline-source-map',
+ devtool: "inline-source-map",
module: webpackConfig.module
},
webpackMiddleware: {
- // webpack-dev-middleware configuration
- // i. e.
- noInfo: true
+ // webpack-dev-middleware configuration
+ // i. e.
+ noInfo: true
},
// test results reporter to use
@@ -47,28 +39,22 @@ module.exports = function(config) {
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ["mocha", "beep"],
-
// web server port
port: 9876,
-
// enable / disable colors in the output (reporters and logs)
colors: true,
-
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
-
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
-
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
- browsers: ['Chrome'],
-
+ browsers: ["Chrome"],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
diff --git a/package.json b/package.json
index a667a78..0bc0002 100644
--- a/package.json
+++ b/package.json
@@ -39,7 +39,8 @@
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"css-loader": "^0.23.1",
- "eslint": "^2.2.0",
+ "eslint": "^3.14.1",
+ "eslint-plugin-prettier": "^2.1.2",
"eslint-plugin-react": "^4.1.0",
"font-awesome-webpack": "0.0.4",
"jasmine-core": "^2.4.1",
@@ -54,6 +55,7 @@
"less": "^2.6.0",
"less-loader": "^2.2.2",
"phantomjs-prebuilt": "^2.1.6",
+ "prettier": "^1.5.0",
"react-transform-hmr": "^1.0.1",
"style-loader": "^0.13.0",
"url-loader": "^0.5.7",
diff --git a/server.js b/server.js
index 6cb4f67..44ad718 100644
--- a/server.js
+++ b/server.js
@@ -1,7 +1,7 @@
/* eslint-disable no-var, strict */
-var webpack = require('webpack');
-var WebpackDevServer = require('webpack-dev-server');
-var config = require('./webpack.config');
+var webpack = require("webpack");
+var WebpackDevServer = require("webpack-dev-server");
+var config = require("./webpack.config");
var port = config.port;
new WebpackDevServer(webpack(config), {
@@ -9,9 +9,9 @@ new WebpackDevServer(webpack(config), {
contentBase: "./app/",
hot: true,
historyApiFallback: true
-}).listen(port, 'localhost', function (err) {
- if (err) {
- console.log(err);
- }
- console.log('Listening at localhost:' + port);
- });
+}).listen(port, "localhost", function(err) {
+ if (err) {
+ console.log(err);
+ }
+ console.log("Listening at localhost:" + port);
+});
diff --git a/webpack.config.js b/webpack.config.js
index 6e9c8d3..980f345 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -41,47 +41,43 @@
*/
/* eslint-disable no-var */
-var webpack = require('webpack');
-var path = require('path');
+var webpack = require("webpack");
+var path = require("path");
var port = 1234;
module.exports = {
port: port,
- entry: [
- 'webpack-dev-server/client?http://localhost:' + port,
- 'webpack/hot/dev-server',
- './app/scripts/index.js'
- ],
+ entry: ["webpack-dev-server/client?http://localhost:" + port, "webpack/hot/dev-server", "./app/scripts/index.js"],
output: {
path: path.resolve(__dirname, "build"),
- filename: 'bundle.js',
- publicPath: '/'
+ filename: "bundle.js",
+ publicPath: "/"
},
resolve: {
- extensions: ['', '.js']
+ extensions: ["", ".js"]
},
resolveLoader: {
- root: path.join(__dirname, 'node_modules')
+ root: path.join(__dirname, "node_modules")
},
- devtool: 'inline-source-map',
- plugins: [
- new webpack.HotModuleReplacementPlugin(),
- new webpack.NoErrorsPlugin()
- ],
+ devtool: "inline-source-map",
+ plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin()],
module: {
loaders: [
{
test: /\.jsx?$/,
- loaders: ['babel'],
- include: path.join(__dirname, 'app', 'scripts')
+ loaders: ["babel"],
+ include: path.join(__dirname, "app", "scripts")
},
{
test: /\.less$/,
- loader: "style!css!less",
+ loader: "style!css!less"
+ },
+ {
+ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+ loader: "url-loader?limit=10000&minetype=application/font-woff"
},
- { 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: /\.html/, loader: 'file?name=[name].[ext]' },
+ { test: /\.html/, loader: "file?name=[name].[ext]" }
]
}
};
diff --git a/webpack.config.production.js b/webpack.config.production.js
index 1a37167..0a2061c 100644
--- a/webpack.config.production.js
+++ b/webpack.config.production.js
@@ -39,28 +39,28 @@
*/
/* eslint-disable no-var */
-var webpack = require('webpack');
-var path = require('path');
+var webpack = require("webpack");
+var path = require("path");
module.exports = {
- entry: './app/scripts/index.js',
+ entry: "./app/scripts/index.js",
output: {
- path: path.join(__dirname, 'dist/Piano-Trainer'),
- filename: 'bundle.js',
- publicPath: './'
+ path: path.join(__dirname, "dist/Piano-Trainer"),
+ filename: "bundle.js",
+ publicPath: "./"
},
resolve: {
- extensions: ['', '.js']
+ extensions: ["", ".js"]
},
resolveLoader: {
- root: path.join(__dirname, 'node_modules')
+ root: path.join(__dirname, "node_modules")
},
- devtool: 'source-map',
+ devtool: "source-map",
plugins: [
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.DefinePlugin({
- 'process.env': {
- 'NODE_ENV': JSON.stringify('production')
+ "process.env": {
+ NODE_ENV: JSON.stringify("production")
}
}),
new webpack.optimize.UglifyJsPlugin({
@@ -73,16 +73,19 @@ module.exports = {
loaders: [
{
test: /\.jsx?$/,
- loaders: ['babel'],
- include: path.join(__dirname, 'app', 'scripts')
+ loaders: ["babel"],
+ include: path.join(__dirname, "app", "scripts")
},
{
test: /\.less$/,
- loader: "style!css!less",
+ loader: "style!css!less"
+ },
+ {
+ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+ loader: "url-loader?limit=10000&minetype=application/font-woff"
},
- { 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: /\.html/, loader: 'file?name=[name].[ext]' },
+ { test: /\.html/, loader: "file?name=[name].[ext]" }
]
}
};