added orientation icon to the web app

app.py

@@ -163,7 +163,7 @@ def hello_world():
     if request.method == 'GET':
         robot = players[player_id].robot
         if robot is not None:
-            robot_pos = (robot.x, robot.y)
+            robot_pos = (robot.x, robot.y, robot.orientation)
         else:
             robot_pos = None
         return render_template('drag_example.html', cmds=player_hand, player_id=player_id, robot_pos=robot_pos)

static/style.css

@@ -18,6 +18,30 @@
     cursor: move;
 }
 
+.rotate90 {
+    -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);
+}
+
 .card0 { left: 0; top: 0;  background-color: #E74C3C; }
 .card1 { left: 100px; top: 0; background-color: #8E44AD; }
 .card2 { left: 200px; top: 0; background-color: #5DADE2; }

templates/drag_example.html

@@ -26,23 +26,27 @@
 
     </div>
 
-    {% if robot_pos is none %}
     <div class="row">
+    {% if robot_pos is none %}
         <label for="inputRobotX">X:</label>
         <input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="5">
 
         <label for="inputRobotY">Y:</label>
         <input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="3">
-    </div>
+
+        <img id="orientation" src="/static/orientation.png" alt="0">
     {% else %}
-    <div class="row">
         <label for="inputRobotX">X:</label>
         <input type="number" id="inputRobotX" name="robot_x" min="1" max="12" value="{{ robot_pos[0] }}" readonly>
 
         <label for="inputRobotY">Y:</label>
         <input type="number" id="inputRobotY" name="robot_y" min="1" max="6" value="{{ robot_pos[1] }}" readonly>
-    </div>
+
+        <img id="orientation" src="/static/orientation.png" name="{{ robot_pos[2] }}">
+
     {% endif %}
+    </div>
+
 
 </div><!-- container -->
 
@@ -61,6 +65,23 @@
     var box = $(".box");
     var mainCanvas = $(".main-canvas");
 
+    var orientation_icon = $("#orientation");
+
+    orientation_icon.click(function () {
+        if (this.alt === "0") {
+            this.alt = "90";
+        }
+        else if (this.alt === "90") {
+            this.alt = "180";
+        }
+        else if (this.alt === "180") {
+            this.alt = "270";
+        }
+        else if (this.alt === "270") {
+            this.alt = "0";
+        }
+       $(this).css({'transform' : 'rotate('+ this.alt +'deg)'});
+    });
 
 
     $("#btnSubmit").click(function () {