Replace var with const/let

server/src/main/resources/static/client.js

@@ -4,10 +4,10 @@ const CHARACTER_HEIGHT = 50;
 const MARGIN_TOP = 100;
 const MARGIN_BOTTOM = 75;
 
-var client;
+let client = null;
-var sessionId = null;
+let sessionId = null;
 
-var vm = new Vue({
+const vm = new Vue({
 	el: '#vue-app',
 	data: {
 		players: [],
@@ -43,8 +43,8 @@ var vm = new Vue({
 	directives: {
 		autoscroll: {
 			bind: function(element, binding) {
-				var observer = new MutationObserver(scrollToBottom);
+				const observer = new MutationObserver(scrollToBottom);
-				var config = { childList: true };
+				const config = { childList: true };
 				observer.observe(element, config);
 
 				function scrollToBottom() {
@@ -55,16 +55,18 @@ var vm = new Vue({
 	},
 	methods: {
 		drawMyBoard: function(ctx) {
-			var x = 25, y = MARGIN_TOP;
+			const x = 25;
+			const y = MARGIN_TOP;
 			this.drawUsername(ctx, x, y, this.username);
 			this.drawScore(ctx, x, y, this.myScore);
 			this.drawInput(ctx, x, y, this.myGuess);
-			var yStart = this.drawGuesses(ctx, x, y, this.myGuesses, this.myResults);
+			const yStart = this.drawGuesses(ctx, x, y, this.myGuesses, this.myResults);
 			this.drawHint(ctx, x, yStart, this.myProgress);
 			this.drawGrid(ctx, x, y);
 		},
 		drawOpponentBoard: function(ctx) {
-			var x = 325, y = MARGIN_TOP;
+			const x = 325;
+			const y = MARGIN_TOP;
 			this.drawUsername(ctx, x, y, this.opponentUsername);
 			this.drawScore(ctx, x, y, this.opponentScore);
 			this.drawResults(ctx, x, y, this.opponentResults);
@@ -72,31 +74,31 @@ var vm = new Vue({
 		},
 		drawLastWord: function(canvas, ctx) {
 			if (this.lastWord) {
-				var x = canvas.width / 2;
+				const x = canvas.width / 2;
-				var y = canvas.height - MARGIN_BOTTOM / 2;
+				const y = canvas.height - MARGIN_BOTTOM / 2;
 				ctx.fillStyle = 'black';
 				ctx.fillText('Previous word: ' + this.lastWord.toUpperCase(), x, y);
 			}
 		},
 		drawUsername: function(ctx, x, y, username) {
-			var usernameX = x + WIDTH / 2;
+			const usernameX = x + WIDTH / 2;
-			var usernameY = y - 60;
+			const usernameY = y - 60;
 			ctx.fillStyle = 'black';
 			ctx.fillText(username, usernameX, usernameY);
 		},
 		drawScore: function(ctx, x, y, score) {
-			var scoreX = x + WIDTH / 2;
+			const scoreX = x + WIDTH / 2;
-			var scoreY = y - 25;
+			const scoreY = y - 25;
 			ctx.fillStyle = 'black';
 			ctx.fillText(score, scoreX, scoreY);
 		},
 		drawGrid: function(ctx, xOrigin, yOrigin) {
 			ctx.beginPath();
-			for (var x = 0; x <= WIDTH; x += this.characterWidth) {
+			for (let x = 0; x <= WIDTH; x += this.characterWidth) {
 				ctx.moveTo(xOrigin + x, yOrigin);
 				ctx.lineTo(xOrigin + x, yOrigin + HEIGHT);
 			}
-			for (var y = 0; y <= HEIGHT; y += CHARACTER_HEIGHT) {
+			for (let y = 0; y <= HEIGHT; y += CHARACTER_HEIGHT) {
 				ctx.moveTo(xOrigin, yOrigin + y);
 				ctx.lineTo(xOrigin + WIDTH, yOrigin + y);
 			}
@@ -105,21 +107,21 @@ var vm = new Vue({
 		},
 		drawInput: function(ctx, xOrigin, yOrigin, input) {
 			ctx.fillStyle = 'green';
-			var x = xOrigin + this.characterWidth * 0.5;
+			let x = xOrigin + this.characterWidth * 0.5;
-			var y = yOrigin + CHARACTER_HEIGHT * 0.5;
+			let y = yOrigin + CHARACTER_HEIGHT * 0.5;
-			for (var i = 0; i < input.length; i++) {
+			for (let i = 0; i < input.length; i++) {
 				ctx.fillText(input[i], x, y);
 				x += this.characterWidth;
 			}
 		},
 		drawGuesses: function(ctx, xOrigin, yOrigin, guesses, results) {
-			var y = yOrigin + CHARACTER_HEIGHT * 1.5;
+			let y = yOrigin + CHARACTER_HEIGHT * 1.5;
-			var numGuesses = Math.min(4, guesses.length);
+			const numGuesses = Math.min(4, guesses.length);
-			for (var i = 0; i < numGuesses; i++) {
+			for (let i = 0; i < numGuesses; i++) {
-				var x = xOrigin + this.characterWidth * 0.5;
+				let x = xOrigin + this.characterWidth * 0.5;
-				var guess = guesses[guesses.length - numGuesses + i];
+				const guess = guesses[guesses.length - numGuesses + i];
-				var result = results[results.length - numGuesses + i];
+				const result = results[results.length - numGuesses + i];
-				for (var j = 0; j < this.wordLength; j++) {
+				for (let j = 0; j < this.wordLength; j++) {
 					if (result[j] === 1) {
 						ctx.fillStyle = 'yellow';
 						ctx.fillRect(x - this.characterWidth * 0.5, y - CHARACTER_HEIGHT * 0.5, this.characterWidth, CHARACTER_HEIGHT);
@@ -136,12 +138,12 @@ var vm = new Vue({
 			return y;
 		},
 		drawResults: function(ctx, xOrigin, yOrigin, results) {
-			var y = yOrigin + CHARACTER_HEIGHT * 1.5;
+			let y = yOrigin + CHARACTER_HEIGHT * 1.5;
-			var numResults = Math.min(4, results.length);
+			const numResults = Math.min(4, results.length);
-			for (var i = 0; i < numResults; i++) {
+			for (let i = 0; i < numResults; i++) {
-				var x = xOrigin + this.characterWidth * 0.5;
+				let x = xOrigin + this.characterWidth * 0.5;
-				var result = results[results.length - numResults + i];
+				const result = results[results.length - numResults + i];
-				for (var j = 0; j < this.wordLength; j++) {
+				for (let j = 0; j < this.wordLength; j++) {
 					if (result[j] === 1) {
 						ctx.fillStyle = 'yellow';
 						ctx.fillRect(x - this.characterWidth * 0.5, y - CHARACTER_HEIGHT * 0.5, this.characterWidth, CHARACTER_HEIGHT);
@@ -159,14 +161,14 @@ var vm = new Vue({
 			return y;
 		},
 		drawHint: function(ctx, xOrigin, yOrigin, progress) {
-			var x = xOrigin + this.characterWidth * 0.5;
+			let x = xOrigin + this.characterWidth * 0.5;
-			for (var i = 0; i < this.wordLength; i++) {
+			for (let i = 0; i < this.wordLength; i++) {
 				ctx.fillText(progress[i], x, yOrigin);
 				x += this.characterWidth;
 			}
 		},
 		getGame: function(gameId) {
-			for (var i = 0; i < this.games.length; i++) {
+			for (let i = 0; i < this.games.length; i++) {
 				if (this.games[i].id === gameId) {
 					return this.games[i];
 				}
@@ -181,16 +183,16 @@ var vm = new Vue({
 		},
 		joinGame: function(e) {
 			// Discard 'game-' prefix
-			var buttonId = e.target.id;
+			const buttonId = e.target.id;
-			var gameId = buttonId.substr(5);
+			const gameId = buttonId.substr(5);
 			client.publish({destination: '/app/joinGame', body: gameId})
 		},
 		leaveGame: function(e) {
 			client.publish({destination: '/app/leaveGame'})
 		},
 		removeGame: function(gameId) {
-			var indexToRemove = null;
+			let indexToRemove = null;
-			for (var i = 0; i < this.games.length; i++) {
+			for (let i = 0; i < this.games.length; i++) {
 				if (this.games[i].id === gameId) {
 					indexToRemove = i;
 					break;
@@ -199,8 +201,8 @@ var vm = new Vue({
 			this.games.splice(indexToRemove, 1);
 		},
 		removePlayer: function(name) {
-			var indexToRemove = null;
+			let indexToRemove = null;
-			for (var i = 0; i < this.players.length; i++) {
+			for (let i = 0; i < this.players.length; i++) {
 				if (this.players[i].username === name) {
 					indexToRemove = i;
 					break;
@@ -213,8 +215,7 @@ var vm = new Vue({
 				e.preventDefault();
 				this.myGuess = this.myGuess.substr(0, this.myGuess.length - 1);
 				this.repaint();
-			}
+			} else if (e.key === 'Enter') {
-			else if (e.key === 'Enter') {
 				if (this.myGuess.length === this.wordLength) {
 					client.publish({destination: '/app/guess', body: this.myGuess})
 					this.myGuess = '';
@@ -223,12 +224,12 @@ var vm = new Vue({
 			}
 		},
 		onCanvasKeypress: function(e) {
-			var charCode = e.charCode;
+			let charCode = e.charCode;
 			if (isCharacter(charCode)) {
 				if (isCharacterLowercase(charCode)) {
 					charCode = charCode - 32;
 				}
-				var char = String.fromCharCode(charCode);
+				const char = String.fromCharCode(charCode);
 				if (this.myGuess.length < this.wordLength) {
 					this.myGuess += char;
 					this.repaint();
@@ -236,12 +237,12 @@ var vm = new Vue({
 			}
 		},
 		onChatKeypress: function(e) {
-			var messageInput = e.target;
+			const messageInput = e.target;
 			if (e.key === 'Enter') {
 				// Shift+Enter -> new line
 				if (!e.shiftKey) {
 					e.preventDefault();
-					var text = messageInput.value.trim();
+					const text = messageInput.value.trim();
 					if (text.length === 0) {
 						return;
 					}
@@ -252,8 +253,8 @@ var vm = new Vue({
 			}
 		},
 		repaint: function() {
-			var canvas = document.getElementById('canvas');
+			const canvas = document.getElementById('canvas');
-			var ctx = canvas.getContext('2d');
+			const ctx = canvas.getContext('2d');
 			ctx.font = '25px Monospace';
 			ctx.textBaseline = 'middle';
 			ctx.textAlign = 'center';
@@ -269,7 +270,7 @@ var vm = new Vue({
 			this.myGuess = '';
 			this.myGuesses = [];
 			this.myProgress = [firstLetter];
-			for (var i = 1; i < this.wordLength; i++) {
+			for (let i = 1; i < this.wordLength; i++) {
 				this.myProgress[i] = '';
 			}
 			this.myResults = [];
@@ -287,9 +288,9 @@ var vm = new Vue({
 
 function afterConnected(stompConnectedFrame) {
 	console.log('Connected to STOMP endpoint')
-	var sessionIdTopic = '/user/topic/sessionId';
+	let sessionIdSubscription = null;
-	var sessionIdSubscription = null;
+	const sessionIdTopic = '/user/topic/sessionId';
-	var sessionIdHandler = function(message) {
+	const sessionIdHandler = function(message) {
 		console.log('Session ID: ' + message.body);
 		sessionId = message.body;
 		sessionIdSubscription.unsubscribe();
@@ -325,7 +326,7 @@ function main() {
 	client.onStompError = function(frame) {
 		console.log('Broker reported error: ' + frame.headers['message']);
 		console.log('Additional details: ' + frame.body);
-		var errorMessage = frame.headers['message'];
+		const errorMessage = frame.headers['message'];
 		addChatAnnouncement(errorMessage);
 		addChatAnnouncement('Please reload the page!');
 	}
@@ -344,12 +345,11 @@ function main() {
 
 	client.activate();
 
-	var usernameInput = document.getElementById('nicknameInput');
+	let usernameSubscription = null;
-
+	const usernameInput = document.getElementById('nicknameInput');
-	var usernameTopic = '/user/topic/sessionUsername';
+	const usernameTopic = '/user/topic/sessionUsername';
-	var usernameSubscription = null;
+	const usernameHandler = function(message) {
-	var usernameHandler = function(message) {
+		const response = JSON.parse(message.body);
-		var response = JSON.parse(message.body);
 		if (response.success === true) {
 			console.log('Username: ' + response.username);
 			vm.username = response.username;
@@ -366,7 +366,7 @@ function main() {
 				vm.usernameError = 'Not connected to server';
 				return;
 			}
-			var usernameValue = usernameInput.value.trim();
+			const usernameValue = usernameInput.value.trim();
 			if (usernameValue.length === 0) {
 				vm.usernameError = 'Name cannot be empty';
 				return;
@@ -382,7 +382,7 @@ function main() {
 		if (e.key === 'Enter') {
 			return;
 		}
-		var usernameValue = usernameInput.value.trim();
+		const usernameValue = usernameInput.value.trim();
 		if (usernameValue.length !== 0) {
 			vm.usernameError = '';
 		}
@@ -410,10 +410,10 @@ function start() {
 
 	// Load initial data
 	doHttpGet('/data', function(data) {
-		var players = data.players;
+		const players = data.players;
-		var games = data.games;
+		const games = data.games;
-		for (var i = 0; i < games.length; i++) {
+		for (let i = 0; i < games.length; i++) {
-			var game = games[i];
+			const game = games[i];
 			vm.games.push({
 				id: game.id,
 				playerOne: game.playerOne.username,
@@ -422,8 +422,8 @@ function start() {
 				started: game.playerTwo !== null
 			});
 		}
-		for (var i = 0; i < players.length; i++) {
+		for (let i = 0; i < players.length; i++) {
-			var player = players[i];
+			const player = players[i];
 			vm.players.push({
 				username: player.username
 			});
@@ -458,10 +458,10 @@ function addChatMessage(sender, body) {
 }
 
 function doHttpGet(url, callback) {
-	var xhr = new XMLHttpRequest();
+	const xhr = new XMLHttpRequest();
 	xhr.onreadystatechange = function() {
 		if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
-			var response = JSON.parse(xhr.responseText);
+			const response = JSON.parse(xhr.responseText);
 			callback(response);
 		}
 	};
@@ -482,9 +482,9 @@ function isCharacterUppercase(charCode) {
 }
 
 function onChat(message) {
-	var chatMessage = JSON.parse(message.body);
+	const chatMessage = JSON.parse(message.body);
-	var messageSender = chatMessage.username;
+	const messageSender = chatMessage.username;
-	var messageBody = chatMessage.message;
+	const messageBody = chatMessage.message;
 	if (messageSender === null) {
 		addChatAnnouncement(messageBody);
 	} else if (messageSender === vm.username) {
@@ -496,9 +496,9 @@ function onChat(message) {
 }
 
 function onGameClosed(message) {
-	var game = JSON.parse(message.body);
+	const game = JSON.parse(message.body);
-	var gameId = game.id;
+	const gameId = game.id;
-	var playerOne = game.playerOne.username;
+	const playerOne = game.playerOne.username;
 	console.log(playerOne + ' closed Game ' + gameId);
 	if (playerOne === vm.username) {
 		vm.myGame = null;
@@ -507,12 +507,12 @@ function onGameClosed(message) {
 }
 
 function onGameHosted(message) {
-	var game = JSON.parse(message.body);
+	const game = JSON.parse(message.body);
-	var gameId = game.id;
+	const gameId = game.id;
-	var wordLength = game.wordLength;
+	const wordLength = game.wordLength;
-	var playerOne = game.playerOne.username;
+	const playerOne = game.playerOne.username;
 	console.log(playerOne + ' hosted Game ' + gameId);
-	var vueGame = {
+	const vueGame = {
 		id: gameId,
 		playerOne: playerOne,
 		wordLength: wordLength,
@@ -525,16 +525,16 @@ function onGameHosted(message) {
 }
 
 function onGameJoined(message) {
-	var game = JSON.parse(message.body);
+	const game = JSON.parse(message.body);
-	var gameId = game.id;
+	const gameId = game.id;
-	var wordLength = game.wordLength;
+	const wordLength = game.wordLength;
-	var playerOne = game.playerOne.username;
+	const playerOne = game.playerOne.username;
-	var playerTwo = game.playerTwo.username;
+	const playerTwo = game.playerTwo.username;
 
 	console.log(playerTwo + ' joined ' + playerOne + "'s game");
 
-	var vueGame = null;
+	let vueGame = null;
-	for (var i = 0; i < vm.games.length; i++) {
+	for (let i = 0; i < vm.games.length; i++) {
 		if (vm.games[i].id === gameId) {
 			vm.games[i].playerTwo = playerTwo;
 			vm.games[i].wordLength = wordLength;
@@ -550,14 +550,14 @@ function onGameJoined(message) {
 }
 
 function onGameLeft(message) {
-	var report = JSON.parse(message.body);
+	const report = JSON.parse(message.body);
-	var game = report.game;
+	const game = report.game;
-	var gameId = game.id;
+	const gameId = game.id;
-	var playerOne = game.playerOne.username;
+	const playerOne = game.playerOne.username;
-	var gameLeaver = report.gameLeaver.username;
+	const gameLeaver = report.gameLeaver.username;
 	console.log(gameLeaver + ' left ' + playerOne + "'s game");
-	var previousPlayers = [];
+	const previousPlayers = [];
-	for (var i = 0; i < vm.games.length; i++) {
+	for (let i = 0; i < vm.games.length; i++) {
 		if (vm.games[i].id === gameId) {
 			previousPlayers.push(vm.games[i].playerOne);
 			previousPlayers.push(vm.games[i].playerTwo);
@@ -578,8 +578,8 @@ function onGameLeft(message) {
 }
 
 function onOpponentJoined(message) {
-	var report = JSON.parse(message.body);
+	const report = JSON.parse(message.body);
-	var firstLetter = report[0];
+	const firstLetter = report[0];
 	vm.opponentUsername = report[1];
 	console.log('Opponent username: ' + vm.opponentUsername);
 	vm.reset(firstLetter, true);
@@ -588,16 +588,16 @@ function onOpponentJoined(message) {
 
 function onOpponentReport(message) {
 	console.log('Opponent report: ' + message.body);
-	var report = JSON.parse(message.body);
+	const report = JSON.parse(message.body);
 	if (report.correct === true) {
-		var guess = report.guess;
+		const guess = report.guess;
-		var firstLetter = report.firstLetter;
+		const firstLetter = report.firstLetter;
 		vm.opponentScore = vm.opponentScore + 100;
 		vm.lastWord = guess;
 		vm.reset(firstLetter, false);
 		vm.repaint();
 	} else {
-		var result = report.result;
+		const result = report.result;
 		vm.opponentResults.push(result);
 		vm.repaint();
 	}
@@ -605,22 +605,22 @@ function onOpponentReport(message) {
 
 function onPlayerReport(message) {
 	console.log('My report: ' + message.body);
-	var report = JSON.parse(message.body);
+	const report = JSON.parse(message.body);
 	if (report.correct === true) {
-		var guess = report.guess;
+		const guess = report.guess;
-		var firstLetter = report.firstLetter;
+		const firstLetter = report.firstLetter;
 		vm.myScore = vm.myScore + 100;
 		vm.lastWord = guess;
 		vm.reset(firstLetter, false);
 		vm.repaint();
 	} else {
-		var guess = report.guess;
+		const guess = report.guess;
-		var result = report.result;
+		const result = report.result;
 		if (result[0] === 9) {
-			var invalidGuess = '-'.repeat(vm.wordLength);
+			const invalidGuess = '-'.repeat(vm.wordLength);
 			vm.myGuesses.push(invalidGuess);
 		} else {
-			for (var i = 0; i < vm.wordLength; i++) {
+			for (let i = 0; i < vm.wordLength; i++) {
 				if (result[i] === 2) {
 					vm.myProgress[i] = guess[i];
 				}
@@ -633,9 +633,9 @@ function onPlayerReport(message) {
 }
 
 function onPlayerJoined(message) {
-	var report = JSON.parse(message.body);
+	const report = JSON.parse(message.body);
-	var username = report[0];
+	const username = report[0];
-	var numUsers = report[1];
+	const numUsers = report[1];
 	if (username === vm.username) {
 		addChatAnnouncement('Welcome to Lingo!');
 		if (numUsers === 1) {
@@ -652,7 +652,7 @@ function onPlayerJoined(message) {
 }
 
 function onPlayerLeft(message) {
-	var username = message.body;
+	const username = message.body;
 	addChatAnnouncement(username + ' left');
 	vm.removePlayer(username);
 }
@@ -666,12 +666,12 @@ function canShowNotification() {
 
 function showNotification(messageSender, messageBody) {
 	if (canShowNotification()) {
-		var title = messageSender;
+		const title = messageSender;
-		var options = {
+		const options = {
 			body : messageBody,
 			icon : '/chat-bubble.png'
 		};
-		var notification = new Notification(title, options);
+		const notification = new Notification(title, options);
 		setTimeout(function() {
 			notification.close();
 		}, 3000);

server/src/main/resources/static/practice.js

@@ -1,20 +1,20 @@
-var HEIGHT = 300;
+const HEIGHT = 300;
-var WIDTH = 250;
+const WIDTH = 250;
-var SIDE = 50;
+const SIDE = 50;
-var MARGIN_TOP = 50;
+const MARGIN_TOP = 50;
-var MARGIN_BOTTOM = 25;
+const MARGIN_BOTTOM = 25;
 
-var myScore = 0;
+let myScore = 0;
-var myGuess;
+let myGuess = null;
-var myGuesses;
+let myGuesses = null;
-var myProgress;
+let myProgress = null;
-var myResults;
+let myResults = null;
-var lastWord;
+let lastWord = null;
 
-var canvas = document.getElementById('canvas');
+const canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
+const ctx = canvas.getContext('2d');
 
-var client;
+let client = null;
 
 function main() {
 	start();
@@ -60,14 +60,12 @@ function start() {
 // special keys
 function addKeydownListener() {
 	document.addEventListener('keydown', function(e) {
-		// backspace
+		if (e.key === 'Backspace') {
-		if (e.which === 8) {
 			myGuess = myGuess.substr(0, myGuess.length - 1);
 			repaint();
 			e.preventDefault();
 		}
-		// return
+		else if (e.key === 'Enter') {
-		else if (e.which === 13) {
 			if (myGuess.length === 5) {
 				client.publish({destination: '/app/practiceGuess', body: myGuess});
 				myGuess = '';
@@ -80,12 +78,12 @@ function addKeydownListener() {
 // characters
 function addKeypressListener() {
 	document.addEventListener('keypress', function(e) {
-		var charCode = e.charCode;
+		let charCode = e.charCode;
 		if (isCharacter(charCode)) {
 			if (isCharacterLowercase(charCode)) {
 				charCode = charCode - 32;
 			}
-			var char = String.fromCharCode(charCode);
+			const char = String.fromCharCode(charCode);
 			if (myGuess.length < 5) {
 				myGuess += char;
 				repaint();
@@ -102,37 +100,38 @@ function addSkipButtonListener() {
 }
 
 function drawMyBoard() {
-	var x = 25, y = MARGIN_TOP;
+	const x = 25;
+	const y = MARGIN_TOP;
 	drawScore(x, y, myScore);
 	drawInput(x, y, myGuess);
-	var yStart = drawGuesses(x, y, myGuesses, myResults);
+	const yStart = drawGuesses(x, y, myGuesses, myResults);
 	drawHint(x, yStart, myProgress);
 	drawGrid(x, y);
 }
 
 function drawLastWord() {
 	if (lastWord) {
-		var x = canvas.width / 2;
+		const x = canvas.width / 2;
-		var y = canvas.height - MARGIN_BOTTOM / 2;
+		const y = canvas.height - MARGIN_BOTTOM / 2;
 		ctx.fillStyle = 'black';
 		ctx.fillText(lastWord.toUpperCase(), x, y);
 	}
 }
 
 function drawScore(x, y, score) {
-	var scoreX = x + WIDTH / 2;
+	const scoreX = x + WIDTH / 2;
-	var scoreY = y - 25;
+	const scoreY = y - 25;
 	ctx.fillStyle = 'black';
 	ctx.fillText(score, scoreX, scoreY);
 }
 
 function drawGrid(xOrigin, yOrigin) {
 	ctx.beginPath();
-	for (var x = 0; x <= WIDTH; x += SIDE) {
+	for (let x = 0; x <= WIDTH; x += SIDE) {
 		ctx.moveTo(xOrigin + x, yOrigin);
 		ctx.lineTo(xOrigin + x, yOrigin + HEIGHT);
 	}
-	for (var y = 0; y <= HEIGHT; y += SIDE) {
+	for (let y = 0; y <= HEIGHT; y += SIDE) {
 		ctx.moveTo(xOrigin, yOrigin + y);
 		ctx.lineTo(xOrigin + WIDTH, yOrigin +  y);
 	}
@@ -142,22 +141,22 @@ function drawGrid(xOrigin, yOrigin) {
 
 function drawInput(xOrigin, yOrigin, input) {
 	ctx.fillStyle = 'green';
-	var x = xOrigin + SIDE * 0.5;
+	let x = xOrigin + SIDE * 0.5;
-	var y = yOrigin + SIDE * 0.5;
+	const y = yOrigin + SIDE * 0.5;
-	for (var i = 0; i < myGuess.length; i++) {
+	for (let i = 0; i < myGuess.length; i++) {
 		ctx.fillText(myGuess[i], x, y);
 		x += SIDE;
 	}
 }
 
 function drawGuesses(xOrigin, yOrigin, guesses, results) {
-	var y = yOrigin + SIDE * 1.5;
+	let y = yOrigin + SIDE * 1.5;
-	var numGuesses = Math.min(4, guesses.length);
+	const numGuesses = Math.min(4, guesses.length);
-	for (var i = 0; i < numGuesses; i++) {
+	for (let i = 0; i < numGuesses; i++) {
-		var x = xOrigin + SIDE * 0.5;
+		let x = xOrigin + SIDE * 0.5;
-		var guess = guesses[guesses.length - numGuesses + i];
+		const guess = guesses[guesses.length - numGuesses + i];
-		var result = results[results.length - numGuesses + i];
+		const result = results[results.length - numGuesses + i];
-		for (var j = 0; j < 5; j++) {
+		for (let j = 0; j < 5; j++) {
 			if (result[j] === 1) {
 				ctx.fillStyle = 'yellow';
 				ctx.fillRect(x - SIDE * 0.5, y - SIDE * 0.5, SIDE, SIDE);
@@ -174,30 +173,9 @@ function drawGuesses(xOrigin, yOrigin, guesses, results) {
 	return y;
 }
 
-function drawResults(xOrigin, yOrigin, results) {
-	var y = yOrigin + SIDE * 1.5;
-	var numResults = Math.min(4, results.length);
-	for (var i = 0; i < numResults; i++) {
-		var x = xOrigin + SIDE * 0.5;
-		var result = results[results.length - numResults + i];
-		for (var j = 0; j < 5; j++) {
-			if (result[j] === 1) {
-				ctx.fillStyle = 'yellow';
-				ctx.fillRect(x - SIDE * 0.5, y - SIDE * 0.5, SIDE, SIDE);
-			} else if (result[j] === 2) {
-				ctx.fillStyle = 'orange';
-				ctx.fillRect(x - SIDE * 0.5, y - SIDE * 0.5, SIDE, SIDE);
-			}
-			x += SIDE;
-		}
-		y += SIDE;
-	}
-	return y;
-}
-
 function drawHint(xOrigin, yOrigin, progress) {
-	var x = xOrigin + SIDE * 0.5;
+	let x = xOrigin + SIDE * 0.5;
-	for (var i = 0; i < 5; i++) {
+	for (let i = 0; i < 5; i++) {
 		ctx.fillText(progress[i], x, yOrigin);
 		x += SIDE;
 	}
@@ -239,7 +217,7 @@ function reset(firstLetter, clearScore) {
 
 function subscribeToPracticeGame() {
 	client.subscribe('/user/topic/practiceGame', function(message) {
-		var firstLetter = message.body;
+		const firstLetter = message.body;
 		reset(firstLetter, true);
 		repaint();
 		document.getElementById('skipDiv').classList.remove('hidden');
@@ -249,21 +227,21 @@ function subscribeToPracticeGame() {
 function subscribeToPracticeReports() {
 	client.subscribe('/user/topic/practiceReports', function(message) {
 		console.log('My report: ' + message.body);
-		var report = JSON.parse(message.body);
+		const report = JSON.parse(message.body);
 		if (report.correct === true) {
-			var guess = report.guess;
+			const guess = report.guess;
-			var firstLetter = report.firstLetter;
+			const firstLetter = report.firstLetter;
 			myScore = myScore + 100;
 			lastWord = guess;
 			reset(firstLetter, false);
 			repaint();
 		} else {
-			var guess = report.guess;
+			const guess = report.guess;
-			var result = report.result;
+			const result = report.result;
 			if (result[0] === 9) {
 				myGuesses.push('-----');
 			} else {
-				for (var i = 0; i < 5; i++) {
+				for (let i = 0; i < 5; i++) {
 					if (result[i] === 2) {
 						myProgress[i] = guess[i];
 					}
@@ -278,7 +256,7 @@ function subscribeToPracticeReports() {
 
 function subscribeToPracticeWordSkipped() {
 	client.subscribe('/user/topic/practiceWordSkipped', function(message) {
-		var firstLetter = message.body;
+		const firstLetter = message.body;
 		lastWord = null;
 		reset(firstLetter, false);
 		repaint();