diff --git a/controllers/default.py b/controllers/default.py
index c1beb49613d8a61be5922cbacbf2f4d0b93ee8d2..8f5a0c4ab747bb51561bd88a94b2d57fc7f7656b 100644
--- a/controllers/default.py
+++ b/controllers/default.py
@@ -1,5 +1,9 @@
from cookie_util import COOKIE_GET
def index():
+ return dict()
+
+def content():
player_record, room_record = COOKIE_GET()
+ response.view = "default/login.html"
return dict()
diff --git a/static/css/base.css b/static/css/base.css
index f2d4fa7f8a9461cca2f497a78ec9e3723c6729a6..9677e5fd464954bea234b91413ae93738ddc0eb7 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -1,7 +1,54 @@
+/* ============== Color placeholder ===================== */
+
+:root {
+ --error-bg: #FFBBBB;
+ --error-text: darkred;
+
+ --info-bg: #DDEEFF;
+ --info-text: #00004D;
+}
+
+
+/* ============== Popup ===================== */
+
+.popup {
+ border: solid 2px;
+
+ font-family: monospace;
+ font-size: 1.3em;
+ font-weight: bold;
+
+ width: 66%;
+
+ padding: 10px;
+ margin: auto;
+ margin-bottom: 50px;
+}
+
+.popup:empty {
+ display: none;
+}
+
+.popup button {
+ background-color: inherit;
+
+ border: solid 2px;
+
+ font-size: smaller;
+ color: inherit;
+
+ padding: 10px 30px 10px 30px;
+}
+
.error {
- color: red;
+ background-color: var(--error-bg);
+ color: var(--error-text);
}
+.info {
+ background-color: var(--info-bg);
+ color: var(--info-text);
+}
/* ============== Footer ===================== */
diff --git a/static/css/client.css b/static/css/client.css
index d8f9aa62ce986da05e9cdc269b0c0e8ad69d3b0c..094d26e7efa0959a1b5818ffec29afef9a43171f 100644
--- a/static/css/client.css
+++ b/static/css/client.css
@@ -1,4 +1,5 @@
body {
text-align: center;
background-color: lightgrey;
+ padding-top: 50px;
}
diff --git a/static/js/ajax.js b/static/js/ajax.js
index 4268188091aa0119492177402f986df25336a95f..f733b29354b4687e787b41f012db9463c8b9dc5c 100644
--- a/static/js/ajax.js
+++ b/static/js/ajax.js
@@ -13,3 +13,16 @@ function AJAX_JSON(_url, _payload, _returnFunction) {
}
});
}
+
+function AJAX_GET(_url, _returnFunction) {
+ $.ajax({
+ type: 'GET',
+ url: _url,
+ success: function(data) {
+ _returnFunction(200, data);
+ },
+ error: function(xhr, statusText, errorThrown){
+ _returnFunction(xhr.status, errorThrown);
+ }
+ });
+}
diff --git a/views/default/index.html b/views/default/index.html
index bbfaf6ddcd7d9c5e2a23790a8f8188feece5f359..a11c2b3d5bca23f84934cb5ba1ab955252eb4305 100644
--- a/views/default/index.html
+++ b/views/default/index.html
@@ -4,45 +4,53 @@
<link rel="stylesheet" type="text/css" href="{{=URL('static/css', 'client.css')}}">
{{end}}
+<div id="current_error" class="popup error"></div> <!-- This will be dynamically filled when an error occurs -->
+
+<div id="current_info" class="popup info"></div> <!-- This will be dynamically filled when an info popup occurs -->
+
<div id="current_content">
- <form id="form_login">
- <input type="text" id="room_code" placeholder="Room Code" maxlength="4"><br><br>
- <input type="text" id="user_name" placeholder="User Name" maxlength="15"><br><br>
- <span id="form_login_error" class="error"></span><br>
- <input type="submit" value="Enter">
- </form>
+ <!-- This will be dynamically loaded via AJAX -->
</div>
{{block page_js}}
<script type="text/javascript">
- $("#form_login").on("submit", function(){
-
- $("#form_login_error").html("");
-
- var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
- AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){
+ function content_reload(){
+ AJAX_GET("{{=URL('default', 'content')}}", function(_code, _data) {
switch(_code){
case 200:
- break;
- case 404:
- $("#form_login_error").html("Room not found or full.");
- break;
- case 409:
- $("#form_login_error").html("Please choose a different user name.");
- break;
- case 422:
- $("#form_login_error").html("Please provide valid values.");
- break;
- case 500:
- $("#form_login_error").html("500 - Internal Server Error");
+ $("#current_content").html(_data);
break;
default:
- $("#form_login_error").html("Error "+_code);
+ set_error("HTTP Error "+_code+": "+_data);
}
+ });
+ }
+
+ $(document).ready(content_reload);
+
+ //====================================
+ function set_popup(_id, _message){
+ if(!_message){
+ $(_id).html("");
+ return;
+ }
+ $(_id).html(_message);
+ var button = $("<button>OK</button>").click(function(){
+ $(_id).html("");
});
- return false;
- });
+ $(_id).append("<br><br>");
+ $(_id).append(button);
+ }
+
+ function set_error(_message){
+ set_popup("#current_error", _message);
+ }
+
+ function set_info(_message){
+ set_popup("#current_info", _message);
+ }
+
</script>
{{end}}
diff --git a/views/default/login.html b/views/default/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..4a519f3503f902b136b842878e324c69d4b63d16
--- /dev/null
+++ b/views/default/login.html
@@ -0,0 +1,38 @@
+<form id="form_login">
+ <input type="text" id="room_code" placeholder="Room Code" maxlength="4"><br><br>
+ <input type="text" id="user_name" placeholder="User Name" maxlength="15"><br><br>
+ <input type="submit" value="Enter">
+</form>
+
+<script type="text/javascript">
+ $("#form_login").on("submit", function(){
+
+ set_error();
+
+ var payload = {"room_code": $("#room_code").val(), "user_name": $("#user_name").val()}
+ AJAX_JSON("{{=URL('player', 'create')}}", payload, function(_code, _data){
+
+ switch(_code){
+ case 200:
+ break;
+ case 404:
+ set_error("Room not found or full.");
+ break;
+ case 409:
+ set_error("Please choose a different user name.");
+ break;
+ case 422:
+ set_error("Please provide valid values.");
+ break;
+ case 500:
+ set_error("500 - Internal Server Error");
+ break;
+ default:
+ set_error("Error "+_code);
+ }
+
+ });
+
+ return false;
+ });
+</script>