Sort views together and add Bar

Gruntfile.js

@@ -12,7 +12,7 @@ module.exports = function (grunt) {
     });
 
     var sourceDir = {
-        js: ["src/js/utils/**/*.js", "src/js/**/*.js"],
+        js: ["src/js/utils/**/*.js", "src/js/**/*.js"], // Load utils before
         css: "src/css/**/*.less",
         img: {
             icons: "src/img/icons/**/*.png",

src/css/animations.less

@@ -5,7 +5,6 @@
     }
     50% {
         opacity: 1;
-        transform: scale(.5);
     }
     to {
         opacity: 0;

src/css/base.less

@@ -1,4 +1,6 @@
-.initPseudo(){
+@import (reference) "animations";
+
+.initPseudo () {
     content: "";
     position: absolute;
     top: 0;
@@ -21,10 +23,32 @@ body {
     font-size: 16px;
 }
 
-.bar {
+.Bar {
     width: 100%;
     height: 7px;
     margin-bottom: 2px;
+
+    .value {
+        width: 100%;
+        height: 100%;
+        border-radius: 0 5px 0 0;
+        transition: width ease-out .5s;
+    }
+
+    &.warning .value {
+        animation: flash .4s infinite alternate;
+    }
+
+    &.ongoing .value {
+        animation-name: ongoing;
+        animation-timing-function: linear;
+    }
+}
+.colorBar (@color) {
+    background-color: fade(@color, 10%);
+    .value {
+        background-color: @color;
+    }
 }
 
 @resourceListHeight: (16 + 5) * 2px;

src/css/events.less

@@ -1,3 +1,5 @@
+@import (reference) "base";
+
 #eventList {
     position: absolute;
     bottom: 0;
@@ -7,13 +9,8 @@
 
     .Event {
 
-        .bar {
-            background-color: #f5eb57;
-        }
-
-        &.ongoing .bar{
-            animation-name: ongoing;
-            animation-timing-function: linear;
+        .Bar.timer {
+            .colorBar(#f5eb57);
         }
     }
 }

src/css/people.less

@@ -42,19 +42,13 @@
             color: #333;
         }
 
-        .bar {
-            transition: width ease-out .5s;
-
+        .Bar {
             &.life {
-                background-color: #f52158;
+                .colorBar(#f52158);
             }
 
             &.energy {
-                background-color: #19f5ba;
-            }
-
-            &.warning {
-                animation: flash .4s infinite alternate;
+                .colorBar(#19f5ba);
             }
         }
 

src/css/resources.less

@@ -3,13 +3,10 @@
 #resourceList {
     padding: 0 5px;
     background-color: #b57052;
+    height: @resourceListHeight;
     line-height: @resourceListHeight;
     display: flex;
 
-    &:empty:before {
-        content: "A vast empty desert";
-    }
-
     .Resource {
         display: inline-block;
         margin-right: 16px;

src/js/managers/data_manager.js

@@ -1238,7 +1238,7 @@ var DataManager = (function () {
                     effect: function (isOn) {
                         this.flags.drought = isOn;
                     },
-                    dropRate: 6,
+                    dropRate: 10,
                     log: "A harsh drought has fall, water will be more important than ever."
                 }
             }

src/js/managers/timer_manager.js

@@ -92,7 +92,7 @@ var TimerManager = (function () {
         },
         /**
          * Stop a timer
-         * @param {Number} timerId
+         * @param {String} timerId
          * @return {*}
          */
         stop: function (timerId) {
@@ -108,7 +108,7 @@ var TimerManager = (function () {
         },
         /**
          * Restart a timer
-         * @param {Number} timerId
+         * @param {String} timerId
          * @return {*}
          */
         restart: function (timerId) {
@@ -125,7 +125,7 @@ var TimerManager = (function () {
         },
         /**
          * Stop a timer and remove it from the list
-         * @param {Number} timerId
+         * @param {String} timerId
          * @return {*}
          */
         clear: function (timerId) {
@@ -141,7 +141,7 @@ var TimerManager = (function () {
         },
         /**
          * Return remaining time on a timer
-         * @param {Number} timerId - Id of a running timer
+         * @param {String} timerId - Id of a running timer
          * @return {Number} Remaining time in ms
          * @throws RangeError
          */

src/js/models/action.js

@@ -280,15 +280,13 @@ Action.extends(Model, "Action", /** @lends Action.prototype */ {
         }
 
         // Log
-        var logData = (option && option.log) || this.data.log;
-        var rawLog = "";
-        if (logData) {
-            if (isFunction(logData)) {
-                rawLog = logData(effect, this);
-            }
-            else {
-                rawLog = logData;
-            }
+        var logData = (option && option.log) || this.data.log || "";
+        var rawLog;
+        if (isFunction(logData)) {
+            rawLog = logData(effect, this);
+        }
+        else {
+            rawLog = logData;
         }
         var log = LogManager.personify(rawLog, effect);
         MessageBus.notify(effect.logType || MessageBus.MSG_TYPES.LOGS.INFO, capitalize(log));

src/js/models/event.js

@@ -34,8 +34,9 @@ Event.extends(Model, "Event", /** @lends Event.prototype */ {
 
         this.nameNode = wrap("name", capitalize(this.data.name));
         html.appendChild(this.nameNode);
-        this.progressBar = wrap("animated bar");
-        html.appendChild(this.progressBar);
+
+        this.progressBar = new Bar("timer animated");
+        html.appendChild(this.progressBar.html);
 
         return html;
     },
@@ -47,7 +48,10 @@ Event.extends(Model, "Event", /** @lends Event.prototype */ {
     start: function (callback) {
         popup(this.data, function () {
             // Effect
-            this.data.effect(true);
+            var effect = {
+                event: this.data
+            };
+            this.data.effect(true, this, effect);
 
             if (this.data.time) {
                 MessageBus.notify(MessageBus.MSG_TYPES.EVENT_START, this);
@@ -57,22 +61,39 @@ Event.extends(Model, "Event", /** @lends Event.prototype */ {
                     duration += random(-this.data.deltaTime, this.data.deltaTime);
                 }
 
-                this.progressBar.style.animationDuration = duration + "ms";
-                this.html.classList.add("ongoing");
-
+                this.progressBar.run(duration);
                 this.timer = TimerManager.timeout(this.end.bind(this), duration);
             }
             if (callback) {
                 callback(this);
             }
+
+            var rawLog;
+            if (isFunction(this.data.log)) {
+                rawLog = this.data.log(effect, this);
+            }
+            else {
+                rawLog = this.data.log || "";
+            }
+            var log = LogManager.personify(rawLog, effect);
+            MessageBus.notify(effect.logType || MessageBus.MSG_TYPES.LOGS.EVENT, capitalize(log));
         }.bind(this), "event");
         return !!this.data.time;
     },
+    /**
+     * Cancel a running event
+     */
+    cancel: function () {
+        if (this.timer) {
+            TimerManager.stop(this.timer);
+            this.end();
+        }
+    },
     /**
      * End the event
      */
     end: function () {
-        this.data.effect(false);
+        this.data.effect(false, this);
         this.timer = null;
         MessageBus.notify(MessageBus.MSG_TYPES.EVENT_END, this);
 

src/js/models/game.js

@@ -280,17 +280,7 @@ GameController.extends(Model, "GameController", {
 
                 // Random event can happen
                 if (!this.flags.popup && random() < DataManager.data.events.dropRate) {
-                    var eventData = this.getRandomEvent();
-                    // in the right conditions
-                    if (eventData) {
-                        var event = new Event(eventData);
-                        this.flags.popup = event.start(function (event) {
-                            if (event.data.time) {
-                                this.eventsList.appendChild(event.html);
-                            }
-                            this.flags.popup = false;
-                        }.bind(this));
-                    }
+                    this.startEvent(this.getRandomEvent());
                 }
             }
 
@@ -510,6 +500,22 @@ GameController.extends(Model, "GameController", {
         else {
             return null;
         }
+    },
+    /**
+     * Start an event
+     * @param {EventData} eventData - The event's data
+     */
+    startEvent: function (eventData) {
+        // in the right conditions
+        if (eventData) {
+            var event = new Event(eventData);
+            this.flags.popup = event.start(function (event) {
+                if (event.data.time) {
+                    this.eventsList.appendChild(event.html);
+                }
+                this.flags.popup = false;
+            }.bind(this));
+        }
     }
 });
 if (IS_DEV) {

src/js/models/people.js

@@ -60,6 +60,16 @@ People.extends(Model, "People", /** @lends People.prototype */ {
      */
     _init: function () {
         this.setPronouns();
+        // Tooltip on health bar
+        new Tooltip(this.lifeBar.html, {
+            name: "Health",
+            desc: "The first thing you want is a good health."
+        });
+        // Tooltip on energy bar
+        new Tooltip(this.energyBar.html, {
+            name: "Energy",
+            desc: "Drained faster when busy or hungry."
+        });
     },
     /**
      * Return HTML for display
@@ -73,19 +83,11 @@ People.extends(Model, "People", /** @lends People.prototype */ {
         nameNode.appendChild(this.perkNode);
         html.appendChild(nameNode);
 
-        this.lifeBar = wrap("bar life");
-        new Tooltip(this.lifeBar, {
-            name: "Health",
-            desc: "The first thing you want is a good health."
-        });
+        this.lifeBar = new Bar("life", 25);
+        html.appendChild(this.lifeBar.html);
 
-        html.appendChild(this.lifeBar);
-        this.energyBar = wrap("bar energy");
-        new Tooltip(this.energyBar, {
-            name: "Energy",
-            desc: "Drained faster when busy or hungry."
-        });
-        html.appendChild(this.energyBar);
+        this.energyBar = new Bar("energy");
+        html.appendChild(this.energyBar.html);
 
         this.actionList = wrap("actionList");
         html.appendChild(this.actionList);
@@ -184,7 +186,7 @@ People.extends(Model, "People", /** @lends People.prototype */ {
             this.energy = 0;
         }
 
-        this.energyBar.style.width = this.energy + "%";
+        this.energyBar.set(this.energy);
 
         return this.energy;
     },
@@ -208,8 +210,7 @@ People.extends(Model, "People", /** @lends People.prototype */ {
         else if (this.life < 0) {
             this.die();
         }
-        this.lifeBar.style.width = this.life + "%";
-        this.lifeBar.classList[this.life < 25 ? "add" : "remove"]("warning");
+        this.lifeBar.set(this.life);
         return this.life;
     },
     /**

src/js/utils/collection.js

@@ -11,17 +11,19 @@ Collection.prototype = {
      * Add an item
      * @param {String} [id] - ID of the item
      * @param {*} item - The item to insert
-     * @return {number|Boolean} Collection length or false if already included
+     * @return {String|Boolean} The inserted id or false if already included
      */
     push: function (id, item) {
         if (isUndefined(item)) {
             item = id;
             id = item.id || this.length + 1;
         }
+        id = id.toString();
 
         if (!this.has(id)) {
             this.items[id] = item;
-            return ++this.length;
+            ++this.length;
+            return id;
         }
         else {
             return false;