From 0db6ed1798cca4b5ef9e02162ccd41dc91eeee3c Mon Sep 17 00:00:00 2001
From: robflop <robflop98@gmail.com>
Date: Sun, 18 Dec 2016 11:44:11 +0100
Subject: [PATCH] Smooth counter updating!

No more number jumps of any size.
---
 includes/get_cache.php |  4 ++++
 index.php              | 29 +++++++++++++++++------------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/includes/get_cache.php b/includes/get_cache.php
index 3a88bb10..6d7789ad 100644
--- a/includes/get_cache.php
+++ b/includes/get_cache.php
@@ -13,4 +13,8 @@
 	$cacheNumber = $cacheCounter->get('yamero_counter');
 	echo $cacheNumber;
 }
+ else {
+	$cacheNumber = $cacheCounter->get('yamero_counter');
+	echo $cacheNumber;
+} 
 ?>
\ No newline at end of file
diff --git a/index.php b/index.php
index e1571ecb..afc15c24 100644
--- a/index.php
+++ b/index.php
@@ -51,20 +51,25 @@
         </div>
         <!-- Content box -->
         <div id="box" style="display:none;">
-            <div id="counter"></div>
+            <div id="counter"><?php include("includes/get_cache.php")?></div> <!--Display base counter-->
             <script>
 				$(document).ready(function () { // Wait for document to finish loading
-					function update() {
-						$.ajax({ // Send GET-request to display updated counter
-            				method: 'GET',
-            				url: 'includes/get_cache.php',
-            				data: { update: '1' }
-        				}).done(function (res) { // Save result in "res"
-							$('#counter').html(res); // Replace counter html with result of ajax request
-							setTimeout(function() {update();}, 2000); // Set timer to repeat ajax request
-							});	
-						}
-					update();
+					setInterval(function(){
+						$.get("https://american.megumin.love/includes/get_cache.php?update=1&t=" + (+(new Date()))).done(function(result){ // GET request the memcached value
+							var ele = $("#counter");
+							var currentValue = +(ele.text());
+							var next = +result;
+							$({val: currentValue}).animate({val: next}, { // Animate the counter change
+								duration: 1000,
+								step: function() {
+									// only update when the new value is greater than the current value
+									if (this.val > currentValue) {
+										ele.text(Math.round(this.val));
+									}
+								}
+							})
+						});
+					}, 1500);
 				}); 
 			</script> 
             <button id="button" onclick="ga('send', 'event', 'Button', 'click');">やめろ!!</button>