Submit have bootrstrap class

controllers/default.py

@@ -18,6 +18,6 @@ def content():
         return dict(info=T("The room has been closed"))
 
     #Change this line to enable a different renderer
-    response.view = "game/debug/renderer.html"
+    response.view = "game/debug/renderer_bootstrap.html"
 
     return dict(player_record=player_record, room_record=room_record)

static/game/debug/renderer - bootstrap.css

+html {
+    background-color: lightblue;
+}
+
+body {
+    background-color: lightgreen;
+}
+
+input {
+    font-size: 20px;
+    width: 90%;
+    height: 50px;
+}
+
+#game_content {
+    font-size: 25px;
+    padding-top: 10px;
+    padding-bottom: 55px;
+}

static/game/debug/renderer - bootstrap.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"];
+
+    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 = $("<input class='game_input' type='text'/>");
+        e.attr("placeholder", value);
+        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);
+  }
+}
+
+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;
+    }
+  });
+}

views/game/debug/renderer.html

 {{extend 'game/index.html'}}
 
 {{block game_css}}
-    <link rel="stylesheet" type="text/css" href="{{=URL('static/game/debug', 'renderer.css')}}">
+    <link rel="stylesheet" type="text/css" href="{{=URL('static/game/debug', 'renderer - bootstrap.css')}}">
 {{end game_css}}
 
 
 {{block game_js}}
-    <script src="{{=URL('static/game/debug','renderer.js')}}" type="text/javascript"></script>
+    <script src="{{=URL('static/game/debug','renderer - bootstrap.js')}}" type="text/javascript"></script>
 {{end game_js}}

views/game/debug/renderer_bootstrap.html

+{{extend 'game/index.html'}}
+
+{{block game_css}}
+    <link rel="stylesheet" type="text/css" href="{{=URL('static/game/debug', 'renderer.css')}}">
+{{end game_css}}
+
+
+{{block game_js}}
+    <script src="{{=URL('static/game/debug','renderer.js')}}" type="text/javascript"></script>
+{{end game_js}}