353 lines
8.4 KiB
JavaScript
353 lines
8.4 KiB
JavaScript
var HEIGHT = 300;
|
|
var WIDTH = 250;
|
|
var SIDE = 50;
|
|
var MARGIN_TOP = 100;
|
|
var MARGIN_BOTTOM = 75;
|
|
|
|
var myScore = 0;
|
|
var myGuess;
|
|
var myGuesses;
|
|
var myProgress;
|
|
var myResults;
|
|
var myUsername;
|
|
var opponentScore = 0;
|
|
var opponentResults;
|
|
var opponentUsername;
|
|
var lastWord;
|
|
|
|
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');
|
|
|
|
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';
|
|
|
|
addKeydownListener();
|
|
addKeypressListener();
|
|
|
|
reset();
|
|
repaint();
|
|
|
|
client = Stomp.over(new SockJS('/stomp'));
|
|
|
|
client.connect({}, function(frame) {
|
|
subscribeToOpponentJoined();
|
|
subscribeToOpponentLeft();
|
|
subscribeToOpponentReports();
|
|
subscribeToPlayerReports();
|
|
client.send('/app/lingo/join', {}, myUsername);
|
|
});
|
|
}
|
|
|
|
// special keys
|
|
function addKeydownListener() {
|
|
document.addEventListener('keydown', function(e) {
|
|
// backspace
|
|
if (e.which === 8) {
|
|
myGuess = myGuess.substr(0, myGuess.length - 1);
|
|
repaint();
|
|
e.preventDefault();
|
|
}
|
|
// return
|
|
else if (e.which === 13) {
|
|
if (myGuess.length === 5) {
|
|
client.send("/app/lingo/guess", {}, myGuess);
|
|
myGuess = '';
|
|
repaint();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// characters
|
|
function addKeypressListener() {
|
|
document.addEventListener('keypress', function(e) {
|
|
var charCode = e.charCode;
|
|
if (isCharacter(charCode)) {
|
|
if (isCharacterLowercase(charCode)) {
|
|
charCode = charCode - 32;
|
|
}
|
|
var char = String.fromCharCode(charCode);
|
|
if (myGuess.length < 5) {
|
|
myGuess += char;
|
|
repaint();
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
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);
|
|
drawHint(x, yStart, myProgress);
|
|
drawGrid(x, y);
|
|
}
|
|
|
|
function drawOpponentBoard() {
|
|
var x = 325, y = MARGIN_TOP;
|
|
drawUsername(x, y, opponentUsername);
|
|
drawScore(x, y, opponentScore);
|
|
drawResults(x, y, opponentResults);
|
|
drawGrid(x, y);
|
|
}
|
|
|
|
function drawLastWord() {
|
|
if (lastWord) {
|
|
var x = canvas.width / 2;
|
|
var y = canvas.height - MARGIN_BOTTOM / 2;
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillText('Previous word: ' + lastWord.toUpperCase(), x, y);
|
|
}
|
|
}
|
|
|
|
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 - 25;
|
|
ctx.fillStyle = 'black';
|
|
ctx.fillText(score, scoreX, scoreY);
|
|
}
|
|
|
|
function drawGrid(xOrigin, yOrigin) {
|
|
ctx.beginPath();
|
|
for (var 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) {
|
|
ctx.moveTo(xOrigin, yOrigin + y);
|
|
ctx.lineTo(xOrigin + WIDTH, yOrigin + y);
|
|
}
|
|
ctx.strokeStyle = 'black';
|
|
ctx.stroke();
|
|
}
|
|
|
|
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++) {
|
|
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++) {
|
|
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);
|
|
}
|
|
ctx.fillStyle = 'green';
|
|
ctx.fillText(guess[j], x, y);
|
|
x += SIDE;
|
|
}
|
|
y += SIDE;
|
|
}
|
|
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++) {
|
|
ctx.fillText(progress[i], x, yOrigin);
|
|
x += SIDE;
|
|
}
|
|
}
|
|
|
|
function isCharacter(charCode) {
|
|
return isCharacterLowercase(charCode) || isCharacterUppercase(charCode);
|
|
}
|
|
|
|
function isCharacterLowercase(charCode) {
|
|
return charCode >= 97 && charCode <= 122;
|
|
}
|
|
|
|
function isCharacterUppercase(charCode) {
|
|
return charCode >= 65 && charCode <= 90;
|
|
}
|
|
|
|
function isValidResult(result) {
|
|
for (var i = 0; i < 5; i++) {
|
|
if (result[i] !== 0 && result[i] !== 1 && result[i] !== 2) {
|
|
return false;
|
|
}
|
|
}
|
|
return true;
|
|
}
|
|
|
|
function repaint() {
|
|
// clear the canvas
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
// draw the components
|
|
drawMyBoard();
|
|
drawOpponentBoard();
|
|
drawLastWord();
|
|
}
|
|
|
|
function reset(firstLetter, clearScore) {
|
|
if (!firstLetter) {
|
|
firstLetter = '';
|
|
}
|
|
myGuess = '';
|
|
myGuesses = [];
|
|
myProgress = [firstLetter, '', '', '', ''];
|
|
myResults = [];
|
|
opponentResults = [];
|
|
if (clearScore) {
|
|
myScore = 0;
|
|
opponentScore = 0;
|
|
}
|
|
}
|
|
|
|
function subscribeToOpponentJoined() {
|
|
client.subscribe('/user/topic/lingo/opponentJoined', function(message) {
|
|
var report = JSON.parse(message.body);
|
|
var firstLetter = report[0];
|
|
opponentUsername = report[1];
|
|
console.log('Opponent username: ' + opponentUsername);
|
|
reset(firstLetter, true);
|
|
gameDiv.classList.remove('hidden');
|
|
waitingDiv.classList.add('hidden');
|
|
repaint();
|
|
});
|
|
}
|
|
|
|
function subscribeToOpponentLeft() {
|
|
client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
|
|
opponentUsername = null;
|
|
lastWord = null;
|
|
gameDiv.classList.add('hidden');
|
|
waitingDiv.classList.remove('hidden');
|
|
repaint();
|
|
});
|
|
}
|
|
|
|
function subscribeToOpponentReports() {
|
|
client.subscribe('/user/topic/lingo/opponentReports', function(message) {
|
|
var report = JSON.parse(message.body);
|
|
if (report.correct === true) {
|
|
var guess = report.guess;
|
|
var firstLetter = report.firstLetter;
|
|
console.log('Opponent guessed correctly! ' + guess);
|
|
opponentScore = opponentScore + 100;
|
|
lastWord = guess;
|
|
reset(firstLetter, false);
|
|
repaint();
|
|
} else {
|
|
var result = report.result;
|
|
console.log('Opponent result: ' + result);
|
|
opponentResults.push(result);
|
|
repaint();
|
|
}
|
|
});
|
|
}
|
|
|
|
function subscribeToPlayerReports() {
|
|
client.subscribe('/user/topic/lingo/playerReports', function(message) {
|
|
var report = JSON.parse(message.body);
|
|
console.log('My report: ' + report);
|
|
if (report.correct === true) {
|
|
var guess = report.guess;
|
|
var firstLetter = report.firstLetter;
|
|
console.log('I guessed correctly!');
|
|
myScore = myScore + 100;
|
|
lastWord = guess;
|
|
reset(firstLetter, false);
|
|
repaint();
|
|
} else {
|
|
var guess = report.guess;
|
|
var result = report.result;
|
|
console.log('My result: ' + result);
|
|
// TODO: use isValidResult function
|
|
if (result[0] === 9) {
|
|
myGuesses.push('-----');
|
|
} else {
|
|
for (var i = 0; i < 5; i++) {
|
|
if (result[i] === 2) {
|
|
myProgress[i] = guess[i];
|
|
}
|
|
}
|
|
myGuesses.push(guess);
|
|
}
|
|
myResults.push(result);
|
|
repaint();
|
|
}
|
|
});
|
|
}
|
|
|
|
main();
|