287 lines
11 KiB
HTML
287 lines
11 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>Drag</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="main-canvas">
|
|||
|
|
{% for cmd in current_program %}
|
|||
|
|
<div class="box card{{ 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="main-canvas">
|
|||
|
|
{% for cmd in valid_commands %}
|
|||
|
|
<div class="box card{{ 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">
|
|||
|
|
{% if robot_info is none %}
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="inputRobotX">X Position:</label>
|
|||
|
|
<input class="form-control" type="number" id="inputRobotX" name="robot_x" min="1" max="13" value="1">
|
|||
|
|
<br>
|
|||
|
|
<label for="inputRobotY">Y Position:</label>
|
|||
|
|
<input class="form-control" type="number" id="inputRobotY" name="robot_y" min="1" max="7" value="1">
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="orientation">Blickrichtung:</label><br>
|
|||
|
|
<img id="orientation" class="robotOrientation" src="/static/orientation.png" alt="0">
|
|||
|
|
<input hidden id="inputRobotOrientation" value=">" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="inputRobotID">Roboter ID:</label>
|
|||
|
|
<select name="robotID" class="form-control" id="inputRobotID">
|
|||
|
|
<option value="11">11</option>
|
|||
|
|
<option value="12">12</option>
|
|||
|
|
<option value="13">13</option>
|
|||
|
|
<option value="14">14</option>
|
|||
|
|
</select>
|
|||
|
|
<label for="outputRobotFlags">Flaggen:</label><br>
|
|||
|
|
{% for f in ['a', 'b', 'c', 'd'] %}
|
|||
|
|
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
|
|||
|
|
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% else %}
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="outputRobotX">X Position:</label>
|
|||
|
|
<input class="form-control" type="number" id="outputRobotX" name="robot_x" min="1" max="12" value="{{ robot_info[0] }}" readonly>
|
|||
|
|
<br>
|
|||
|
|
<label for="outputRobotY">Y Position:</label>
|
|||
|
|
<input class="form-control" type="number" id="outputRobotY" name="robot_y" min="1" max="6" value="{{ robot_info[1] }}" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="outputOrientation">Blickrichtung:</label><br>
|
|||
|
|
{% if robot_info[2] == '>' %}
|
|||
|
|
<img id="outputOrientation" class="robotOrientation" src="/static/orientation.png" alt="0">
|
|||
|
|
{% elif robot_info[2] == 'v' %}
|
|||
|
|
<img id="outputOrientation" class="robotOrientation90" src="/static/orientation.png" alt="0">
|
|||
|
|
{% elif robot_info[2] == '<' %}
|
|||
|
|
<img id="outputOrientation" class="robotOrientation180" src="/static/orientation.png" alt="0">
|
|||
|
|
{% elif robot_info[2] == '^' %}
|
|||
|
|
<img id="outputOrientation" class="robotOrientation270" src="/static/orientation.png" alt="0">
|
|||
|
|
{% endif %}
|
|||
|
|
<br>
|
|||
|
|
<label for="outputRobotDmg">Schaden:</label><br>
|
|||
|
|
<input class="form-control" name="robotDmg" id="outputRobotDmg" value="{{ robot_info[4] }}" readonly>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-sm">
|
|||
|
|
<label for="outputRobotID">Roboter ID:</label>
|
|||
|
|
<input class="form-control" name="robotID" id="outputRobotID" value="{{ robot_info[3] }}" readonly>
|
|||
|
|
<label for="outputRobotFlags">Flaggen:</label><br>
|
|||
|
|
{% for f in ['a', 'b', 'c', 'd'] %}
|
|||
|
|
{% if f in robot_info[5] %}
|
|||
|
|
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" checked onclick="return false;">
|
|||
|
|
{% else %}
|
|||
|
|
<input type="checkbox" class="form-check-input" id="flag_{{ f }}" onclick="return false;">
|
|||
|
|
{% endif %}
|
|||
|
|
<label class="form-check-label" for="flag_{{ f }}">{{ f }}</label><br>
|
|||
|
|
{% endfor %}
|
|||
|
|
</div>
|
|||
|
|
{% endif %}
|
|||
|
|
</div>
|
|||
|
|
-->
|
|||
|
|
<div class="row top-buffer">
|
|||
|
|
<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 class="row top-buffer">
|
|||
|
|
Viel Spaß beim Spielen!
|
|||
|
|
</div>
|
|||
|
|
</div><!-- container -->
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
$(document).ready(function () {
|
|||
|
|
|
|||
|
|
var please_wait = $(".notification").hide();
|
|||
|
|
|
|||
|
|
var box = $(".box");
|
|||
|
|
var mainCanvas = $(".main-canvas");
|
|||
|
|
|
|||
|
|
var orientation_icon = $("#orientation");
|
|||
|
|
var orientation_input = $("#inputRobotOrientation");
|
|||
|
|
|
|||
|
|
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>')
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
orientation_icon.click(function () {
|
|||
|
|
if (this.alt === "0") {
|
|||
|
|
this.alt = "90";
|
|||
|
|
$("#inputRobotOrientation").val("v");
|
|||
|
|
//document.getElementById("inputRobotOrientation").value = "v";
|
|||
|
|
}
|
|||
|
|
else if (this.alt === "90") {
|
|||
|
|
this.alt = "180";
|
|||
|
|
$("#inputRobotOrientation").val("<");
|
|||
|
|
//document.getElementById("inputRobotOrientation").value = "<";
|
|||
|
|
}
|
|||
|
|
else if (this.alt === "180") {
|
|||
|
|
this.alt = "270";
|
|||
|
|
$("#inputRobotOrientation").val("^");
|
|||
|
|
//document.getElementById("inputRobotOrientation").value = "^";
|
|||
|
|
}
|
|||
|
|
else if (this.alt === "270") {
|
|||
|
|
this.alt = "0";
|
|||
|
|
$("#inputRobotOrientation").val(">");
|
|||
|
|
//document.getElementById("inputRobotOrientation").value = ">";
|
|||
|
|
}
|
|||
|
|
$(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#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
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
*/
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
/*
|
|||
|
|
box.draggable({
|
|||
|
|
containment: mainCanvas,
|
|||
|
|
helper: "clone",
|
|||
|
|
|
|||
|
|
start: function () {
|
|||
|
|
$(this).css({
|
|||
|
|
opacity: 0
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$(".box").css("z-index", "0");
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
stop: function () {
|
|||
|
|
$(this).css({
|
|||
|
|
opacity: 1
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
box.droppable({
|
|||
|
|
accept: box,
|
|||
|
|
|
|||
|
|
drop: function (event, ui) {
|
|||
|
|
var draggable = ui.draggable;
|
|||
|
|
var droppable = $(this);
|
|||
|
|
var dragPos = draggable.position();
|
|||
|
|
var dropPos = droppable.position();
|
|||
|
|
|
|||
|
|
var cmds = [ui.draggable.attr('name').toString(), $(this).attr('name')]
|
|||
|
|
|
|||
|
|
//console.log(dragPos);
|
|||
|
|
//console.log(dropPos);
|
|||
|
|
|
|||
|
|
//console.log($(cmds));
|
|||
|
|
// notify server that cards have been swapped
|
|||
|
|
$.post(url='/', {drag: ui.draggable.attr('name'), drop: $(this).attr('name')});
|
|||
|
|
|
|||
|
|
draggable.css({
|
|||
|
|
left: dropPos.left + "px",
|
|||
|
|
top: dropPos.top + "px",
|
|||
|
|
"z-index": 20
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
droppable.css("z-index", 10).animate({
|
|||
|
|
left: dragPos.left,
|
|||
|
|
top: dragPos.top
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
*/
|
|||
|
|
|
|||
|
|
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>
|