Add a chat log

Author: Batiste Bieler

chat/views.py

@@ -5,6 +5,7 @@
 from django.http import HttpResponse
 from gevent.event import Event
 from django.conf import settings
+from django.utils.html import escape
 
 from chat.models import Map
 
@@ -91,7 +92,7 @@ def player_update_position(self, request):
 
     def message_new(self, request):
         key = request.COOKIES['rpg_key']
-        msg = request.POST['body']
+        msg = escape(request.POST['body'])
         player = self.get_player(key)
         player['last_message'] = msg
         self.new_room_event(['last_message', [key, msg]])

static/game.css

@@ -1,6 +1,6 @@
 
 #main {
-    width:760px;
+    width:770px;
     margin:0 auto;
 }
 
@@ -31,10 +31,30 @@ body {
     background:#666;
 }
 
-#tileset-container {
+#right-container {
+    width:188px;
     float:right;
     color:#fff;
 }
+
+#chat-log {
+    border:1px #666 solid;
+    padding:10px;
+    list-style:none;
+    height:270px;
+    overflow:auto;
+}
+
+#chat-log li {
+    padding:0;
+    margin:0;
+    color:#eee;
+}
+
+#chat-log li span{
+    color:#aaa;
+}
+
 #grid-serialized {
     width:600px;
     height:100px;

static/game.js

@@ -259,7 +259,11 @@ $(function() {
     Player.prototype.say = function(message) {
         clearTimeout(this.message_timeout);
         var el = this.message_element;
-        this.message_element.text(message);
+        var chat_log_item = $('<li></li>');
+        chat_log_item.html('<span>' + this.pname + ':</span> ' + message);
+        $('#chat-log').append(chat_log_item)
+        $('#chat-log').scrollTop(1000)
+        this.message_element.html(message);
         this.message_element.slideDown("slow");
         var _hide_message = function(){el.slideUp("slow");}
         this.message_timeout = setTimeout(_hide_message, 12000);

templates/index.html

@@ -9,11 +9,13 @@
     <div id="main">
         <p id="room_data"><span id="room_name">{{ map.name }}</span>
             (<span id="room_x">{{ map.x }}</span>, <span id="room_y">{{ map.y }}</span></span>)</p>
-        <div id="tileset-container">
+        <div id="right-container">
             <img src="{{MEDIA_URL}}tileset.png" id="tileset">
             <br>
             <input id="save-map" type="submit" value="Save map">
             <span id="save-message" style="display:none">Map saved.</span>
+
+            <ul id="chat-log"></ul>
         </div>
 
         <div id="map"></div>
@@ -24,7 +26,6 @@
         </form>
         <input type="button" value="Magic" id="magic">
         </div>
-        
         <div id="select"></div>
     </div>
     <script>