|
@@ -0,0 +1,186 @@
|
|
|
+$(function() {
|
|
|
+ var connection = null;
|
|
|
+
|
|
|
+ var wordlist = null;
|
|
|
+ var questionlist = null;
|
|
|
+
|
|
|
+ $('#join').click(function() {
|
|
|
+ var game_id = $('#gameId').val();
|
|
|
+ var nick = $('#nick').val();
|
|
|
+ var msg = {
|
|
|
+ join: {
|
|
|
+ game_id: game_id,
|
|
|
+ nick: nick,
|
|
|
+ }
|
|
|
+ };
|
|
|
+ connect(msg);
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#create').click(function() {
|
|
|
+ var game_id = $('#gameId').val();
|
|
|
+ var nick = $('#nick').val();
|
|
|
+ var msg = {
|
|
|
+ create_game: {
|
|
|
+ game_id: game_id,
|
|
|
+ nick: nick,
|
|
|
+ }
|
|
|
+ };
|
|
|
+ connect(msg);
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#ready').click(function() {
|
|
|
+ var game_id = $('#gameId').val();
|
|
|
+ var nick = $('#nick').val();
|
|
|
+ var msg = "ready";
|
|
|
+ send(msg);
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#submit').click(function() {
|
|
|
+ var word = $('#word').val();
|
|
|
+ var msg = {
|
|
|
+ submit_word: {
|
|
|
+ word: word
|
|
|
+ }
|
|
|
+ };
|
|
|
+ send(msg);
|
|
|
+ });
|
|
|
+
|
|
|
+ $('#submitGuess').click(function() {
|
|
|
+ var list = [];
|
|
|
+ for(var i = 0; i < wordlist.length; i++) {
|
|
|
+ var field = "#g" + i;
|
|
|
+ var numTxt = $(field).val();
|
|
|
+ var number = parseInt(numTxt);
|
|
|
+ if (number > 0 && number <= questionlist.length) {
|
|
|
+ list.push([wordlist[i], questionlist[number - 1]]);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $("#status").html("Please enter a valid number");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ var msg = {
|
|
|
+ submit_guess: {
|
|
|
+ guesses: list
|
|
|
+ }
|
|
|
+ };
|
|
|
+ send(msg);
|
|
|
+ });
|
|
|
+
|
|
|
+ function connect(initial_message) {
|
|
|
+ if (connection != null) {
|
|
|
+ disconnect();
|
|
|
+ }
|
|
|
+ var uri = 'ws://' + window.location.host + '/ws/';
|
|
|
+ connection = new WebSocket(uri);
|
|
|
+
|
|
|
+ connection.onopen = function() {
|
|
|
+ connection.send(JSON.stringify(initial_message));
|
|
|
+ };
|
|
|
+ connection.onmessage = function(e) {
|
|
|
+ onReceive(e);
|
|
|
+ };
|
|
|
+ connection.onclose = function() {
|
|
|
+ };
|
|
|
+ }
|
|
|
+
|
|
|
+ function send(message) {
|
|
|
+ if (connection != null) {
|
|
|
+ connection.send(JSON.stringify(message));
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function disconnect() {
|
|
|
+ connection.close();
|
|
|
+ connection = null;
|
|
|
+ }
|
|
|
+
|
|
|
+ function onReceive(msg) {
|
|
|
+ var obj = jQuery.parseJSON(msg.data);
|
|
|
+ if (obj.game_not_found != null) {
|
|
|
+ $('#status').html("Game \"" + obj.game_not_found.game_id + "\" not found");
|
|
|
+ }
|
|
|
+ else if (obj.game_already_exists != null) {
|
|
|
+ $('#status').html("Game \"" + obj.game_already_exists.game_id + "\" already exists");
|
|
|
+ }
|
|
|
+ else if (obj.game_state != null) {
|
|
|
+ var gs = obj.game_state;
|
|
|
+ if (gs.state_data === "starting") {
|
|
|
+ $('#startingform').show();
|
|
|
+ }
|
|
|
+ else if (gs.state_data.creating != null) {
|
|
|
+ var players = gs.players;
|
|
|
+ playerlist = "";
|
|
|
+ for (var i = 0; i < players.length; i++) {
|
|
|
+ playerlist += players[i].nick + "(" + players[i].points + ")";
|
|
|
+ if (i + 1 < players.length)
|
|
|
+ playerlist += ", ";
|
|
|
+ }
|
|
|
+ $('#status').html("Players: " + playerlist);
|
|
|
+
|
|
|
+ var creating = gs.state_data.creating;
|
|
|
+ var chars = creating.available_chars;
|
|
|
+ $('#question').val(creating.question);
|
|
|
+ $('#letters').val(chars.join());
|
|
|
+ $('#createform').show();
|
|
|
+ }
|
|
|
+ else if (gs.state_data.guessing != null) {
|
|
|
+ var guesses = gs.state_data.guessing;
|
|
|
+ var sub_words = guesses.submitted_words;
|
|
|
+ var questions = guesses.questions;
|
|
|
+ var questionsHtml = "";
|
|
|
+ for (var i = 0; i < questions.length; i++) {
|
|
|
+ questionsHtml += (i + 1) + ": " + questions[i] + "<br>";
|
|
|
+ }
|
|
|
+ $('#guessingDynTable').html(questionsHtml);
|
|
|
+ $('#guessingDyn').html("");
|
|
|
+ for (var i = 0; i < sub_words.length; i++) {
|
|
|
+ var $label = $("<label to='g" + i + "'>" + sub_words[i][0] + "</label>");
|
|
|
+ var $field = $("<input id='g" + i + "' type='text' /><br>");
|
|
|
+ $('#guessingDyn').append($label);
|
|
|
+ $('#guessingDyn').append($field);
|
|
|
+ }
|
|
|
+
|
|
|
+ questionlist = questions;
|
|
|
+ wordlist = sub_words.map(pair => pair[0]);
|
|
|
+
|
|
|
+ $('#createform').hide();
|
|
|
+ $('#guessing').show();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ else if (obj.round_result != null) {
|
|
|
+ displayResult(obj.round_result);
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ $('#status').html("Unknown Message recieved");
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ function displayResult(result) {
|
|
|
+ var $table = $('<table/>');
|
|
|
+
|
|
|
+ var wordline = "<tr><th></th>";
|
|
|
+ for(var i = 0; i < result.words.length; i++) {
|
|
|
+ wordline += "<th>" + result.words[i] + "</th>";
|
|
|
+ }
|
|
|
+ wordline += "</tr>";
|
|
|
+ $table.append(wordline);
|
|
|
+
|
|
|
+ for(var i = 0; i < result.questions.length; i++) {
|
|
|
+ var wordline = "<tr><th>" + result.questions[i] + "</th>";
|
|
|
+ for(var j = 0; j < result.words.length; j++) {
|
|
|
+ wordline += "<td>" + result.guesses[j][i] + "</td>";
|
|
|
+ }
|
|
|
+ wordline += "</tr>";
|
|
|
+ $table.append(wordline);
|
|
|
+ }
|
|
|
+
|
|
|
+ $('#results').append($table);
|
|
|
+
|
|
|
+
|
|
|
+ $('#createform').hide();
|
|
|
+ $('#guessing').hide();
|
|
|
+ $('#startingform').hide();
|
|
|
+ $('#results').show();
|
|
|
+ }
|
|
|
+});
|