-hot garbage

- never send this version live

index.html

@@ -105,6 +105,11 @@
                 </div>
               </div>
               <div id='GoalProgressWrap'>
+                <div id='GoalProgressBar'>
+                  <p id='GoalProgressTransparent' style='color: transparent;'>
+                    1234/5678
+                  </p>
+                </div>
                 <p id='GoalProgress'>
                   1234/5678
                 </p>

timer.css

@@ -168,11 +168,19 @@ p {
   border: .4cqh solid;
   border-color: #404145;
   margin: .4ch auto 0 auto;
+  overflow: hidden;
+}
+
+#GoalProgressBar {
+  width: 110%;
+  background-color: #55CBFF;
+  transform: translate(-5%, 0%) scale(1, 1.5);
 }
 
 #GoalProgress {
   transform: translate(0%, -8%) scale(1);
   text-align: center;
+  margin-top: -19%;
 }
 
 #TopUsers {

timer.js

@@ -8,6 +8,8 @@ class Timer {
   constructor(renderer, timer_data) {
     this.renderer = renderer;
     this.destroying = false;
+    //TEMP
+    this.temptime = 15;
 
     this.update_from_data(timer_data);
   }
@@ -34,12 +36,15 @@ class Timer {
 
   render_time() {
     this.renderer.render_time(
-      Math.floor((this.end_at - new Date()) / 1000)
+      //TEMP
+      this.temptime
+      //Math.floor((this.end_at - new Date()) / 1000)
     );
   }
 
   render() {
     // Render goal
+
     if (this.next_goal != null) {
       this.renderer.render_current_goal(
         this.next_goal.name,
@@ -49,9 +54,9 @@ class Timer {
       this.renderer.animate();
     } else if (this.last_goal != null) {
       this.renderer.render_current_goal(
-        this.last_goal.name,
+        this.next_goal.name,
         this.total_contribution,
-        this.last_goal.required,
+        this.next_goal.required,
       );
       this.renderer.animate();
     } else {
@@ -74,10 +79,18 @@ class Timer {
       this.render_time();
 
       if (this.running) {
-        setTimeout(this.tick.bind(this), 1000);
-      }
-    }
+        //setTimeout(this.tick.bind(this), 1000);
 
+        //if (Math.floor((this.end_at - new Date()) / 1000) > 0) {
+        if (Math.floor(this.temptime) > 0) {
+          //TEMP
+          this.temptime = this.temptime - 1;
+          setTimeout(this.tick.bind(this), 1000);
+        } else {
+
+        }
+      }
+    }
   }
 }
 
@@ -95,6 +108,7 @@ class TimerRenderer {
 
     // 1524/3000 Points
     this.goal_progress = document.getElementById("GoalProgress")
+    this.goal_bar = document.getElementById("GoalProgressBar")
 
     // Top 3 Gifters 
     this.topusers_label = document.getElementById("TopUsers")
@@ -123,12 +137,16 @@ class TimerRenderer {
     // Leaderboard names
     this.userboxes = [this.topusers_user1_name, this.topusers_user2_name, this.topusers_user3_name]
     this.userdupeboxes = [this.topusers_userdupe1_name, this.topusers_userdupe2_name, this.topusers_userdupe3_name]
+
+    // Thank you!
+    this.thankyou = "Thank you very super lots many ultra bunches large big huge mega galactic universal multiversal infinite thnaks!"
   }
 
   // -- Toggles animation if text overflows container and adjusts speed for uniform movement --
   animate() {
-    for (let i = 0; i < this.scrollboxes.length; i++) {
 
+    for (let i = 0; i < this.scrollboxes.length; i++) {
+  console.log('animate');
       // Check whether the itteration is a username or goal
       if (this.scrollboxes[i].id == 'ScrollWrapGoal') {
 
@@ -176,22 +194,23 @@ class TimerRenderer {
    * Bring the display into a standard initial state.
    */
   reset() {
-    this.timer.textContent = "00:00";
+    this.timer.textContent = "07:13";
     this.goal_label.textContent = "Next Goal:";
     this.goal_name.textContent = "The answer is...";
     this.goal_namedupe.textContent = "The answer is...";
-    this.goal_progress.textContent = "0000/0000";
+    this.goal_progress.textContent = "1234/5678";
 
     this.topusers_label.textContent = "Leaderboard:";
     this.topusers_user1_num.textContent = "1";
-    this.topusers_user1_name.textContent = "Username4";
-    this.topusers_userdupe1_name.textContent = "Username4";
+    this.topusers_user1_name.textContent = "Username1024";
+    this.topusers_userdupe1_name.textContent = "Username1024";
     this.topusers_user2_num.textContent = "2";
     this.topusers_user2_name.textContent = "User";
     this.topusers_userdupe2_name.textContent = "User";
     this.topusers_user3_num.textContent = "3";
     this.topusers_user3_name.textContent = "Username_Very_Super_Long12";
     this.topusers_userdupe3_name.textContent = "Username_Very_Super_Long12";
+    console.log('reset');
 
   }
 
@@ -201,10 +220,16 @@ class TimerRenderer {
    * @param {integer} seconds_remaining - The number of seconds remaining on the timer.
    */
   render_time(seconds_remaining) {
+    console.log(seconds_remaining);
     var timestr;
     // Render a time remaining given in seconds
     if (seconds_remaining <= 0) {
       timestr = "00:00";
+      this.timer.style.color = '#82C8B6';
+      this.goal_label.textContent = "Completed!";
+      this.goal_name.textContent = this.thankyou;
+      this.goal_namedupe.textContent = this.thankyou;
+      this.animate();
     } else {
       var seconds = seconds_remaining % 60;
       seconds_remaining = seconds_remaining - seconds;
@@ -212,6 +237,10 @@ class TimerRenderer {
       var hours = Math.floor(minutes / 60);
       minutes = minutes - 60 * hours;
 
+      console.log('hr' + hours);
+      console.log('mn' + minutes);
+      console.log('sc' + seconds);
+
       // Change rendering mode based on hours or minutes left
       if (hours > 0) {
         timestr = String(hours).padStart(2, '0') + ':' + String(minutes).padStart(2, '0');
@@ -240,6 +269,14 @@ class TimerRenderer {
 
     // Bitwise OR done to convert floats to integers if needed
     this.goal_progress.textContent = String(current | 0) + '/' + String(required | 0)
+
+    console.log('ratio' + current/required);
+    if (current/required > .02) {
+      console.log('%' + (current/required) * 100);
+      this.goal_bar.style.maskImage = `linear-gradient(to right, #55CBFF 0%, #55CBFF ${((current/required) - .02)*100}%, transparent ${(current/required)*100}%)`;
+    } else {
+      this.goal_bar.style.maskImage = `linear-gradient(to right, transparent 0%)`;
+    }
   }
 
   /**