├── app ├── contracts │ ├── IDrawable.js │ ├── IKeyPressed.ts │ ├── IPianoKey.ts │ ├── IDrawable.js.map │ ├── IPianoKey.js.map │ ├── IKeyPressed.js.map │ ├── INotePosition.js.map │ ├── IUserResultItem.js.map │ ├── IDrawable.ts │ ├── INoteTransformer.js.map │ ├── IUserResultItem.ts │ ├── INoteTransformer.ts │ ├── INotePosition.ts │ ├── IPianoKey.js │ ├── IKeyPressed.js │ ├── IUserResultItem.js │ ├── INotePosition.js │ └── INoteTransformer.js ├── images │ └── key_numbers.jpg ├── components │ ├── piano │ │ ├── sounds │ │ │ ├── 16.wav │ │ │ ├── 17.wav │ │ │ ├── 18.wav │ │ │ ├── 19.wav │ │ │ ├── 20.wav │ │ │ ├── 21.wav │ │ │ ├── 22.wav │ │ │ ├── 23.wav │ │ │ ├── 24.wav │ │ │ ├── 25.wav │ │ │ ├── 26.wav │ │ │ ├── 27.wav │ │ │ ├── 28.wav │ │ │ ├── 29.wav │ │ │ ├── 30.wav │ │ │ ├── 31.wav │ │ │ ├── 32.wav │ │ │ ├── 33.wav │ │ │ ├── 34.wav │ │ │ ├── 35.wav │ │ │ ├── 36.wav │ │ │ ├── 37.wav │ │ │ ├── 38.wav │ │ │ ├── 39.wav │ │ │ ├── 40.wav │ │ │ ├── 41.wav │ │ │ ├── 42.wav │ │ │ ├── 43.wav │ │ │ ├── 44.wav │ │ │ ├── 45.wav │ │ │ ├── 46.wav │ │ │ ├── 47.wav │ │ │ ├── 48.wav │ │ │ ├── 49.wav │ │ │ ├── 50.wav │ │ │ ├── 51.wav │ │ │ ├── 52.wav │ │ │ ├── 53.wav │ │ │ ├── 54.wav │ │ │ ├── 55.wav │ │ │ ├── 56.wav │ │ │ ├── 57.wav │ │ │ ├── 58.wav │ │ │ ├── 59.wav │ │ │ ├── 60.wav │ │ │ ├── 61.wav │ │ │ ├── 62.wav │ │ │ ├── 63.wav │ │ │ └── unused │ │ │ │ ├── 01.wav │ │ │ │ ├── 02.wav │ │ │ │ ├── 03.wav │ │ │ │ ├── 04.wav │ │ │ │ ├── 05.wav │ │ │ │ ├── 06.wav │ │ │ │ ├── 07.wav │ │ │ │ ├── 08.wav │ │ │ │ ├── 09.wav │ │ │ │ ├── 10.wav │ │ │ │ ├── 11.wav │ │ │ │ ├── 12.wav │ │ │ │ ├── 13.wav │ │ │ │ ├── 14.wav │ │ │ │ ├── 15.wav │ │ │ │ ├── 64.wav │ │ │ │ ├── 85.wav │ │ │ │ ├── 86.wav │ │ │ │ ├── 87.wav │ │ │ │ └── 88.wav │ │ ├── piano.component.html │ │ ├── piano.component.js.map │ │ ├── piano.component.ts │ │ ├── piano.component.js │ │ └── piano.component.css │ ├── note-canvas │ │ ├── note-canvas.component.html │ │ ├── images │ │ │ ├── flat.png │ │ │ ├── sharp.png │ │ │ ├── stave_bg.png │ │ │ ├── crotchet_up.png │ │ │ └── crotchet_down.png │ │ ├── note-canvas.component.css │ │ ├── note-canvas.component.js.map │ │ ├── note-canvas.component.ts │ │ └── note-canvas.component.js │ ├── app │ │ ├── app.component.html │ │ ├── app.component.css │ │ ├── app.component.js.map │ │ ├── app.component.ts │ │ └── app.component.js │ └── score │ │ ├── score.component.js.map │ │ ├── score.component.css │ │ ├── score.component.ts │ │ └── score.component.js ├── bootstrap.js.map ├── bootstrap.ts ├── bootstrap.js └── services │ ├── ScoreTracker.js.map │ ├── ScoreTracker.ts │ ├── ScoreTracker.js │ ├── NoteFactory.ts │ ├── NoteFactory.js.map │ └── NoteFactory.js ├── .gitignore ├── tsconfig.json ├── README.md ├── package.json └── index.html /app/contracts/IDrawable.js: -------------------------------------------------------------------------------- 1 | //# sourceMappingURL=IDrawable.js.map -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | .idea 4 | .idea/* -------------------------------------------------------------------------------- /app/contracts/IKeyPressed.ts: -------------------------------------------------------------------------------- 1 | export interface IKeyPressed { 2 | key: number; 3 | keyType: string; 4 | } -------------------------------------------------------------------------------- /app/contracts/IPianoKey.ts: -------------------------------------------------------------------------------- 1 | export interface IPianoKey { 2 | whiteKeyId: number; 3 | blackKeyId: number; 4 | } -------------------------------------------------------------------------------- /app/contracts/IDrawable.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IDrawable.js","sourceRoot":"","sources":["IDrawable.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/contracts/IPianoKey.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IPianoKey.js","sourceRoot":"","sources":["IPianoKey.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/images/key_numbers.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/images/key_numbers.jpg -------------------------------------------------------------------------------- /app/contracts/IKeyPressed.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IKeyPressed.js","sourceRoot":"","sources":["IKeyPressed.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/components/piano/sounds/16.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/16.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/17.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/17.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/18.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/18.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/19.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/19.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/20.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/20.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/21.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/21.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/22.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/22.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/23.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/23.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/24.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/24.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/25.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/25.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/26.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/26.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/27.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/27.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/28.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/28.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/29.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/29.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/30.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/30.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/31.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/31.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/32.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/32.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/33.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/33.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/34.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/34.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/35.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/35.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/36.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/36.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/37.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/37.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/38.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/38.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/39.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/39.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/40.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/40.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/41.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/41.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/42.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/42.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/43.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/43.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/44.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/44.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/45.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/45.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/46.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/46.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/47.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/47.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/48.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/48.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/49.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/49.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/50.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/50.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/51.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/51.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/52.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/52.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/53.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/53.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/54.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/54.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/55.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/55.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/56.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/56.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/57.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/57.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/58.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/58.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/59.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/59.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/60.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/60.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/61.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/61.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/62.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/62.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/63.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/63.wav -------------------------------------------------------------------------------- /app/contracts/INotePosition.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"INotePosition.js","sourceRoot":"","sources":["INotePosition.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/contracts/IUserResultItem.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"IUserResultItem.js","sourceRoot":"","sources":["IUserResultItem.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/components/note-canvas/note-canvas.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /app/contracts/IDrawable.ts: -------------------------------------------------------------------------------- 1 | interface IDrawable { 2 | getPosX(): number; 3 | getPosY(): number; 4 | draw(context: CanvasRenderingContext2D); 5 | } -------------------------------------------------------------------------------- /app/contracts/INoteTransformer.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"INoteTransformer.js","sourceRoot":"","sources":["INoteTransformer.ts"],"names":[],"mappings":""} -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/01.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/01.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/02.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/02.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/03.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/03.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/04.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/04.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/05.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/05.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/06.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/06.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/07.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/07.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/08.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/08.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/09.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/09.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/10.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/10.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/11.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/11.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/12.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/12.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/13.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/13.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/14.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/14.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/15.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/15.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/64.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/64.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/85.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/85.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/86.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/86.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/87.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/87.wav -------------------------------------------------------------------------------- /app/components/piano/sounds/unused/88.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/piano/sounds/unused/88.wav -------------------------------------------------------------------------------- /app/bootstrap.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["bootstrap.ts"],"names":[],"mappings":";;;;;;;;;;;;YAEA,mBAAS,CAAC,4BAAY,CAAC,CAAC"} -------------------------------------------------------------------------------- /app/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import {bootstrap} from 'angular2/platform/browser' 2 | import {AppComponent} from "./components/app/app.component"; 3 | bootstrap(AppComponent); -------------------------------------------------------------------------------- /app/components/note-canvas/images/flat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/note-canvas/images/flat.png -------------------------------------------------------------------------------- /app/components/note-canvas/images/sharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/note-canvas/images/sharp.png -------------------------------------------------------------------------------- /app/contracts/IUserResultItem.ts: -------------------------------------------------------------------------------- 1 | export interface IUserResultItem { 2 | expectedKeyNumber: number; 3 | actualKeyNumber: number; 4 | correct: boolean; 5 | } -------------------------------------------------------------------------------- /app/components/note-canvas/images/stave_bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/note-canvas/images/stave_bg.png -------------------------------------------------------------------------------- /app/components/note-canvas/images/crotchet_up.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/note-canvas/images/crotchet_up.png -------------------------------------------------------------------------------- /app/components/note-canvas/images/crotchet_down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/josephwoodward/Angular2PianoNoteTrainingGame/HEAD/app/components/note-canvas/images/crotchet_down.png -------------------------------------------------------------------------------- /app/contracts/INoteTransformer.ts: -------------------------------------------------------------------------------- 1 | import {INotePosition} from "./INotePosition"; 2 | 3 | export interface INoteTransformer { 4 | generate(keyPosition: string): INotePosition; 5 | } -------------------------------------------------------------------------------- /app/contracts/INotePosition.ts: -------------------------------------------------------------------------------- 1 | export interface INotePosition { 2 | key: string; 3 | yPos: number; 4 | keyNumber: number; 5 | imageName: string; 6 | type?: string; 7 | } 8 | -------------------------------------------------------------------------------- /app/components/note-canvas/note-canvas.component.css: -------------------------------------------------------------------------------- 1 | #canvasWrapper { 2 | width: 895px; 3 | height: 500px; 4 | background: #fff url('app/components/note-canvas/images/stave_bg.png') no-repeat 10px 0; 5 | } -------------------------------------------------------------------------------- /app/contracts/IPianoKey.js: -------------------------------------------------------------------------------- 1 | System.register([], function(exports_1) { 2 | "use strict"; 3 | return { 4 | setters:[], 5 | execute: function() { 6 | } 7 | } 8 | }); 9 | //# sourceMappingURL=IPianoKey.js.map -------------------------------------------------------------------------------- /app/contracts/IKeyPressed.js: -------------------------------------------------------------------------------- 1 | System.register([], function(exports_1) { 2 | "use strict"; 3 | return { 4 | setters:[], 5 | execute: function() { 6 | } 7 | } 8 | }); 9 | //# sourceMappingURL=IKeyPressed.js.map -------------------------------------------------------------------------------- /app/contracts/IUserResultItem.js: -------------------------------------------------------------------------------- 1 | System.register([], function(exports_1) { 2 | "use strict"; 3 | return { 4 | setters:[], 5 | execute: function() { 6 | } 7 | } 8 | }); 9 | //# sourceMappingURL=IUserResultItem.js.map -------------------------------------------------------------------------------- /app/contracts/INotePosition.js: -------------------------------------------------------------------------------- 1 | System.register([], function(exports_1) { 2 | "use strict"; 3 | return { 4 | setters:[], 5 | execute: function() { 6 | } 7 | } 8 | }); 9 | //# sourceMappingURL=INotePosition.js.map -------------------------------------------------------------------------------- /app/contracts/INoteTransformer.js: -------------------------------------------------------------------------------- 1 | System.register([], function(exports_1) { 2 | "use strict"; 3 | return { 4 | setters:[], 5 | execute: function() { 6 | } 7 | } 8 | }); 9 | //# sourceMappingURL=INoteTransformer.js.map -------------------------------------------------------------------------------- /app/components/app/app.component.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |

