From 437689660ce0bf01f3b2f479c6d4c572914b73cd Mon Sep 17 00:00:00 2001
From: Charles Gould <charles@gould.dev>
Date: Mon, 2 Jan 2017 21:38:15 -0500
Subject: [PATCH] Add usernames to JavaScript client

---
 .../java/lingo/server/LingoController.java    | 16 ++++--
 server/src/main/resources/static/client.html  | 18 +++++--
 server/src/main/resources/static/client.js    | 53 +++++++++++++++++--
 3 files changed, 75 insertions(+), 12 deletions(-)
diff --git a/server/src/main/java/lingo/server/LingoController.java b/server/src/main/java/lingo/server/LingoController.java
index feae78e..1391763 100644
--- a/server/src/main/java/lingo/server/LingoController.java
+++ b/server/src/main/java/lingo/server/LingoController.java
@@ -45,6 +45,8 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
 
 	private final Map<String, Game> gameBySession = new HashMap<>();
 
+	private final Map<String, String> usernameBySession = new HashMap<>();
+
 	@MessageMapping("/guess")
 	public void guess(String guess, @Header(SESSION_ID_HEADER) String sessionId) {
 		guess = guess.toUpperCase();
@@ -75,8 +77,9 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
 	}
 
 	@MessageMapping("/join")
-	public void join(@Header(SESSION_ID_HEADER) String sessionId) {
-		log.info("Player {} joined", sessionId);
+	public void join(String username, @Header(SESSION_ID_HEADER) String sessionId) {
+		log.info("Player joined: {}, {}", sessionId, username);
+		usernameBySession.put(sessionId, username);
 		joinWaitingList(sessionId);
 	}
 
@@ -90,6 +93,7 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
 	}
 
 	private void leave(String sessionId) {
+		usernameBySession.remove(sessionId);
 		final Game game = gameBySession.remove(sessionId);
 		if (game == null) {
 			leaveWaitingList(sessionId);
@@ -170,8 +174,12 @@ public class LingoController implements ApplicationListener<AbstractSubProtocolE
 				final String firstWord = game.newGame();
 				final String firstLetter = String.valueOf(firstWord.charAt(0));
 				log.info("First word: {}", firstWord);
-				sendToUser(playerOne, StompTopics.OPPONENT_JOINED, firstLetter);
-				sendToUser(playerTwo, StompTopics.OPPONENT_JOINED, firstLetter);
+				final String playerOneUsername = usernameBySession.get(playerOne);
+				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);
 			}
 		}
 	}
diff --git a/server/src/main/resources/static/client.html b/server/src/main/resources/static/client.html
index 4eb603b..2e2c017 100644
--- a/server/src/main/resources/static/client.html
+++ b/server/src/main/resources/static/client.html
@@ -3,13 +3,25 @@
 <head>
 <meta charset="UTF-8">
 <title>Lingo</title>
+<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
 <link rel="stylesheet" href="client.css">
 </head>
 <body>
-	<div id="gameDiv" class="hidden">
-		<canvas id="canvas" width="600" height="425"></canvas>
+	<div id="usernameDiv" class="container" style="padding-top: 20px">
+		<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 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>
 		<!-- Based on http://tobiasahlin.com/spinkit -->
 		<div class="sk-cube-grid">
diff --git a/server/src/main/resources/static/client.js b/server/src/main/resources/static/client.js
index 711c7ac..f79df37 100644
--- a/server/src/main/resources/static/client.js
+++ b/server/src/main/resources/static/client.js
@@ -1,7 +1,7 @@
 var HEIGHT = 300;
 var WIDTH = 250;
 var SIDE = 50;
-var MARGIN_TOP = 50;
+var MARGIN_TOP = 100;
 var MARGIN_BOTTOM = 75;
 
 var myScore = 0;
@@ -9,11 +9,14 @@ var myGuess;
 var myGuesses;
 var myProgress;
 var myResults;
+var myUsername;
 var opponentScore = 0;
 var opponentResults;
+var opponentUsername;
 var lastWord;
 
-var canvasDiv = document.getElementById('canvasDiv');
+var usernameDiv = document.getElementById('usernameDiv');
+var gameDiv = document.getElementById('gameDiv');
 var waitingDiv = document.getElementById('waitingDiv');
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
@@ -21,6 +24,33 @@ var ctx = canvas.getContext('2d');
 var client;
 
 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.textBaseline = 'middle';
 	ctx.textAlign = 'center';
@@ -38,7 +68,7 @@ function main() {
 		subscribeToOpponentLeft();
 		subscribeToOpponentReports();
 		subscribeToPlayerReports();
-		client.send('/app/lingo/join');
+		client.send('/app/lingo/join', {}, myUsername);
 	});
 }
 
@@ -81,6 +111,7 @@ function addKeypressListener() {
 
 function drawMyBoard() {
 	var x = 25, y = MARGIN_TOP;
+	drawUsername(x, y, myUsername);
 	drawScore(x, y, myScore);
 	drawInput(x, y, myGuess);
 	var yStart = drawGuesses(x, y, myGuesses, myResults);
@@ -90,6 +121,7 @@ function drawMyBoard() {
 
 function drawOpponentBoard() {
 	var x = 325, y = MARGIN_TOP;
+	drawUsername(x, y, opponentUsername);
 	drawScore(x, y, opponentScore);
 	drawResults(x, y, opponentResults);
 	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) {
 	var scoreX = x + WIDTH / 2;
-	var scoreY = y / 2;
+	var scoreY = y - 25;
 	ctx.fillStyle = 'black';
 	ctx.fillText(score, scoreX, scoreY);
 }
@@ -232,7 +271,10 @@ function reset(firstLetter) {
 
 function subscribeToOpponentJoined() {
 	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);
 		gameDiv.classList.remove('hidden');
 		waitingDiv.classList.add('hidden');
@@ -242,6 +284,7 @@ function subscribeToOpponentJoined() {
 
 function subscribeToOpponentLeft() {
 	client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
+		opponentUsername = null;
 		lastWord = null;
 		gameDiv.classList.add('hidden');
 		waitingDiv.classList.remove('hidden');
