Challenge: Emoticons.

.meteor/packages

@@ -22,3 +22,4 @@ twbs:bootstrap
 ian:accounts-ui-bootstrap-3
 msavin:mongol
 check
+davidfrancisco:twemoji

.meteor/versions

@@ -14,6 +14,7 @@ caching-compiler@1.0.0
 caching-html-compiler@1.0.2
 callback-hook@1.0.4
 check@1.1.0
+davidfrancisco:twemoji@1.5.0
 dburles:mongo-collection-instances@0.3.4
 ddp@1.2.2
 ddp-client@1.2.1

client/chat_message.html

@@ -3,6 +3,6 @@
   <div class="row">
     <div class="col-xs-1 thumbnail"><img src="/{{ sender.profile.avatar }}" alt="Avatar of user {{ sender.profile.username }}" /></div>
     <div class="col-md-1">{{ sender.profile.username }}</div>
-    <div class="col-md-10">{{ message.text }}</div>
+    <div class="col-md-10">{{#emoji }}{{ message.text }}{{/emoji}}</div>
   </div>
 </template>

client/chat_page.js

@@ -4,9 +4,6 @@ Template.chat_page.helpers({
     const chat = Chats.findOne({ _id: Session.get("chatId") });
     console.log("messages context", this, chat.messages);
     return chat.messages;
-  },
-
-  other_user: function () {
   }
 });
 

client/minstant.css

@@ -1,10 +1,15 @@
 /* CSS declarations go here */
+.user_avatar {
+  min-height: 100px;
+  text-align: center; }
 
-.user_avatar{
-	min-height:100px;
-	text-align: center;
+.avatar_img {
+  height: 75px; }
 
-}
-.avatar_img{
-	height:75px;
-}
+img.emoji {
+  height: 1em;
+  width: 1em;
+  margin: 0 .05em 0 .1em;
+  vertical-align: -0.1em; }
+
+/*# sourceMappingURL=minstant.css.map */

client/minstant.html

@@ -21,7 +21,17 @@
 
   <div class="container">
     <div class="panel panel-default">
-      <div class="panel-body">Users are now sorted by name, unlike the original code. Try chatting with someone without logging in.</div>
+      <div class="panel-body">
+        <ul class="list-group">
+          <li class="list-group-item">Users are now sorted by name, unlike the original code.</li>
+          <li class="list-group-item">Try chatting with someone without logging in.</li>
+          <li class="list-group-item">
+            Try emoticons like ":smiley:" or ":bowtie"
+            to get {{>emoji ":smiley:" }} or {{>emoji ":bowtie:" }}.
+          </li>
+          <li class="list-group-item">Use emoticons from this <a href="http://www.emoji-cheat-sheet.com/">Cheat sheet</a>.</li>
+        </ul>
+      </div>
     </div>
   </div>
 </template>

client/minstant.scss

@@ -0,0 +1,17 @@
+/* CSS declarations go here */
+
+.user_avatar{
+	min-height:100px;
+	text-align: center;
+
+}
+.avatar_img{
+	height:75px;
+}
+
+img.emoji {
+	height: 1em;
+	width: 1em;
+	margin: 0 .05em 0 .1em;
+	vertical-align: -0.1em;
+}

lib/ChatManager.js

@@ -12,10 +12,12 @@ ChatManager = class ChatManager {
   }
 
   /**
-   * Order two comparable objects as min, max
+   * Order two comparable objects (usually strings) as min, max.
    *
    * @param {Object} s1
+   *   The first object.
    * @param {Object} s2
+   *   The second object.
    * @returns {*[]}
    *   An array of the two objects, minimum first, maximum last.
    */
@@ -76,6 +78,7 @@ ChatManager = class ChatManager {
    *
    * @param {Object} chat
    *   A chat object, with user1Id, user2Id, and messages keys.
+   *
    * @returns {String}
    *   The id of the inserted chat document.
    */
@@ -97,6 +100,8 @@ ChatManager = class ChatManager {
    *   A chat object, with user1Id, user2Id, and messages keys.
    * @param {String} chatValue
    *   The message to push.
+   *
+   * @returns {void}
    */
   static pushMessageMethod(chat, chatValue) {
     check(chat, {

server/server.js

@@ -35,6 +35,5 @@ Meteor.startup(function () {
   Meteor.publish("users", function () {
     return Meteor.users.find();
   });
-
 });