update bootstrap and add robot id tooltip

assets/css/styles.css

@@ -3,7 +3,6 @@
     font-family: Orbitron;
     src: url(fonts/orbitron-medium-webfont.woff);
 }
-
 html, body {
     height: 100%;
     font-family: Orbitron !important;
@@ -24,17 +23,21 @@ table.blockly-table {
 td, tr {
     padding: 0px;
 }
-/* robot ID label error */
+/* Tooltip */
+.tooltip.show {
+    opacity: 1 !important;
+}
+/* Robot ID label error */
 span.has-error {
     color: #a94442 !important;
     border-color: #a94442 !important;
     background-color: #f2dede !important;
 }
-/* robot ID input error */
+/* Robot ID input error */
 input.has-error {
     border-color: #a94442 !important;
 }
-/* robot connect button */
+/* Robot connect button */
 a.btn-robot-go, a.btn-robot-go:hover {
     color: #3768d8;
 }
@@ -129,7 +132,7 @@ div#readOnlyBlocklyCode {
         margin-right: auto;
     }
     /* robot ID label */
-    span.input-group-addon {
+    span.input-group-text {
         font-size: 2vw;
         font-weight: bold;
         padding: 0.5vw 1vw !important;

assets/js/main.js

@@ -11,6 +11,12 @@ var codingEnabled = false;
 var liveStreamVisible = false;
 
 window.addEventListener('load', function() {
+    // Activate tooltips
+    $('[data-toggle="tooltip"]').tooltip({
+        animated: 'fade',
+        placement: 'bottom',
+        html: true
+    });
     // Set the robot ID from the localstorage
     $('#robot-id').val(getLocalStorageItem('sumorobot.robotId'));
 
@@ -194,8 +200,8 @@ window.addEventListener('load', function() {
 
     // Robot GO button listener
     $('.btn-robot-go').click(function() {
-        // Extract and validate the selected robot ID
+        // Get and validate the selected robot ID
-        var robotId = $('#robot-id').val().trim();
+        var robotId = $('#robot-id').val().trim().toLowerCase();
         if (robotId === '' || /^([a-f0-9]{6})$/.test(robotId) == false) {
             $('#robot-id, #robot-label').addClass('has-error');
             return;

index.html

@@ -4,8 +4,8 @@
     <meta charset="utf-8">
     <title>Sumorobot</title>
     <!-- css -->
-    <link rel="stylesheet" href="assets/css/styles.css">
+    <link rel="stylesheet" type="text/css" href="assets/css/styles.css">
-    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
     <link rel="stylesheet" type="text/css" href="assets/css/cookieconsent.min.css">
     <!-- favicon -->
     <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
@@ -14,13 +14,15 @@
     <script src="assets/js/cookie.js" type="text/javascript" charset="utf-8"></script>
     <!-- other -->
     <script src="assets/js/min/jquery.min.js" type="text/javascript" charset="utf-8"></script>
-    <script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script>
+    <script src="assets/js/min/popper.min.js" type="text/javascript" charset="utf-8"></script>
+    <script src="assets/js/min/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
     <!-- Google Blockly -->
     <script src="assets/blockly/blockly_compressed.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/blockly/blocks_compressed.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/blockly/python_compressed.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/blockly/msg/js/en.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/sumorobot.js" type="text/javascript" charset="utf-8"></script>
+    <script src="assets/js/utils.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/main.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/ace.js" type="text/javascript" charset="utf-8"></script>
     <script src="assets/js/blockly.js" type="text/javascript" charset="utf-8"></script>
@@ -34,8 +36,10 @@
     <div id="panel">
         <img class="logo" src="assets/img/logo.png" alt="logo">
         <div class="input-group">
-            <span class="input-group-addon" id="robot-label">robot ID</span>
+            <div class="input-group-prepend">
-            <input type="text" class="form-control" id="robot-id"  placeholder="xxxxxx" />
+                <span class="input-group-text" id="robot-label">Robot ID</span>
+            </div>
+            <input type="text" class="form-control" id="robot-id" placeholder="xxxxxx" data-toggle="tooltip" title="<img width='100%' src='assets/img/robot_id.jpg' />" />
         </div>
         <div class="btn-group btn-group-robot" role="group" aria-label="robots">
             <a href="#" class="btn btn-lg btn-robot-go">GO!</a>