Created using Angular 2 by Joseph Woodward

5 |
-------------------------------------------------------------------------------- /app/components/piano/piano.component.html: -------------------------------------------------------------------------------- 1 |
2 | 7 |
-------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES5", 4 | "module": "system", 5 | "moduleResolution": "node", 6 | "sourceMap": true, 7 | "emitDecoratorMetadata": true, 8 | "experimentalDecorators": true, 9 | "removeComments": false, 10 | "noImplicitAny": false 11 | }, 12 | "exclude": [ 13 | "node_modules" 14 | ] 15 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Piano Note Trainer 2 | 3 | Angular 2 based music notation sight reading game. 4 | 5 | Why not [give the demo a try](http://ng2piano.azurewebsites.net/)?! 6 | 7 | I've also written an [accompanying blog post about it](http://josephwoodward.co.uk/2016/01/angular-2-based-piano-note-training-game-side-project). 8 | 9 | ![Piano game](http://assets.josephwoodward.co.uk/blog/angular2_notetraininggame.png) 10 | 11 | CSS Piano [source](http://cssdeck.com/labs/pure-css3-piano). 12 | -------------------------------------------------------------------------------- /app/bootstrap.js: -------------------------------------------------------------------------------- 1 | System.register(['angular2/platform/browser', "./components/app/app.component"], function(exports_1) { 2 | "use strict"; 3 | var browser_1, app_component_1; 4 | return { 5 | setters:[ 6 | function (browser_1_1) { 7 | browser_1 = browser_1_1; 8 | }, 9 | function (app_component_1_1) { 10 | app_component_1 = app_component_1_1; 11 | }], 12 | execute: function() { 13 | browser_1.bootstrap(app_component_1.AppComponent); 14 | } 15 | } 16 | }); 17 | //# sourceMappingURL=bootstrap.js.map -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular2-quickstart", 3 | "version": "1.0.0", 4 | "scripts": { 5 | "tsc": "tsc", 6 | "tsc:w": "tsc -w", 7 | "lite": "lite-server", 8 | "start": "concurrent \"npm run tsc:w\" \"npm run lite\" " 9 | }, 10 | "license": "ISC", 11 | "dependencies": { 12 | "angular2": "2.0.0-beta.0", 13 | "systemjs": "0.19.6", 14 | "es6-promise": "^3.0.2", 15 | "es6-shim": "^0.33.3", 16 | "reflect-metadata": "0.1.2", 17 | "rxjs": "5.0.0-beta.0", 18 | "zone.js": "0.5.10" 19 | }, 20 | "devDependencies": { 21 | "concurrently": "^1.0.0", 22 | "lite-server": "^1.3.1", 23 | "typescript": "^1.7.3" 24 | } 25 | } -------------------------------------------------------------------------------- /app/components/score/score.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"score.component.js","sourceRoot":"","sources":["score.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;YA+BA;gBAKI,wBAAoB,OAAqB;oBAArB,YAAO,GAAP,OAAO,CAAc;oBAFlC,UAAK,GAAG,EAAE,CAAC;oBAGd,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;gBAChC,CAAC;gBAED,iCAAQ,GAAR;oBAAA,iBAMC;oBALG,IAAI,IAAsB,CAAC;oBAC3B,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,UAAA,KAAK;wBACpC,IAAI,GAAoB,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;wBAChD,KAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC1B,CAAC,CAAC,CAAC;gBACP,CAAC;gBAED,mCAAU,GAAV;oBACI,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;gBACnC,CAAC;gBAED,oCAAW,GAAX,UAAY,OAAW;oBACnB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACzB,CAAC;gBA7CL;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,OAAO;wBACjB,SAAS,EAAE,CAAC,0CAA0C,CAAC;wBACvD,UAAU,EAAE,CAAC,gBAAO,EAAE,cAAK,CAAC;wBAC5B,QAAQ,EAAE,0/BAeT;wBACD,MAAM,EAAE,CAAC,eAAe,EAAE,eAAe,EAAE,eAAe,CAAC;qBAC9D,CAAC;;kCAAA;gBAyBF,qBAAC;YAAD,CAAC,AAxBD,IAwBC;YAxBD,2CAwBC,CAAA"} -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Piano Note Trainer 4 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /app/services/ScoreTracker.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"ScoreTracker.js","sourceRoot":"","sources":["ScoreTracker.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;YAMA;gBAgBI;oBAhBJ,iBA6CC;oBAzCU,UAAK,GAAG,CAAC,CAAC;oBACV,qBAAgB,GAAW,CAAC,CAAC;oBAE7B,iBAAY,GAAY,CAAC,CAAC;oBAC1B,mBAAc,GAAY,CAAC,CAAC;oBAKnC,gDAAgD;oBACzC,eAAU,GAAW,EAAE,CAAC;oBAG3B,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;oBACjB,IAAI,CAAC,MAAM,GAAG,IAAI,uBAAU,CAAC,UAAA,QAAQ,IAAI,OAAA,KAAI,CAAC,cAAc,GAAG,QAAQ,EAA9B,CAA8B,CAAC,CAAC,KAAK,EAAE,CAAC;oBACjF,IAAI,CAAC,UAAU,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;gBACpC,CAAC;gBAED,6CAAsB,GAAtB;oBACI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC5B,CAAC;gBAED,kCAAW,GAAX,UAAY,MAAuB;oBAC/B,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBACzB,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;oBACnC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;oBAEhD,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC;gBACnE,CAAC;gBAED,iCAAU,GAAV;oBACI,IAAI,CAAC,gBAAgB,GAAG,CAAC,CAAC;oBAC1B,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;oBACtB,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC;oBACxB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;oBACjB,IAAI,CAAC,UAAU,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;gBACpC,CAAC;gBAED,wCAAiB,GAAjB;oBACI,MAAM,CAAC,IAAI,CAAC,gBAAgB,KAAK,IAAI,CAAC,UAAU,CAAC;gBACrD,CAAC;gBA7CL;oBAAC,iBAAU,EAAE;;gCAAA;gBA8Cb,mBAAC;YAAD,CAAC,AA7CD,IA6CC;YA7CD,uCA6CC,CAAA"} -------------------------------------------------------------------------------- /app/components/app/app.component.css: -------------------------------------------------------------------------------- 1 | #beginButton { 2 | display: block; 3 | position: absolute; 4 | top: 0; 5 | right: 0; 6 | width: 280px; 7 | height: 70px; 8 | background-color: #efefef; 9 | z-index: 999; 10 | border: 0; 11 | cursor: pointer; 12 | font-size: 20px; 13 | font-weight: bold; 14 | text-align: center; 15 | border-bottom: 1px solid rgba(0,0,0,0.1); 16 | -webkit-transition: opacity 0.1s ease-out; 17 | -moz-transition: opacity 0.1s ease-out; 18 | -ms-transition: opacity 0.1s ease-out; 19 | -o-transition: opacity 0.1s ease-out; 20 | } 21 | 22 | #beginButton:hover { 23 | opacity: 0.5; 24 | } 25 | 26 | #canvasPanel { 27 | width: 1185px; 28 | background-color: #fff; 29 | position: relative; 30 | overflow: hidden; 31 | } 32 | 33 | :focus { 34 | outline:none !important; 35 | } 36 | 37 | #gameWrapper { 38 | margin: 0 auto; 39 | width: 1185px; 40 | } 41 | 42 | .status.hide { 43 | opacity: 0; 44 | } 45 | 46 | .status.show { 47 | opacity: 1; 48 | } 49 | 50 | .status { 51 | color: #FFFFFF; 52 | text-align: center; 53 | -webkit-transition: opacity 3s ease-in-out; 54 | -moz-transition: opacity 3s ease-in-out; 55 | -ms-transition: opacity 3s ease-in-out; 56 | -o-transition: opacity 3s ease-in-out; 57 | } 58 | 59 | #appCredit { 60 | text-align: right; 61 | color: rgba(255,255,255,0.3); 62 | font-size: 12px; 63 | margin: 15px 0 0; 64 | } 65 | 66 | #appCredit a { 67 | color: rgba(255,255,255,0.2); 68 | } 69 | 70 | #appCredit a:hover { 71 | text-decoration: none; 72 | } -------------------------------------------------------------------------------- /app/services/ScoreTracker.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "angular2/core"; 2 | import {IUserResultItem} from "../contracts/IUserResultItem"; 3 | import {Observable} from "rxjs/Observable"; 4 | import 'rxjs/add/operator/share'; 5 | 6 | @Injectable() 7 | export class ScoreTracker { 8 | 9 | todos$: Observable>; 10 | private _todosObserver: any; 11 | public score = 0; 12 | public totalNotesPlayed: number = 0; 13 | public result: IUserResultItem[]; 14 | public totalCorrect : number = 0; 15 | public totalIncorrect : number = 0; 16 | private _dataStore: { 17 | todos: Array 18 | }; 19 | 20 | // Control total number of notes per test round. 21 | public notesLimit: number = 20; 22 | 23 | constructor(){ 24 | this.result = []; 25 | this.todos$ = new Observable(observer => this._todosObserver = observer).share(); 26 | this._dataStore = { todos: [] }; 27 | } 28 | 29 | updateTotalNotesPlayed(){ 30 | this.totalNotesPlayed++; 31 | } 32 | 33 | updateScore(result: IUserResultItem){ 34 | this.result.push(result); 35 | this._dataStore.todos.push(result); 36 | this._todosObserver.next(this._dataStore.todos); 37 | 38 | (result.correct) ? this.totalCorrect++ : this.totalIncorrect++; 39 | } 40 | 41 | resetScore() : void { 42 | this.totalNotesPlayed = 0; 43 | this.totalCorrect = 0; 44 | this.totalIncorrect = 0; 45 | this.result = []; 46 | this._dataStore = { todos: [] }; 47 | } 48 | 49 | notesLimitReached() : boolean { 50 | return this.totalNotesPlayed === this.notesLimit; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /app/components/score/score.component.css: -------------------------------------------------------------------------------- 1 | .score-wrapper { 2 | width: 280px; 3 | height: 530px; 4 | background-color: #fff; 5 | position: absolute; 6 | top: -5px; 7 | right: 0; 8 | padding-top: 70px; 9 | -webkit-box-shadow: -1px 0px 5px -2px rgba(0,0,0,0.75); 10 | -moz-box-shadow: -1px 0px 5px -2px rgba(0,0,0,0.75); 11 | box-shadow: -1px 0px 5px -2px rgba(0,0,0,0.75); 12 | z-index: 10; 13 | } 14 | 15 | .score-wrapper__content { 16 | padding: 20px; 17 | } 18 | 19 | .score-wrapper__content p { 20 | 21 | } 22 | 23 | .tries { 24 | margin: 0; 25 | font-weight: bold; 26 | } 27 | 28 | .tries--correct { 29 | color: green; 30 | margin-bottom: 10px; 31 | } 32 | 33 | .tries--incorrect { 34 | color: red; 35 | } 36 | 37 | /* Correct/Incorrect notice */ 38 | 39 | .score-notice { 40 | position: absolute; 41 | left: 10px; 42 | top: 10px; 43 | } 44 | 45 | .score-notice p { 46 | margin: 0; 47 | } 48 | 49 | .successfully-saved.hide-opacity { 50 | opacity: 0; 51 | } 52 | 53 | .successfully-saved { 54 | color: #FFFFFF; 55 | text-align: center; 56 | -webkit-transition: opacity 3s ease-in-out; 57 | -moz-transition: opacity 3s ease-in-out; 58 | -ms-transition: opacity 3s ease-in-out; 59 | -o-transition: opacity 3s ease-in-out; 60 | opacity: 1; 61 | } 62 | 63 | .score-wrapper__label { 64 | font-size: 18px; 65 | font-weight: bold; 66 | padding: 10px; 67 | color: #fff; 68 | border-radius: 3px; 69 | } 70 | 71 | .score-wrapper__label--success { 72 | background-color: green; 73 | } 74 | 75 | .score-wrapper__label--wrong { 76 | background-color: red; 77 | } -------------------------------------------------------------------------------- /app/components/note-canvas/note-canvas.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"note-canvas.component.js","sourceRoot":"","sources":["note-canvas.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;YAYA;gBAYI,6BAAoB,OAAmB;oBAAnB,YAAO,GAAP,OAAO,CAAY;oBAN/B,kBAAa,GAAG,GAAG,CAAC;oBACpB,iBAAY,GAAG,GAAG,CAAC;oBAMvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;oBACjE,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;oBAC5C,IAAI,CAAC,WAAW,GAAG,GAAG,CAAC;gBAC3B,CAAC;gBAEO,uCAAS,GAAjB,UAAkB,GAAW,EAAE,CAAa,EAAE,CAAa;oBAA3D,iBAMC;oBAN8B,iBAAa,GAAb,KAAa;oBAAE,iBAAa,GAAb,KAAa;oBACvD,IAAM,KAAK,GAAG,IAAI,KAAK,EAAE,CAAC;oBAC1B,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC;oBAChB,KAAK,CAAC,MAAM,GAAG;wBACX,KAAI,CAAC,OAAO,CAAC,SAAS,CAAC,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;oBACxC,CAAC,CAAC;gBACN,CAAC;gBAEO,sCAAQ,GAAhB,UAAiB,IAAmB;oBAChC,IAAI,CAAC,WAAW,EAAE,CAAC;oBACnB,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;wBACP,IAAI,CAAC,SAAS,CAAC,oCAAoC,GAAG,IAAI,CAAC,SAAS,GAAG,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC/F,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,CAAC;4BACX,IAAI,CAAC,SAAS,CAAC,oCAAoC,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,IAAI,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;wBACnK,CAAC;oBACL,CAAC;gBACL,CAAC;gBAEM,0CAAY,GAAnB,UAAoB,IAAmB;oBACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBACxB,CAAC;gBAEM,yCAAW,GAAlB;oBACI,IAAI,CAAC,OAAO,CAAC,wBAAwB,GAAG,kBAAkB,CAAC;oBAC3D,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;gBAC3C,CAAC;gBAlCD;oBAAC,YAAK,EAAE;;uEAAA;gBACR;oBAAC,YAAK,EAAE;;iEAAA;gBAjBZ;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,aAAa;wBACvB,SAAS,EAAE,CAAC,sDAAsD,CAAC;wBACnE,WAAW,EAAE,uDAAuD;wBACpE,MAAM,EAAE,CAAC,MAAM,CAAC;qBACnB,CAAC;;uCAAA;gBA8CF,0BAAC;YAAD,CAAC,AA5CD,IA4CC;YA5CD,qDA4CC,CAAA"} -------------------------------------------------------------------------------- /app/components/app/app.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"app.component.js","sourceRoot":"","sources":["app.component.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;YAUA,uEAAuE;YAmBvE;gBAYI,sBAAoB,aAA0B,EAAU,OAAqB;oBAAzD,kBAAa,GAAb,aAAa,CAAa;oBAAU,YAAO,GAAP,OAAO,CAAc;oBACzE,IAAI,CAAC,WAAW,GAAG,aAAa,CAAC;oBACjC,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC;oBAC5B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;oBAC1B,IAAI,CAAC,WAAW,GAAG,qBAAqB,CAAC;gBAC7C,CAAC;gBAED,iCAAU,GAAV,UAAW,QAAsB;oBAC7B,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;wBAAC,MAAM,CAAC;oBAEhC,IAAI,IAAI,GAAkB,IAAI,CAAC,WAAW,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;oBACxE,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;wBAAC,MAAM,CAAC;oBAElB,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,SAAS,KAAK,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC;oBAErE,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,eAAe,EAAE,IAAI,CAAC,SAAS,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;oBACjJ,IAAI,CAAC,YAAY,CAAC,sBAAsB,EAAE,CAAC;oBAC3C,IAAI,CAAC,YAAY,CAAC,iBAAiB,EAAE,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CAAC;gBACjF,CAAC;gBAEO,mCAAY,GAApB;oBACI,IAAI,CAAC,aAAa,GAAkB,IAAI,CAAC,WAAW,CAAC,aAAa,EAAE,CAAC;oBACrE,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;gBACrD,CAAC;gBAED,iCAAU,GAAV;oBACI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,OAAO,EAAE,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC;gBAC7D,CAAC;gBAED,gCAAS,GAAT;oBACI,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;oBAC1B,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC;oBAC1B,IAAI,CAAC,WAAW,GAAG,mBAAmB,CAAC;oBACvC,IAAI,CAAC,YAAY,EAAE,CAAC;oBACpB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;oBAC/B,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;gBACrC,CAAC;gBAED,8BAAO,GAAP;oBACI,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;oBAC3B,IAAI,CAAC,WAAW,GAAG,qBAAqB,CAAC;oBACzC,IAAI,CAAC,UAAU,CAAC,WAAW,EAAE,CAAC;gBAClC,CAAC;gBA7CD;oBAAC,gBAAS,CAAC,2CAAmB,CAAC;;gEAAA;gBAC/B;oBAAC,gBAAS,CAAC,gCAAc,CAAC;;oEAAA;gBA3B9B;oBAAC,gBAAS,CAAC;wBACP,QAAQ,EAAE,WAAW;wBACrB,SAAS,EAAE,CAAC,sCAAsC,CAAC;wBACnD,QAAQ,EAAE,muBAUT;wBACD,UAAU,EAAE,CAAC,gCAAc,EAAE,2CAAmB,EAAE,gCAAc,CAAC;wBACjE,SAAS,EAAE,CAAC,yBAAW,EAAE,2BAAY,CAAC;qBACzC,CAAC;;gCAAA;gBAwDF,mBAAC;YAAD,CAAC,AAvDD,IAuDC;YAvDD,uCAuDC,CAAA"} -------------------------------------------------------------------------------- /app/components/note-canvas/note-canvas.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "angular2/core"; 2 | import {ElementRef} from "angular2/core"; 3 | import {INotePosition} from "../../contracts/INotePosition"; 4 | import {Input} from "angular2/core"; 5 | 6 | @Component({ 7 | selector: 'note-canvas', 8 | styleUrls: ['app/components/note-canvas/note-canvas.component.css'], 9 | templateUrl: 'app/components/note-canvas/note-canvas.component.html', 10 | inputs: ['note'] 11 | }) 12 | 13 | export class NoteCanvasComponent { 14 | 15 | private canvasWidth: number; 16 | private canvas: HTMLCanvasElement; 17 | private context: CanvasRenderingContext2D; 18 | 19 | private CANVAS_HEIGHT = 500; 20 | private CANVAS_WIDTH = 900; 21 | 22 | @Input() keyPressed : any; 23 | @Input() note: INotePosition; 24 | 25 | constructor(private element: ElementRef) { 26 | this.canvas = this.element.nativeElement.querySelector('canvas'); 27 | this.context = this.canvas.getContext('2d'); 28 | this.canvasWidth = 900; 29 | } 30 | 31 | private drawImage(url: string, x: number = 0, y: number = 0) { 32 | const image = new Image(); 33 | image.src = url; 34 | image.onload = () => { 35 | this.context.drawImage(image, x, y); 36 | }; 37 | } 38 | 39 | private drawNote(note: INotePosition ){ 40 | this.clearCanvas(); 41 | if (note) { 42 | this.drawImage('app/components/note-canvas/images/' + note.imageName + '.png', 450, note.yPos); 43 | if (note.type){ 44 | this.drawImage('app/components/note-canvas/images/' + note.type + '.png', 410, note.keyNumber >= 39 && note.keyNumber <= 52 ? note.yPos + 30 : note.yPos - 30); 45 | } 46 | } 47 | } 48 | 49 | public updateCanvas(note: INotePosition){ 50 | this.drawNote(note); 51 | } 52 | 53 | public clearCanvas() { 54 | this.context.globalCompositeOperation = 'destination-over'; 55 | this.context.clearRect(0, 0, 900, 500); 56 | } 57 | } -------------------------------------------------------------------------------- /app/components/piano/piano.component.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"piano.component.js","sourceRoot":"","sources":["piano.component.ts"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /app/components/score/score.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "angular2/core"; 2 | import {OnChanges} from "angular2/core"; 3 | import {NgClass} from "angular2/common"; 4 | import {IUserResultItem} from "../../contracts/IUserResultItem"; 5 | import {ScoreTracker} from "../../services/ScoreTracker"; 6 | import {NgFor} from "angular2/common"; 7 | import {OnInit} from 'angular2/core'; 8 | import 'rxjs/add/operator/filter'; 9 | 10 | @Component({ 11 | selector: 'score', 12 | styleUrls: ['app/components/score/score.component.css'], 13 | directives: [NgClass, NgFor], 14 | template: ` 15 |
16 |

