Add JavaScript client

server/src/main/java/lingo/server/WebSocketConfig.java

@@ -18,7 +18,10 @@ public class WebSocketConfig extends AbstractWebSocketMessageBrokerConfigurer {
 
 	@Override
 	public void registerStompEndpoints(StompEndpointRegistry registry) {
+		// For JavaFX client
 		registry.addEndpoint("/stomp");
+		// For JavaScript client
+		registry.addEndpoint("/sockjs").withSockJS();
 	}
 
 }

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

@@ -0,0 +1,204 @@
+canvas {
+  display: block;
+  margin: 0 auto;
+}
+
+h1 {
+  font: 24pt sans-serif;
+  font-variant: small-caps;
+  text-align: center
+}
+
+.hidden {
+  display: none;
+}
+
+/* Below based on http://tobiasahlin.com/spinkit */
+
+.sk-cube-grid {
+  width: 200px;
+  height: 200px;
+  margin: 35px auto;
+}
+
+.sk-cube-grid .sk-cube {
+  width: 20%;
+  height: 20%;
+  background-color: orange;
+  float: left;
+  -webkit-animation: sk-cubeGridScaleDelay 1.5s infinite ease-in-out;
+          animation: sk-cubeGridScaleDelay 1.5s infinite ease-in-out;
+}
+
+/*
+0.0s - 26
+0.1s - 27, 21
+0.2s - 28, 22, 16
+0.3s - 29, 23, 17, 11
+0.4s - 30, 24, 18, 12, 06
+0.5s -     25, 19, 13, 07, 01
+0.6s -         20, 14, 08, 02
+0.7s -             15, 09, 03
+0.8s -                 10, 04
+0.9s -                     05
+*/
+
+/* 0 second delay */
+.sk-cube-grid .sk-cube26 {
+  -webkit-animation-delay: 0s;
+          animation-delay: 0s;
+}
+
+/* 0.1 second delay */
+.sk-cube-grid .sk-cube27 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+.sk-cube-grid .sk-cube21 {
+  -webkit-animation-delay: 0.1s;
+          animation-delay: 0.1s;
+}
+
+/* 0.2 second delay */
+.sk-cube-grid .sk-cube28 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube22 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+.sk-cube-grid .sk-cube16 {
+  -webkit-animation-delay: 0.2s;
+          animation-delay: 0.2s;
+}
+
+/* 0.3 second delay */
+.sk-cube-grid .sk-cube29 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube23 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube17 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+.sk-cube-grid .sk-cube11 {
+  -webkit-animation-delay: 0.3s;
+          animation-delay: 0.3s;
+}
+
+/* 0.4 second delay */
+.sk-cube-grid .sk-cube30 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube24 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube18 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube12 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+.sk-cube-grid .sk-cube6 {
+  -webkit-animation-delay: 0.4s;
+          animation-delay: 0.4s;
+}
+
+/* 0.5 second delay */
+.sk-cube-grid .sk-cube25 {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+.sk-cube-grid .sk-cube19 {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+.sk-cube-grid .sk-cube13 {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+.sk-cube-grid .sk-cube7 {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+.sk-cube-grid .sk-cube1 {
+  -webkit-animation-delay: 0.5s;
+          animation-delay: 0.5s;
+}
+
+/* 0.6 second delay */
+.sk-cube-grid .sk-cube20 {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+.sk-cube-grid .sk-cube14 {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+.sk-cube-grid .sk-cube8 {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+.sk-cube-grid .sk-cube2 {
+  -webkit-animation-delay: 0.6s;
+          animation-delay: 0.6s;
+}
+
+/* 0.7 second delay */
+.sk-cube-grid .sk-cube15 {
+  -webkit-animation-delay: 0.7s;
+          animation-delay: 0.7s;
+}
+.sk-cube-grid .sk-cube9 {
+  -webkit-animation-delay: 0.7s;
+          animation-delay: 0.7s;
+}
+.sk-cube-grid .sk-cube3 {
+  -webkit-animation-delay: 0.7s;
+          animation-delay: 0.7s;
+}
+
+/* 0.8 second delay */
+.sk-cube-grid .sk-cube10 {
+  -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+}
+.sk-cube-grid .sk-cube4 {
+  -webkit-animation-delay: 0.8s;
+          animation-delay: 0.8s;
+}
+
+/* 0.9 second delay */
+.sk-cube-grid .sk-cube5 {
+  -webkit-animation-delay: 0.9s;
+          animation-delay: 0.9s;
+}
+
+@-webkit-keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}
+
+@keyframes sk-cubeGridScaleDelay {
+  0%, 70%, 100% {
+    -webkit-transform: scale3D(1, 1, 1);
+            transform: scale3D(1, 1, 1);
+  } 35% {
+    -webkit-transform: scale3D(0, 0, 1);
+            transform: scale3D(0, 0, 1);
+  }
+}

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

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Lingo</title>
+<link rel="stylesheet" href="client.css">
+</head>
+<body>
+	<div id="gameDiv" class="hidden">
+		<canvas id="canvas" width="600" height="425"></canvas>
+	</div>
+	<div id="waitingDiv">
+		<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>
+
+	<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>

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

@@ -0,0 +1,306 @@
+var HEIGHT = 300;
+var WIDTH = 250;
+var SIDE = 50;
+var MARGIN_TOP = 50;
+var MARGIN_BOTTOM = 75;
+
+var myScore = 0;
+var myGuess;
+var myGuesses;
+var myProgress;
+var myResults;
+var opponentScore = 0;
+var opponentResults;
+var lastWord;
+
+var canvasDiv = document.getElementById('canvasDiv');
+var waitingDiv = document.getElementById('waitingDiv');
+var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+var client;
+
+function main() {
+	ctx.font = '25px Monospace';
+	ctx.textBaseline = 'middle';
+	ctx.textAlign = 'center';
+
+	addKeydownListener();
+	addKeypressListener();
+
+	reset();
+	repaint();
+
+	client = Stomp.over(new SockJS('/sockjs'));
+
+	client.connect({}, function(frame) {
+		console.log('Connected: ' + frame);
+		subscribeToOpponentJoined();
+		subscribeToOpponentLeft();
+		subscribeToOpponentReports();
+		subscribeToPlayerReports();
+		client.send('/app/lingo/join');
+	});
+}
+
+// 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;
+	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;
+	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 drawScore(x, y, score) {
+	var scoreX = x + WIDTH / 2;
+	var scoreY = y / 2;
+	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) {
+	if (!firstLetter) {
+		firstLetter = '';
+	}
+	myGuess = '';
+	myGuesses = [];
+	myProgress = [firstLetter, '', '', '', ''];
+	myResults = [];
+	opponentResults = [];
+}
+
+function subscribeToOpponentJoined() {
+	client.subscribe('/user/topic/lingo/opponentJoined', function(message) {
+		var firstLetter = message.body;
+		reset(firstLetter);
+		gameDiv.classList.remove('hidden');
+		waitingDiv.classList.add('hidden');
+		repaint();
+	});
+}
+
+function subscribeToOpponentLeft() {
+	client.subscribe('/user/topic/lingo/opponentLeft', function(message) {
+		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);
+			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);
+			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();

server/src/main/resources/static/index.html

@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Lingo</title>
+<link rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css">
+</head>
+<body>
+	<div class="container">
+		<h1>Lingo</h1>
+		<h2>JavaFX Client</h2>
+		<p>For now you need to
+			<a href="https://github.com/charlesrgould/lingo-websocket/archive/master.zip">download</a>
+			the
+			<a href="https://github.com/charlesrgould/lingo-websocket">source code</a>
+			and run a command to launch the client.
+		</p>
+		<p>Single player and multiplayer.</p>
+		<h2>JavaScript Client (easier)</h2>
+		<p>Play the game <a href="client.html">here</a>.</p>
+		<p>Multiplayer only.</p>
+	</div>
+</body>
+</html>