Merge pull request #3 from ticklemynausea/master

update de bues cenas

app/director.js

@@ -21,6 +21,7 @@
                 return accumulator;
             }, {});
         };
+
         let scenes = requireScenes(require.context('../assets/scenes', true, /\.json$/));
 
         /* map object with scene definitions obtained above into object
@@ -31,56 +32,91 @@
 
     };
 
-    /* begins the game (actually runs the whole game) */
-    /* @TODO lol everything is implemented here, if this needs to grow it will become ugly
-     * think about refactoring all the code in here later */
-    Director.prototype.begin = function() {
-
     /* enable user input */
-        let enableUserInput = () => {
+    Director.prototype.enableUserInput = function(userChoices, afterChoice) {
 
-            /* add event listeners */
+        /* create user input area */
-            window.addEventListener('keydown', keyListener, false);
+        document.getElementById('ul-teclas').innerHTML = userChoices.reduce((accumulator, choice) => {
+            accumulator += `<li class="user-action" id="li-${choice.name}" data-action="${choice.name}">${choice.key}<div>${choice.name}</div></li>`;
+            return accumulator;
+        }, '');
 
+        /* define and add event listeners */
+        /* * keyboard key listener * */
+        this.keyListener = function(event) {
+
+            let actions = userChoices.reduce((accumulator, choice) => {
+                accumulator[choice.keyCode] = choice.name;
+                return accumulator;
+            }, {});
+
+            let action = actions[event.keyCode];
+
+            if (action) {
+                afterChoice(action);
+            }
+
+        };
+        /* * add event listener */
+        window.addEventListener('keydown', this.keyListener, false);
+
+        /* * mouse and touch listener */
+        this.mouseTouchListener = function(event)  {
+            let action = this.getAttribute('data-action');
+            afterChoice(action);
+        };
         /* LOL there is no forEach in DOM NodeList
          * http://stackoverflow.com/questions/13433799/why-doesnt-nodelist-have-foreach */
         Array.prototype.forEach.call(document.getElementsByClassName('user-action'), (element) => {
 
             /* add event listeners */
-                element.addEventListener('mouseup', mouseListener, false);
+            element.addEventListener('mouseup', this.mouseTouchListener, false);
-                element.addEventListener('touchup', touchListener, false);
+            element.addEventListener('touchup', this.mouseTouchListener, false);
 
         });
 
-            /* hide user input area */
-            document.getElementById('ul-teclas').className = '';
-
     };
 
+
     /* disable user input */
-        let disableUserInput = () => {
+    Director.prototype.disableUserInput = function() {
 
         /* add event listeners */
-            window.removeEventListener('keydown', keyListener, false);
+        window.removeEventListener('keydown', this.keyListener, false);
+        delete this.keyListener;
 
-            /* see above */
+        /* see in enableUserInput above */
         Array.prototype.forEach.call(document.getElementsByClassName('user-action'), (element) => {
 
             /* remove event listeners */
-                element.removeEventListener('mouseup', mouseListener, false);
+            element.removeEventListener('mouseup', this.mouseTouchListener, false);
-                element.removeEventListener('touchup', touchListener, false);
+            element.removeEventListener('touchup', this.mouseTouchListener, false);
 
         });
+        delete this.mouseTouchListener;
 
-            /* hide user input area */
+        /* remove user input area */
-            document.getElementById('ul-teclas').className = 'hidden';
+        document.getElementById('ul-teclas').innerHTML = '';
 
     };
 
-        /* consequence of user action (key pressed) */
-        let choice = (scene) => {
 
-            disableUserInput();
+    /* begins the game (actually runs the whole game) */
+    /* @TODO lol everything is implemented here, if this needs to grow it will become ugly
+     * think about refactoring all the code in here later */
+    Director.prototype.begin = function() {
+
+        /* defines which scenes can be chosen */
+        let userChoices = [
+            { 'name': 'anal', keyCode: 67, key: 'c' },
+            { 'name': 'vaginal', keyCode: 70, key: 'f' },
+            { 'name': 'oral', keyCode: 66, key: 'b' }
+        ];
+
+        /* when user chooses action, function this is to be called */
+        let afterChoice = (scene) => {
+
+            this.disableUserInput();
 
             /* play the selected choice screen */
             this.scenes['choice_' + scene].play()
@@ -92,37 +128,10 @@
                 .then(main);
         };
 
-        /* keydown window event listener */
-        let keyListener = function(event) {
-
-            let actions = {
-                67: 'anal',
-                70: 'vaginal',
-                66: 'oral'
-            };
-
-            let action = actions[event.keyCode];
-
-            if (action) {
-                choice(action);
-            }
-
-        };
-
-        let mouseListener = function(event)  {
-            let action = this.getAttribute('data-action');
-            choice(action);
-        };
-
-        let touchListener = function(event) {
-            let action = this.getAttribute('data-action');
-            choice(action);
-        };
-
         /* the game starts by calling this */
         let main = () => {
             return this.scenes.choice.play()
-                .then(enableUserInput);
+                .then(() => this.enableUserInput(userChoices, afterChoice));
         };
 
         return main();

app/index.js

@@ -2,6 +2,9 @@
 
     'use strict';
 
+    /* polyfill es6 promise */
+    require('es6-promise').polyfill();
+
     /* css stuff */
     require('../assets/style.scss');
 

assets/index.hbs

@@ -13,9 +13,7 @@
     </div>
 
     <ul id="ul-teclas">
-      <li class="user-action" id="li-anal" data-action="anal">c<div>anal</div></li>
+
-      <li class="user-action" id="li-vaginal" data-action="vaginal">f<div>vaginal</div></li>
-      <li class="user-action" id="li-oral" data-action="oral">b<div>oral</div></li>
     </ul>
 
   </body>

package.json

@@ -19,10 +19,14 @@
   },
   "homepage": "https://github.com/falsovsky/paradise.js#readme",
   "dependencies": {
+    "es6-promise": "^4.0.5",
     "lodash.flattendeep": "^4.4.0",
     "lodash.mapvalues": "^4.6.0"
   },
   "devDependencies": {
+    "babel-core": "^6.17.0",
+    "babel-loader": "^6.2.5",
+    "babel-preset-es2015": "^6.16.0",
     "css-loader": "^0.25.0",
     "file-loader": "^0.9.0",
     "handlebars": "^4.0.5",

webpack.config.js

@@ -12,6 +12,14 @@ module.exports = {
     },
     module: {
         loaders: [
+            {
+              test: /\.js$/,
+              exclude: /(node_modules|bower_components)/,
+              loader: 'babel',
+              query: {
+                presets: ['es2015']
+              }
+            },
             { test: /\.css$/, loader: "style!css" },
             { test: /\.json$/, loader: "json" },
             { test: /\.hbs$/, loader: "handlebars-loader" },