Incorrect, try again...

17 |

Correct!

18 |
19 |
20 |
21 |

Total Notes: {{ scoreTracker.totalNotesPlayed }} of {{ scoreTracker.notesLimit }}

22 |

Correct Notes: {{ scoreTracker.totalCorrect }} of {{ scoreTracker.notesLimit }}

23 |

Incorrect Notes: {{ scoreTracker.totalIncorrect }} of {{ scoreTracker.notesLimit }}

24 |
    25 |
  • {{ note.correct }} {{ note.expectedKeyNumber }} = {{ note.actualKeyNumber }}
    • 26 |
27 |
28 |
29 | `, 30 | inputs: ['generatedNote', 'userIsCorrect', 'gameIsStarted'] 31 | }) 32 | export class ScoreComponent implements OnChanges, OnInit { 33 | 34 | public scoreTracker: ScoreTracker; 35 | public notes = []; 36 | 37 | constructor(private tracker: ScoreTracker){ 38 | this.scoreTracker = tracker; 39 | } 40 | 41 | ngOnInit() { 42 | var note : IUserResultItem; 43 | this.scoreTracker.todos$.subscribe(notes => { 44 | note = notes[notes.length - 1]; 45 | this.notes.push(note); 46 | }); 47 | } 48 | 49 | resetScore() { 50 | this.scoreTracker.resetScore(); 51 | } 52 | 53 | ngOnChanges(changes:any) { 54 | console.log(changes); 55 | } 56 | } -------------------------------------------------------------------------------- /app/components/piano/piano.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "angular2/core"; 2 | import {IPianoKey} from "../../contracts/IPianoKey"; 3 | import {EventEmitter} from "angular2/core"; 4 | import {Output} from "angular2/core"; 5 | 6 | @Component({ 7 | selector: 'piano', 8 | styleUrls: ['app/components/piano/piano.component.css'], 9 | templateUrl: 'app/components/piano/piano.component.html', 10 | }) 11 | export class PianoComponent { 12 | 13 | public pianoKeys: IPianoKey[]; 14 | 15 | @Output("key-pressed") keyPressed = new EventEmitter(); 16 | 17 | constructor(){ 18 | 19 | this.pianoKeys = [ 20 | { whiteKeyId: 16, blackKeyId: 17 }, //c 21 | { whiteKeyId: 18, blackKeyId: 19 }, 22 | { whiteKeyId: 20, blackKeyId: 0 }, 23 | { whiteKeyId: 21, blackKeyId: 22 }, 24 | { whiteKeyId: 23, blackKeyId: 24 }, 25 | { whiteKeyId: 25, blackKeyId: 26 }, 26 | { whiteKeyId: 27, blackKeyId: 0 }, 27 | { whiteKeyId: 28, blackKeyId: 29 }, //c 28 | { whiteKeyId: 30, blackKeyId: 31 }, 29 | { whiteKeyId: 32, blackKeyId: 0 }, 30 | { whiteKeyId: 33, blackKeyId: 34 }, 31 | { whiteKeyId: 35, blackKeyId: 36 }, 32 | { whiteKeyId: 37, blackKeyId: 38 }, 33 | { whiteKeyId: 39, blackKeyId: 0 }, 34 | { whiteKeyId: 40, blackKeyId: 41 }, // middle c 35 | { whiteKeyId: 42, blackKeyId: 43 }, 36 | { whiteKeyId: 44, blackKeyId: 0 }, 37 | { whiteKeyId: 45, blackKeyId: 46 }, 38 | { whiteKeyId: 47, blackKeyId: 48 }, 39 | { whiteKeyId: 49, blackKeyId: 50 }, 40 | { whiteKeyId: 51, blackKeyId: 0 }, 41 | { whiteKeyId: 52, blackKeyId: 53 }, //c 42 | { whiteKeyId: 54, blackKeyId: 55 }, 43 | { whiteKeyId: 56, blackKeyId: 0 }, 44 | { whiteKeyId: 57, blackKeyId: 58 }, 45 | { whiteKeyId: 59, blackKeyId: 60 }, 46 | { whiteKeyId: 61, blackKeyId: 62 }, 47 | { whiteKeyId: 63, blackKeyId: 0 }, 48 | { whiteKeyId: 64, blackKeyId: 0 } //c 49 | ]; 50 | } 51 | 52 | keyPress(keyNumber: number) { 53 | this.keyPressed.emit({ key : keyNumber }); 54 | var audio = new Audio('app/components/piano/sounds/' + keyNumber + '.wav'); 55 | audio.play(); 56 | } 57 | } -------------------------------------------------------------------------------- /app/services/ScoreTracker.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core", "rxjs/Observable", 'rxjs/add/operator/share'], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1, Observable_1; 13 | var ScoreTracker; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | }, 19 | function (Observable_1_1) { 20 | Observable_1 = Observable_1_1; 21 | }, 22 | function (_1) {}], 23 | execute: function() { 24 | ScoreTracker = (function () { 25 | function ScoreTracker() { 26 | var _this = this; 27 | this.score = 0; 28 | this.totalNotesPlayed = 0; 29 | this.totalCorrect = 0; 30 | this.totalIncorrect = 0; 31 | // Control total number of notes per test round. 32 | this.notesLimit = 20; 33 | this.result = []; 34 | this.todos$ = new Observable_1.Observable(function (observer) { return _this._todosObserver = observer; }).share(); 35 | this._dataStore = { todos: [] }; 36 | } 37 | ScoreTracker.prototype.updateTotalNotesPlayed = function () { 38 | this.totalNotesPlayed++; 39 | }; 40 | ScoreTracker.prototype.updateScore = function (result) { 41 | this.result.push(result); 42 | this._dataStore.todos.push(result); 43 | this._todosObserver.next(this._dataStore.todos); 44 | (result.correct) ? this.totalCorrect++ : this.totalIncorrect++; 45 | }; 46 | ScoreTracker.prototype.resetScore = function () { 47 | this.totalNotesPlayed = 0; 48 | this.totalCorrect = 0; 49 | this.totalIncorrect = 0; 50 | this.result = []; 51 | this._dataStore = { todos: [] }; 52 | }; 53 | ScoreTracker.prototype.notesLimitReached = function () { 54 | return this.totalNotesPlayed === this.notesLimit; 55 | }; 56 | ScoreTracker = __decorate([ 57 | core_1.Injectable(), 58 | __metadata('design:paramtypes', []) 59 | ], ScoreTracker); 60 | return ScoreTracker; 61 | }()); 62 | exports_1("ScoreTracker", ScoreTracker); 63 | } 64 | } 65 | }); 66 | //# sourceMappingURL=ScoreTracker.js.map -------------------------------------------------------------------------------- /app/components/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from "angular2/core"; 2 | import {PianoComponent} from "../piano/piano.component"; 3 | import {NoteCanvasComponent} from "../note-canvas/note-canvas.component"; 4 | import {INotePosition} from "../../contracts/INotePosition"; 5 | import {ViewChild} from "angular2/core"; 6 | import {IKeyPressed} from "../../contracts/IKeyPressed"; 7 | import {NoteFactory} from "../../services/NoteFactory"; 8 | import {ScoreComponent} from "../score/score.component"; 9 | import {ScoreTracker} from "../../services/ScoreTracker"; 10 | 11 | /*https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html*/ 12 | 13 | @Component({ 14 | selector: 'piano-app', 15 | styleUrls: ['app/components/app/app.component.css'], 16 | template: ` 17 |
18 |
19 | 20 | 21 | 22 |
23 | 24 |

