Merge pull request #338 from jeffreykirchner/dev

Refactor chat text processing and display logic

Author: jeffreykirchner

main/consumers/staff/session_consumer_mixins/subject_updates.py

@@ -5,15 +5,13 @@
 
 from asgiref.sync import sync_to_async
 from decimal import Decimal
-from textwrap import TextWrapper
 
 from django.db import transaction
-from django.db.models.fields.json import KT
+from django.utils.html import strip_tags
 
 from main.models import SessionPlayer
 from main.models import Session
 from main.models import SessionEvent
-from django.utils.decorators import method_decorator
 
 from datetime import datetime, timedelta
 
@@ -68,14 +66,14 @@ async def chat(self, event):
             session_player = self.world_state_avatars_local["session_players"][str(player_id)]
             session_player["current_location"] = current_location
 
-            result["text"] = event_data["text"]
-            result["text_limited"] = await self.do_limited_chat(event_data["text"])
+            result["text"] = strip_tags(event_data["text"])
+            result["text_limited"] = await self.do_limited_chat(strip_tags(event_data["text"]))
             result["nearby_players"] = []
 
             #format text for chat bubbles
-            wrapper = TextWrapper(width=13, max_lines=6)
-            result['text'] = wrapper.fill(text=result['text'])
-            result['text_limited'] = wrapper.fill(text=result['text_limited'])
+            # wrapper = TextWrapper(width=13, max_lines=6)
+            # result['text'] = wrapper.fill(text=result['text'])
+            # result['text_limited'] = wrapper.fill(text=result['text_limited'])
 
             #find nearby players
             session_players = self.world_state_avatars_local["session_players"]

main/templates/subject/subject_home/chat/chat_card.js

@@ -2,8 +2,33 @@ send_chat: function send_chat(){
 
     if(app.working) return;
     if(app.chat_text.trim() == "") return;
-    if(app.chat_text.trim().length > 200) return;
-    if(app.session.world_state.avatars[app.session_player.id].sleeping) return;
+    if(app.chat_text.trim().length > 100) return;
+
+    let chat_bubble_sprite = PIXI.Sprite.from(app.pixi_textures.sprite_sheet_2.textures["chat_bubble.png"]);
+    let style = new PIXI.TextStyle({fontFamily : 'Arial',
+                                    fontSize: 18, 
+                                    fill :0x000000, 
+                                    align : 'left',
+                                    wordWrap: true,
+                                    wordWrapWidth: chat_bubble_sprite.width-25,
+                                    breakWords: true})
+    const textMetrics = PIXI.CanvasTextMetrics.measureText(app.chat_text.trim(), style)
+
+    let chat_text_processed ="";
+
+    for(let i=0; i<textMetrics.lines.length; i++)
+    {
+        chat_text_processed += textMetrics.lines[i];
+
+        if(i==5 || i==textMetrics.lines.length-1) break;
+
+        chat_text_processed += "\n";
+    }
+
+    if(textMetrics.lines.length > 6)
+    {
+        chat_text_processed += "...";
+    }
 
     if(app.session.world_state.current_experiment_phase == 'Instructions')
     {
@@ -13,7 +38,7 @@ send_chat: function send_chat(){
     {
         app.working = true;
         app.send_message("chat", 
-                        {"text" : app.chat_text.trim(),
+                        {"text" : chat_text_processed,
                         "current_location" : app.session.world_state_avatars.session_players[app.session_player.id].current_location,},
                         "group");
     }

main/templates/subject/subject_home/the_stage/avatars.js

@@ -278,7 +278,7 @@ setup_pixi_subjects: function setup_pixi_subjects()
         chat_container.addChild(chat_bubble_sprite);
         chat_container.addChild(chat_bubble_text);
 
-        chat_bubble_text.position.set(-14 * app.session.parameter_set.avatar_scale, -chat_container.height*.09)
+        chat_bubble_text.position.set(app.session.parameter_set.avatar_scale, -chat_container.height*.085)
         chat_bubble_text.anchor.set(0.5);
 
         pixi_avatars[i].chat_container = chat_container;

main/templates/subject/subject_home/the_stage/the_stage_card.html

@@ -100,27 +100,33 @@
                 </button>
             </div>
 
-            <div class="col-md-4">                 
-                <span class="input-group">
-                    <input type="text" 
-                           class="form-control" 
-                           placeholder="Chat Text" 
-                           v-model="chat_text"
-                           aria-label="Chat Text"                           
-                           v-on:keyup.enter="send_chat()"
-                           aria-describedby="send_chat_id">
-                    <button class="btn btn-outline-primary"
-                            type="button" 
-                            id="send_chat_id" 
-                            title="Send Chat"
-                            v-bind:disabled="reconnecting || 
-                                             working || 
-                                             session.started===false || 
-                                             session.world_state.finished ||
-                                             session.world_state.avatars[session_player.id].sleeping"
-                            v-on:click="send_chat()">Chat <i class="far fa-comments"></i>
-                    </button>
-                </span>
+            <div class="col-4">
+                <div class="row">
+                    <div class="col">
+                        <div class="input-group">
+                            <input type="text" 
+                                class="form-control form-control-lg" 
+                                placeholder="Chat Text" 
+                                v-model="chat_text"
+                                id="id_chat_text"
+                                aria-label="Chat Text"                           
+                                v-on:keyup.enter="send_chat()"
+                                maxlength="100"
+                                aria-describedby="send_chat_id">
+                            <button class="btn btn-outline-primary btn-lg"
+                                    type="button" 
+                                    id="send_chat_id" 
+                                    v-bind:disabled="reconnecting || working || session.started===false || session.world_state.finished"
+                                    v-on:click="send_chat()">Chat <i class="far fa-comments"></i></button>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="row">
+                    <div class="col text-end pe-4 text-secondary">
+                        [[chat_text.length]]/100
+                    </div>
+                </div>
             </div>
 
             <div class="col-md-4">