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

Vueify the game canvas

Browse Source
This commit is contained in:
Charles Gould 2017-02-07 18:14:45 -05:00
parent 9efb9dcd47
commit a016b73c9b
2 changed files with 197 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,19 +7,6 @@ var SIDE = 50;
var MARGIN_TOP = 100; var MARGIN_TOP = 100;
var MARGIN_BOTTOM = 75; var MARGIN_BOTTOM = 75;
var myScore = 0;
var myGuess;
var myGuesses;
var myProgress;
var myResults;
var opponentScore = 0;
var opponentResults;
var opponentUsername;
var lastWord;
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var client; var client;
var sessionId = null; var sessionId = null;
@ -30,18 +17,143 @@ var vm = new Vue({
gameId: null, gameId: null,
messages: [], messages: [],
username: null, username: null,
usernameError: '' usernameError: '',
myScore: 0,
myGuess: '',
myGuesses: [],
myProgress: [],
myResults: [],
opponentScore: 0,
opponentResults: [],
opponentUsername: null,
lastWord: null
}, },
computed: { computed: {
inGame: function() { inGame: function() {
return this.gameId !== null; return this.gameId !== null;
}, },
inStartedGame: function() { inStartedGame: function() {
var game = getGame(this.gameId); var game = this.getGame(this.gameId);
return game !== null && game.started === true; return game !== null && game.started === true;
} }
}, },
methods: { methods: {
drawMyBoard: function(ctx) {
var x = 25, 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);
this.drawHint(ctx, x, yStart, this.myProgress);
this.drawGrid(ctx, x, y);
},
drawOpponentBoard: function(ctx) {
var x = 325, y = MARGIN_TOP;
this.drawUsername(ctx, x, y, this.opponentUsername);
this.drawScore(ctx, x, y, this.opponentScore);
this.drawResults(ctx, x, y, this.opponentResults);
this.drawGrid(ctx, x, y);
},
drawLastWord: function(canvas, ctx) {
if (this.lastWord) {
var x = canvas.width / 2;
var 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;
ctx.fillStyle = 'black';
ctx.fillText(username, usernameX, usernameY);
},
drawScore: function(ctx, x, y, score) {
var scoreX = x + WIDTH / 2;
var 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 += 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();
},
drawInput: function(ctx, xOrigin, yOrigin, input) {
ctx.fillStyle = 'green';
var x = xOrigin + SIDE * 0.5;
var y = yOrigin + SIDE * 0.5;
for (var i = 0; i < input.length; i++) {
ctx.fillText(input[i], x, y);
x += SIDE;
}
},
drawGuesses: function(ctx, 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;
},
drawResults: function(ctx, 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;
},
drawHint: function(ctx, xOrigin, yOrigin, progress) {
var x = xOrigin + SIDE * 0.5;
for (var i = 0; i < 5; i++) {
ctx.fillText(progress[i], x, yOrigin);
x += SIDE;
}
},
getGame: function(gameId) {
for (var i = 0; i < this.games.length; i++) {
if (this.games[i].id === gameId) {
return this.games[i];
}
}
return null;
},
hostGame: function(event) { hostGame: function(event) {
client.send('/app/hostGame'); client.send('/app/hostGame');
}, },
@ -54,17 +166,27 @@ var vm = new Vue({
leaveGame: function(event) { leaveGame: function(event) {
client.send('/app/leaveGame'); client.send('/app/leaveGame');
}, },
removeGame: function(gameId) {
var indexToRemove = null;
for (var i = 0; i < this.games.length; i++) {
if (this.games[i].id === gameId) {
indexToRemove = i;
break;
}
}
this.games.splice(indexToRemove, 1);
},
onCanvasKeydown: function(event) { onCanvasKeydown: function(event) {
if (event.which === KEYCODE_BACKSPACE) { if (event.which === KEYCODE_BACKSPACE) {
event.preventDefault(); event.preventDefault();
myGuess = myGuess.substr(0, myGuess.length - 1); this.myGuess = this.myGuess.substr(0, this.myGuess.length - 1);
repaint(); this.repaint();
} }
else if (event.which === KEYCODE_RETURN) { else if (event.which === KEYCODE_RETURN) {
if (myGuess.length === 5) { if (this.myGuess.length === 5) {
client.send("/app/guess", {}, myGuess); client.send("/app/guess", {}, this.myGuess);
myGuess = ''; this.myGuess = '';
repaint(); this.repaint();
} }
} }
}, },
@ -75,9 +197,9 @@ var vm = new Vue({
charCode = charCode - 32; charCode = charCode - 32;
} }
var char = String.fromCharCode(charCode); var char = String.fromCharCode(charCode);
if (myGuess.length < 5) { if (this.myGuess.length < 5) {
myGuess += char; this.myGuess += char;
repaint(); this.repaint();
} }
} }
}, },
@ -93,9 +215,34 @@ var vm = new Vue({
} }
messageInput.value = ''; messageInput.value = '';
client.send('/app/chat', {}, text); client.send('/app/chat', {}, text);
addChatMessage(vm.username, text); addChatMessage(this.username, text);
} }
} }
},
repaint: function() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.font = '25px Monospace';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.clearRect(0, 0, canvas.width, canvas.height);
this.drawMyBoard(ctx);
this.drawOpponentBoard(ctx);
this.drawLastWord(canvas, ctx);
},
reset: function(firstLetter, clearScore) {
if (!firstLetter) {
firstLetter = '';
}
this.myGuess = '';
this.myGuesses = [];
this.myProgress = [firstLetter, '', '', '', ''];
this.myResults = [];
this.opponentResults = [];
if (clearScore) {
this.myScore = 0;
this.opponentScore = 0;
}
} }
} }
}); });
@ -163,12 +310,6 @@ function main() {
} }
function start() { function start() {
ctx.font = '25px Monospace';
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
reset();
repaint();
// Load initial data // Load initial data
doHttpGet('/games', function(games) { doHttpGet('/games', function(games) {
@ -228,124 +369,6 @@ function doHttpGet(url, callback) {
xhr.send(); xhr.send();
} }
function drawMyBoard() {
var x = 25, y = MARGIN_TOP;
drawUsername(x, y, vm.username);
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) { function isCharacter(charCode) {
return isCharacterLowercase(charCode) || isCharacterUppercase(charCode); return isCharacterLowercase(charCode) || isCharacterUppercase(charCode);
} }
@ -367,51 +390,6 @@ function isValidResult(result) {
return true; return true;
} }
function getGame(gameId) {
for (var i = 0; i < vm.games.length; i++) {
if (vm.games[i].id === gameId) {
return vm.games[i];
}
}
return null;
}
function removeGame(gameId) {
var indexToRemove = null;
for (var i = 0; i < vm.games.length; i++) {
if (vm.games[i].id === gameId) {
indexToRemove = i;
break;
}
}
vm.games.splice(indexToRemove, 1);
}
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 onChat(message) { function onChat(message) {
var chatMessage = JSON.parse(message.body); var chatMessage = JSON.parse(message.body);
var messageSender = chatMessage.username; var messageSender = chatMessage.username;
@ -434,7 +412,7 @@ function onGameClosed(message) {
if (playerOne === vm.username) { if (playerOne === vm.username) {
vm.gameId = null; vm.gameId = null;
} }
removeGame(gameId); vm.removeGame(gameId);
} }
function onGameHosted(message) { function onGameHosted(message) {
@ -512,16 +490,16 @@ function onGameStarted(message) {
function onOpponentJoined(message) { function onOpponentJoined(message) {
var report = JSON.parse(message.body); var report = JSON.parse(message.body);
var firstLetter = report[0]; var firstLetter = report[0];
opponentUsername = report[1]; vm.opponentUsername = report[1];
console.log('Opponent username: ' + opponentUsername); console.log('Opponent username: ' + vm.opponentUsername);
reset(firstLetter, true); vm.reset(firstLetter, true);
repaint(); vm.repaint();
} }
function onOpponentLeft(message) { function onOpponentLeft(message) {
opponentUsername = null; vm.opponentUsername = null;
lastWord = null; vm.lastWord = null;
repaint(); vm.repaint();
} }
function onOpponentReport(message) { function onOpponentReport(message) {
@ -530,15 +508,15 @@ function onOpponentReport(message) {
var guess = report.guess; var guess = report.guess;
var firstLetter = report.firstLetter; var firstLetter = report.firstLetter;
console.log('Opponent guessed correctly! ' + guess); console.log('Opponent guessed correctly! ' + guess);
opponentScore = opponentScore + 100; vm.opponentScore = vm.opponentScore + 100;
lastWord = guess; vm.lastWord = guess;
reset(firstLetter, false); vm.reset(firstLetter, false);
repaint(); vm.repaint();
} else { } else {
var result = report.result; var result = report.result;
console.log('Opponent result: ' + result); console.log('Opponent result: ' + result);
opponentResults.push(result); vm.opponentResults.push(result);
repaint(); vm.repaint();
} }
} }
@ -549,27 +527,27 @@ function onPlayerReport(message) {
var guess = report.guess; var guess = report.guess;
var firstLetter = report.firstLetter; var firstLetter = report.firstLetter;
console.log('I guessed correctly!'); console.log('I guessed correctly!');
myScore = myScore + 100; vm.myScore = vm.myScore + 100;
lastWord = guess; vm.lastWord = guess;
reset(firstLetter, false); vm.reset(firstLetter, false);
repaint(); vm.repaint();
} else { } else {
var guess = report.guess; var guess = report.guess;
var result = report.result; var result = report.result;
console.log('My result: ' + result); console.log('My result: ' + result);
// TODO: use isValidResult function // TODO: use isValidResult function
if (result[0] === 9) { if (result[0] === 9) {
myGuesses.push('-----'); vm.myGuesses.push('-----');
} else { } else {
for (var i = 0; i < 5; i++) { for (var i = 0; i < 5; i++) {
if (result[i] === 2) { if (result[i] === 2) {
myProgress[i] = guess[i]; vm.myProgress[i] = guess[i];
} }
} }
myGuesses.push(guess); vm.myGuesses.push(guess);
} }
myResults.push(result); vm.myResults.push(result);
repaint(); vm.repaint();
} }
} }

4
server/src/main/resources/static/index.html
View File

@ -12,12 +12,12 @@
<div class="main column"> <div class="main column">
<div class="header row">Lingo</div> <div class="header row">Lingo</div>
<div class="body row nofooter"> <div class="body row nofooter">
<div v-if="!username" class="form"> <div v-show="!username" class="form">
<h2>What is your name?</h2> <h2>What is your name?</h2>
<input id="nicknameInput" type="text" class="form-control" maxlength="16" autofocus> <input id="nicknameInput" type="text" class="form-control" maxlength="16" autofocus>
<p class="error-message">{{ usernameError }}</p> <p class="error-message">{{ usernameError }}</p>
</div> </div>
<div v-if="username"> <div v-show="username">
<div v-bind:class="{ primary: !inStartedGame }" class="lobby column"> <div v-bind:class="{ primary: !inStartedGame }" class="lobby column">
<div class="body row noheader nofooter scroll-y"> <div class="body row noheader nofooter scroll-y">
<div class="panel"> <div class="panel">