Add rtime for steam

blueprints/risdeveau/__init__.py

@@ -33,11 +33,6 @@ def tmsmp(sec: int) -> str:
         days = round(sec / 86400, 1)
         return f"{days:.0f} d" if days.is_integer() else f"{days:.1f} d"
 
-def utmsmp(unix: int) -> str:
-    return datetime \
-        .utcfromtimestamp(unix) \
-        .strftime('%Y-%m-%d %H:%M:%S')
-
 def rtmsmp(unix: int) -> str:
     return tmsmp(int(time() - unix))
 
@@ -77,7 +72,6 @@ args = {
     "lb":     lb_data,
     "steam":  steam_data,
     "tmsmp":  tmsmp,
-    "utmsmp": utmsmp,
     "rtmsmp": rtmsmp
 }
 

blueprints/risdeveau/static/script/rtime.js

@@ -65,4 +65,72 @@ document.addEventListener('alpine:init', () => {
       }
     },
   }));
+
+  Alpine.data('steam_rtime', (unixTimestamp) => ({
+    targetDate: new Date(unixTimestamp * 1000),
+    timeString: '',
+    timer: null,
+    interval: 1000,
+
+    colorClasses: {
+      green:  't-green',
+      yellow: 't-yellow',
+      orange: 't-orange',
+      red:    't-red'
+    },
+
+    currentColor: 'green',
+
+    get textColorClass() {
+      return this.colorClasses[this.currentColor];
+    },
+
+    init() {
+      this.updateTime();
+      this.timer = setInterval(() => this.updateTime(), this.interval);
+
+      this.$el.addEventListener('alpine:removing', () => {
+        if (this.interval) clearInterval(this.interval);
+      });
+    },
+
+    updateTime() {
+      const now = new Date();
+      const diffInMinutes = Math.floor((now - this.targetDate) / 60000);
+      const diffInHours = Math.floor(diffInMinutes / 60);
+      const diffInDays = Math.floor(diffInHours / 24);
+      const diffInMonths = Math.floor(diffInDays / 30);
+
+      let newInterval = this.interval;
+
+      if (diffInMinutes < 60) {
+        this.timeString = `${diffInMinutes} m ago`;
+        newInterval = 10000;
+      } else if (diffInHours < 24) {
+        this.timeString = `${diffInHours} h ago`;
+        newInterval = 60000;
+      } else if (diffInDays < 30) {
+        this.timeString = `${diffInDays} d ago`;
+        clearInterval(this.timer);
+      } else {
+        this.timeString = `${diffInMonths} mth ago`;
+        clearInterval(this.timer);
+      }
+
+      if (diffInHours < 12) {
+        this.currentColor = 'green';
+      } else if (diffInDays < 1) {
+        this.currentColor = 'yellow';
+      } else if (diffInMonths < 6) {
+        this.currentColor = 'orange'
+      } else {
+        this.currentColor = 'red';
+      }
+
+      if (this.interval != newInterval) {
+        clearInterval(this.timer)
+        this.timer = setInterval(() => this.updateTime(), newInterval);
+      }
+    },
+  }));
 });

blueprints/risdeveau/templates/steam.htm

@@ -56,7 +56,11 @@
             {{ tmsmp(g.playtime_forever*60) }} (<abbr title="Total">T</abbr>)
           </p>
           {% if g.rtime_last_played != 0 %}
-            <p>Last played: {{ utmsmp(g.rtime_last_played) }}</p>
+            <p
+              x-data="steam_rtime({{ g.rtime_last_played }})"
+              x-text="`Last played: ${timeString}`"
+              :class="textColorClass"
+            ></p>
           {% endif %}
         </div>
       </a>