From 87d51c21ce3352180bf2ac5a65742088d9f8fbc3 Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Mon, 4 Dec 2017 19:47:31 +0100
Subject: [PATCH 1/8] fix sound pop

---
 src/renderer/components/panel.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/panel.ts b/src/renderer/components/panel.ts
index 14f01c3..b1bb96f 100644
--- a/src/renderer/components/panel.ts
+++ b/src/renderer/components/panel.ts
@@ -288,7 +288,7 @@ export default class ComponentPanel {
           particle.counter = TIME_PARTICLE
         });
 
-        panel.clear_i < 6 ? game.sounds.pop(panel.clear_i) : game.sounds.pop(3);
+        panel.clear_i < 4 ? game.sounds.pop(panel.clear_i) : game.sounds.pop(3);
       }
     } else {
       if (panel.above && !panel.above.hidden && panel.above.state === STATIC)

From c8ccf284e9548488d9957e670ed4c73060ad99af Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Mon, 4 Dec 2017 19:47:51 +0100
Subject: [PATCH 2/8] fixing bingins

---
 src/common/replay.ts               |  2 +-
 src/common/store.ts                |  2 +-
 src/renderer/states/mode_puzzle.ts | 15 ++++++++-------
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/common/replay.ts b/src/common/replay.ts
index 3e10d78..89e8cdc 100644
--- a/src/common/replay.ts
+++ b/src/common/replay.ts
@@ -2,7 +2,7 @@ import * as electron from 'electron'
 import Store         from 'common/store'
 import * as path     from 'path'
 import * as fs       from 'fs'
-import fx            from 'mkdir-recursive'
+import * as fx       from 'mkdir-recursive'
 import * as glob     from 'glob'
 import * as crypto   from 'crypto'
 
diff --git a/src/common/store.ts b/src/common/store.ts
index 1236c57..b924fda 100644
--- a/src/common/store.ts
+++ b/src/common/store.ts
@@ -3,7 +3,7 @@ import * as fs         from 'fs'
 import * as path       from 'path'
 import * as DotProp    from 'dot-prop'
 import * as mkdir      from 'make-dir'
-import writeFileAtomic from 'write-file-atomic'
+import * as writeFileAtomic from 'write-file-atomic'
 
 const obj = () => Object.create(null)
 
diff --git a/src/renderer/states/mode_puzzle.ts b/src/renderer/states/mode_puzzle.ts
index cefc76c..00559e9 100644
--- a/src/renderer/states/mode_puzzle.ts
+++ b/src/renderer/states/mode_puzzle.ts
@@ -1,9 +1,9 @@
-import seedrandom           from 'seedrandom'
+import * as seedrandom      from 'seedrandom'
 import game                 from 'core/game'
 import CoreInputs           from 'core/inputs'
 import CoreStage            from 'core/stage'
 import Puzzles              from 'core/puzzles'
-import ComponentPlayfield   from 'components/playfield'
+import Playfield            from 'components/playfield'
 import ComponentMenuPause   from 'components/menu_pause'
 import ComponentTimer       from 'components/timer'
 import ComponentStepCounter from 'components/step_counter'
@@ -16,7 +16,7 @@ const { px }   = filters
 
 /* run by phaser state.start */
 export default class ModePuzzle extends CoreStage {
-  private playfield    : ComponentPlayfield
+  private playfield    : Playfield
   private menu_pause   : ComponentMenuPause
   private timer        : ComponentTimer
   private step_display : ComponentStepCounter
@@ -33,7 +33,7 @@ export default class ModePuzzle extends CoreStage {
   private bg           : Phaser.Sprite
   constructor() {
     super()
-    this.playfield    = new ComponentPlayfield(0)
+    this.playfield    = new Playfield(0)
     this.menu_pause   = new ComponentMenuPause()
     this.timer        = new ComponentTimer()
     this.step_display = new ComponentStepCounter()
@@ -67,6 +67,7 @@ export default class ModePuzzle extends CoreStage {
       y     : 40,
       panels: this.panels
     });
+    console.log(this.playfield);
 
     this.playfield.create_after()
     this.playfield.cursor.mode = "puzzle"
@@ -100,7 +101,7 @@ export default class ModePuzzle extends CoreStage {
   }
 
   /** regains control over playfield - plays a sound and timer runs again */
-  resume() {
+  resume = () => {
     game.sounds.stage_music('resume');
   
     this.state = "running";
@@ -111,7 +112,7 @@ export default class ModePuzzle extends CoreStage {
   /** updates all important objects, especially the inputs
    *  based on the interal tick counter thats increasing
    */
-  update() {
+  update = () => {
     if (this.playfield.stack_is_empty()) {
       if (this.puzzles.puzzle_levels.length === (this.level_index)) {
         game.state.start("menu");
@@ -139,7 +140,7 @@ export default class ModePuzzle extends CoreStage {
   }
 
   /** calls the render functions of the timer and playfield */
-  render() {
+  render = () => {
     this.timer.render();
     this.step_display.render();
   

From 247f71dd1ff3f632a425f019964547d69100dcd9 Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 16:11:49 +0100
Subject: [PATCH 3/8] fix menu pause binding

---
 src/renderer/components/menu_pause.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/menu_pause.ts b/src/renderer/components/menu_pause.ts
index 546becb..9b9ddc3 100644
--- a/src/renderer/components/menu_pause.ts
+++ b/src/renderer/components/menu_pause.ts
@@ -37,8 +37,8 @@ export default class ComponentPauseMenu {
 
     // create a controller with this menu given as a reference, push 2 methods of the menu
     return this.cursor.create(this, -70, -16, [
-      this.continue,
-      this.cancel
+      this.continue.bind(this),
+      this.cancel.bind(this)
     ]);
   }
 

From 8d31c0a40672c718456798eb2c71d1fb81b88603 Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 16:12:49 +0100
Subject: [PATCH 4/8] set position of menu

---
 src/renderer/states/mode_puzzle.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/states/mode_puzzle.ts b/src/renderer/states/mode_puzzle.ts
index fe81167..0926c01 100644
--- a/src/renderer/states/mode_puzzle.ts
+++ b/src/renderer/states/mode_puzzle.ts
@@ -4,7 +4,7 @@ import controls             from 'core/controls'
 import CoreInputs           from 'core/inputs'
 import CoreStage            from 'core/stage'
 import Puzzles              from 'core/puzzles'
-import Playfield            from 'components/playfield'
+import ComponentPlayfield   from 'components/playfield'
 import ComponentMenuPause   from 'components/menu_pause'
 import ComponentTimer       from 'components/timer'
 import ComponentStepCounter from 'components/step_counter'
@@ -32,6 +32,7 @@ export default class ModePuzzle extends CoreStage {
   private level_index  : number
   private steps_left   : number
   private bg           : Phaser.Sprite
+
   constructor() {
     super()
     this.playfield0    = new ComponentPlayfield(0)
@@ -54,6 +55,7 @@ export default class ModePuzzle extends CoreStage {
    */
   create() {
     this.bg = game.add.sprite(0, 0, "mode_puzzle_bg")
+    this.bg.anchor.setTo(0.5, 0);
 
     this.tick   = -1
     this.seed   = 'puzzle'
@@ -71,7 +73,6 @@ export default class ModePuzzle extends CoreStage {
         y   : 80,
       panels: this.panels
     });
-    console.log(this.playfield);
 
     this.playfield0.create_after()
     this.playfield0.cursor.mode = "puzzle"
@@ -145,6 +146,7 @@ export default class ModePuzzle extends CoreStage {
 
   /** calls the render functions of the timer and playfield0 */
   render() {
+    this.bg.x = game.world.centerX;
     this.timer.render();
     this.step_display.render();
   

From 25b6759ca4ec5db34e7dad63d79662d827e01fee Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 16:13:30 +0100
Subject: [PATCH 5/8] vscode integration in tasks

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index dcb3ab0..7407971 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,3 +9,4 @@ app/src/TODO
 
 /static/renderer.js
 /static/main.js
+.vscode/tasks.json

From 975c198fc1b5197a790ba239e89c1a91ac0e6fcc Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 16:34:26 +0100
Subject: [PATCH 6/8] pass game to audio

---
 src/renderer/index.ts   | 2 +-
 src/renderer/ui/main.js | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index 4079028..d81cb0c 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -20,7 +20,7 @@ const stateClasses = [
   PuzzleMenuState
 ];
 
-ui()
+ui(game)  
 
 // Create instance of each known state class and register them to the game
 // instance.
diff --git a/src/renderer/ui/main.js b/src/renderer/ui/main.js
index 1578a15..a1f6c11 100644
--- a/src/renderer/ui/main.js
+++ b/src/renderer/ui/main.js
@@ -32,20 +32,20 @@ function nav(){
     m('.clear')
   ])
 }
-function content(){
+function content(game){
   if      (Ui.mode === 'input')  { return m('.content.settings_input'  ,UiInput()   )}
   else if (Ui.mode === 'network'){ return m('.content.settings_network',UiNetwork() )}
-  else if (Ui.mode === 'audio')  { return m('.content.settings_audio'  ,UiAudio()   )}
+  else if (Ui.mode === 'audio')  { return m('.content.settings_audio'  ,UiAudio(game))}
   else if (Ui.mode === 'replay') { return m('.content.settings_replay' ,UiReplay()  )}
 }
 
-function render(){
+function render(game){
   const app = {view: function(){
     if (Ui.mode !== false) {
       return m('.wrap1',
         m('.wrap2',[
           nav(),
-          content()
+          content(game)
         ])
       )
     }

From c56a6176050f80b5df3c5663bad26512ceb391f3 Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 16:34:57 +0100
Subject: [PATCH 7/8] #25 #24 use game and set volume and mute all through game

---
 src/renderer/ui/audio.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/renderer/ui/audio.js b/src/renderer/ui/audio.js
index 8f19fae..b4dcf87 100644
--- a/src/renderer/ui/audio.js
+++ b/src/renderer/ui/audio.js
@@ -5,7 +5,7 @@ let audio_sfx_volume = 100
 let audio_msx_volume = 100
 let muted            = false
 
-function render(){
+function render(game){ 
   return m('form',[
     m('.check_box.sfx',[
       m("input[type='range']",{
@@ -13,7 +13,8 @@ function render(){
         max:"100",
         value: audio_sfx_volume,
         oninput: function(e){
-         audio_sfx_volume = e.target.value
+          audio_sfx_volume = e.target.value
+          game.sounds.set_sfx_volume(audio_sfx_volume * 0.01)
         }
       }),
       m('.val',[
@@ -27,7 +28,8 @@ function render(){
         max:"100",
         value: audio_msx_volume,
         oninput: function(e){
-         audio_msx_volume = e.target.value
+          audio_msx_volume = e.target.value
+          game.sounds.set_msx_volume(audio_msx_volume * 0.01)
         }
       }),
       m('.val',[

From 1afebb69fafe37c039e3ebcd4497ef300d044d13 Mon Sep 17 00:00:00 2001
From: Skytrias <skytrias91@gmail.com>
Date: Sat, 9 Dec 2017 19:55:47 +0100
Subject: [PATCH 8/8] move over ui files to ts and fix audio imports

---
 src/renderer/index.ts                      |  2 +-
 src/renderer/ui/{audio.js => audio.ts}     | 13 ++++++-------
 src/renderer/ui/{input.js => input.ts}     | 16 ++++++++++------
 src/renderer/ui/{main.js => main.ts}       | 19 +++++++++++--------
 src/renderer/ui/{network.js => network.ts} |  6 +++---
 src/renderer/ui/{replay.js => replay.ts}   | 11 ++++-------
 6 files changed, 35 insertions(+), 32 deletions(-)
 rename src/renderer/ui/{audio.js => audio.ts} (84%)
 rename src/renderer/ui/{input.js => input.ts} (91%)
 rename src/renderer/ui/{main.js => main.ts} (82%)
 rename src/renderer/ui/{network.js => network.ts} (93%)
 rename src/renderer/ui/{replay.js => replay.ts} (89%)

diff --git a/src/renderer/index.ts b/src/renderer/index.ts
index d81cb0c..51176ea 100644
--- a/src/renderer/index.ts
+++ b/src/renderer/index.ts
@@ -20,7 +20,7 @@ const stateClasses = [
   PuzzleMenuState
 ];
 
-ui(game)  
+ui()  
 
 // Create instance of each known state class and register them to the game
 // instance.
diff --git a/src/renderer/ui/audio.js b/src/renderer/ui/audio.ts
similarity index 84%
rename from src/renderer/ui/audio.js
rename to src/renderer/ui/audio.ts
index b4dcf87..db6744a 100644
--- a/src/renderer/ui/audio.js
+++ b/src/renderer/ui/audio.ts
@@ -1,11 +1,12 @@
+import game from 'core/game'
 import Ui from 'ui/mode'
-import m  from 'mithril'
+import * as m  from 'mithril'
 
-let audio_sfx_volume = 100
-let audio_msx_volume = 100
-let muted            = false
+let audio_sfx_volume : number = 100
+let audio_msx_volume : number = 100
+let muted : boolean = false
 
-function render(game){ 
+export default function render() { 
   return m('form',[
     m('.check_box.sfx',[
       m("input[type='range']",{
@@ -48,8 +49,6 @@ function render(game){
       }),
       m('.val', ['Mute all Audio'])
     ])
-
   ])
 }
 
-export default render
diff --git a/src/renderer/ui/input.js b/src/renderer/ui/input.ts
similarity index 91%
rename from src/renderer/ui/input.js
rename to src/renderer/ui/input.ts
index bf9ff86..c1e2447 100644
--- a/src/renderer/ui/input.js
+++ b/src/renderer/ui/input.ts
@@ -1,8 +1,8 @@
 import Ui from 'ui/mode'
-import m from 'mithril'
-import electron from 'electron'
+import * as m from 'mithril'
+import * as electron from 'electron'
 import Store   from 'common/store'
-import keycode from 'keycode'
+import * as keycode from 'keycode'
 
 const store = new Store()
 
@@ -10,6 +10,10 @@ const {ipcRenderer: ipc} = electron
 let setting = null
 let inputs  = store.get('inputs')
 
+declare var window: {
+  document: any,
+  navigator: any,
+}
 
 function setkey(key){
   return(function(){
@@ -83,13 +87,13 @@ function storekey(v){
   m.redraw()
 }
 
-document.onclick = function (e) {
+window.document.onclick = function (e) {
   if (setting != null && e.target.className != 'input setting') {
     setting = null
   }
 }
 
-document.onkeydown = function (e) {
+window.document.onkeydown = function (e) {
   if (e.keyCode === 70) { //f (for fullscreen)
     ipc.send('fullscreen')
   } else if (e.keyCode === 27) { //esc
@@ -108,7 +112,7 @@ document.onkeydown = function (e) {
 
 function poll_gamepad(){
   if (setting === null){ return }
-  const gg = navigator.getGamepads()
+  const gg = window.navigator.getGamepads()
   if (gg[0] === null &&
       gg[1] === null &&
       gg[2] === null &&
diff --git a/src/renderer/ui/main.js b/src/renderer/ui/main.ts
similarity index 82%
rename from src/renderer/ui/main.js
rename to src/renderer/ui/main.ts
index a1f6c11..17ac225 100644
--- a/src/renderer/ui/main.js
+++ b/src/renderer/ui/main.ts
@@ -1,13 +1,16 @@
-import m          from 'mithril'
+import * as m          from 'mithril'
 import Ui         from 'ui/mode'
 import UiInput    from 'ui/input'
 import UiNetwork  from 'ui/network'
 import UiAudio    from 'ui/audio'
 import UiReplay   from 'ui/replay'
-import electron   from 'electron'
+import * as electron from 'electron'
 
 const {ipcRenderer: ipc} = electron
 
+declare var window: {
+  document: any
+}
 
 function class_tab(new_mode){
   if (Ui.mode === new_mode){
@@ -32,32 +35,32 @@ function nav(){
     m('.clear')
   ])
 }
-function content(game){
+function content(){
   if      (Ui.mode === 'input')  { return m('.content.settings_input'  ,UiInput()   )}
   else if (Ui.mode === 'network'){ return m('.content.settings_network',UiNetwork() )}
-  else if (Ui.mode === 'audio')  { return m('.content.settings_audio'  ,UiAudio(game))}
+  else if (Ui.mode === 'audio')  { return m('.content.settings_audio'  ,UiAudio())}
   else if (Ui.mode === 'replay') { return m('.content.settings_replay' ,UiReplay()  )}
 }
 
-function render(game){
+function render(){
   const app = {view: function(){
     if (Ui.mode !== false) {
       return m('.wrap1',
         m('.wrap2',[
           nav(),
-          content(game)
+          content()
         ])
       )
     }
   }}
 
-  const el = document.getElementById('ui')
+  const el = window.document.getElementById('ui')
   m.mount(el, app)
 }
 
 ipc.on('reload',function(event,data){
   Ui.mode = data.mode
-  document.getElementById('game').classList.add('hide')
+  window.document.getElementById('game').classList.add('hide')
   m.redraw()
 })
 
diff --git a/src/renderer/ui/network.js b/src/renderer/ui/network.ts
similarity index 93%
rename from src/renderer/ui/network.js
rename to src/renderer/ui/network.ts
index a991122..a31956d 100644
--- a/src/renderer/ui/network.js
+++ b/src/renderer/ui/network.ts
@@ -1,11 +1,11 @@
-import m        from 'mithril'
+import * as m   from 'mithril'
 import Ui       from 'ui/mode'
 import Store    from 'common/store'
-import electron from 'electron'
+import * as electron from 'electron'
 
 const store = new Store()
 
-const {ipcRenderer: ipc} = electron
+import {ipcRenderer as ipc} from 'electron'
 
 let inputs  = store.get('network.host_port')
 let host_port = {value: store.get('network.host_port'), setValue: function(v) {host_port.value = v}}
diff --git a/src/renderer/ui/replay.js b/src/renderer/ui/replay.ts
similarity index 89%
rename from src/renderer/ui/replay.js
rename to src/renderer/ui/replay.ts
index bc3433d..d509b70 100644
--- a/src/renderer/ui/replay.js
+++ b/src/renderer/ui/replay.ts
@@ -1,9 +1,9 @@
-import m        from 'mithril';
+import * as m   from 'mithril'
 import Ui       from 'ui/mode'
 import Store    from 'common/store'
-import electron from 'electron'
+import * as electron from 'electron'
 
-const {ipcRenderer: ipc} = electron
+import {ipcRenderer as ipc} from 'electron'
 const store = new Store()
 
 let replay_files = []
@@ -24,9 +24,6 @@ function click_reveal_replay_dir(){
 function click_change_replay_dir(){
   ipc.send('replay-dir-change')
 }
-function click_change_replay_dir(){
-  ipc.send('replay-dir-change')
-}
 function click_reset_replay_dir(){
   ipc.send('replay-dir-reset')
 }
@@ -38,7 +35,7 @@ function click_replay_play(file){
 }
 function click_replay_remove(file){
   return function(){
-    i = replay_files.indexOf(file)
+    let i = replay_files.indexOf(file)
     replay_files.splice(i, 1)
     ipc.send('replay-delete',file)
   }