Telos4/RoboRally
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

improved layout of website

Browse Source
This commit is contained in:
Simon Pirkelmann 2021-09-10 23:29:20 +02:00
parent 0956f6d0fe
commit e374198fef
7 changed files with 39 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
gauss-turing/game/static/-.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 5.4 KiB

BIN
gauss-turing/game/static/P0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.1 KiB

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
gauss-turing/game/static/forward.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 846 B

After

Width:  |  Height:  |  Size: 4.3 KiB

BIN
gauss-turing/game/static/left.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
gauss-turing/game/static/right.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

108
gauss-turing/game/static/style.css
View File

@ -1,6 +1,14 @@
.main-canvas {
outline: 1px solid #dddddd;;
width: 500px;
.cmd-canvas {
outline: 3px solid #dddddd;;
width: 430px;
height: 120px;
margin: 50px auto 0;
position: relative;
}
.programmer-canvas {
outline: 3px solid #dddddd;;
width: 338px;
height: 220px;
margin: 50px auto 0;
position: relative;
@ -20,86 +28,34 @@
position: absolute !important;
top: 100px;
font-size: 15px;
color: #ffffff;
color: #000000;
line-height: 25px;
text-align: center;
cursor: move;
}
.robotOrientation {
width: 75px;
height: 75px;
}
.robotOrientation90 {
width: 75px;
height: 75px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.robotOrientation180 {
width: 75px;
height: 75px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.robotOrientation270 {
width: 75px;
height: 75px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.rotate90 {
width: 100px;
height: 100px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.rotate180 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.rotate270 {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.top-buffer { margin-top:20px; }
.center {
margin: 20px;
position: absolute;
left: 50%;
-ms-transform: translateX(-50%, -50%);
transform: translateX(-50%, -50%);
}
.card0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;
}
.card1 { left: 100px; top: 0; background-color: #8E44AD; position: absolute !important;
}
.card2 { left: 200px; top: 0; background-color: #5DADE2; }
.card3 { left: 300px; top: 0; background-color: #1ABC9C; }
.card4 { left: 400px; top: 0; background-color: #F1C40F; }
.card5 { left: 50px; top: 120px; background-color: #F39C12; }
.card6 { left: 150px; top: 120px; background-color: #34495E; }
.card7 { left: 250px; top: 120px; background-color: #FF00FF; }
.card8 { left: 350px; top: 120px; background-color: #008080; }
.cmd0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;}
.cmd1 { left: 92px; top: 0; background-color: #8E44AD; position: absolute !important;}
.cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
.cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
.cmd4 { left: 368px; top: 0; background-color: #F1C40F; }
.programmer_cmd0 { left: 0; top: 0; background-color: #E74C3C; position: absolute !important;}
.programmer_cmd1 { left: 92px; top: 0; background-color: #8E44AD; position: absolute !important;}
.programmer_cmd2 { left: 184px; top: 0; background-color: #5DADE2; }
.programmer_cmd3 { left: 276px; top: 0; background-color: #1ABC9C; }
.programmer_cmd4 { left: 38px; top: 120px; background-color: #F1C40F; }
.programmer_cmd5 { left: 138px; top: 120px; background-color: #F39C12; }
.programmer_cmd6 { right: 38px; top: 120px; background-color: #34495E; }
.card_hidden { background-color: #dddddd; }

165
gauss-turing/game/templates/drag_example.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Drag</title>
<title>imaginaerraum.de</title>
<script src="static/jquery-3.5.1.js"></script>
<script src="static/jquery-ui.min.js"></script>
@ -20,9 +20,9 @@
<!-- current program -->
<div class="row top-buffer">
Aktuelles Programm:
<div class="main-canvas">
<div class="cmd-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 }}"
<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 }}
@ -34,9 +34,10 @@
<!-- possible commands -->
<div class="row top-buffer">
Mögliche Befehle:
<div class="main-canvas">
<div class="programmer-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 }}"
<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>
@ -44,75 +45,7 @@
</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="row top-buffer center">
<div class="col-sm">
<input class="btn btn-primary" id="btnSubmit" type="submit" value="Befehle abschicken" />
</div>
@ -120,10 +53,6 @@
<div id = "alert_placeholder"></div>
</div>
</div>
<div class="row top-buffer">
Viel Spaß beim Spielen!
</div>
</div><!-- container -->
@ -133,40 +62,12 @@
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");
@ -198,58 +99,6 @@
});
/*
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 () {