updates for heinz-nixdorf installation

static/package.json

@@ -23,6 +23,7 @@
     "events": "^1.1.0",
     "exports-loader": "^0.6.3",
     "file-loader": "^0.9.0",
+    "idle-timeout": "^1.0.0",
     "jsmidgen": "^0.1.5",
     "midi-file-parser": "^1.0.0",
     "midiconvert": "0.4.1",

static/src/Main.js

@@ -22,9 +22,9 @@ import {Splash} from 'interface/Splash'
 import {About} from 'interface/About'
 import {Tutorial} from 'ai/Tutorial'
 import 'babel-polyfill'
+import IdleTimeout from 'idle-timeout'
 
 /////////////// SPLASH ///////////////////
-
 const about = new About(document.body)
 const splash = new Splash(document.body)
 splash.on('click', () => {
@@ -39,6 +39,7 @@ about.on('close', () => {
 	if (!splash.loaded || splash.isOpen()){
 		splash.show()
 	} else {
+
 		keyboard.activate()
 	}
 })
@@ -49,6 +50,19 @@ about.on('open', () => {
 	}
 })
 
+//////////////// IDLE TIMER ///////////////
+const idleTimeout = new IdleTimeout(
+	() => {
+		keyboard.deactivate();
+		splash.show();
+		keyboard._active = true;
+	  },
+	  {
+		element: document,
+		timeout: 60000,
+		loop: false
+	  }
+	);
 
 /////////////// PIANO ///////////////////
 
@@ -63,6 +77,7 @@ const sound = new Sound()
 sound.load()
 
 keyboard.on('keyDown', (note) => {
+	idleTimeout.reset()
 	sound.keyDown(note)
 	ai.keyDown(note)
 	glow.user()

static/src/interface/Loader.js

@@ -47,16 +47,8 @@ export default class Loader extends EventEmitter{
 		this.loaded = false
 
 		Buffer.on('load', () => {
-
 			this.loaded = true
-
+			fillText.innerHTML = '<div id="piano"></div> <div id="play">Press any key to play</div></br><div id="germanPlay"> Drücken Sie eine beliebige Taste, um zu spielen.</div>'
-			fillText.innerHTML = '<div id="piano"></div> <div id="play">PLAY</div>'
-			loader.classList.add('clickable')
-
-			loader.addEventListener('click', () => {
-
-				this.emit('click')
-			})
 		})
 
 		Buffer.on('progress', (prog) => {

static/src/interface/Splash.js

@@ -38,9 +38,13 @@ class Splash extends events.EventEmitter{
 		titleContainer.appendChild(title)
 
 		const subTitle = document.createElement('div')
+		const germanSubTitle = document.createElement('div')
 		subTitle.id = 'subTitle'
+		germanSubTitle.id = 'germanSubTitle'
 		titleContainer.appendChild(subTitle)
+		titleContainer.appendChild(germanSubTitle)
 		subTitle.textContent = 'A piano that responds to you.'
+		germanSubTitle.textContent = ' Ein Klavier, das auf Ihre Eingaben antwortet.'
 
 		this._clicked = false
 		const loader = this._loader = new Loader(titleContainer)
@@ -51,12 +55,13 @@ class Splash extends events.EventEmitter{
 		})
 
 		const howItWorks = document.createElement('div')
+		const germanHowItWorks = document.createElement('div')
 		howItWorks.id = 'howItWorks'
+		germanHowItWorks.id = 'germanHowItWorks'
 		titleContainer.appendChild(howItWorks)
-		howItWorks.textContent = 'How it works'
+		titleContainer.appendChild(germanHowItWorks)
-		howItWorks.addEventListener('click', () => {
+		howItWorks.textContent = 'This experiment lets you play a duet with the computer. Just play some notes, and the computer will respond to your melody.'
-			this.emit('about')
+		germanHowItWorks.textContent = 'Mit diesem Experiment können Sie ein Duett mit dem Computer spielen. Spielen Sie einfach ein paar Noten und der Computer reagiert auf Ihre Melodie.'
-		})
 
 		const badges = document.createElement('div')
 		badges.id = 'badges'

static/src/keyboard/Keyboard.js

@@ -28,7 +28,7 @@ class Keyboard extends events.EventEmitter{
 
 		this._container = container
 
-		this._active = false
+		this._active = true;
 
 		/**
 		 * The audio key keyboard
@@ -76,9 +76,12 @@ class Keyboard extends events.EventEmitter{
 		//the midi input
 		this._midi = new Midi()
 		this._midi.on('keyDown', (note) => {
-			this.keyDown(note)
+			const splash = document.getElementById("splash");
-			this._emitKeyDown(note)
+			splash.classList.add('disappear');
-		})
+			container.classList.add('focus');
+			this.keyDown(note);
+			this._emitKeyDown(note);
+		});
 		this._midi.on('keyUp', (note) => {
 			this.keyUp(note)
 			this._emitKeyUp(note)

static/style/splash.css

@@ -53,6 +53,17 @@ $topMargin: 35px;
 			text-align: center;
 			font-weight: 300;
 		}
+		#germanSubTitle {
+			margin-top: 0px;
+			letter-spacing: 0.8px;
+			line-height: 30px;
+			font-size: 15px;
+			width: 100%;
+			margin-left: auto;
+			margin-right: auto;
+			text-align: center;
+			font-weight: 300;
+		}
 
 		#howItWorks {
 			$size : 20px;
@@ -62,28 +73,26 @@ $topMargin: 35px;
 			width: auto;
 			display: inline-block;
 			margin-left: $margin;
-
-			&:before {
-				position: absolute;
-				width: $size;
-				height: $size;
-				margin-left: -$margin;
-				margin-top: $size / 4;
-				content : '';
-				background-image: url(../images/yellow_play_triangle.svg);
-			}
-
-			cursor: pointer;
-
-			transition: transform 0.1s;
-
-			&:hover {
-				transform: scale(1.1);
-			}
 		}
 
-		$loaderWidth: 200px;
+		#germanHowItWorks {
-		$loaderHeight: 60px;
+			$size : 20px;
+			$margin: 0px;
+
+			color: $orange;
+			width: auto;
+			display: inline-block;
+			margin-left: $margin;
+			letter-spacing: 0.8px;
+			line-height: 30px;
+			font-size: 15px;
+			margin-right: auto;
+			text-align: cenasdter;
+			font-weight: 300;
+		}
+
+		$loaderWidth: 500px;
+		$loaderHeight: 120px;
 
 		#loader {
 			position: relative;
@@ -96,25 +105,6 @@ $topMargin: 35px;
 			margin-right: auto;
 			text-transform: uppercase;
 
-			&.clickable {
-				cursor: pointer;
-
-				transition: transform 0.1s;
-
-				&:hover {
-					transform: scale(1.1);
-				}
-
-				#fillText:active {
-					color: black!important;
-					background-color: $orange;
-
-					#piano {
-						filter: brightness(0);
-					}
-				}
-			}
-
 			#loaderText {
 				position: absolute;
 				width: 100%;
@@ -126,7 +116,7 @@ $topMargin: 35px;
 			#fill {
 				position: absolute;
 				height: 100%;
-				width: 0%;
+				width: 100%;
 				overflow: hidden;
 				background-color: black;
 
@@ -135,7 +125,7 @@ $topMargin: 35px;
 					width: $loaderWidth;
 					height: 100%;
 					color: $orange;
-
+					line-height: 88px;
 					$imgWidth: 40px;
 					$margin : 52px;
 
@@ -145,9 +135,18 @@ $topMargin: 35px;
 					}
 
 					#play {
+						margin-left: 150px;
 						right: $margin;
+						position: relative;
+						/*display: inline-block;*/
+					}
+					#germanPlay {
+						margin-left: 120px;
+						right: $margin;
+						position: absolute;
+						padding-top: 30px;
+						/*display: inline-block;*/
 					}
-
 					#piano {
 						left: $margin;
 						width: $imgWidth;