Add lobby creation

js/game.js

@@ -3,6 +3,7 @@ let context = canvas.getContext("2d");
 
 context.lineJoin = context.lineCap = "round";
 
+//TODO: Get our own cursor
 let drawingCursor = 'url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAApUlEQVRYR+2TwQ2AIBAEoQ6asAYr4GMRVmQRfqjAGmyCPgQjL59zJpe4fOCzl8ncEoPzE53zBQHSDcmgDFIDNK8OyiA1QPPqoAxSAzT/uw4uj7Gdmht5S4NHSumeW2vt12wBaQW4NLi1lDJ1qJzz2SC39sQmfwPYxble8aib609i8SdeM6w6+AlcHypAqlYGZZAaoHl1UAapAZpXB2WQGqB59x28AOjbHClHA3hIAAAAAElFTkSuQmCC") 20 20, default';
 
 let drawingToolbox = document.getElementById("drawingToolbox");
@@ -25,7 +26,7 @@ function init()
 {
 	setRole(role);
 
-	webSocket = new WebSocket("ws://" + window.location.host + "/ws");
+	webSocket = new WebSocket("ws://" + window.location.host + "/ws/game");
 	webSocket.onmessage = function(e) { onReceiveMessage(e.data); }
 	webSocket.onopen = function() { sendMessage("setRole", role); };
 }
@@ -62,6 +63,9 @@ function onReceiveMessage(messageText)
 		case "clearCanvas":
 			clearCanvas();
 			break;
+		default:
+			console.log("Unknown message type: " + message.type);
+			break;
 	}
 }
 