Created using Angular 2 by Joseph Woodward - Source available on GitHub

25 |
26 | `, 27 | directives: [PianoComponent, NoteCanvasComponent, ScoreComponent], 28 | providers: [NoteFactory, ScoreTracker] 29 | }) 30 | export class AppComponent { 31 | 32 | private noteFactory: NoteFactory; 33 | private scoreTracker: ScoreTracker; 34 | public generatedNote: INotePosition; 35 | public userIsCorrect: any; 36 | public gameIsStarted: boolean; 37 | public buttonLabel: string; 38 | 39 | @ViewChild(NoteCanvasComponent) noteCanvas: NoteCanvasComponent; 40 | @ViewChild(ScoreComponent) scoreComponent: ScoreComponent; 41 | 42 | constructor(private noteGenerator: NoteFactory, private tracker: ScoreTracker){ 43 | this.noteFactory = noteGenerator; 44 | this.scoreTracker = tracker; 45 | this.userIsCorrect = null; 46 | this.buttonLabel = "Click to start test"; 47 | } 48 | 49 | notePlayed(noteData : IKeyPressed) { 50 | if (!this.gameIsStarted) return; 51 | 52 | var note = this.noteFactory.keyToNoteConverter(noteData); 53 | if (!note) return; 54 | 55 | this.userIsCorrect = note.keyNumber === this.generatedNote.keyNumber; 56 | 57 | this.scoreTracker.updateScore({ actualKeyNumber: note.keyNumber, expectedKeyNumber: this.generatedNote.keyNumber, correct: this.userIsCorrect }); 58 | this.scoreTracker.updateTotalNotesPlayed(); 59 | this.scoreTracker.notesLimitReached() ? this.endGame() : this.generateNote(); 60 | } 61 | 62 | private generateNote(){ 63 | this.generatedNote = this.noteFactory.getRandomNote(); 64 | this.noteCanvas.updateCanvas(this.generatedNote); 65 | } 66 | 67 | toggleGame(){ 68 | (this.gameIsStarted) ? this.endGame() : this.startGame(); 69 | } 70 | 71 | startGame(){ 72 | this.gameIsStarted = true; 73 | this.userIsCorrect = null; 74 | this.buttonLabel = "Click to end test"; 75 | this.generateNote(); 76 | this.scoreTracker.resetScore(); 77 | this.scoreComponent.resetScore(); 78 | } 79 | 80 | endGame() { 81 | this.gameIsStarted = false; 82 | this.buttonLabel = "Click to start test"; 83 | this.noteCanvas.clearCanvas(); 84 | } 85 | } -------------------------------------------------------------------------------- /app/components/score/score.component.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core", "angular2/common", "../../services/ScoreTracker", 'rxjs/add/operator/filter'], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1, common_1, ScoreTracker_1, common_2; 13 | var ScoreComponent; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | }, 19 | function (common_1_1) { 20 | common_1 = common_1_1; 21 | common_2 = common_1_1; 22 | }, 23 | function (ScoreTracker_1_1) { 24 | ScoreTracker_1 = ScoreTracker_1_1; 25 | }, 26 | function (_1) {}], 27 | execute: function() { 28 | ScoreComponent = (function () { 29 | function ScoreComponent(tracker) { 30 | this.tracker = tracker; 31 | this.notes = []; 32 | this.scoreTracker = tracker; 33 | } 34 | ScoreComponent.prototype.ngOnInit = function () { 35 | var _this = this; 36 | var note; 37 | this.scoreTracker.todos$.subscribe(function (notes) { 38 | note = notes[notes.length - 1]; 39 | _this.notes.push(note); 40 | }); 41 | }; 42 | ScoreComponent.prototype.resetScore = function () { 43 | this.scoreTracker.resetScore(); 44 | }; 45 | ScoreComponent.prototype.ngOnChanges = function (changes) { 46 | console.log(changes); 47 | }; 48 | ScoreComponent = __decorate([ 49 | core_1.Component({ 50 | selector: 'score', 51 | styleUrls: ['app/components/score/score.component.css'], 52 | directives: [common_1.NgClass, common_2.NgFor], 53 | template: "\n
\n

Incorrect, try again...

\n

Correct!

\n
\n
\n
\n

Total Notes: {{ scoreTracker.totalNotesPlayed }} of {{ scoreTracker.notesLimit }}

\n

Correct Notes: {{ scoreTracker.totalCorrect }} of {{ scoreTracker.notesLimit }}

\n

Incorrect Notes: {{ scoreTracker.totalIncorrect }} of {{ scoreTracker.notesLimit }}

\n
    \n
  • {{ note.correct }} {{ note.expectedKeyNumber }} = {{ note.actualKeyNumber }}
    • \n
\n
\n
\n ", 54 | inputs: ['generatedNote', 'userIsCorrect', 'gameIsStarted'] 55 | }), 56 | __metadata('design:paramtypes', [ScoreTracker_1.ScoreTracker]) 57 | ], ScoreComponent); 58 | return ScoreComponent; 59 | }()); 60 | exports_1("ScoreComponent", ScoreComponent); 61 | } 62 | } 63 | }); 64 | //# sourceMappingURL=score.component.js.map -------------------------------------------------------------------------------- /app/components/note-canvas/note-canvas.component.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core"], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1, core_2, core_3; 13 | var NoteCanvasComponent; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | core_2 = core_1_1; 19 | core_3 = core_1_1; 20 | }], 21 | execute: function() { 22 | NoteCanvasComponent = (function () { 23 | function NoteCanvasComponent(element) { 24 | this.element = element; 25 | this.CANVAS_HEIGHT = 500; 26 | this.CANVAS_WIDTH = 900; 27 | this.canvas = this.element.nativeElement.querySelector('canvas'); 28 | this.context = this.canvas.getContext('2d'); 29 | this.canvasWidth = 900; 30 | } 31 | NoteCanvasComponent.prototype.drawImage = function (url, x, y) { 32 | var _this = this; 33 | if (x === void 0) { x = 0; } 34 | if (y === void 0) { y = 0; } 35 | var image = new Image(); 36 | image.src = url; 37 | image.onload = function () { 38 | _this.context.drawImage(image, x, y); 39 | }; 40 | }; 41 | NoteCanvasComponent.prototype.drawNote = function (note) { 42 | this.clearCanvas(); 43 | if (note) { 44 | this.drawImage('app/components/note-canvas/images/' + note.imageName + '.png', 450, note.yPos); 45 | if (note.type) { 46 | this.drawImage('app/components/note-canvas/images/' + note.type + '.png', 410, note.keyNumber >= 39 && note.keyNumber <= 52 ? note.yPos + 30 : note.yPos - 30); 47 | } 48 | } 49 | }; 50 | NoteCanvasComponent.prototype.updateCanvas = function (note) { 51 | this.drawNote(note); 52 | }; 53 | NoteCanvasComponent.prototype.clearCanvas = function () { 54 | this.context.globalCompositeOperation = 'destination-over'; 55 | this.context.clearRect(0, 0, 900, 500); 56 | }; 57 | __decorate([ 58 | core_3.Input(), 59 | __metadata('design:type', Object) 60 | ], NoteCanvasComponent.prototype, "keyPressed", void 0); 61 | __decorate([ 62 | core_3.Input(), 63 | __metadata('design:type', Object) 64 | ], NoteCanvasComponent.prototype, "note", void 0); 65 | NoteCanvasComponent = __decorate([ 66 | core_1.Component({ 67 | selector: 'note-canvas', 68 | styleUrls: ['app/components/note-canvas/note-canvas.component.css'], 69 | templateUrl: 'app/components/note-canvas/note-canvas.component.html', 70 | inputs: ['note'] 71 | }), 72 | __metadata('design:paramtypes', [core_2.ElementRef]) 73 | ], NoteCanvasComponent); 74 | return NoteCanvasComponent; 75 | }()); 76 | exports_1("NoteCanvasComponent", NoteCanvasComponent); 77 | } 78 | } 79 | }); 80 | //# sourceMappingURL=note-canvas.component.js.map -------------------------------------------------------------------------------- /app/components/piano/piano.component.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core"], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1, core_2, core_3; 13 | var PianoComponent; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | core_2 = core_1_1; 19 | core_3 = core_1_1; 20 | }], 21 | execute: function() { 22 | PianoComponent = (function () { 23 | function PianoComponent() { 24 | this.keyPressed = new core_2.EventEmitter(); 25 | this.pianoKeys = [ 26 | { whiteKeyId: 16, blackKeyId: 17 }, 27 | { whiteKeyId: 18, blackKeyId: 19 }, 28 | { whiteKeyId: 20, blackKeyId: 0 }, 29 | { whiteKeyId: 21, blackKeyId: 22 }, 30 | { whiteKeyId: 23, blackKeyId: 24 }, 31 | { whiteKeyId: 25, blackKeyId: 26 }, 32 | { whiteKeyId: 27, blackKeyId: 0 }, 33 | { whiteKeyId: 28, blackKeyId: 29 }, 34 | { whiteKeyId: 30, blackKeyId: 31 }, 35 | { whiteKeyId: 32, blackKeyId: 0 }, 36 | { whiteKeyId: 33, blackKeyId: 34 }, 37 | { whiteKeyId: 35, blackKeyId: 36 }, 38 | { whiteKeyId: 37, blackKeyId: 38 }, 39 | { whiteKeyId: 39, blackKeyId: 0 }, 40 | { whiteKeyId: 40, blackKeyId: 41 }, 41 | { whiteKeyId: 42, blackKeyId: 43 }, 42 | { whiteKeyId: 44, blackKeyId: 0 }, 43 | { whiteKeyId: 45, blackKeyId: 46 }, 44 | { whiteKeyId: 47, blackKeyId: 48 }, 45 | { whiteKeyId: 49, blackKeyId: 50 }, 46 | { whiteKeyId: 51, blackKeyId: 0 }, 47 | { whiteKeyId: 52, blackKeyId: 53 }, 48 | { whiteKeyId: 54, blackKeyId: 55 }, 49 | { whiteKeyId: 56, blackKeyId: 0 }, 50 | { whiteKeyId: 57, blackKeyId: 58 }, 51 | { whiteKeyId: 59, blackKeyId: 60 }, 52 | { whiteKeyId: 61, blackKeyId: 62 }, 53 | { whiteKeyId: 63, blackKeyId: 0 }, 54 | { whiteKeyId: 64, blackKeyId: 0 } //c 55 | ]; 56 | } 57 | PianoComponent.prototype.keyPress = function (keyNumber) { 58 | this.keyPressed.emit({ key: keyNumber }); 59 | var audio = new Audio('app/components/piano/sounds/' + keyNumber + '.wav'); 60 | audio.play(); 61 | }; 62 | __decorate([ 63 | core_3.Output("key-pressed"), 64 | __metadata('design:type', Object) 65 | ], PianoComponent.prototype, "keyPressed", void 0); 66 | PianoComponent = __decorate([ 67 | core_1.Component({ 68 | selector: 'piano', 69 | styleUrls: ['app/components/piano/piano.component.css'], 70 | templateUrl: 'app/components/piano/piano.component.html', 71 | }), 72 | __metadata('design:paramtypes', []) 73 | ], PianoComponent); 74 | return PianoComponent; 75 | }()); 76 | exports_1("PianoComponent", PianoComponent); 77 | } 78 | } 79 | }); 80 | //# sourceMappingURL=piano.component.js.map -------------------------------------------------------------------------------- /app/services/NoteFactory.ts: -------------------------------------------------------------------------------- 1 | import {Injectable} from "angular2/core"; 2 | import {INotePosition} from "../contracts/INotePosition"; 3 | import {INoteTransformer} from "../contracts/INoteTransformer"; 4 | import {IKeyPressed} from "../contracts/IKeyPressed"; 5 | 6 | @Injectable() 7 | export class NoteFactory implements INoteTransformer { 8 | 9 | private notePositions: INotePosition[]; 10 | 11 | constructor(){ 12 | var crotchetUp = "crotchet_up"; 13 | var crotchetDown = "crotchet_down"; 14 | 15 | this.notePositions = [ 16 | { key: 'g5', yPos: 86, keyNumber: 60, imageName: crotchetDown, type: 'sharp' }, 17 | { key: 'g5', yPos: 86, keyNumber: 59, imageName: crotchetDown }, 18 | { key: 'g5', yPos: 86, keyNumber: 58, imageName: crotchetDown, type: 'flat' }, 19 | { key: 'f5', yPos: 100, keyNumber: 58, imageName: crotchetDown, type: 'sharp' }, 20 | { key: 'f5', yPos: 100, keyNumber: 57, imageName: crotchetDown }, 21 | { key: 'f5', yPos: 100, keyNumber: 56, imageName: crotchetDown, type: 'flat' }, 22 | { key: 'e5', yPos: 112, keyNumber: 57, imageName: crotchetDown, type: 'sharp' }, 23 | { key: 'e5', yPos: 112, keyNumber: 56, imageName: crotchetDown }, 24 | { key: 'e5', yPos: 112, keyNumber: 55, imageName: crotchetDown, type: 'flat' }, 25 | { key: 'd5', yPos: 126, keyNumber: 55, imageName: crotchetDown, type: 'sharp' }, 26 | { key: 'd5', yPos: 126, keyNumber: 54, imageName: crotchetDown }, 27 | { key: 'd5', yPos: 126, keyNumber: 53, imageName: crotchetDown, type: 'flat' }, 28 | { key: 'c5', yPos: 138, keyNumber: 53, imageName: crotchetDown, type: 'sharp' }, 29 | { key: 'c5', yPos: 138, keyNumber: 52, imageName: crotchetDown }, 30 | { key: 'c5', yPos: 138, keyNumber: 51, imageName: crotchetDown, type:'flat' }, 31 | { key: 'b4', yPos: 70, keyNumber: 52, imageName: crotchetUp, type: 'sharp' }, 32 | { key: 'b4', yPos: 70, keyNumber: 51, imageName: crotchetUp }, 33 | { key: 'b4', yPos: 70, keyNumber: 50, imageName: crotchetUp, type: 'flat' }, 34 | { key: 'a4', yPos: 83, keyNumber: 50, imageName: crotchetUp, type: 'sharp' }, 35 | { key: 'a4', yPos: 83, keyNumber: 49, imageName: crotchetUp }, 36 | { key: 'a4', yPos: 83, keyNumber: 48, imageName: crotchetUp, type: 'flat' }, 37 | { key: 'g4', yPos: 95, keyNumber: 48, imageName: crotchetUp, type: 'sharp' }, 38 | { key: 'g4', yPos: 95, keyNumber: 47, imageName: crotchetUp }, 39 | { key: 'g4', yPos: 95, keyNumber: 46, imageName: crotchetUp, type: 'flat' }, 40 | { key: 'f4', yPos: 109, keyNumber: 46, imageName: crotchetUp, type: 'sharp' }, 41 | { key: 'f4', yPos: 109, keyNumber: 45, imageName: crotchetUp }, 42 | { key: 'f4', yPos: 109, keyNumber: 44, imageName: crotchetUp, type: 'flat' }, 43 | { key: 'e4', yPos: 121, keyNumber: 45, imageName: crotchetUp, type: 'sharp' }, 44 | { key: 'e4', yPos: 121, keyNumber: 44, imageName: crotchetUp }, 45 | { key: 'e4', yPos: 121, keyNumber: 43, imageName: crotchetUp, type: 'flat' }, 46 | { key: 'd4', yPos: 135, keyNumber: 43, imageName: crotchetUp, type: 'sharp' }, 47 | { key: 'd4', yPos: 135, keyNumber: 42, imageName: crotchetUp }, 48 | { key: 'd4', yPos: 135, keyNumber: 41, imageName: crotchetUp, type: 'flat' }, 49 | { key: 'c4', yPos: 163, keyNumber: 41, imageName: crotchetUp, type: 'sharp' }, 50 | { key: 'c4', yPos: 163, keyNumber: 40, imageName: crotchetUp }, 51 | { key: 'c4', yPos: 163, keyNumber: 39, imageName: crotchetUp, type: 'flat' }, 52 | { key: 'b3', yPos: 271, keyNumber: 40, imageName: crotchetDown, type: 'sharp' }, 53 | { key: 'b3', yPos: 271, keyNumber: 39, imageName: crotchetDown }, 54 | { key: 'b3', yPos: 271, keyNumber: 38, imageName: crotchetDown, type: 'flat' }, 55 | { key: 'a3', yPos: 285, keyNumber: 38, imageName: crotchetDown, type: 'sharp' }, 56 | { key: 'a3', yPos: 285, keyNumber: 37, imageName: crotchetDown }, 57 | { key: 'a3', yPos: 285, keyNumber: 36, imageName: crotchetDown, type: 'flat' }, 58 | { key: 'g3', yPos: 297, keyNumber: 36, imageName: crotchetDown, type: 'sharp' }, 59 | { key: 'g3', yPos: 297, keyNumber: 35, imageName: crotchetDown }, 60 | { key: 'g3', yPos: 297, keyNumber: 34, imageName: crotchetDown, type: 'flat' }, 61 | { key: 'f3', yPos: 310, keyNumber: 34, imageName: crotchetDown, type: 'sharp' }, 62 | { key: 'f3', yPos: 310, keyNumber: 33, imageName: crotchetDown }, 63 | { key: 'f3', yPos: 310, keyNumber: 32, imageName: crotchetDown, type: 'flat' }, 64 | { key: 'e3', yPos: 323, keyNumber: 33, imageName: crotchetDown, type: 'sharp' }, 65 | { key: 'e3', yPos: 323, keyNumber: 32, imageName: crotchetDown }, 66 | { key: 'e3', yPos: 323, keyNumber: 31, imageName: crotchetDown, type: 'flat' } 67 | ]; 68 | } 69 | 70 | private randomIntFromInterval(min, max) { 71 | return Math.floor(Math.random()*(max-min+1)+min); 72 | } 73 | 74 | getRandomNote(){ 75 | var randomNumber = this.randomIntFromInterval(0, this.notePositions.length - 1); 76 | return this.notePositions[randomNumber]; 77 | } 78 | 79 | generate(keyPosition : string): INotePosition { 80 | var note : INotePosition; 81 | for(var i = 0; i <= this.notePositions.length; i++){ 82 | if (this.notePositions[i].key === keyPosition){ 83 | return this.notePositions[i]; 84 | } 85 | } 86 | return {}; 87 | } 88 | 89 | keyToNoteConverter(data: IKeyPressed){ 90 | //console.log("key:" + data.key + " - keyType: " + data.keyType); 91 | for(var i = 0; i < this.notePositions.length; i++){ 92 | if (this.notePositions[i].keyNumber === data.key){ 93 | return this.notePositions[i]; 94 | } 95 | } 96 | } 97 | } -------------------------------------------------------------------------------- /app/services/NoteFactory.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"file":"NoteFactory.js","sourceRoot":"","sources":["NoteFactory.ts"],"names":[],"mappings":"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"} -------------------------------------------------------------------------------- /app/components/app/app.component.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core", "../piano/piano.component", "../note-canvas/note-canvas.component", "../../services/NoteFactory", "../score/score.component", "../../services/ScoreTracker"], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1, piano_component_1, note_canvas_component_1, core_2, NoteFactory_1, score_component_1, ScoreTracker_1; 13 | var AppComponent; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | core_2 = core_1_1; 19 | }, 20 | function (piano_component_1_1) { 21 | piano_component_1 = piano_component_1_1; 22 | }, 23 | function (note_canvas_component_1_1) { 24 | note_canvas_component_1 = note_canvas_component_1_1; 25 | }, 26 | function (NoteFactory_1_1) { 27 | NoteFactory_1 = NoteFactory_1_1; 28 | }, 29 | function (score_component_1_1) { 30 | score_component_1 = score_component_1_1; 31 | }, 32 | function (ScoreTracker_1_1) { 33 | ScoreTracker_1 = ScoreTracker_1_1; 34 | }], 35 | execute: function() { 36 | /*https://angular.io/docs/ts/latest/api/core/OnChanges-interface.html*/ 37 | AppComponent = (function () { 38 | function AppComponent(noteGenerator, tracker) { 39 | this.noteGenerator = noteGenerator; 40 | this.tracker = tracker; 41 | this.noteFactory = noteGenerator; 42 | this.scoreTracker = tracker; 43 | this.userIsCorrect = null; 44 | this.buttonLabel = "Click to start test"; 45 | } 46 | AppComponent.prototype.notePlayed = function (noteData) { 47 | if (!this.gameIsStarted) 48 | return; 49 | var note = this.noteFactory.keyToNoteConverter(noteData); 50 | if (!note) 51 | return; 52 | this.userIsCorrect = note.keyNumber === this.generatedNote.keyNumber; 53 | this.scoreTracker.updateScore({ actualKeyNumber: note.keyNumber, expectedKeyNumber: this.generatedNote.keyNumber, correct: this.userIsCorrect }); 54 | this.scoreTracker.updateTotalNotesPlayed(); 55 | this.scoreTracker.notesLimitReached() ? this.endGame() : this.generateNote(); 56 | }; 57 | AppComponent.prototype.generateNote = function () { 58 | this.generatedNote = this.noteFactory.getRandomNote(); 59 | this.noteCanvas.updateCanvas(this.generatedNote); 60 | }; 61 | AppComponent.prototype.toggleGame = function () { 62 | (this.gameIsStarted) ? this.endGame() : this.startGame(); 63 | }; 64 | AppComponent.prototype.startGame = function () { 65 | this.gameIsStarted = true; 66 | this.userIsCorrect = null; 67 | this.buttonLabel = "Click to end test"; 68 | this.generateNote(); 69 | this.scoreTracker.resetScore(); 70 | this.scoreComponent.resetScore(); 71 | }; 72 | AppComponent.prototype.endGame = function () { 73 | this.gameIsStarted = false; 74 | this.buttonLabel = "Click to start test"; 75 | this.noteCanvas.clearCanvas(); 76 | }; 77 | __decorate([ 78 | core_2.ViewChild(note_canvas_component_1.NoteCanvasComponent), 79 | __metadata('design:type', note_canvas_component_1.NoteCanvasComponent) 80 | ], AppComponent.prototype, "noteCanvas", void 0); 81 | __decorate([ 82 | core_2.ViewChild(score_component_1.ScoreComponent), 83 | __metadata('design:type', score_component_1.ScoreComponent) 84 | ], AppComponent.prototype, "scoreComponent", void 0); 85 | AppComponent = __decorate([ 86 | core_1.Component({ 87 | selector: 'piano-app', 88 | styleUrls: ['app/components/app/app.component.css'], 89 | template: "\n
\n
\n \n \n \n
\n \n

Created using Angular 2 by Joseph Woodward - Source available on GitHub

\n
\n ", 90 | directives: [piano_component_1.PianoComponent, note_canvas_component_1.NoteCanvasComponent, score_component_1.ScoreComponent], 91 | providers: [NoteFactory_1.NoteFactory, ScoreTracker_1.ScoreTracker] 92 | }), 93 | __metadata('design:paramtypes', [NoteFactory_1.NoteFactory, ScoreTracker_1.ScoreTracker]) 94 | ], AppComponent); 95 | return AppComponent; 96 | }()); 97 | exports_1("AppComponent", AppComponent); 98 | } 99 | } 100 | }); 101 | //# sourceMappingURL=app.component.js.map -------------------------------------------------------------------------------- /app/components/piano/piano.component.css: -------------------------------------------------------------------------------- 1 | #p-wrapper > * { 2 | margin:0px; 3 | padding:0px; 4 | list-style:none; 5 | } 6 | 7 | #p-wrapper { 8 | margin-top: 20px; 9 | background:#000; 10 | background:-webkit-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 11 | background:-moz-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 12 | background:-ms-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 13 | background:-o-linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 14 | background:linear-gradient(-60deg,#000,#333,#000,#666,#333 70%); 15 | width: 1185px; 16 | position:relative; 17 | left: 0; 18 | padding-left: 10px; 19 | -webkit-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 20 | -moz-box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 21 | box-shadow:0 2px 0px #666,0 3px 0px #555,0 4px 0px #444,0 6px 6px #000,inset 0 -1px 1px rgba(255,255,255,0.5),inset 0 -4px 5px #000; 22 | border:2px solid #333; 23 | -webkit-border-radius:0 0 5px 5px; 24 | -moz-border-radius:0 0 5px 5px; 25 | border-radius:0 0 5px 5px; 26 | -webkit-animation:taufik 2s; 27 | -moz-animation:taufik 2s; 28 | animation:taufik 2s; 29 | } 30 | 31 | ul#piano { 32 | display:block; 33 | width:100%; 34 | height:240px; 35 | border-top:2px solid #222; 36 | } 37 | 38 | ul#piano li { 39 | list-style:none; 40 | float:left; 41 | display:inline; 42 | background:#aaa; 43 | width:40px; 44 | position:relative; 45 | cursor: pointer; 46 | } 47 | 48 | ul#piano li a,ul#piano li div.anchor { 49 | display:block; 50 | height:220px; 51 | background:#fff; 52 | background:-webkit-linear-gradient(-30deg,#f5f5f5,#fff); 53 | background:-moz-linear-gradient(-30deg,#f5f5f5,#fff); 54 | background:-ms-linear-gradient(-30deg,#f5f5f5,#fff); 55 | background:-o-linear-gradient(-30deg,#f5f5f5,#fff); 56 | background:linear-gradient(-30deg,#f5f5f5,#fff); 57 | border:1px solid #ccc; 58 | -webkit-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 59 | -moz-box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 60 | box-shadow:inset 0 1px 0px #fff,inset 0 -1px 0px #fff,inset 1px 0px 0px #fff,inset -1px 0px 0px #fff,0 4px 3px rgba(0,0,0,0.7); 61 | -webkit-border-radius:0 0 3px 3px; 62 | -moz-border-radius:0 0 3px 3px; 63 | border-radius:0 0 3px 3px; 64 | } 65 | 66 | ul#piano li.middlec a,ul#piano li.middlec div.anchor { 67 | background: #dddddd; 68 | } 69 | 70 | 71 | ul#piano li a:active,ul#piano li div.anchor:active { 72 | -webkit-box-shadow:0 2px 2px rgba(0,0,0,0.4); 73 | -moz-box-shadow:0 2px 2px rgba(0,0,0,0.4); 74 | box-shadow:0 2px 2px rgba(0,0,0,0.4); 75 | position:relative; 76 | top:2px; 77 | height:216px; 78 | } 79 | 80 | ul#piano li a:active:before,ul#piano li div.anchor:active:before { 81 | content:""; 82 | width:0px; 83 | height:0px; 84 | border-width:216px 5px 0px; 85 | border-style:solid; 86 | border-color:transparent transparent transparent rgba(0,0,0,0.1); 87 | position:absolute; 88 | left:0px; 89 | top:0px; 90 | } 91 | 92 | ul#piano li a:active:after,ul#piano li div.anchor:active:after { 93 | content:""; 94 | width:0px; 95 | height:0px; 96 | border-width:216px 5px 0px; 97 | border-style:solid; 98 | border-color:transparent rgba(0,0,0,0.1) transparent transparent; 99 | position:absolute; 100 | right:0px; 101 | top:0px; 102 | } 103 | 104 | /* Black Tuts */ 105 | ul#piano li span { 106 | position:absolute; 107 | top:0px; 108 | right:-12px; 109 | width:20px; 110 | height:120px; 111 | background:#333; 112 | background:-webkit-linear-gradient(-20deg,#333,#000,#333); 113 | background:-moz-linear-gradient(-20deg,#333,#000,#333); 114 | background:-ms-linear-gradient(-20deg,#333,#000,#333); 115 | background:-o-linear-gradient(-20deg,#333,#000,#333); 116 | background:linear-gradient(-20deg,#333,#000,#333); 117 | z-index:10; 118 | border-width:1px 2px 7px; 119 | border-style:solid; 120 | border-color:#666 #222 #111 #555; 121 | -webkit-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 122 | -moz-box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 123 | box-shadow:inset 0px -1px 2px rgba(255,255,255,0.4),0 2px 3px rgba(0,0,0,0.4); 124 | -webkit-border-radius:0 0 2px 2px; 125 | -moz-border-radius:0 0 2px 2px; 126 | border-radius:0 0 2px 2px; 127 | } 128 | 129 | ul#piano li span:active { 130 | border-bottom-width:2px; 131 | height:123px; 132 | -webkit-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 133 | -moz-box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 134 | box-shadow:inset 0px -1px 1px rgba(255,255,255,0.4),0 1px 0px rgba(0,0,0,0.8),0 2px 2px rgba(0,0,0,0.4),0 -1px 0px #000; 135 | } 136 | 137 | /* Tooltips */ 138 | ul#piano li b { 139 | position:absolute; 140 | top:0px; 141 | margin-top:-10px; 142 | background:#111; 143 | color:#fff; 144 | font:bold 14px 'Trebuchet MS',Arial,Sans-Serif; 145 | border:2px solid #e6e6e6; 146 | -webkit-border-radius:7px; 147 | -moz-border-radius:7px; 148 | border-radius:7px; 149 | width:100px; 150 | height:30px; 151 | padding:10px; 152 | left:-40px; 153 | z-index:100; 154 | visibility:hidden; 155 | opacity:0; 156 | -webkit-box-shadow:0 2px 10px rgba(0,0,0,0.5); 157 | -moz-box-shadow:0 2px 10px rgba(0,0,0,0.5); 158 | box-shadow:0 2px 10px rgba(0,0,0,0.5); 159 | -webkit-transition:all 0.2s ease-out; 160 | -moz-transition:all 0.2s ease-out; 161 | -ms-transition:all 0.2s ease-out; 162 | -o-transition:all 0.2s ease-out; 163 | -transition:all 0.2s ease-out; 164 | } 165 | 166 | /* Tooltip Arrow */ 167 | ul#piano li b:before { 168 | content:""; 169 | display:block; 170 | position:absolute; 171 | top:100%; 172 | left:50px; 173 | border-width:8px; 174 | border-style:solid; 175 | border-color:#e6e6e6 transparent transparent transparent; 176 | } 177 | 178 | ul#piano li b:after { 179 | content:""; 180 | display:block; 181 | position:absolute; 182 | top:100%; 183 | left:53px; 184 | border-width:5px; 185 | border-style:solid; 186 | border-color:#111 transparent transparent transparent; 187 | } 188 | 189 | ul#piano li:hover b { 190 | visibility:visible; 191 | opacity:1; 192 | margin-top:10px; 193 | } 194 | 195 | 196 | 197 | ul#piano li li a:hover { 198 | background:#111; 199 | border-top-color:#222; 200 | border-bottom-color:#000; 201 | } 202 | 203 | .clear { 204 | clear:both; 205 | } 206 | 207 | /* Animation */ 208 | @-webkit-keyframes taufik { 209 | from {opacity:0;} 210 | to {opacity:1;} 211 | } 212 | @-moz-keyframes taufik { 213 | from {opacity:0;} 214 | to {opacity:1;} 215 | } 216 | @keyframes taufik { 217 | from {opacity:0;} 218 | to {opacity:1;} 219 | } -------------------------------------------------------------------------------- /app/services/NoteFactory.js: -------------------------------------------------------------------------------- 1 | System.register(["angular2/core"], function(exports_1) { 2 | "use strict"; 3 | var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 4 | var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 5 | if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 6 | else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 7 | return c > 3 && r && Object.defineProperty(target, key, r), r; 8 | }; 9 | var __metadata = (this && this.__metadata) || function (k, v) { 10 | if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 11 | }; 12 | var core_1; 13 | var NoteFactory; 14 | return { 15 | setters:[ 16 | function (core_1_1) { 17 | core_1 = core_1_1; 18 | }], 19 | execute: function() { 20 | NoteFactory = (function () { 21 | function NoteFactory() { 22 | var crotchetUp = "crotchet_up"; 23 | var crotchetDown = "crotchet_down"; 24 | this.notePositions = [ 25 | { key: 'g5', yPos: 86, keyNumber: 60, imageName: crotchetDown, type: 'sharp' }, 26 | { key: 'g5', yPos: 86, keyNumber: 59, imageName: crotchetDown }, 27 | { key: 'g5', yPos: 86, keyNumber: 58, imageName: crotchetDown, type: 'flat' }, 28 | { key: 'f5', yPos: 100, keyNumber: 58, imageName: crotchetDown, type: 'sharp' }, 29 | { key: 'f5', yPos: 100, keyNumber: 57, imageName: crotchetDown }, 30 | { key: 'f5', yPos: 100, keyNumber: 56, imageName: crotchetDown, type: 'flat' }, 31 | { key: 'e5', yPos: 112, keyNumber: 57, imageName: crotchetDown, type: 'sharp' }, 32 | { key: 'e5', yPos: 112, keyNumber: 56, imageName: crotchetDown }, 33 | { key: 'e5', yPos: 112, keyNumber: 55, imageName: crotchetDown, type: 'flat' }, 34 | { key: 'd5', yPos: 126, keyNumber: 55, imageName: crotchetDown, type: 'sharp' }, 35 | { key: 'd5', yPos: 126, keyNumber: 54, imageName: crotchetDown }, 36 | { key: 'd5', yPos: 126, keyNumber: 53, imageName: crotchetDown, type: 'flat' }, 37 | { key: 'c5', yPos: 138, keyNumber: 53, imageName: crotchetDown, type: 'sharp' }, 38 | { key: 'c5', yPos: 138, keyNumber: 52, imageName: crotchetDown }, 39 | { key: 'c5', yPos: 138, keyNumber: 51, imageName: crotchetDown, type: 'flat' }, 40 | { key: 'b4', yPos: 70, keyNumber: 52, imageName: crotchetUp, type: 'sharp' }, 41 | { key: 'b4', yPos: 70, keyNumber: 51, imageName: crotchetUp }, 42 | { key: 'b4', yPos: 70, keyNumber: 50, imageName: crotchetUp, type: 'flat' }, 43 | { key: 'a4', yPos: 83, keyNumber: 50, imageName: crotchetUp, type: 'sharp' }, 44 | { key: 'a4', yPos: 83, keyNumber: 49, imageName: crotchetUp }, 45 | { key: 'a4', yPos: 83, keyNumber: 48, imageName: crotchetUp, type: 'flat' }, 46 | { key: 'g4', yPos: 95, keyNumber: 48, imageName: crotchetUp, type: 'sharp' }, 47 | { key: 'g4', yPos: 95, keyNumber: 47, imageName: crotchetUp }, 48 | { key: 'g4', yPos: 95, keyNumber: 46, imageName: crotchetUp, type: 'flat' }, 49 | { key: 'f4', yPos: 109, keyNumber: 46, imageName: crotchetUp, type: 'sharp' }, 50 | { key: 'f4', yPos: 109, keyNumber: 45, imageName: crotchetUp }, 51 | { key: 'f4', yPos: 109, keyNumber: 44, imageName: crotchetUp, type: 'flat' }, 52 | { key: 'e4', yPos: 121, keyNumber: 45, imageName: crotchetUp, type: 'sharp' }, 53 | { key: 'e4', yPos: 121, keyNumber: 44, imageName: crotchetUp }, 54 | { key: 'e4', yPos: 121, keyNumber: 43, imageName: crotchetUp, type: 'flat' }, 55 | { key: 'd4', yPos: 135, keyNumber: 43, imageName: crotchetUp, type: 'sharp' }, 56 | { key: 'd4', yPos: 135, keyNumber: 42, imageName: crotchetUp }, 57 | { key: 'd4', yPos: 135, keyNumber: 41, imageName: crotchetUp, type: 'flat' }, 58 | { key: 'c4', yPos: 163, keyNumber: 41, imageName: crotchetUp, type: 'sharp' }, 59 | { key: 'c4', yPos: 163, keyNumber: 40, imageName: crotchetUp }, 60 | { key: 'c4', yPos: 163, keyNumber: 39, imageName: crotchetUp, type: 'flat' }, 61 | { key: 'b3', yPos: 271, keyNumber: 40, imageName: crotchetDown, type: 'sharp' }, 62 | { key: 'b3', yPos: 271, keyNumber: 39, imageName: crotchetDown }, 63 | { key: 'b3', yPos: 271, keyNumber: 38, imageName: crotchetDown, type: 'flat' }, 64 | { key: 'a3', yPos: 285, keyNumber: 38, imageName: crotchetDown, type: 'sharp' }, 65 | { key: 'a3', yPos: 285, keyNumber: 37, imageName: crotchetDown }, 66 | { key: 'a3', yPos: 285, keyNumber: 36, imageName: crotchetDown, type: 'flat' }, 67 | { key: 'g3', yPos: 297, keyNumber: 36, imageName: crotchetDown, type: 'sharp' }, 68 | { key: 'g3', yPos: 297, keyNumber: 35, imageName: crotchetDown }, 69 | { key: 'g3', yPos: 297, keyNumber: 34, imageName: crotchetDown, type: 'flat' }, 70 | { key: 'f3', yPos: 310, keyNumber: 34, imageName: crotchetDown, type: 'sharp' }, 71 | { key: 'f3', yPos: 310, keyNumber: 33, imageName: crotchetDown }, 72 | { key: 'f3', yPos: 310, keyNumber: 32, imageName: crotchetDown, type: 'flat' }, 73 | { key: 'e3', yPos: 323, keyNumber: 33, imageName: crotchetDown, type: 'sharp' }, 74 | { key: 'e3', yPos: 323, keyNumber: 32, imageName: crotchetDown }, 75 | { key: 'e3', yPos: 323, keyNumber: 31, imageName: crotchetDown, type: 'flat' } 76 | ]; 77 | } 78 | NoteFactory.prototype.randomIntFromInterval = function (min, max) { 79 | return Math.floor(Math.random() * (max - min + 1) + min); 80 | }; 81 | NoteFactory.prototype.getRandomNote = function () { 82 | var randomNumber = this.randomIntFromInterval(0, this.notePositions.length - 1); 83 | return this.notePositions[randomNumber]; 84 | }; 85 | NoteFactory.prototype.generate = function (keyPosition) { 86 | var note; 87 | for (var i = 0; i <= this.notePositions.length; i++) { 88 | if (this.notePositions[i].key === keyPosition) { 89 | return this.notePositions[i]; 90 | } 91 | } 92 | return {}; 93 | }; 94 | NoteFactory.prototype.keyToNoteConverter = function (data) { 95 | //console.log("key:" + data.key + " - keyType: " + data.keyType); 96 | for (var i = 0; i < this.notePositions.length; i++) { 97 | if (this.notePositions[i].keyNumber === data.key) { 98 | return this.notePositions[i]; 99 | } 100 | } 101 | }; 102 | NoteFactory = __decorate([ 103 | core_1.Injectable(), 104 | __metadata('design:paramtypes', []) 105 | ], NoteFactory); 106 | return NoteFactory; 107 | }()); 108 | exports_1("NoteFactory", NoteFactory); 109 | } 110 | } 111 | }); 112 | //# sourceMappingURL=NoteFactory.js.map --------------------------------------------------------------------------------