From a38c19b9c97e99f94591eee2475aa38b4d114d84 Mon Sep 17 00:00:00 2001 From: Charles Gould Date: Sat, 30 May 2020 21:33:26 -0500 Subject: [PATCH] Replace var with const/let --- server/src/main/resources/static/client.js | 232 +++++++++---------- server/src/main/resources/static/practice.js | 116 ++++------ 2 files changed, 163 insertions(+), 185 deletions(-) diff --git a/server/src/main/resources/static/client.js b/server/src/main/resources/static/client.js index 5d28036..70ab716 100644 --- a/server/src/main/resources/static/client.js +++ b/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; -var sessionId = null; +let client = 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); - var config = { childList: true }; + const observer = new MutationObserver(scrollToBottom); + 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,54 +74,54 @@ var vm = new Vue({ }, drawLastWord: function(canvas, ctx) { if (this.lastWord) { - var x = canvas.width / 2; - var y = canvas.height - MARGIN_BOTTOM / 2; + const x = canvas.width / 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; - var usernameY = y - 60; + const usernameX = x + WIDTH / 2; + const usernameY = y - 60; ctx.fillStyle = 'black'; ctx.fillText(username, usernameX, usernameY); }, drawScore: function(ctx, x, y, score) { - var scoreX = x + WIDTH / 2; - var scoreY = y - 25; + const scoreX = x + WIDTH / 2; + 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); + ctx.lineTo(xOrigin + WIDTH, yOrigin + y); } ctx.strokeStyle = 'black'; ctx.stroke(); }, drawInput: function(ctx, xOrigin, yOrigin, input) { ctx.fillStyle = 'green'; - var x = xOrigin + this.characterWidth * 0.5; - var y = yOrigin + CHARACTER_HEIGHT * 0.5; - for (var i = 0; i < input.length; i++) { + let x = xOrigin + this.characterWidth * 0.5; + let y = yOrigin + CHARACTER_HEIGHT * 0.5; + 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; - var numGuesses = Math.min(4, guesses.length); - for (var i = 0; i < numGuesses; i++) { - var x = xOrigin + this.characterWidth * 0.5; - var guess = guesses[guesses.length - numGuesses + i]; - var result = results[results.length - numGuesses + i]; - for (var j = 0; j < this.wordLength; j++) { + let y = yOrigin + CHARACTER_HEIGHT * 1.5; + const numGuesses = Math.min(4, guesses.length); + for (let i = 0; i < numGuesses; i++) { + let x = xOrigin + this.characterWidth * 0.5; + const guess = guesses[guesses.length - numGuesses + i]; + const result = results[results.length - numGuesses + i]; + 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; - var numResults = Math.min(4, results.length); - for (var i = 0; i < numResults; i++) { - var x = xOrigin + this.characterWidth * 0.5; - var result = results[results.length - numResults + i]; - for (var j = 0; j < this.wordLength; j++) { + let y = yOrigin + CHARACTER_HEIGHT * 1.5; + const numResults = Math.min(4, results.length); + for (let i = 0; i < numResults; i++) { + let x = xOrigin + this.characterWidth * 0.5; + const result = results[results.length - numResults + i]; + 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; - for (var i = 0; i < this.wordLength; i++) { + let x = xOrigin + this.characterWidth * 0.5; + 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; - var gameId = buttonId.substr(5); + const buttonId = e.target.id; + 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; - for (var i = 0; i < this.games.length; i++) { + let indexToRemove = null; + 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; - for (var i = 0; i < this.players.length; i++) { + let indexToRemove = null; + 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'); - var ctx = canvas.getContext('2d'); + const canvas = document.getElementById('canvas'); + 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'; - var sessionIdSubscription = null; - var sessionIdHandler = function(message) { + let sessionIdSubscription = null; + const sessionIdTopic = '/user/topic/sessionId'; + 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'); - - var usernameTopic = '/user/topic/sessionUsername'; - var usernameSubscription = null; - var usernameHandler = function(message) { - var response = JSON.parse(message.body); + let usernameSubscription = null; + const usernameInput = document.getElementById('nicknameInput'); + const usernameTopic = '/user/topic/sessionUsername'; + const usernameHandler = function(message) { + const 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; - var games = data.games; - for (var i = 0; i < games.length; i++) { - var game = games[i]; + const players = data.players; + const games = data.games; + for (let i = 0; i < games.length; 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++) { - var player = players[i]; + for (let i = 0; i < players.length; 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); - var messageSender = chatMessage.username; - var messageBody = chatMessage.message; + const chatMessage = JSON.parse(message.body); + const messageSender = chatMessage.username; + 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); - var gameId = game.id; - var playerOne = game.playerOne.username; + const game = JSON.parse(message.body); + const gameId = game.id; + 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); - var gameId = game.id; - var wordLength = game.wordLength; - var playerOne = game.playerOne.username; + const game = JSON.parse(message.body); + const gameId = game.id; + const wordLength = game.wordLength; + 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); - var gameId = game.id; - var wordLength = game.wordLength; - var playerOne = game.playerOne.username; - var playerTwo = game.playerTwo.username; + const game = JSON.parse(message.body); + const gameId = game.id; + const wordLength = game.wordLength; + const playerOne = game.playerOne.username; + const playerTwo = game.playerTwo.username; console.log(playerTwo + ' joined ' + playerOne + "'s game"); - var vueGame = null; - for (var i = 0; i < vm.games.length; i++) { + let vueGame = null; + 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); - var game = report.game; - var gameId = game.id; - var playerOne = game.playerOne.username; - var gameLeaver = report.gameLeaver.username; + const report = JSON.parse(message.body); + const game = report.game; + const gameId = game.id; + const playerOne = game.playerOne.username; + const gameLeaver = report.gameLeaver.username; console.log(gameLeaver + ' left ' + playerOne + "'s game"); - var previousPlayers = []; - for (var i = 0; i < vm.games.length; i++) { + const previousPlayers = []; + 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); - var firstLetter = report[0]; + const report = JSON.parse(message.body); + 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; - var firstLetter = report.firstLetter; + const guess = report.guess; + 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; - var firstLetter = report.firstLetter; + const guess = report.guess; + const firstLetter = report.firstLetter; vm.myScore = vm.myScore + 100; vm.lastWord = guess; vm.reset(firstLetter, false); vm.repaint(); } else { - var guess = report.guess; - var result = report.result; + const guess = report.guess; + 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); - var username = report[0]; - var numUsers = report[1]; + const report = JSON.parse(message.body); + const username = report[0]; + 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; - var options = { + const title = messageSender; + 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); diff --git a/server/src/main/resources/static/practice.js b/server/src/main/resources/static/practice.js index 6b313d0..6d8a0b3 100644 --- a/server/src/main/resources/static/practice.js +++ b/server/src/main/resources/static/practice.js @@ -1,20 +1,20 @@ -var HEIGHT = 300; -var WIDTH = 250; -var SIDE = 50; -var MARGIN_TOP = 50; -var MARGIN_BOTTOM = 25; +const HEIGHT = 300; +const WIDTH = 250; +const SIDE = 50; +const MARGIN_TOP = 50; +const MARGIN_BOTTOM = 25; -var myScore = 0; -var myGuess; -var myGuesses; -var myProgress; -var myResults; -var lastWord; +let myScore = 0; +let myGuess = null; +let myGuesses = null; +let myProgress = null; +let myResults = null; +let lastWord = null; -var canvas = document.getElementById('canvas'); -var ctx = canvas.getContext('2d'); +const canvas = document.getElementById('canvas'); +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.which === 8) { + if (e.key === 'Backspace') { myGuess = myGuess.substr(0, myGuess.length - 1); repaint(); e.preventDefault(); } - // return - else if (e.which === 13) { + else if (e.key === 'Enter') { 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; - var y = canvas.height - MARGIN_BOTTOM / 2; + const x = canvas.width / 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; - var scoreY = y - 25; + const scoreX = x + WIDTH / 2; + 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; - var y = yOrigin + SIDE * 0.5; - for (var i = 0; i < myGuess.length; i++) { + let x = xOrigin + SIDE * 0.5; + const y = yOrigin + SIDE * 0.5; + 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; - var numGuesses = Math.min(4, guesses.length); - for (var i = 0; i < numGuesses; i++) { - var x = xOrigin + SIDE * 0.5; - var guess = guesses[guesses.length - numGuesses + i]; - var result = results[results.length - numGuesses + i]; - for (var j = 0; j < 5; j++) { + let y = yOrigin + SIDE * 1.5; + const numGuesses = Math.min(4, guesses.length); + for (let i = 0; i < numGuesses; i++) { + let x = xOrigin + SIDE * 0.5; + const guess = guesses[guesses.length - numGuesses + i]; + const result = results[results.length - numGuesses + i]; + 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; - for (var i = 0; i < 5; i++) { + let x = xOrigin + SIDE * 0.5; + 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; - var firstLetter = report.firstLetter; + const guess = report.guess; + const firstLetter = report.firstLetter; myScore = myScore + 100; lastWord = guess; reset(firstLetter, false); repaint(); } else { - var guess = report.guess; - var result = report.result; + const guess = report.guess; + 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();