diff --git a/index.html b/index.html
index 0a5f9ab..8f8d55b 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,10 @@
Loky has
-
{{mates}}
+
mates
diff --git a/mates.json b/mates.json
index 330d608..89df0ad 100644
--- a/mates.json
+++ b/mates.json
@@ -1 +1 @@
-{"mates":0,"lastUpdate":0}
\ No newline at end of file
+{"mates":0,"lastUpdate":0,"cooldown":60}
diff --git a/scripts/app.js b/scripts/app.js
index f2884e4..fbca851 100644
--- a/scripts/app.js
+++ b/scripts/app.js
@@ -1,13 +1,23 @@
var app = angular.module("app", []);
-app.controller("mates", ["$scope", "$http", function($scope, $http)
+app.controller("mates", ["$scope", "$http", "$interval", function($scope, $http, $interval)
{
$scope.mates = 0;
+ $scope.animation = undefined;
+ $scope.countdownStyle =
+ {
+ width: '0%'
+ };
+ $scope.cooldown = false;
+
$http.get("/mates")
.then((r) =>
{
- $scope.mates = angular.fromJson(r.data).mates;
+ var json = angular.fromJson(r.data);
+
+ $scope.mates = json.mates;
+ animateCountdown($scope, $interval, json.lastUpdate, json.cooldown);
});
$scope.countClick = () =>
@@ -15,7 +25,73 @@ app.controller("mates", ["$scope", "$http", function($scope, $http)
$http.post("/mates")
.then((r) =>
{
- $scope.mates = angular.fromJson(r.data).mates;
- })
- }
+ var json = angular.fromJson(r.data);
+
+ // Check if this was sent to early
+ if (json.error || r.status != 200) return;
+
+ $scope.mates = json.mates;
+ animateCountdown($scope, $interval, json.lastUpdate, json.cooldown);
+
+ });
+ };
}]);
+
+function animateCountdown($scope, $interval, lastUpdate, cooldown)
+{
+ var lastUpdateDate = new Date(lastUpdate)
+ var difference = timeSince(lastUpdateDate);
+
+ // Check if there is a cooldown in progress
+ if (difference < cooldown)
+ {
+ // Make sure there is no animation in progress before proceeding
+ if (angular.isDefined($scope.animation)) return;
+
+ // Run callback immediately as an interval workaround
+ cooldownIntervalCallback($scope, $interval, lastUpdateDate, cooldown);
+
+ // Set the interval
+ $scope.animation = $interval(() =>
+ {
+ cooldownIntervalCallback($scope, $interval, lastUpdateDate, cooldown);
+ }, 1000);
+ }
+}
+
+function cooldownIntervalCallback($scope, $interval, lastUpdateDate, cooldown)
+{
+ var difference = timeSince(lastUpdateDate);
+
+ if (difference >= cooldown)
+ {
+ // Cancel the interval if it exists and clear it
+ if (angular.isDefined($scope.animation)) $interval.cancel($scope.animation);
+ $scope.animation = undefined;
+
+ // Reset the countdown bar
+ $scope.countdownStyle =
+ {
+ width: '0%'
+ };
+
+ // Reset the cooldown flag
+ $scope.cooldown = false;
+ }
+ else
+ {
+ // Set the style based on the remaining percent
+ $scope.countdownStyle =
+ {
+ width: ((cooldown - difference) / cooldown) * 100 + '%'
+ };
+
+ // Set the cooldown flag
+ $scope.cooldown = true;
+ }
+}
+
+function timeSince(date)
+{
+ return Math.ceil((new Date().getTime() - date.getTime()) / 1000);
+}
diff --git a/server.js b/server.js
index a732d0b..08198d2 100644
--- a/server.js
+++ b/server.js
@@ -39,7 +39,7 @@ app.post('/mates', function(rq, rs)
var data = fs.readFileSync('./mates.json');
var json = JSON.parse(data);
- var cooldownSecs = 60;
+ var cooldownSecs = json.cooldown;
var currentTime = new Date().getTime();
var timeSinceLast = (currentTime - json.lastUpdate) / 1000;
diff --git a/stylesheets/default.css b/stylesheets/default.css
index 7b24315..ac99811 100644
--- a/stylesheets/default.css
+++ b/stylesheets/default.css
@@ -42,7 +42,28 @@ body
vertical-align: middle;
}
-.count:hover
+.count:hover:not(.count[disabled])
{
color: green;
}
+
+.count[disabled]
+{
+ color: #0009;
+}
+
+.timeRemainingBar
+{
+ position: relative;
+ bottom: 10px;
+
+ height: 5px;
+ margin-right: auto;
+ margin-left: auto;
+
+ transition-timing-function: linear;
+ transition-duration: 1s;
+ transition-property: width;
+
+ background-color: #0009;
+}