Points that increases with 1 for each notification

Author: jtguggedal

.Rhistory

@@ -39,4 +39,15 @@
     border: 4px solid #0b4251;
     border-radius: 50%;
 
-}
+}
+
+#points {
+    font-size:60px;
+    color: white;
+    text-align: center;
+    font-weight: 700;
+    position: fixed;
+    top: 30px;
+    width: 100%;
+}
+

css/controllers.css

@@ -1,12 +1,16 @@
 
 
     <!-- Controllers: joystick and button -->
-    
+
     <div id="control-container">
 
         <div id="joystick-container">
         </div>
 
+        <div id="points">
+            0
+        </div>
+
         <div id="button-container">
             <div id="control-button">
             </div>

img/arrow.png

@@ -10,7 +10,7 @@
 
             var priorityPacket = 0;
 
-
+            var score = 0;
 
 
             $('#LEDp').on("click change tapend", function() {
@@ -192,17 +192,21 @@
             });
 
             $('#control-button').on('touchstart', function(event) {
-                $(this).css({'box-shadow': '0px 0px 10px 3px rgba(0,0,0, 0.2)', 'height': '115px', 'width': '115px', 'ease' : '0.2'});
+                $(this).css({'box-shadow': '0px 0px 10px 3px rgba(0,0,0, 0.2)', 'height': '115px', 'width': '115px', 'transition-timing-function' : 'ease'});
                 setBit(1, 0, 1);
                 priorityWrite(charVal);
                 event.preventDefault();
 
             });
 
             $('#control-button').on('touchend', function() {
-                $(this).css({'box-shadow': '0px 0px 30px 10px rgba(0,0,0, 0.15)', 'height': '120px', 'width': '120px', '-webkit-transition-timing-function' : 'ease'});
+                $(this).css({'box-shadow': '0px 0px 30px 10px rgba(0,0,0, 0.15)', 'height': '120px', 'width': '120px', 'transition-timing-function' : 'ease'});
                 setBit(1,0,0);
                 priorityWrite(charVal);
             });
 
+            function notificationCallback(dataArray) {
+                score += 1;
+                $('#points').text(score);
+            }
 

include/controllers.html

@@ -134,8 +134,14 @@ function handleNotification(event) {
     let value = event.target.value;
     value = value.buffer ? value : new DataView(value);
 
-    // *** Insert callback function for easier access to notification events here? ****
+    // Checks if notificationCallback exists, and if it does, calls it with the received data array as argument
+    if (typeof notificationCallback === "function") { 
+        var valueArray = new Uint8Array(20);
+        for(var i = 0; i < 20; i++)
+            valueArray[i] = value.getUint8(i);
 
+        notificationCallback(valueArray);
+    }
 
     // Testing, testing...
             var bg_1,