From a8f9dec1907b342860595174f577e5e661550b47 Mon Sep 17 00:00:00 2001 From: "marcins78@gmail.com" Date: Mon, 12 Sep 2011 20:51:02 +0000 Subject: [PATCH] Adding the chat to the games themselves. --- .../com/gempukku/lotro/chat/ChatRoom.java | 4 + gemp-lotr/gemp-lotr-web/pom.xml | 5 + .../gempukku/lotro/server/ServerResource.java | 8 +- .../gemp-lotr-web/src/main/webapp/game.html | 7 +- .../gemp-lotr-web/src/main/webapp/index.html | 19 ++- .../gemp-lotr-web/src/main/webapp/js/chat.js | 31 +++- .../src/main/webapp/js/gameUi.js | 139 ++++++++++-------- 7 files changed, 139 insertions(+), 74 deletions(-) diff --git a/gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/chat/ChatRoom.java b/gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/chat/ChatRoom.java index ce026a4da..27ece0ccb 100644 --- a/gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/chat/ChatRoom.java +++ b/gemp-lotr/gemp-lotr-server/src/main/java/com/gempukku/lotro/chat/ChatRoom.java @@ -10,6 +10,10 @@ public class ChatRoom { private LinkedList _lastMessages = new LinkedList(); private Map _chatRoomListeners = new HashMap(); + public ChatRoom() { + postMessage("System", "Welcome to the room"); + } + public void postMessage(String from, String message) { ChatMessage chatMessage = new ChatMessage(new Date(), from, message); _lastMessages.add(chatMessage); diff --git a/gemp-lotr/gemp-lotr-web/pom.xml b/gemp-lotr/gemp-lotr-web/pom.xml index 1ee810150..14a5e7e53 100644 --- a/gemp-lotr/gemp-lotr-web/pom.xml +++ b/gemp-lotr/gemp-lotr-web/pom.xml @@ -17,6 +17,11 @@ gemp-lotr-server ${project.version} + + commons-lang + commons-lang + 2.6 + javax.servlet servlet-api diff --git a/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/ServerResource.java b/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/ServerResource.java index 6d866ace8..4078cf962 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/ServerResource.java +++ b/gemp-lotr/gemp-lotr-web/src/main/java/com/gempukku/lotro/server/ServerResource.java @@ -17,6 +17,7 @@ import com.gempukku.lotro.game.ParticipantCommunicationVisitor; import com.gempukku.lotro.logic.decisions.AwaitingDecision; import com.gempukku.lotro.logic.timing.Action; import com.sun.jersey.spi.resource.Singleton; +import org.apache.commons.lang.StringEscapeUtils; import org.apache.log4j.Logger; import org.w3c.dom.Document; import org.w3c.dom.Element; @@ -368,9 +369,14 @@ public class ServerResource { if (chatRoom == null) sendError(Response.Status.NOT_FOUND); - chatRoom.sendMessage(participantId, message); + if (message != null) + chatRoom.sendMessage(participantId, StringEscapeUtils.escapeHtml(message)); + List chatMessages = chatRoom.getPendingMessages(participantId); + if (chatMessages == null) + sendError(Response.Status.NOT_FOUND); + DocumentBuilderFactory documentBuilderFactory = DocumentBuilderFactory.newInstance(); DocumentBuilder documentBuilder = documentBuilderFactory.newDocumentBuilder(); diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html index 44a0dec5b..7ee2c36a0 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/game.html @@ -64,6 +64,7 @@ + @@ -98,12 +99,14 @@ $(document).ready( function () { - ui = new GempLotrGameUI(); communication = new GempLotrCommunication("/gemp-lotr/server", function() { - ui.processError(); + alert("There was a problem communicaiton with server, most likely the game does not exist"); }); + + ui = new GempLotrGameUI(communication); + ui.setUpdateState(function() { communication.updateGameState(function(xml) { ui.processXml(xml); diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/index.html b/gemp-lotr/gemp-lotr-web/src/main/webapp/index.html index b79079cdb..d1d7575ce 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/index.html +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/index.html @@ -19,8 +19,25 @@ + + diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/chat.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/chat.js index cffddf4eb..6d94e2641 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/chat.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/chat.js @@ -4,6 +4,7 @@ var ChatBoxUI = Class.extend({ communication: null, chatMessagesDiv: null, chatTalkDiv: null, + talkBoxHeight: 25, init: function(name, div, communication) { this.name = name; @@ -20,19 +21,28 @@ var ChatBoxUI = Class.extend({ this.communication.startChat(this.name, function(xml) { that.processMessages(xml, true); - }) + }); this.chatTalkDiv.bind("keypress", function(e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { - that.sendMessage($(this).value); + var value = $(this).val(); + that.sendMessage(value); + that.appendMessage("Me: " + that.escapeHtml(value)); + $(this).val(""); } }); }, - setSize: function(width, height) { - this.chatMessagesDiv.css({ position: "absolute", left: 0 + "px", top: 0 + "px", width: width, height: height - 30, overflow: "scroll" }); - this.chatTalkDiv.css({ position: "absolute", left: 0 + "px", top: (height - 30) + "px", width: width, height: 30 }); + escapeHtml: function(text) { + return $('
').text(text).html(); + }, + + setBounds: function(x, y, width, height) { + var talkBoxPadding = 3; + + this.chatMessagesDiv.css({ position: "absolute", left: x + "px", top: y + "px", width: width, height: height - this.talkBoxHeight - 3 * talkBoxPadding, overflow: "auto" }); + this.chatTalkDiv.css({ position: "absolute", left: x + talkBoxPadding + "px", top: y - 2 * talkBoxPadding + (height - this.talkBoxHeight) + "px", width: width - 3 * talkBoxPadding , height: this.talkBoxHeight }); }, appendMessage: function(message) { @@ -40,21 +50,26 @@ var ChatBoxUI = Class.extend({ if ($("p", this.chatMessagesDiv).length > 50) { $("p", this.chatMessagesDiv).first().remove(); } + this.chatMessagesDiv.prop({ scrollTop: this.chatMessagesDiv.prop("scrollHeight") }); }, processMessages: function(xml, processAgain) { var root = xml.documentElement; if (root.tagName == 'chat') { - var messages = element.getElementsByTagName("message"); + var messages = root.getElementsByTagName("message"); for (var i = 0; i < messages.length; i++) { var message = messages[i]; var from = message.getAttribute("from"); var text = message.childNodes[0].nodeValue; - this.appendMessage("" + from + ":" + text); + this.appendMessage("" + from + ": " + text); } + var that = this; + if (processAgain) - setTimeout(this.updateChatMessages, 1000); + setTimeout(function() { + that.updateChatMessages(); + }, 1000); } }, diff --git a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js index 01884019b..6de1e6874 100644 --- a/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js +++ b/gemp-lotr/gemp-lotr-web/src/main/webapp/js/gameUi.js @@ -35,8 +35,13 @@ var GempLotrGameUI = Class.extend({ swipeOptions: null, - init: function() { + chatBoxDiv: null, + chatBox: null, + communication: null, + + init: function(communication) { log("ui initialized"); + this.communication = communication; $.expr[':'].cardId = function(obj, index, meta, stack) { var cardIds = meta[3].split(","); @@ -123,6 +128,12 @@ var GempLotrGameUI = Class.extend({ this.alert.css({"border-radius": "7px"}); $("#main").append(this.alert); + this.chatBoxDiv = $("
"); + this.chatBoxDiv.css({"border-radius": "7px"}); + $("#main").append(this.chatBoxDiv); + + this.chatBox = new ChatBoxUI("Game" + getUrlParam("gameId"), $("#chatBox"), this.communication); + $("body").click( function (event) { that.clickCardFunction(event); @@ -147,7 +158,7 @@ var GempLotrGameUI = Class.extend({ }, displayCardInfo: function(card) { - this.infoDialog.html("
"); + this.infoDialog.html("
"); var cardId = card.cardId; if (cardId.length < 4 || cardId.substring(0, 4) != "temp") @@ -163,52 +174,52 @@ var GempLotrGameUI = Class.extend({ initializeDialogs: function() { this.dialogInstance = $("
") .dialog({ - autoOpen: false, - closeOnEscape: false, - resizable: false, - minHeight: 80 - }); + autoOpen: false, + closeOnEscape: false, + resizable: false, + minHeight: 80 + }); this.assignmentDialog = $("
") .dialog({ - autoOpen: false, - closeOnEscape: false, - title: "Assignments", - resizable: true, - minHeight: 240, - minWidth: 400, - width: 500, - height: 200, - position: ["right", "bottom"] - }); + autoOpen: false, + closeOnEscape: false, + title: "Assignments", + resizable: true, + minHeight: 240, + minWidth: 400, + width: 500, + height: 200, + position: ["right", "bottom"] + }); this.skirmishDialog = $("
") .dialog({ - autoOpen: false, - closeOnEscape: false, - title: "Skirmish", - resizable: true, - minHeight: 240, - minWidth: 400, - width: 500, - height: 200, - position: ["right", "top"] - }); + autoOpen: false, + closeOnEscape: false, + title: "Skirmish", + resizable: true, + minHeight: 240, + minWidth: 400, + width: 500, + height: 200, + position: ["right", "top"] + }); $(".ui-dialog-titlebar-close").hide(); this.infoDialog = $("
") .dialog({ - autoOpen: false, - closeOnEscape: true, - resizable: false, - title: "Card information", - minHeight: 80, - minWidth: 200, - width: 600, - height: 300, - maxHeight: 300 - }); + autoOpen: false, + closeOnEscape: true, + resizable: false, + title: "Card information", + minHeight: 80, + minWidth: 200, + width: 600, + height: 300, + maxHeight: 300 + }); }, @@ -234,7 +245,9 @@ var GempLotrGameUI = Class.extend({ var alertHeight = 120; - this.advPathGroup.setBounds(padding, padding, advPathWidth, height - (padding * 2)); + var chatHeight = 200; + + this.advPathGroup.setBounds(padding, padding, advPathWidth, height - (padding * 3) - chatHeight); this.supportOpponent.setBounds(advPathWidth + specialUiWidth + (padding * 2), padding + yScales[0] * heightPerScale, width - (advPathWidth + specialUiWidth + shadowSupportWidth + padding * 4), heightScales[0] * heightPerScale); this.charactersOpponent.setBounds(advPathWidth + specialUiWidth + (padding * 2), padding * 2 + yScales[1] * heightPerScale, width - (advPathWidth + specialUiWidth + shadowSupportWidth + padding * 4), heightScales[1] * heightPerScale); this.shadow.setBounds(advPathWidth + specialUiWidth + (padding * 2), padding * 3 + yScales[2] * heightPerScale, width - (advPathWidth + specialUiWidth + padding * 3), heightScales[2] * heightPerScale); @@ -244,8 +257,10 @@ var GempLotrGameUI = Class.extend({ this.shadowOpponent.setBounds(width - (shadowSupportWidth + padding), padding, shadowSupportWidth, padding + (heightScales[0] + heightScales[1]) * heightPerScale); this.shadowPlayer.setBounds(width - (shadowSupportWidth + padding), padding * 4 + yScales[3] * heightPerScale, shadowSupportWidth, padding + (heightScales[3] + heightScales[4]) * heightPerScale); - this.gameStateElem.css({ position: "absolute", left: padding * 2 + advPathWidth, top: padding, width: specialUiWidth - padding, height: height - padding * 3 - alertHeight }); - this.alert.css({ position: "absolute", left: padding * 2 + advPathWidth, top: height - padding - alertHeight, width: specialUiWidth - padding, height: alertHeight }); + this.gameStateElem.css({ position: "absolute", left: padding * 2 + advPathWidth, top: padding, width: specialUiWidth - padding, height: height - padding * 4 - alertHeight - chatHeight}); + this.alert.css({ position: "absolute", left: padding * 2 + advPathWidth, top: height - (padding * 2) - alertHeight - chatHeight, width: specialUiWidth - padding, height: alertHeight }); + this.chatBoxDiv.css({ position: "absolute", left: padding, top: height - padding - chatHeight, width: specialUiWidth + advPathWidth, height: chatHeight }); + this.chatBox.setBounds(4, 4, specialUiWidth + advPathWidth - 8, chatHeight - 8); } }, @@ -457,7 +472,7 @@ var GempLotrGameUI = Class.extend({ if (index != -1) cardData.attachedCards.splice(index, 1); } - ); + ); var card = $(".card:cardId(" + cardId + ")"); var cardData = card.data("card"); @@ -522,7 +537,7 @@ var GempLotrGameUI = Class.extend({ if (index != -1) cardData.attachedCards.splice(index, 1); } - ); + ); } card.remove(); @@ -587,13 +602,13 @@ var GempLotrGameUI = Class.extend({ this.dialogInstance .html(text + "
") .dialog("option", "buttons", - { - "OK": function() { - $(this).dialog("close"); - that.decisionFunction(id, $("#integerDecision").val()); - } - } - ) + { + "OK": function() { + $(this).dialog("close"); + that.decisionFunction(id, $("#integerDecision").val()); + } + } + ) .dialog("option", "width", "400") .dialog("option", "height", "auto"); ; @@ -627,13 +642,13 @@ var GempLotrGameUI = Class.extend({ this.dialogInstance .html(html) .dialog("option", "buttons", - { - "OK": function() { - $(this).dialog("close"); - that.decisionFunction(id, $("#multipleChoiceDecision").val()); - } - } - ) + { + "OK": function() { + $(this).dialog("close"); + that.decisionFunction(id, $("#multipleChoiceDecision").val()); + } + } + ) .dialog("option", "width", "400") .dialog("option", "height", "auto"); @@ -966,13 +981,13 @@ var GempLotrGameUI = Class.extend({ if (this.shadowAssignGroups[characterId] == null) { this.shadowAssignGroups[characterId] = new NormalCardGroup(this.assignmentDialog, function (card) { - return (card.zone == "SHADOW_CHARACTERS" && card.assign == characterId); - } - ); + return (card.zone == "SHADOW_CHARACTERS" && card.assign == characterId); + } + ); this.freePeopleAssignGroups[characterId] = new NormalCardGroup(this.assignmentDialog, function (card) { - return (card.cardId == characterId); - } - ); + return (card.cardId == characterId); + } + ); this.moveCardToElement(characterId, this.assignmentDialog); this.assignDialogResized();