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

Redesign web client

Browse Source
This commit is contained in:
Charles Gould 2017-01-05 21:30:08 -05:00
parent 7238b592ec
commit 94130fd141
6 changed files with 676 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
server/src/main/resources/static/client.css Normal file
View File

@ -0,0 +1,132 @@
/* Layout rules (specific) */
.left.col {
left: 0;
right: 300px;
}
.right.col {
width: 300px;
right: 0;
}
.header.row {
height: 75px;
line-height: 75px;
}
.body.row {
top: 75px;
bottom: 0;
}
.footer.row {
height: 50px;
bottom: 0;
line-height: 50px;
}
.header {
font-size: 1.4em;
color: #eee;
background: #696f77;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
padding: 0 0.5em;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #696f77),
color-stop(100%, #28343b));
background: -webkit-linear-gradient(top, #696f77 0%, #28343b 100%);
background: -ms-linear-gradient(top, #696f77 0%, #28343b 100%);
}
.body {
background: #ddd
}
.right.col {
border-left: 1px solid black;
}
.right.col .body {
padding: 0 1em;
}
/* Common rules */
.centered {
display: block;
margin: 0 auto;
}
.hidden {
display: none;
}
button {
padding: 6px 12px;
}
button:hover {
cursor: pointer;
}
canvas {
outline: none;
}
h1 {
font: 24pt sans-serif;
font-variant: small-caps;
text-align: center
}
/* Chat rules */
.message-item {
border-top: 1px solid black;
padding: 10px;
position: relative;
}
.message-item.first {
border: none;
}
.log {
color: green;
}
#messageInput {
width: 100%;
height: 42px;
padding-left: 10px;
}
/* Username page */
.jumbotron {
margin: 48px auto;
padding: 48px 60px;
width: 80%;
background-color: #eee;
border-radius: 6px;
}
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
}
.form-group {
margin-bottom: 15px;
}
.form-control {
width: 100%;
height: 24px;
padding: 6px 12px;
font-size: 14px;
color: #555;
border: 1px solid #ccc;
border-radius: 4px;
}

80
server/src/main/resources/static/client.html Normal file
View File

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Lingo</title>
<link rel="stylesheet" href="panes.css">
<link rel="stylesheet" href="cube-grid.css">
<link rel="stylesheet" href="client.css">
</head>
<body>
<div id="usernameDiv" 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 id="appDiv" class="hidden">
<div class="left col">
<div class="header row">Lingo</div>
<div class="body row scroll-y">
<div id="canvasDiv" class="hidden">
<canvas id="canvas" class="centered" width="600" height="475" tabindex="1"></canvas>
</div>
<div id="waitingDiv" class="hidden">
<h1>Waiting for Opponent</h1>
<!-- Based on http://tobiasahlin.com/spinkit -->
<div class="sk-cube-grid">
<div class="sk-cube sk-cube1"></div>
<div class="sk-cube sk-cube2"></div>
<div class="sk-cube sk-cube3"></div>
<div class="sk-cube sk-cube4"></div>
<div class="sk-cube sk-cube5"></div>
<div class="sk-cube sk-cube6"></div>
<div class="sk-cube sk-cube7"></div>
<div class="sk-cube sk-cube8"></div>
<div class="sk-cube sk-cube9"></div>
<div class="sk-cube sk-cube10"></div>
<div class="sk-cube sk-cube11"></div>
<div class="sk-cube sk-cube12"></div>
<div class="sk-cube sk-cube13"></div>
<div class="sk-cube sk-cube14"></div>
<div class="sk-cube sk-cube15"></div>
<div class="sk-cube sk-cube16"></div>
<div class="sk-cube sk-cube17"></div>
<div class="sk-cube sk-cube18"></div>
<div class="sk-cube sk-cube19"></div>
<div class="sk-cube sk-cube20"></div>
<div class="sk-cube sk-cube21"></div>
<div class="sk-cube sk-cube22"></div>
<div class="sk-cube sk-cube23"></div>
<div class="sk-cube sk-cube24"></div>
<div class="sk-cube sk-cube25"></div>
<div class="sk-cube sk-cube26"></div>
<div class="sk-cube sk-cube27"></div>
<div class="sk-cube sk-cube28"></div>
<div class="sk-cube sk-cube29"></div>
<div class="sk-cube sk-cube30"></div>
</div>
</div>
</div>
</div>
<div class="right col">
<div class="header row">Chat</div>
<div class="body row scroll-y">
<div id="messageList"></div>
</div>
<div class="footer row">
<input id="messageInput" placeholder="Chat here..." />
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/sockjs-client/1.1.1/sockjs.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>
<script src="client.js"></script>
</body>
</html>

417
server/src/main/resources/static/client.js Normal file
View File

@ -0,0 +1,417 @@
var KEYCODE_BACKSPACE = 8;
var KEYCODE_RETURN = 13;
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 appDiv = document.getElementById('appDiv');
var canvasDiv = document.getElementById('canvasDiv');
var waitingDiv = document.getElementById('waitingDiv');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var client;
function main() {
var usernameDiv = document.getElementById('usernameDiv');
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');
appDiv.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 === KEYCODE_RETURN) {
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();
addChatMessageListener();
reset();
repaint();
client = Stomp.over(new SockJS('/stomp'));
client.connect({}, function(frame) {
subscribeToChatMessages();
subscribeToOpponentJoined();
subscribeToOpponentLeft();
subscribeToOpponentReports();
subscribeToPlayerReports();
client.send('/app/lingo/join', {}, myUsername);
});
}
// special keys
function addKeydownListener() {
canvasDiv.addEventListener('keydown', function(e) {
if (e.which === KEYCODE_BACKSPACE) {
myGuess = myGuess.substr(0, myGuess.length - 1);
repaint();
e.preventDefault();
}
else if (e.which === KEYCODE_RETURN) {
if (myGuess.length === 5) {
client.send("/app/lingo/guess", {}, myGuess);
myGuess = '';
repaint();
}
}
});
}
// characters
function addKeypressListener() {
canvasDiv.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 addChatMessageListener() {
var messageInput = document.getElementById('messageInput');
messageInput.addEventListener('keydown', function(e) {
if (e.which === KEYCODE_RETURN) {
var text = messageInput.value;
messageInput.value = '';
client.send('/app/lingo/chat', {}, text);
addChatMessage('Me', text);
}
});
}
function addChatMessage(sender, body) {
var messageList = document.getElementById('messageList');
var usernameNode = document.createElement('strong');
var usernameTextNode = document.createTextNode(sender)
usernameNode.appendChild(usernameTextNode);
var messageTextNode = document.createTextNode(' ' + body);
var messageItem = document.createElement('div');
messageItem.classList.add('message-item');
messageItem.appendChild(usernameNode);
messageItem.appendChild(messageTextNode);
addMessageItem(messageList, messageItem);
}
function addChatAnnouncement(body) {
var messageList = document.getElementById('messageList');
var messageTextNode = document.createTextNode(body);
var messageItem = document.createElement('div');
messageItem.classList.add('message-item');
messageItem.classList.add('log');
messageItem.appendChild(messageTextNode);
addMessageItem(messageList, messageItem);
}
// Auto-scrolls the message list
function addMessageItem(messageList, messageItem) {
if (!messageList.hasChildNodes()) {
messageItem.classList.add('first');
}
messageList.appendChild(messageItem);
messageList.scrollTop = messageList.scrollHeight;
}
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 subscribeToChatMessages() {
client.subscribe('/topic/lingo/chat', function(message) {
var chatMessage = JSON.parse(message.body);
var messageSender = chatMessage.username;
var messageBody = chatMessage.message;
if (messageSender === null) {
addChatAnnouncement(messageBody);
} else if (messageSender === myUsername) {
console.log('Ignoring message sent by myself')
} else {
console.log('Message from ' + messageSender + ": " + messageBody);
addChatMessage(messageSender, messageBody);
}
});
}
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);
canvasDiv.classList.remove('hidden');
waitingDiv.classList.add('hidden');
repaint();
});
}
function subscribeToOpponentLeft() {
client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
opponentUsername = null;
lastWord = null;
canvasDiv.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();

25
server/src/main/resources/static/cube-grid.css
View File

@ -1,18 +1,17 @@
/* Based on http://tobiasahlin.com/spinkit */ /* Based on http://tobiasahlin.com/spinkit */
.sk-cube-grid { .sk-cube-grid {
width: 300px; width: 200px;
height: 300px; height: 200px;
margin: 35px auto; margin: 35px auto;
} }
.sk-cube-grid .sk-cube { .sk-cube-grid .sk-cube {
width: 20%; width: 20%;
height: 20%; height: 20%;
background-color: orange;
float: left; float: left;
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; -webkit-animation: sk-cubeGridScaleDelay 2s infinite ease-in-out;
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 2s infinite ease-in-out;
} }
/* /*
@ -169,20 +168,32 @@
} }
@-webkit-keyframes sk-cubeGridScaleDelay { @-webkit-keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% { 0%, 100% {
background-color: orange;
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 70% {
background-color: yellow;
-webkit-transform: scale3D(1, 1, 1); -webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1);
} 35% { } 35% {
background-color: greenyellow;
-webkit-transform: scale3D(0, 0, 1); -webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1);
} }
} }
@keyframes sk-cubeGridScaleDelay { @keyframes sk-cubeGridScaleDelay {
0%, 70%, 100% { 0%, 100% {
background-color: orange;
-webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1);
} 70% {
background-color: yellow;
-webkit-transform: scale3D(1, 1, 1); -webkit-transform: scale3D(1, 1, 1);
transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1);
} 35% { } 35% {
background-color: greenyellow;
-webkit-transform: scale3D(0, 0, 1); -webkit-transform: scale3D(0, 0, 1);
transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1);
} }

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

@ -14,7 +14,7 @@
<h2>Web Client (easier)</h2> <h2>Web Client (easier)</h2>
<p><a href="practice.html">Practice</a> the game or <p><a href="practice.html">Practice</a> the game or
<a href="multiplayer.html">play online</a>.</p> <a href="multiplayer.html">play online</a>.</p>
<a href="multiplayer.html"> <a href="client.html">
<img src="screenshots/lingo-web.png" /> <img src="screenshots/lingo-web.png" />
</a> </a>
</div> </div>

28
server/src/main/resources/static/panes.css Normal file
View File

@ -0,0 +1,28 @@
/* Layout rules (generic) */
body {
margin: 0;
}
.row, .col {
overflow: hidden;
position: absolute;
}
.row {
left: 0;
right: 0;
}
.col {
top: 0;
bottom: 0;
}
.scroll-x {
overflow-x: auto;
}
.scroll-y {
overflow-y: auto;
}