lots of stuff

buttons for user input (touch enabled)
changed css to scss (and added sass-loader)

app/canvas.js

@@ -2,7 +2,7 @@
 
     'use strict';
 
-    let Canvas = function(container, width, height) {
+    let Canvas = function(container, width, height, scale) {
 
         /* html element that the canvas will be created in */
         this.container = container;
@@ -13,10 +13,17 @@
         /* canvas height */
         this.height = height;
 
+        /* canvas scale */
+        this.scale = scale || 1;
+
+        /* container element - set properties */
+        container.style.width = (this.width * this.scale) + 'px';
+        container.style.height = (this.height * this.scale)  + 'px';
+
         /* canvas element - create and set properties */
         this.canvas = document.createElement('canvas');
-        this.canvas.setAttribute('width', this.width);
+        this.canvas.setAttribute('width', this.width * this.scale);
-        this.canvas.setAttribute('height', this.height);
+        this.canvas.setAttribute('height', this.height * this.scale);
         this.canvas.setAttribute('id', 'canvas');
 
         /* insert in dom */
@@ -49,7 +56,7 @@
 
         var image = new Image();
         image.onload = () => {
-          this.context.drawImage(image, 0, 0);
+          this.context.drawImage(image, 0, 0, image.width, image.height, 0, 0, this.canvas.width, this.canvas.height);
         };
         image.src = this.images[name];
 

app/director.js

@@ -31,12 +31,56 @@
 
     };
 
-    /*  begins the game */
+    /* 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 = () => {
+
+            /* add event listeners */
+            window.addEventListener('keydown', keyListener, false);
+
+            /* LOL there is no forEach in DOMNodeList
+             * 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('touchup', touchListener, false);
+
+            });
+
+            /* hide user input area */
+            document.getElementById('ul-teclas').className = '';
+
+        };
+
+        /* disable user input */
+        let disableUserInput = () => {
+
+            /* add event listeners */
+            window.removeEventListener('keydown', keyListener, false);
+
+            /* see above */
+            Array.prototype.forEach.call(document.getElementsByClassName('user-action'), (element) => {
+
+                /* remove event listeners */
+                element.removeEventListener('mouseup', mouseListener, false);
+                element.removeEventListener('touchup', touchListener, false);
+
+            });
+
+            /* hide user input area */
+            document.getElementById('ul-teclas').className = 'hidden';
+
+        };
+
         /* consequence of user action (key pressed) */
         let choice = (scene) => {
-            window.removeEventListener('keydown', listener, true);
+
+            disableUserInput();
 
             /* play the selected choice screen */
             this.scenes['choice_' + scene].play()
@@ -49,31 +93,36 @@
         };
 
         /* keydown window event listener */
-        let listener = (event) => {
+        let keyListener = function(event) {
 
-            switch (event.keyCode) {
+            let actions = {
+                67: 'anal',
+                70: 'vaginal',
+                66: 'oral'
+            };
 
-                case 67:
+            let action = actions[event.keyCode];
-                    choice('anal');
-                    break;
-
-                case 70:
-                    choice('vaginal');
-                    break;
-
-                case 66:
-                    choice('oral');
-                    break;
 
+            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(() => {
+                .then(enableUserInput);
-                    window.addEventListener('keydown', listener, true);
-                });
         };
 
         return main();

app/index.js

@@ -3,13 +3,13 @@
     'use strict';
 
     /* css stuff */
-    require('../assets/style.css');
+    require('../assets/style.scss');
 
     /* load title image into title div because im using a stupid fucking
      * plugin to generate index.html automagically and i dont know how
      * pass content to the template */
     const image = require('../assets/page/paradise.gif');
-    document.getElementById('titleImg').src = image;
+    document.getElementById('img-title').src = image;
 
     /* Canvas abstraction */
     const Canvas = require('./canvas');
@@ -18,7 +18,10 @@
     const Director = require('./director');
 
     /* create a canvas */
-    let canvas = new Canvas(document.getElementById("canvasDiv"), 512, 272);
+    const scale = 1;
+    const width = 512;
+    const height = 272;
+    let canvas = new Canvas(document.getElementById("div-canvas"), width, height, scale);
 
     /* create game director with this canvas */
     let director = new Director(canvas);

assets/index.hbs

@@ -5,15 +5,19 @@
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
-    <div id="titleDiv"><img id="titleImg" /></div>
+
-    <div id="canvasDiv"></div>
+    <img id="img-title" />
-    <div id="infoDiv">
+
-      Teclas:
+    <div id="div-canvas">
-      <ul>
+
-        <li>c - anal</li>
-        <li>f - vaginal</li>
-        <li>b - oral</li>
-      </ul>
     </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>
+
 </html>

assets/style.css

@@ -1,26 +0,0 @@
-body {
-    background-color: #0000C8;
-    color: #FFF;
-}
-
-div#canvasDiv {
-    border-style: solid;
-    border-color: #C80000;
-    height: 272px;
-}
-
-div#canvasDiv, div#titleDiv, div#infoDiv {
-    width: 512px;
-    padding: 0;
-    margin: 0 auto;
-}
-
-div#titleDiv {
-    text-align:center;
-    margin: 20px auto;
-}
-
-div#infoDiv {
-    margin: 20px auto;
-}
-

assets/style.scss

@@ -0,0 +1,63 @@
+body {
+    background-color: #0000C8;
+    color: #FFF;
+    text-align: center;
+}
+
+div#div-canvas {
+    border-width: 1px;
+    border-style: solid;
+    border-color: #FFF;
+    margin: 0 auto;
+}
+
+img#img-title {
+    text-align:center;
+    margin: 20px auto;
+}
+
+ul#ul-teclas {
+
+    &.hidden {
+        display: none;
+    }
+
+    user-select: none;
+    list-style-type: none;
+    display: inline-block;
+    text-align: center;
+    padding: 0px;
+    margin: 20px auto;
+
+    li {
+
+        display: inline-block;
+        font-family: monospace;
+        font-size: 30px;
+        text-align: center;
+        border: 1px solid white;
+        width: 70px;
+        height: 60px;
+        display: inline-block;
+        background-color: #000;
+        padding: 10px 5px 10px 5px;
+
+        div {
+            font-size: 16px;
+        }
+
+        &:not(:last-child) {
+            margin-right: 20px;
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:active {
+            background-color: #111;
+        }
+
+    }
+
+}

package.json

@@ -28,6 +28,8 @@
     "handlebars-loader": "^1.4.0",
     "html-webpack-plugin": "^2.22.0",
     "json-loader": "^0.5.4",
+    "node-sass": "^3.10.1",
+    "sass-loader": "^4.0.2",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
     "webpack": "^1.13.2",

webpack.config.js

@@ -15,7 +15,8 @@ module.exports = {
             { test: /\.css$/, loader: "style!css" },
             { test: /\.json$/, loader: "json" },
             { test: /\.hbs$/, loader: "handlebars-loader" },
-            { test: /\.(woff|png|jpg|gif)$/, loader: 'url-loader?limit=10000' }
+            { test: /\.(woff|png|jpg|gif)$/, loader: 'url-loader?limit=10000' },
+            { test: /\.scss$/, loaders: ["style", "css", "sass"] }
         ]
     },
     plugins: [