cgould/lingo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Display custom message if you join a game

Browse Source
This commit is contained in:
Charles Gould 2017-01-12 00:30:32 -05:00
parent adf5d7acf5
commit 8eb56ad1c4
5 changed files with 66 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
client-api/src/main/java/lingo/client/api/StompTopics.java
View File

@ -4,6 +4,8 @@ public class StompTopics {
public static final String CHAT = createTopicName("chat"); 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_JOINED = createTopicName("opponentJoined");
public static final String OPPONENT_LEFT = createTopicName("opponentLeft"); 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 PRACTICE_REPORTS = createTopicName("practiceReports");
public static final String USER_JOINED = createTopicName("userJoined");
private static String createTopicName(String suffix) { private static String createTopicName(String suffix) {
return "/topic/lingo/" + suffix; return "/topic/lingo/" + suffix;
} }

11
server/src/main/java/lingo/server/LingoController.java
View File

@ -89,7 +89,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
public void join(String username, @Header(SESSION_ID_HEADER) String sessionId) { public void join(String username, @Header(SESSION_ID_HEADER) String sessionId) {
log.info("Player joined: {}, {}", sessionId, username); log.info("Player joined: {}, {}", sessionId, username);
usernameBySession.put(sessionId, username); usernameBySession.put(sessionId, username);
sendAnnouncement(username + " joined"); send(StompTopics.USER_JOINED, username);
joinWaitingList(sessionId); joinWaitingList(sessionId);
} }
@ -105,7 +105,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
private void leave(String sessionId) { private void leave(String sessionId) {
final String username = usernameBySession.remove(sessionId); final String username = usernameBySession.remove(sessionId);
if (username != null) { if (username != null) {
sendAnnouncement(username + " left"); send(StompTopics.CHAT, new ChatMessage(null, username + " left"));
} }
final Game game = gameBySession.remove(sessionId); final Game game = gameBySession.remove(sessionId);
if (game == null) { if (game == null) {
@ -184,9 +184,8 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
sendToUser(sessionId, StompTopics.PRACTICE_REPORTS, report); sendToUser(sessionId, StompTopics.PRACTICE_REPORTS, report);
} }
private void sendAnnouncement(String message) { private void send(String destination, Object payload) {
final ChatMessage payload = new ChatMessage(null, message); messagingTemplate.convertAndSend(destination, payload);
messagingTemplate.convertAndSend(StompTopics.CHAT, payload);
} }
private void sendToUser(String user, String destination, Object payload) { private void sendToUser(String user, String destination, Object payload) {
@ -231,7 +230,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
final String[] playerTwoMessage = new String[] { firstLetter, playerOneUsername }; final String[] playerTwoMessage = new String[] { firstLetter, playerOneUsername };
sendToUser(playerOne, StompTopics.OPPONENT_JOINED, playerOneMessage); sendToUser(playerOne, StompTopics.OPPONENT_JOINED, playerOneMessage);
sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, playerTwoMessage); sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, playerTwoMessage);
sendAnnouncement(playerOneUsername + " is playing with " + playerTwoUsername); send(StompTopics.GAME_STARTED, new String[] { playerOneUsername, playerTwoUsername });
} }
} }
} }

5
server/src/main/resources/static/client.html
View File

@ -9,11 +9,12 @@
</head> </head>
<body> <body>
<div id="usernameDiv" class="jumbotron"> <div id="usernameDiv" class="jumbotron">
<p>What is your name?<p> <h2>What is your name?</h2>
<form> <form>
<div class="form-group"> <div class="form-group">
<input id="username" type="text" class="form-control" maxlength="16" placeholder="Username"> <input id="username" type="text" class="form-control" maxlength="16" placeholder="Name">
</div> </div>
<p id="usernameError" class="error-message"></p>
<button id="usernameButton" type="button" class="btn btn-default">Submit</button> <button id="usernameButton" type="button" class="btn btn-default">Submit</button>
</form> </form>
</div> </div>

47
server/src/main/resources/static/client.js
View File

@ -28,6 +28,9 @@ var client;
function main() { function main() {
var usernameDiv = document.getElementById('usernameDiv'); var usernameDiv = document.getElementById('usernameDiv');
var usernameInput = document.getElementById('username');
var usernameButton = document.getElementById('usernameButton');
var usernameError = document.getElementById('usernameError');
var submitUsernameFunction = function() { var submitUsernameFunction = function() {
var usernameValue = usernameInput.value.trim(); var usernameValue = usernameInput.value.trim();
if (usernameValue.length === 0) { if (usernameValue.length === 0) {
@ -41,8 +44,6 @@ function main() {
waitingDiv.classList.remove('hidden'); waitingDiv.classList.remove('hidden');
appDiv.classList.remove('hidden'); appDiv.classList.remove('hidden');
} }
var usernameInput = document.getElementById('username');
var usernameButton = document.getElementById('usernameButton');
usernameButton.addEventListener('click', submitUsernameFunction); usernameButton.addEventListener('click', submitUsernameFunction);
usernameInput.focus(); usernameInput.focus();
usernameInput.addEventListener('keydown', function(e) { usernameInput.addEventListener('keydown', function(e) {
@ -51,6 +52,16 @@ function main() {
submitUsernameFunction(); 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'); var storedUsername = localStorage.getItem('lingo.username');
if (storedUsername === null) { if (storedUsername === null) {
usernameInput.value = 'Alex Trebek'; usernameInput.value = 'Alex Trebek';
@ -74,11 +85,13 @@ function start() {
client = Stomp.over(new SockJS('/stomp')); client = Stomp.over(new SockJS('/stomp'));
client.connect({}, function(frame) { client.connect({}, function(frame) {
subscribeToChatMessages(); subscribeToChat();
subscribeToGameStarted();
subscribeToOpponentJoined(); subscribeToOpponentJoined();
subscribeToOpponentLeft(); subscribeToOpponentLeft();
subscribeToOpponentReports(); subscribeToOpponentReports();
subscribeToPlayerReports(); subscribeToPlayerReports();
subscribeToUserJoined();
client.send('/app/lingo/join', {}, myUsername); 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) { client.subscribe('/topic/lingo/chat', function(message) {
var chatMessage = JSON.parse(message.body); var chatMessage = JSON.parse(message.body);
var messageSender = chatMessage.username; 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() { function subscribeToOpponentJoined() {
client.subscribe('/user/topic/lingo/opponentJoined', function(message) { client.subscribe('/user/topic/lingo/opponentJoined', function(message) {
var report = JSON.parse(message.body); 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(); main();

13
server/src/main/resources/static/style.css
View File

@ -17,10 +17,14 @@ button {
padding: 6px 12px; padding: 6px 12px;
} }
button:hover { button:hover:enabled {
cursor: pointer; cursor: pointer;
} }
button:hover:disabled {
cursor: not-allowed;
}
/* Main area */ /* Main area */
.header { .header {
@ -68,12 +72,17 @@ button:hover {
border-radius: 6px; border-radius: 6px;
} }
.jumbotron p { .jumbotron h2 {
margin-bottom: 15px; margin-bottom: 15px;
font-size: 21px; font-size: 21px;
font-weight: 200; font-weight: 200;
} }
.error-message {
color: red;
font-size: 14px;
}
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
} }