renderer.js

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

  //Set empty footer
  $("#footer").css("display", "none");

  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
    var wait = $("<div></div>");
    wait.addClass("wait")
    wait.html(ERROR_WAIT);
    var loading = $("<div></div>");
    loading.addClass("lds-dual-ring");
    $("#game_content").append(wait);
    $("#game_content").append(loading);
    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 label = element["label"] ? element["label"] : "";
    var value = element["value"] ? element["value"] : "";
    var length = element["length"];
    var required = element["required"];

    if(prompt) {
      var variables = prompt["variables"];
      var selections = prompt["selections"];

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

    var e;
    switch (type) {
      case "text":
        e = $("<span></span>");
        e.html(value);
        e.attr("name", name);
        e.addClass(c);
        break;
      case "input":
        var input = $(`<input class='game_input game_input_text' type='text'/>`);
        if(length) {
          input.attr("maxlength", length);
        }
        input.attr("placeholder", value);
        input.attr("name", name);
        if(required) {
            input.attr("required", "true")
        }
        input.addClass(c);
        if (!prompt) {
          input.attr("disabled", "true");
        }
        e = $(`<label><span class='label'>${label}</span> <span class='chars_left'>${length?length:''}</span></label>`);
        e = e.add(input);
        break;
      case "submit":
        e = $(
          "<input class='game_input btn btn-outline-primary' type='submit'/>"
        );
        e.val(value);
        e.attr("name", name);
        e.addClass(c);
        if (!prompt) {
          e.attr("disabled", "true");
        } else {
          e.click(function (o) {
            submit($(this));
          });
        }
        break;
        case "selection":
          e = $("<span></span>");
          if(selections && selections[name]) {
              for(select in selections[name]) {
                  var b = $("<input class='game_input' type='submit'/>");
                  b.val(selections[name][select]);
                  b.attr("name", name);
                  b.attr("selection", select);
                  b.addClass(c);
                  b.click(function(o){
                      submit($(this));
                  });
                  e.append(b);
              }
          }
          break;
      default:
        e = $("<span>Invalid Element</span>");
        e.attr("name", name);
        e.addClass(c);
        break;
    }

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

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

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

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

  var input_fields = $("#game_content .game_input");

  for(index in input_fields) {
    var element = input_fields[index];
    if(!element.getAttribute) {
      continue;
    }
    switch (element.getAttribute("type")) {
      case "text":
        if(element.getAttribute("required") && element.value == "") {
          return;
        }
        break;
    }
  }

  $("#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(
          /[^\u0020\u0021\u002C\u002E\u003F\u00BF-\u1FFF\u2C00-\uD7FF\w]/g,
          ""
        );
        break;
    }
  });

  submit["submit"] = _button.attr("name");
    if(_button.attr("selection")) {
        submit["selection"] = parseInt(_button.attr("selection"));
    }
    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;
    }
  });
}