Add game timer

js/game.js

@@ -5,6 +5,8 @@ let wordChoiceDiv = document.getElementById("wordChoiceDiv");
 
 let roundSpan = document.getElementById("roundSpan");
 let playerList = document.getElementById("playerList");
+let wordSpan = document.getElementById("wordSpan");
+let timerSpan = document.getElementById("timerSpan");
 let canvas = document.getElementById("drawingCanvas");
 let context = canvas.getContext("2d");
 
@@ -33,6 +35,7 @@ let gameEnded = false;
 let drawer = null;
 let wordFinders = [];
 let wordOptions = [];
+let timerId = null;
 
 let drawing = false;
 let points = [];
@@ -88,6 +91,8 @@ function onReceiveMessage(messageText)
 				setRole("guesser");
 			}
 
+			timerSpan.innerText = message.data.secondsLeft;
+
 			if(message.data.drawer != drawer && message.data.word != "")
 			{
 				drawer = message.data.drawer;
@@ -95,9 +100,12 @@ function onReceiveMessage(messageText)
 				context.clearRect(0, 0, canvas.width, canvas.height);
 
 				addNewDrawerElement(drawer);
+
+				startTimer();
 			}
 
 			roundSpan.innerText = message.data.currentRound;
+			wordSpan.innerText = message.data.word;
 
 			playerList.innerHTML = "";
 			for(player of message.data.players)
@@ -236,6 +244,8 @@ function revealWord(word)
 	element.style.color = "green";
 	element.innerHTML = "The word was <b>" + word + "</b>";
 	guessingBox.appendChild(element);
+
+	endTimer();
 }
 
 function setChoosingPlayer(drawer)
@@ -323,6 +333,22 @@ function draw()
 	}
 }
 
+function startTimer()
+{
+	timerSpan.innerText--; //HACK: Do some proper time syncing so we don't have to do this
+	timerId = window.setInterval(function() {
+		if(timerSpan.innerText != 0)
+		{
+			timerSpan.innerText--;
+		}
+	}, 1000);
+}
+
+function endTimer()
+{
+	clearInterval(timerId);
+}
+
 function setErasing(state)
 {
 	erasing = state;

source/doodul/game.d

@@ -42,14 +42,16 @@ void wsGame(scope WebSocket socket)
 			bool ended;
 			string word;
 			string[] wordFinders;
+			int secondsLeft;
 		}
 		auto gameState = GameState(game.currentRound.drawer.nickname,
 								   game.players.map!(p => p.nickname).array,
 								   lobby.numberOfRounds,
 								   game.currentRound.number,
 								   game.ended,
-								   player.role != PlayerRole.guesser ? game.currentRound.currentWord : game.currentRound.currentWord.map!(c => '_').array.idup,
-								   game.players.filter!(p => p.role == PlayerRole.wordFinder).map!(p => p.nickname).array);
+								   p.role != PlayerRole.guesser ? game.currentRound.currentWord : game.currentRound.redactedWord,
+								   game.players.filter!(p => p.role == PlayerRole.wordFinder).map!(p => p.nickname).array,
+								   game.currentRound.secondsLeft);
 
 		p.sendMessage("setGameState", gameState.serializeToJson);
 	};
@@ -147,17 +149,7 @@ void wsGame(scope WebSocket socket)
 
 					if(game.players.filter!(p => p.role == PlayerRole.guesser).empty)
 					{
-						foreach(p; game.players)
-						{
-							p.sendMessage("revealWord", game.currentRound.currentWord.serializeToJson);
-						}
-
 						game.currentRound.nextDrawer();
-
-						if(game.currentRound.ended)
-						{
-							game.nextRound();
-						}
 					}
 				}
 				else
@@ -205,9 +197,14 @@ void wsGame(scope WebSocket socket)
 				}
 
 				game.currentRound.currentWord = word;
+				game.currentRound.timer = setTimer(1.seconds, &game.currentRound.tick, true);
 
 				foreach(p; game.players)
 				{
+					if(p.role != PlayerRole.drawer)
+					{
+						p.role = PlayerRole.guesser;
+					}
 					sendGameState(p);
 				}
 				break;
@@ -277,6 +274,9 @@ class Round
 	string[] wordOptions = ["apple", "lemon", "love"];
 	string currentWord;
 
+	int secondsLeft;
+	Timer timer;
+
 	this(int number, Game game, Player[] players)
 	{
 		this.number = number;
@@ -293,6 +293,14 @@ class Round
 
 	void nextDrawer()
 	{
+		if(!currentWord.empty)
+		{
+			foreach(p; game.players)
+			{
+				p.sendMessage("revealWord", game.currentRound.currentWord.serializeToJson);
+			}
+		}
+
 		if(drawer !is null)
 		{
 			drawer.role = PlayerRole.guesser;
@@ -307,6 +315,7 @@ class Round
 				player.role = PlayerRole.waiter;
 			}
 
+			game.nextRound();
 			return;
 		}
 
@@ -315,6 +324,11 @@ class Round
 		playersLeft = playersLeft[1 .. $];
 
 		currentWord = "";
+		if(timer)
+		{
+			timer.stop();
+		}
+		secondsLeft = 80;
 
 		foreach(player; game.players)
 		{
@@ -323,4 +337,20 @@ class Round
 
 		drawer.sendMessage("setWordOptions", wordOptions.serializeToJson);
 	}
+
+	void tick()
+	{
+		secondsLeft--;
+
+		if(secondsLeft == 0)
+		{
+			nextDrawer();
+		}
+	}
+
+	@property
+	string redactedWord()
+	{
+		return currentWord.map!(c => '_').array.idup;
+	}
 }

views/game.dt

@@ -19,6 +19,12 @@ html
 			br
 			label(for="playerList")!= "Players: "
 			ul#playerList
+			br
+			label(for="wordSpan")!= "Word: "
+			span#wordSpan
+			br
+			label(for="timerSpan")!= "Seconds left: "
+			span#timerSpan
 			canvas#drawingCanvas(width="800",height="600")
 			div#wordChoiceDiv(style="display: none")
 				button#firstWordButton