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

Add usernames to JavaScript client

Browse Source
This commit is contained in:
Charles Gould 2017-01-02 21:38:15 -05:00
parent 4f2613667b
commit 437689660c
3 changed files with 75 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -45,6 +45,8 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
private final Map<String, Game> gameBySession = new HashMap<>(); private final Map<String, Game> gameBySession = new HashMap<>();
private final Map<String, String> usernameBySession = new HashMap<>();
@MessageMapping("/guess") @MessageMapping("/guess")
public void guess(String guess, @Header(SESSION_ID_HEADER) String sessionId) { public void guess(String guess, @Header(SESSION_ID_HEADER) String sessionId) {
guess = guess.toUpperCase(); guess = guess.toUpperCase();
@ -75,8 +77,9 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
} }
@MessageMapping("/join") @MessageMapping("/join")
public void join(@Header(SESSION_ID_HEADER) String sessionId) { public void join(String username, @Header(SESSION_ID_HEADER) String sessionId) {
log.info("Player {} joined", sessionId); log.info("Player joined: {}, {}", sessionId, username);
usernameBySession.put(sessionId, username);
joinWaitingList(sessionId); joinWaitingList(sessionId);
} }
@ -90,6 +93,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
} }
private void leave(String sessionId) { private void leave(String sessionId) {
usernameBySession.remove(sessionId);
final Game game = gameBySession.remove(sessionId); final Game game = gameBySession.remove(sessionId);
if (game == null) { if (game == null) {
leaveWaitingList(sessionId); leaveWaitingList(sessionId);
@ -170,8 +174,12 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
final String firstWord = game.newGame(); final String firstWord = game.newGame();
final String firstLetter = String.valueOf(firstWord.charAt(0)); final String firstLetter = String.valueOf(firstWord.charAt(0));
log.info("First word: {}", firstWord); log.info("First word: {}", firstWord);
sendToUser(playerOne, StompTopics.OPPONENT_JOINED, firstLetter); final String playerOneUsername = usernameBySession.get(playerOne);
sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, firstLetter); final String playerTwoUsername = usernameBySession.get(playerTwo);
final String[] playerOneMessage = new String[] { firstLetter, playerTwoUsername };
final String[] playerTwoMessage = new String[] { firstLetter, playerOneUsername };
sendToUser(playerOne, StompTopics.OPPONENT_JOINED, playerOneMessage);
sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, playerTwoMessage);
} }
} }
} }

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

@ -3,13 +3,25 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Lingo</title> <title>Lingo</title>
<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="client.css"> <link rel="stylesheet" href="client.css">
</head> </head>
<body> <body>
<div id="gameDiv" class="hidden"> <div id="usernameDiv" class="container" style="padding-top: 20px">
<canvas id="canvas" width="600" height="425"></canvas> <div class="jumbotron">
<p>Choose your username.<p>
<form>
<div class="form-group">
<input id="username" type="text" class="form-control" maxlength="16" placeholder="Username">
</div>
<button id="usernameButton" type="button" class="btn btn-default">Go</button>
</form>
</div>
</div> </div>
<div id="waitingDiv"> <div id="gameDiv" class="hidden">
<canvas id="canvas" width="600" height="475"></canvas>
</div>
<div id="waitingDiv" class="hidden">
<h1>Waiting for Opponent</h1> <h1>Waiting for Opponent</h1>
<!-- Based on http://tobiasahlin.com/spinkit --> <!-- Based on http://tobiasahlin.com/spinkit -->
<div class="sk-cube-grid"> <div class="sk-cube-grid">

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

