added config page and logic

.gitignore

@@ -1,3 +1,6 @@
+# ---> VIM
+*.swp
+
 # ---> Node
 # Logs
 logs

html/css/extra.css

@@ -17,3 +17,8 @@ tr.clickable:hover{
 	color: #aaa;
 	text-align: center;
 }
+
+label {
+	display: inline;
+	margin-left: 12px;
+}

html/index.html

@@ -52,6 +52,11 @@ var socket = io();
 // Init vars
 var username;
 var RANK_ICONS = ["🥇","🥈","🥉"];
+var config = {
+	categories: [],
+	answerPreview: true,
+	timer: 60,
+};
 
 // Init listeners
 
@@ -73,6 +78,9 @@ socket.on("LOBBY", function(users){
 	}
 	page += "</ol>";
 	
+	// Config area
+	page += "<div id='config'></div>";
+
 	document.getElementById("main").innerHTML = page;
 
 	// Lobby start button listener (can only be set when element is added to page
@@ -88,6 +96,81 @@ socket.on("LOBBY", function(users){
 	if(users.length < 2){
 		document.getElementById("button_lobby_start").style.display = "none";
 	}
+
+	reconstructConfig();
+});
+
+// CONFIG
+function updateConfig(){
+	// Create new config from inputs
+	c = {
+		categories: [],
+		timer: 60,
+		answerPreview: true,
+	}
+
+	// Get categories
+	for(var i=0; i<config.categories.length; i++){
+		var cat = {
+			id: config.categories[i].id,
+			name: config.categories[i].name,
+			enabled: config.categories[i].enabled,
+		};
+		cat.enabled = document.getElementById("config-categories-"+cat.id).checked;
+		c.categories.push(cat);
+	}
+
+	// Get timer
+	c.timer = document.getElementById("config-timer").value;
+
+	// Get preview
+	c.answerPreview = document.getElementById("config-preview").checked;
+
+	// Send to server
+	socket.emit("CONFIG", {config: c});
+}
+function reconstructConfig(){
+	var page = "";
+	page += "<hr>";
+
+	page += "<h3>Game Config</h3>";
+
+	page += "<div>";
+	page += "<h5>Timer</h5>";
+	page += "<p>Number of seconds each player has to complete each step of the game.</p>";
+	page += "<input type='number' name='config-timer' id='config-timer' value='"+config.timer+"' onchange='updateConfig()' />";
+	page += "</div>";
+
+	page += "<hr>";
+
+	page += "<div>";
+	page += "<h5>Answer Preview</h5>";
+	page += "<p>Whether to display one of the possible answers to a question while writing false answers. This may help with formatting of the false answers.</p>";
+	page += "<span>";
+	page += "<input type='checkbox' name='config-preview' id='config-preview' "+(config.answerPreview ? "checked" : "")+" onchange='updateConfig()' />";
+	page += "<label for='config-preview'>Answer Preview</label>";
+	page += "</span>";
+	page += "</div>";
+
+	page += "<hr>";
+
+	page += "<div>";
+	page += "<h5>Categories</h5>";
+	for(var i=0; i<config.categories.length; i++){
+		page += "<span>";
+		page += "<input type='checkbox' name='config-categories' id='config-categories-"+config.categories[i].id+"' value='"+config.categories[i].id+"' "+(config.categories[i].enabled?"checked":"")+" onchange='updateConfig()' />";
+		page += "<label for='config-categories-"+config.categories[i].id+"'>"+config.categories[i].name+"</label>";
+		page += "</span>";
+		page += "<br>";
+	}
+	page += "</div>";
+
+	document.getElementById("config").innerHTML = page;
+}
+
+socket.on("CONFIG", function(data){
+	config = data.config;
+	reconstructConfig();
 });
 
 // LOBBY_CLOSED

main.js

@@ -25,8 +25,8 @@ const util = require("util");
 const fetch = require("node-fetch");
 
 // Vars
-const hostname = "192.168.0.128"; // Enter your local IP address here
-const port = 3000; // Enter a port number here
+const hostname = "127.0.0.1"; // Enter your local IP address here
+const port = 5000; // Enter a port number here
 
 const STATE_LOBBY = 0;
 const STATE_MANUAL = 10;
@@ -45,13 +45,44 @@ var questionsTotal = 10; // Total nr of questions
 var questionData = {};
 var questionCorrectAnswerIndex;
 var answers;
-const QUESTION_CATEGORIES = [9,15,16,17,18,19,20,22,23,27,28,30];
+const QUESTION_CATEGORIES = [9,15,16,17,18,19,20,22,23,27,28,30]; // Default enabled categories
 
 var userWrite = [];
 var userPick = [];
 var userPoints = [];
 
+var config = {
+	categories: [], // Filled in later
+	answerPreview: true,
+	timer: 60,
+};
 
+// Get question categories
+function isCategoryEnabledByDefault(id){
+	return QUESTION_CATEGORIES.includes(id);
+}
+fetch("https://opentdb.com/api_category.php")
+	.then(res => res.json()) // Convert to JSON
+	.then(json => {
+		// Question loaded
+		console.log("Fetched question categories from OpenTDB");
+		console.log(json);
+
+		// TODO: check response code
+
+		// Save data
+		var cats = [];
+		for(var i=0; i<json.trivia_categories.length; i++){
+			cats.push({
+				id: json.trivia_categories[i].id,
+				name: json.trivia_categories[i].name,
+				enabled: isCategoryEnabledByDefault(json.trivia_categories[i].id),
+			});
+		}
+		config.categories = cats;
+
+		console.log(config);
+	});
 
 // Create HTTP server
 const server = http.createServer((req, res) => {
@@ -120,12 +151,26 @@ io.on("connection", (socket) => {
 			// Send lobby data
 			userSockets.forEach(function(s){s.emit("LOBBY", userNames);});
 
+			// Send config to new user
+			socket.emit("CONFIG", {config: config});
+
 		}else{
 			// When can't enter
 			socket.emit("LOBBY_CLOSED");
 		}
 	});
 
+	// CONFIG
+	socket.on("CONFIG", (data) => {
+		console.log("CONFIG request");
+
+		// Update server config
+		config = data.config;
+
+		// Send new config to all users
+		userSockets.forEach(function(s){s.emit("CONFIG", {config: config});});
+	});
+
 	// START
 	socket.on("START", () => {
 		console.log("START request");

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "Psych",
+  "name": "ReverseQuiz",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {