From 8eb56ad1c44c9d4b8ff264a3822b2e59a13919da Mon Sep 17 00:00:00 2001 From: Charles Gould Date: Thu, 12 Jan 2017 00:30:32 -0500 Subject: [PATCH] Display custom message if you join a game --- .../java/lingo/client/api/StompTopics.java | 4 ++ .../java/lingo/server/LingoController.java | 11 ++--- server/src/main/resources/static/client.html | 5 +- server/src/main/resources/static/client.js | 47 +++++++++++++++++-- server/src/main/resources/static/style.css | 13 ++++- 5 files changed, 66 insertions(+), 14 deletions(-) diff --git a/client-api/src/main/java/lingo/client/api/StompTopics.java b/client-api/src/main/java/lingo/client/api/StompTopics.java index 9364ced..9618611 100644 --- a/client-api/src/main/java/lingo/client/api/StompTopics.java +++ b/client-api/src/main/java/lingo/client/api/StompTopics.java @@ -4,6 +4,8 @@ public class StompTopics { public static final String CHAT = createTopicName("chat"); + public static final String GAME_STARTED = createTopicName("gameStarted"); + public static final String OPPONENT_JOINED = createTopicName("opponentJoined"); public static final String OPPONENT_LEFT = createTopicName("opponentLeft"); @@ -16,6 +18,8 @@ public class StompTopics { public static final String PRACTICE_REPORTS = createTopicName("practiceReports"); + public static final String USER_JOINED = createTopicName("userJoined"); + private static String createTopicName(String suffix) { return "/topic/lingo/" + suffix; } diff --git a/server/src/main/java/lingo/server/LingoController.java b/server/src/main/java/lingo/server/LingoController.java index af92fc5..7a7310c 100644 --- a/server/src/main/java/lingo/server/LingoController.java +++ b/server/src/main/java/lingo/server/LingoController.java @@ -89,7 +89,7 @@ public class LingoController implements ApplicationListener
-

What is your name?

+

What is your name?

- +
+

diff --git a/server/src/main/resources/static/client.js b/server/src/main/resources/static/client.js index b3fba77..83bb8e1 100644 --- a/server/src/main/resources/static/client.js +++ b/server/src/main/resources/static/client.js @@ -28,6 +28,9 @@ var client; function main() { var usernameDiv = document.getElementById('usernameDiv'); + var usernameInput = document.getElementById('username'); + var usernameButton = document.getElementById('usernameButton'); + var usernameError = document.getElementById('usernameError'); var submitUsernameFunction = function() { var usernameValue = usernameInput.value.trim(); if (usernameValue.length === 0) { @@ -41,8 +44,6 @@ function main() { waitingDiv.classList.remove('hidden'); appDiv.classList.remove('hidden'); } - var usernameInput = document.getElementById('username'); - var usernameButton = document.getElementById('usernameButton'); usernameButton.addEventListener('click', submitUsernameFunction); usernameInput.focus(); usernameInput.addEventListener('keydown', function(e) { @@ -51,6 +52,16 @@ function main() { submitUsernameFunction(); } }); + usernameInput.addEventListener('keyup', function(e) { + var usernameValue = usernameInput.value.trim(); + if (usernameValue.length === 0) { + usernameError.innerHTML = 'Name cannot be empty.'; + usernameButton.disabled = true; + } else { + usernameError.innerHTML = ''; + usernameButton.disabled = false; + } + }); var storedUsername = localStorage.getItem('lingo.username'); if (storedUsername === null) { usernameInput.value = 'Alex Trebek'; @@ -74,11 +85,13 @@ function start() { client = Stomp.over(new SockJS('/stomp')); client.connect({}, function(frame) { - subscribeToChatMessages(); + subscribeToChat(); + subscribeToGameStarted(); subscribeToOpponentJoined(); subscribeToOpponentLeft(); subscribeToOpponentReports(); subscribeToPlayerReports(); + subscribeToUserJoined(); client.send('/app/lingo/join', {}, myUsername); }); } @@ -329,7 +342,7 @@ function reset(firstLetter, clearScore) { } } -function subscribeToChatMessages() { +function subscribeToChat() { client.subscribe('/topic/lingo/chat', function(message) { var chatMessage = JSON.parse(message.body); var messageSender = chatMessage.username; @@ -345,6 +358,21 @@ function subscribeToChatMessages() { }); } +function subscribeToGameStarted() { + client.subscribe('/topic/lingo/gameStarted', function(message) { + var report = JSON.parse(message.body); + var playerOne = report[0]; + var playerTwo = report[1]; + if (playerOne === myUsername) { + addChatAnnouncement('You are playing with ' + playerTwo); + } else if (playerTwo === myUsername) { + addChatAnnouncement('You are playing with ' + playerOne); + } else { + addChatAnnouncement(playerOne + ' is playing with ' + playerTwo); + } + }); +} + function subscribeToOpponentJoined() { client.subscribe('/user/topic/lingo/opponentJoined', function(message) { var report = JSON.parse(message.body); @@ -421,4 +449,15 @@ function subscribeToPlayerReports() { }); } +function subscribeToUserJoined() { + client.subscribe('/topic/lingo/userJoined', function(message) { + var username = message.body; + if (username === myUsername) { + addChatAnnouncement('You joined'); + } else { + addChatAnnouncement(username + ' joined'); + } + }); +} + main(); diff --git a/server/src/main/resources/static/style.css b/server/src/main/resources/static/style.css index 7418b9e..7100a49 100644 --- a/server/src/main/resources/static/style.css +++ b/server/src/main/resources/static/style.css @@ -17,10 +17,14 @@ button { padding: 6px 12px; } -button:hover { +button:hover:enabled { cursor: pointer; } +button:hover:disabled { + cursor: not-allowed; +} + /* Main area */ .header { @@ -68,12 +72,17 @@ button:hover { border-radius: 6px; } -.jumbotron p { +.jumbotron h2 { margin-bottom: 15px; font-size: 21px; font-weight: 200; } +.error-message { + color: red; + font-size: 14px; +} + .form-group { margin-bottom: 15px; }