Clean pull request for human snipe user interface.

Gruntfile.js

@@ -18,10 +18,27 @@ module.exports = function (grunt) {
                     'src/style/style.css': 'src/style/style.scss'
                 }
             }
-        }
+        },
+        watch: {
+            sass: {
+                files: ['**/*.scss'],
+                tasks: ['sass'],
+                options: {
+                spawn: false,
+                },
+            },
+            ts: {
+                 files: ['**/*.ts','**/**/*.ts','**/**/**/*.ts','**/**/**/**/*.ts'],
+                    tasks: ['ts'],
+                    options: {
+                    spawn: false,
+                },
+            }
+        },
     });
 
+    grunt.loadNpmTasks('grunt-contrib-watch');
     grunt.loadNpmTasks('grunt-ts');
     grunt.loadNpmTasks('grunt-sass');
-    grunt.registerTask('default', ['ts', 'sass']);
+    grunt.registerTask('default', ['ts', 'sass','watch']);
 };

Procfile

@@ -0,0 +1 @@
+web: node app.js

app.js

@@ -0,0 +1,5 @@
+var express = require('express');
+var port = process.env.PORT || 3000;
+var app = express();
+app.use(express.static(__dirname + '/src'));
+app.listen(port);

package.json

@@ -4,6 +4,7 @@
     "devDependencies": {
         "grunt": "~0.4.5",
         "grunt-contrib-uglify": "^2.0.0",
+        "grunt-contrib-watch": "^1.0.0",
         "grunt-sass": "^1.2.0",
         "grunt-ts": "^6.0.0-beta.3",
         "load-grunt-tasks": "^3.5.2",
@@ -13,5 +14,8 @@
         "type": "git",
         "url": "https://github.com/GediminasMasaitis/PokeEase.git"
     },
-    "license": "GPL-3.0"
+    "license": "GPL-3.0",
+    "dependencies": {
+        "express": "^4.14.0"
+    }
 }

src/index-design.html

@@ -41,6 +41,12 @@
                     <span>8</span>/9
                 </div>
             </div>
+             <div class="item" id="snipes">
+                <div class="counter">
+                    <span>142</span>/151
+                </div>
+            </div>
+
             <div class="item" id="settings">
             </div>
             <div class="help">

src/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link href="external/leaflet.css" rel="stylesheet" />
     <link rel="stylesheet" type="text/css" href="style/style.css">
+    <link rel="stylesheet" type="text/css" href="style/animation.css">
     <link rel="stylesheet" type="text/css" href="external/jquery.qtip.min.css">
     <meta charset="utf-8" />
     <link rel="icon" sizes="16x16" href="images/favicon.png">
@@ -88,6 +89,11 @@
                             <span class="current">0</span>/<span class="total">9</span>
                         </div>
                     </div>
+                    <div class="item" id="snipes" title="Snipable Pokemons">
+                        <div class="counter">
+                            <span class="current">00</span>
+                        </div>
+                    </div>
                     <div class="item" id="settings">
                     </div>
 
@@ -752,7 +758,7 @@ <h6 class="setting-name"> Foo </h6>
 
                                 </div>
                             </div>
-
+                            <div class="content" data-category="snipes"></div>
                         </div>
 
                         <div id="settings-buttons" class="disabled">

src/script/interface-scripts.js

@@ -15,7 +15,7 @@ $(document).ready(function () {
     $("#menu .item").click(function() {
         var PopupTitle = $(this).attr('id');
         $("#popup").stop().fadeIn(300);
-        $("#popup .title span").text($(this).attr('id'));
+        $("#popup .title span").text($(this).attr('title') || $(this).attr('id'));
         $("#popup .title").css('background-color', $(this).css('background-color'));
         $("#popup .content").each(function() {
             $(this).hide();