@@ -71,7 +75,7 @@ function setRole(role)
 	{
 		case "drawer":
 			canvas.style.cursor = drawingCursor;
-			drawingToolbox.style.display = "auto";
+			drawingToolbox.style.display = "";
 			break;
 		case "viewer":
 			canvas.style.cursor = "";

js/index.js

@@ -0,0 +1,17 @@
+let nicknameInput = document.getElementById("nicknameInput");
+let lobbyIdInput = document.getElementById("lobbyIdInput");
+let joinLobbyButton = document.getElementById("joinLobbyButton");
+
+joinLobbyButton.onclick = function(e) {
+	let nickname = nicknameInput.value;
+	let lobbyId = lobbyIdInput.value;
+
+	let request = new XMLHttpRequest();
+	request.addEventListener("load", function (e) {
+		window.location.href = "/lobby/" + lobbyId;
+	});
+	request.open("POST", "/settings");
+	request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
+	let data = "nickname=" + encodeURIComponent(nickname);
+	request.send(data);
+}

js/lobby.js

@@ -0,0 +1,64 @@
+let loadingMessageDiv = document.getElementById("loadingMessageDiv");
+let lobbySettingsDiv = document.getElementById("lobbySettingsDiv");
+let roundsSelect = document.getElementById("roundsSelect");
+let playerList = document.getElementById("playerList");
+let startButton = document.getElementById("startButton");
+
+let webSocket = null;
+
+function init()
+{
+	webSocket = new WebSocket("ws://" + window.location.host + "/ws/lobby");
+	webSocket.onmessage = function(e) { onReceiveMessage(e.data); }
+	webSocket.onopen = function() { sendMessage("joinLobby", lobbyId); };
+}
+
+function sendMessage(type, data)
+{
+	webSocket.send(JSON.stringify({ type: type, data: data }));
+}
+
+function onReceiveMessage(messageText)
+{
+	let message = JSON.parse(messageText);
+
+	switch(message.type)
+	{
+		case "setLobbyInfo":
+			loadingMessageDiv.style.display = "none";
+			lobbySettingsDiv.style.display = "";
+			console.log(lobbySettingsDiv.style.display);
+
+			roundsSelect.value = message.data.numberOfRounds;
+
+			playerList.innerHTML = ""; //there is another way that's faster, but it's less readable
+			for(player of message.data.players)
+			{
+				let playerItem = document.createElement("li");
+				playerItem.innerText = (player == message.data.leader ? player + " ★" : player);
+				playerList.appendChild(playerItem);
+			}
+
+			let leader = message.data.leader == nickname;
+			roundsSelect.disabled = !leader;
+			console.log(message.data.players.length);
+			startButton.disabled = !(leader && message.data.players.length > 1);
+			break;
+		case "startGame":
+			window.location.href = "/game/" + lobbyId;
+			break;
+		default:
+			console.log("Unknown message type: " + message.type);
+			break;
+	}
+}
+
+roundsSelect.onchange = function(e) {
+	sendMessage("setNumberOfRounds", roundsSelect.value);
+}
+
+startButton.onclick = function(e) {
+	sendMessage("startGame", null);
+}
+
+init();

source/app.d

@@ -1,79 +0,0 @@
-import vibe.vibe;
-
-void main()
-{
-	auto router = new URLRouter;
-	router.get("/js/*", serveStaticFiles("./"));
-	router.get("/draw", &draw);
-	router.get("/view", &view);
-	router.get("/ws", handleWebSockets(&ws));
-
-	auto settings = new HTTPServerSettings;
-	settings.port = 8080;
-	listenHTTP(settings, router);
-
-	runApplication();
-}
-
-void draw(HTTPServerRequest request, HTTPServerResponse response)
-{
-	auto role = "drawer";
-	response.render!("index.dt", role);
-}
-
-void view(HTTPServerRequest request, HTTPServerResponse response)
-{
-	auto role = "viewer";
-	response.render!("index.dt", role);
-}
-
-WebSocket[] viewerSockets;
-
-void ws(scope WebSocket socket)
-{
-	auto role = "none";
-
-	struct Message
-	{
-		string type;
-		Json data;
-	}
-
-	while(socket.connected)
-	{
-		auto messageText = socket.receiveText();
-		auto message = deserializeJson!Message(messageText);
-
-		switch(message.type)
-		{
-			case "setRole":
-				role = message.data.get!string;
-
-				if(role == "viewer")
-				{
-					viewerSockets ~= socket;
-				}
-				break;
-			case "setStartPoint":
-			case "setEndPoint":
-			case "setBrushSize":
-			case "setBrushColour":
-			case "setErasing":
-			case "clearCanvas":
-			case "draw":
-				if(role != "drawer")
-				{
-					continue;
-				}
-
-				foreach(viewer; viewerSockets)
-				{
-					viewer.send(messageText);
-				}
-				break;
-			default:
-				logWarn("Unknown WebSocket message type: " ~ message.type);
-				break;
-		}
-	}
-}

views/game.dt

@@ -0,0 +1,30 @@
+doctype html
+html
+	head
+		meta(charset="utf-8")
+		title #{"Doodul (game " ~ lobbyId ~ ")"}
+
+		script(async,src="/js/game.js")
+
+	body
+		canvas#drawingCanvas(width="800",height="600")
+		br
+		div#drawingToolbox(style="display: none")
+			label(for="eraserToggle")!= "Tool: "
+			button#eraserToggle Brush
+			br
+			label(for="toolSizeSelect")!= "Tool size: "
+			select#toolSizeSelect
+				option(value="5") 5
+				option(value="10") 10
+				option(value="20") 20
+				option(value="50") 50
+			br
+			label(for="colourSelect")!= "Brush colour: "
+			select#colourSelect
+				option(value="#000000") Black
+				option(value="#FF0000") Red
+				option(value="#00FF00") Green
+				option(value="#0000FF") Blue
+			br
+			button#clearButton Clear canvas

views/header.dt

@@ -1,5 +0,0 @@
-head
-	meta(charset="utf-8")
-	title #{pageTitle}
-
-	script(async,src="js/main.js")

views/index.dt

@@ -1,30 +1,17 @@
 doctype html
 html
-	- auto pageTitle = "Doodul (" ~ role ~ ")";
-	include header
+	head
+		meta(charset="utf-8")
+		title #{"Doodul"}
 
+		script(async,src="/js/index.js")
 	body
-		script let role = "#{role}";
 
-		//TODO: Get our own cursor
-		canvas#drawingCanvas(width="800",height="600")
+		label(for="nicknameInput")!= "Nickname: "
+		input#nicknameInput(value="#{nickname}")
 		br
-		div#drawingToolbox
-			label(for="eraserToggle")!= "Tool: "
-			button#eraserToggle Brush
-			br
-			label(for="toolSizeSelect")!= "Tool size: "
-			select#toolSizeSelect
-				option(value="5") 5
-				option(value="10") 10
-				option(value="20") 20
-				option(value="50") 50
-			br
-			label(for="colourSelect")!= "Brush colour: "
-			select#colourSelect
-				option(value="#000000") Black
-				option(value="#FF0000") Red
-				option(value="#00FF00") Green
-				option(value="#0000FF") Blue
-			br
-			button#clearButton Clear canvas
+		label(for="lobbyIdInput")!= "Lobby id:"
+		input#lobbyIdInput
+		br
+		button#joinLobbyButton Join lobby
+

views/lobby.dt

@@ -0,0 +1,25 @@
+doctype html
+html
+	head
+		meta(charset="utf-8")
+		title #{"Doodul (lobby " ~ lobbyId ~ ")"}
+
+		script let lobbyId = "#{lobbyId}"; let nickname = "#{nickname}";
+		script(async,src="/js/lobby.js")
+	body
+		label(for="lobbyIdSpan")!= "Lobby id: "
+		span#lobbyIdSpan #{lobbyId}
+		br
+		br
+		div#loadingMessageDiv
+			p Loading...
+		div#lobbySettingsDiv(style="display: none")
+			label(for="roundsSelect")!= "Rounds: "
+			select#roundsSelect(disabled)
+				- foreach(i; 3 .. 10 + 1)
+					option(value="#{i}") #{i}
+			br
+			label(for="playerList")!= "Players: "
+			ul#playerList
+			br
+			button#startButton(disabled) Start game!