Adding messages

package.json

@@ -9,7 +9,7 @@
     "del": "^1.1.1",
     "event-stream": "^3.2.1",
     "express": "^4.11.0",
-    "gulp": "^3.8.10",
+    "gulp": "^3.8.11",
     "gulp-connect": "^2.2.0",
     "gulp-durandal": "^1.1.7",
     "gulp-jshint": "^1.9.0",

web/app/settings.local

@@ -1,5 +1,15 @@
 define(function() {
 	return {
-		optimlolApiUrl: "http://localhost:8080/"
+		optimlolApiUrl: "http://api.optimlol.com/",
+		messages: [
+			{
+				"id": 0,
+				"message": "There has been an EXPLOSION of activity ever since the "Useful Websites" reddit post and I want to thank each and every person who is now using OptimLoL!!! Look forward to more features coming soon!!!"
+			},
+			{
+				"id": 1,
+				"message": "Currently the 'Parse Chat Log' feature only works in English, Spanish, and Portuguese. If you are using another language, please send an e-mail with your chat log to [email protected] so I can add support for your language!"
+			}
+		]
 	}
 });

web/app/settings.prod

@@ -1,5 +1,15 @@
 define(function() {
 	return {
-		optimlolApiUrl: "http://api.optimlol.com/"
+		optimlolApiUrl: "http://api.optimlol.com/",
+		messages: [
+			{
+				"id": 0,
+				"message": "There has been an EXPLOSION of activity ever since the "Useful Websites" reddit post and I want to thank each and every person who is now using OptimLoL!!! Look forward to more features coming soon!!!"
+			},
+			{
+				"id": 1,
+				"message": "Currently the 'Parse Chat Log' feature only works in English, Spanish, and Portuguese. If you are using another language, please send an e-mail with your chat log to [email protected] so I can add support for your language!"
+			}
+		]
 	}
 });

web/app/viewmodels/optimlol.js

@@ -5,8 +5,9 @@
 	'dataProviders/shortenedUrlDataProvider',
 	'presentationObjects/summonerPresentationObject',
 	'common/collectionSorter',
-	'singleton/session'],
-	function (durandal, app, router, SummonersDataProvider, ShortenedUrlDataProvider, SummonerPresentationObject, collectionSorter, session) {
+	'singleton/session',
+	'settings'],
+	function (durandal, app, router, SummonersDataProvider, ShortenedUrlDataProvider, SummonerPresentationObject, collectionSorter, session, settings) {
 	return function() {
 		var self = this;
 		var NUMBER_OF_SUMMONERS = 5;
@@ -195,9 +196,26 @@
 			$('.share-url').select();
 		};
 
+		var _setStatusMessages = function() {
+			var clearedMessages = session.get('clearedMessages');
+
+			if (clearedMessages) {
+				clearedMessages = clearedMessages.split(',');
+
+				settings.messages.forEach(function(message) {
+					if (!clearedMessages.indexOf(message.id)) {
+						self.statusMessages.push(message);
+					}
+				})
+			} else {
+				self.statusMessages(settings.messages);
+			}
+		}
+
 		self.summonerInputs = [];
 		self.selectedRegion = ko.observable(session.get('region'));
 		self.validSummoners = ko.observableArray([]);
+		self.statusMessages = ko.observableArray([]);
 		self.chatText = ko.observable("");
 		self.shareUrl = ko.observable("");
 		self.noStatsText = ko.observable("");
@@ -295,12 +313,29 @@
 			}
 		};
 
+		self.clearMessage = function(messageObject) {
+			var clearedMessages = session.get('clearedMessages');
+			console.log("clearedMessages", clearedMessages);
+
+			if (clearedMessages) {
+				clearedMessages = clearedMessages.split(',');
+				clearedMessages.push(messageObject.id);
+				clearedMessages = clearedMessages.join();
+			} else {
+				clearedMessages = messageObject.id;
+			}
+
+			session.set('clearedMessages', clearedMessages);
+			self.statusMessages.remove(messageObject);
+		}
+
 		self.activate = function(shareUrl, queryString) {
 			if (window.__gaTracker && typeof window.__gaTracker === 'function') {
 				window.__gaTracker('send', 'pageview', '/');
 			}
 
 			_initializeSummonerInputs();
+			_setStatusMessages();
 
 			if (queryString) {
 				if (queryString.region) {
@@ -309,7 +344,6 @@
 				}
 			}
 
-
 			if (shareUrl) {
 				shortenedUrlDataProvider.getData(shareUrl)
 					.then(function(shortUrlData) {

web/app/views/optimlol.html

@@ -1,4 +1,10 @@
 <div>
+    <div class="notifications" data-bind="foreach: statusMessages">
+        <div class="message-box">
+            <label class="message" data-bind="text: message"></label>
+            <button type="button" class="close" data-bind="click: $parent.clearMessage">x</button>
+        </div>
+    </div>
     <div class="search">
         <div class="logo-optimlol"></div>
         <div>Enter the Summoner Names of everyone in champion select:</div>

web/appDependencies/sass/_optimlol.scss

@@ -1,7 +1,22 @@
-.notification {
+.notifications {
     width: 80%;
     text-align: center;
     margin: auto;
+
+    .message-box {
+        padding: 15px;
+        margin-bottom: 20px;
+        border: 1px solid transparent;
+        border-radius: 4px;
+        background-color: #fcf8e3;
+        border-color: #faebcc;
+        color: #8a6d3b;
+        margin-bottom: 5px;
+
+        .message {
+            font-weight: 400;
+        }
+    }
 }
 
 .search {