@ -1,7 +1,7 @@
var HEIGHT = 300; var HEIGHT = 300;
var WIDTH = 250; var WIDTH = 250;
var SIDE = 50; var SIDE = 50;
var MARGIN_TOP = 50; var MARGIN_TOP = 100;
var MARGIN_BOTTOM = 75; var MARGIN_BOTTOM = 75;
var myScore = 0; var myScore = 0;
@ -9,11 +9,14 @@ var myGuess;
var myGuesses; var myGuesses;
var myProgress; var myProgress;
var myResults; var myResults;
var myUsername;
var opponentScore = 0; var opponentScore = 0;
var opponentResults; var opponentResults;
var opponentUsername;
var lastWord; var lastWord;
var canvasDiv = document.getElementById('canvasDiv'); var usernameDiv = document.getElementById('usernameDiv');
var gameDiv = document.getElementById('gameDiv');
var waitingDiv = document.getElementById('waitingDiv'); var waitingDiv = document.getElementById('waitingDiv');
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('2d');
@ -21,6 +24,33 @@ var ctx = canvas.getContext('2d');
var client; var client;
function main() { function main() {
var submitUsernameFunction = function() {
myUsername = usernameInput.value;
localStorage.setItem('lingo.username', myUsername);
console.log('My username: ' + myUsername);
start();
usernameDiv.classList.add('hidden');
waitingDiv.classList.remove('hidden');
}
var usernameInput = document.getElementById('username');
var usernameButton = document.getElementById('usernameButton');
usernameButton.addEventListener('click', submitUsernameFunction);
usernameInput.focus();
usernameInput.addEventListener('keydown', function(e) {
if (e.keyCode === 13) {
e.preventDefault();
submitUsernameFunction();
}
});
var storedUsername = localStorage.getItem('lingo.username');
if (storedUsername === null) {
usernameInput.value = 'Alex Trebek';
} else {
usernameInput.value = storedUsername;
}
}
function start() {
ctx.font = '25px Monospace'; ctx.font = '25px Monospace';
ctx.textBaseline = 'middle'; ctx.textBaseline = 'middle';
ctx.textAlign = 'center'; ctx.textAlign = 'center';
@ -38,7 +68,7 @@ function main() {
subscribeToOpponentLeft(); subscribeToOpponentLeft();
subscribeToOpponentReports(); subscribeToOpponentReports();
subscribeToPlayerReports(); subscribeToPlayerReports();
client.send('/app/lingo/join'); client.send('/app/lingo/join', {}, myUsername);
}); });
} }
@ -81,6 +111,7 @@ function addKeypressListener() {
function drawMyBoard() { function drawMyBoard() {
var x = 25, y = MARGIN_TOP; var x = 25, y = MARGIN_TOP;
drawUsername(x, y, myUsername);
drawScore(x, y, myScore); drawScore(x, y, myScore);
drawInput(x, y, myGuess); drawInput(x, y, myGuess);
var yStart = drawGuesses(x, y, myGuesses, myResults); var yStart = drawGuesses(x, y, myGuesses, myResults);
@ -90,6 +121,7 @@ function drawMyBoard() {
function drawOpponentBoard() { function drawOpponentBoard() {
var x = 325, y = MARGIN_TOP; var x = 325, y = MARGIN_TOP;
drawUsername(x, y, opponentUsername);
drawScore(x, y, opponentScore); drawScore(x, y, opponentScore);
drawResults(x, y, opponentResults); drawResults(x, y, opponentResults);
drawGrid(x, y); drawGrid(x, y);
@ -104,9 +136,16 @@ function drawLastWord() {
} }
} }
function drawUsername(x, y, username) {
var usernameX = x + WIDTH / 2;
var usernameY = y - 60;
ctx.fillStyle = 'black';
ctx.fillText(username, usernameX, usernameY);
}
function drawScore(x, y, score) { function drawScore(x, y, score) {
var scoreX = x + WIDTH / 2; var scoreX = x + WIDTH / 2;
var scoreY = y / 2; var scoreY = y - 25;
ctx.fillStyle = 'black'; ctx.fillStyle = 'black';
ctx.fillText(score, scoreX, scoreY); ctx.fillText(score, scoreX, scoreY);
} }
@ -232,7 +271,10 @@ function reset(firstLetter) {
function subscribeToOpponentJoined() { function subscribeToOpponentJoined() {
client.subscribe('/user/topic/lingo/opponentJoined', function(message) { client.subscribe('/user/topic/lingo/opponentJoined', function(message) {
var firstLetter = message.body; var report = JSON.parse(message.body);
var firstLetter = report[0];
opponentUsername = report[1];
console.log('Opponent username: ' + opponentUsername);
reset(firstLetter); reset(firstLetter);
gameDiv.classList.remove('hidden'); gameDiv.classList.remove('hidden');
waitingDiv.classList.add('hidden'); waitingDiv.classList.add('hidden');
@ -242,6 +284,7 @@ function subscribeToOpponentJoined() {
function subscribeToOpponentLeft() { function subscribeToOpponentLeft() {
client.subscribe('/user/topic/lingo/opponentLeft', function(message) { client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
opponentUsername = null;
lastWord = null; lastWord = null;
gameDiv.classList.add('hidden'); gameDiv.classList.add('hidden');
waitingDiv.classList.remove('hidden'); waitingDiv.classList.remove('hidden');