forked from Telos4/RoboRally
136 lines
5.0 KiB
HTML
136 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||
<title>imaginaerraum.de</title>
|
||
|
||
<script src="static/jquery-3.5.1.js"></script>
|
||
<script src="static/jquery-ui.min.js"></script>
|
||
<script src="static/bootstrap.min.js"></script>
|
||
|
||
<link rel="stylesheet" href="static/bootstrap.css">
|
||
<link rel="stylesheet" href="static/style.css">
|
||
|
||
|
||
</head>
|
||
<body>
|
||
<!-- container -->
|
||
<div class="container">
|
||
<!-- current program -->
|
||
<div class="row top-buffer">
|
||
Aktuelles Programm:
|
||
<div class="cmd-canvas">
|
||
{% for cmd in current_program %}
|
||
<div class="box cmd{{ loop.index0 }}" id="prg_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}" data-color="{{ cmd.color }}" data-img="prg_cmd_img{{ loop.index0 }}"
|
||
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
||
<img id="prg_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
||
{{ loop.index0 }}
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- possible commands -->
|
||
<div class="row top-buffer">
|
||
Mögliche Befehle:
|
||
<div class="programmer-canvas">
|
||
{% for cmd in valid_commands %}
|
||
<div class="box programmer_cmd{{ loop.index0 }}" id="valid_cmd{{ loop.index0 }}" data-action="{{ cmd.action }}"
|
||
data-color="{{ cmd.color }}" data-img="valid_cmd_img{{ loop.index0 }}"
|
||
style="background-color: rgba({{ cmd.color[0] }},{{ cmd.color[1] }},{{ cmd.color[2] }},0.85)">
|
||
<img id="valid_cmd_img{{ loop.index0 }}" src="static/{{ cmd.action }}.png">
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row top-buffer center">
|
||
<div class="col-sm">
|
||
<input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
|
||
</div>
|
||
<div class="col-sm">
|
||
<div id = "alert_placeholder"></div>
|
||
</div>
|
||
</div>
|
||
</div><!-- container -->
|
||
|
||
|
||
<script>
|
||
$(document).ready(function () {
|
||
|
||
var please_wait = $(".notification").hide();
|
||
|
||
var box = $(".box");
|
||
|
||
bootstrap_alert = function() {};
|
||
bootstrap_alert.warning = function(message) {
|
||
$('#alert_placeholder').html('<div class="alert alert-primary"><a class="close" data-dismiss="alert">×</a><span>'+message+'</span></div>')
|
||
};
|
||
|
||
|
||
$("#btnSubmit").click(function () {
|
||
//alert("button");
|
||
var cmds = {
|
||
{% for i in range(5) %}
|
||
"cmd{{ i }}": {"color": document.getElementById("prg_cmd{{ i }}").getAttribute("data-color"),
|
||
"action": document.getElementById("prg_cmd{{ i }}").getAttribute("data-action")},
|
||
{% endfor %}
|
||
}
|
||
//bootstrap_alert.warning('Bitte warten bis alle Spieler ihre Aktion gewählt haben!'); //$(please_wait).show();
|
||
var cmds_json = JSON.stringify(cmds);
|
||
|
||
$.post("/send_cmds", {"cmds_json": cmds_json}, function (data) {
|
||
console.log(data);
|
||
/*
|
||
if (data === 'OK') {
|
||
location.reload(); // reload page to get new cards for next round
|
||
}
|
||
else {
|
||
console.log('waiting...')
|
||
$.get("/send_cmds", "", function (data) {
|
||
if (data === 'OK') {
|
||
location.reload(); // reload page to get new cards for next round
|
||
}
|
||
})
|
||
}
|
||
*/
|
||
});
|
||
|
||
});
|
||
|
||
var edited_command = null;
|
||
|
||
box.click(function () {
|
||
//debugger
|
||
if ( this.id.includes('prg_cmd') ) {
|
||
// program card clicked -> select clicked card for editing
|
||
edited_command = this;
|
||
}
|
||
else if (this.id.includes('valid_cmd')) {
|
||
// progamming card clicked -> edit currently selected card
|
||
var this_card_action = this.getAttribute('data-action');
|
||
var this_card_color = this.getAttribute('data-color');
|
||
if (!!edited_command) { // only if there is a card selected
|
||
console.log("editing command " + edited_command);
|
||
if (this_card_action === "-") {
|
||
// set color
|
||
edited_command.setAttribute("data-color", this_card_color);
|
||
edited_command.style["backgroundColor"] = this.style["backgroundColor"];
|
||
}
|
||
else {
|
||
// set action
|
||
edited_command.setAttribute("data-action", this_card_action)
|
||
var edited_cmd_img = document.getElementById(edited_command.getAttribute("data-img"));
|
||
var prg_img = document.getElementById(this.getAttribute("data-img"));
|
||
edited_cmd_img.src = prg_img.src;
|
||
}
|
||
}
|
||
}
|
||
});
|
||
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html> |