renderer.js

function render(_role, _roles) {
  HEADER_SET(ROOM_CODE, "Lynchburg", PLAYER_NAME + ":" + _role);

  if (submit_done) {
    _role = role_next;
  }

  if (_role in _roles) {
    renderRole(_roles[_role], _roles["idle"]);
    return;
  }

  if (_role === "idle") {
    //We have no role definitions yet, but the role is default idle
    $("#game_content").html(ERROR_WAIT);
    return;
  }

  //This is not good
  set_error(ERROR_RENDERTARGET);
}

function renderRole(_definition, _roleIdle) {
  if (_roleIdle && _definition !== _roleIdle) {
    var old_css_idle = $("#game_css_idle");

    if (old_css_idle) {
      old_css_idle.remove();
    }

    if ("css" in _roleIdle) {
      //Add idle css
      var css = $(
        "<style id='game_css_idle' type='text/css'>" +
          sanitizeCSS(_roleIdle["css"]) +
          "</style>"
      );
      $("#current_content").append(css);
    }
  }

  var old_css = $("#game_css");

  if (old_css) {
    old_css.remove();
  }

  if ("css" in _definition) {
    //Add additional css
    var css = $(
      "<style id='game_css' type='text/css'>" +
        sanitizeCSS(_definition["css"]) +
        "</style>"
    );
    $("#current_content").append(css);
  }

  var elements = _definition["elements"];

  $("#game_content").html("");

  var prompt = prompts[currentPrompt];

  for (var index in elements) {
    var element = elements[index];

    var type = element["type"];
    var c = element["class"];
    var name = element["name"];
    var value = element["value"];
    //Anzahl verfügbarer zeichen (für inputs) beträgt bei fehlender Angabe 20
    var limit = element["limit"] ? element["limit"] : 20;

    if (prompt) {
      for (var varname in prompt) {
        while (value.indexOf("$" + varname) != -1) {
          value = value.replace("$" + varname, prompt[varname]);
        }
      }
    }

    var e;
    switch (type) {
      case "text":
        e = $("<span></span>");
        e.html(value);
        break;
      case "input":
        e = $(`<label><span class='label'>${value}</span> <span class='chars_left'>${limit}</span></label><input class='game_input' type='text'/>`);
        e.attr("placeholder", value);
        e.attr("maxlength", limit);
        if (!prompt) {
          e.attr("disabled", "true");
        }
        break;
      case "submit":
        e = $(
          "<input class='game_input btn btn-outline-primary' type='submit'/>"
        );
        console.log(e);
        e.val(value);
        console.log(e);
        if (!prompt) {
          e.attr("disabled", "true");
        } else {
          e.click(function (o) {
            submit($(this));
          });
        }
        break;
      default:
        e = $("<span>Invalid Element</span>");
        break;
    }
    e.attr("name", name);
    e.addClass(c);

    var p = $("<p></p>").append(e);
    $("#game_content").append(p);

    //Wenn neue Zeichen in ein input eingetippt werden
    $('.game_input').keyup(function(){
      //Prüfe ob das eingetippte Zeich das Limit übersteigt -> falls ja, dann aktualisiere nicht
      if(this.value.length > limit){
        return false;
      }
      //Zähle die Anzeige übriger Zeichen herunter
      $(this).prev().children(".chars_left").html(limit-this.value.length)
    });
  }
}

function sanitizeCSS(_css) {
  return _css.replace(/</g, "");
}

function submit(_button) {
  var submit = {};
  var inputs = {};

  $("#game_content .game_input").each(function (index, element) {
    element.setAttribute("disabled", "true");

    switch (element.getAttribute("type")) {
      case "text":
        inputs[element.getAttribute("name")] = element.value.replace(
          /[^0-9a-zA-Z\s]/g,
          ""
        );
        break;
    }
  });

  submit["submit"] = _button.attr("name");
  submit["inputs"] = inputs;

  AJAX_JSON(URL_SUBMIT, submit, function (_code, _data) {
    switch (_code) {
      case 200:
        currentPrompt++;
      //Fall through:
      case 409:
        if (!prompts[currentPrompt]) {
          submit_done = true;
        }
        render(role, roles);
        break;
      case 401:
      case 410:
        content_reload();
        break;
      default:
        set_error(_data);
        break;
    }
  });
}