tmp

blueprints/risdeveau/__init__.py

@@ -48,7 +48,8 @@ def render_tmpl(filename: str, **kwargs) -> str:
     template_path = os.path.join("risdeveau/templates", filename)
     return minify(
         render_template(template_path, **kwargs),
-        remove_empty_space=True
+        remove_empty_space=True,
+        remove_all_empty_space=True
     )
 
 @bp.route("/static/<path:filename>")

blueprints/risdeveau/modules/api/steam.py

@@ -34,12 +34,13 @@ data = {
 def modify_game_list(json: dict) -> dict:
     if 'games' in json.keys():
         apps = (3301060, 404790, 1281930, 1920960, 1325960, 431960)
-        new_games = []
+        new_games = {}
         for i, g in enumerate(json['games']):
             if g['appid'] not in apps:
                 json['games'][i]['h_cover'] = f"https://shared.fastly.steamstatic.com/store_item_assets//steam/apps/{g['appid']}/header.jpg"
                 json['games'][i]['v_cover'] = f"https://shared.fastly.steamstatic.com/store_item_assets//steam/apps/{g['appid']}/library_600x900.jpg"
-                new_games.append(json['games'][i])
+
+                new_games[g['appid']] = json['games'][i]
         json['games'] = new_games
     return json
 

blueprints/risdeveau/static/style/risdeveau.scss

@@ -51,7 +51,27 @@ h3 {
 
 .steam {
   .block {
-    display: flex;
+    &:not(.popup) {
+      display: flex;
+      position: relative;
+      z-index: 1;
+    }
+
+    &.popup {
+      margin-top: -.5rem;
+      padding-top: 1rem;
+      background-color: theme.$mantle;
+      transition: all ease-out 300ms;
+
+      &.enter {}
+
+      &.off {
+        margin-bottom: -.5rem;
+        padding: 0 .5rem;
+        opacity: 0;
+        transform: translateY(-100%);
+      }
+    }
 
     img {
       height: 7rem;

blueprints/risdeveau/templates/steam.htm

@@ -1,3 +1,7 @@
+{% if request.headers.get('hx-request') != "true" %}
+  <div x-data='{ "current": null, "total_mode": "T" }' class="mt-1">
+{% endif %}
+
 <div
   class="block steam"
   hx-get="/m/steam"
@@ -10,10 +14,12 @@
 >
   <h2><a href="https://steamcommunity.com/id/risdeveau">Steam</a></h2>
 
+  {{ steam.caches.recent.status }}
+  {{ steam.caches.owned.status }}
   {% if steam.caches.recent.data.games %}
     <h3>Recently played:</h3>
-    {% for g in steam.caches.recent.data.games %}
-      <a href="https://store.steampowered.com/app/{{ g.appid }}" class="block">
+    {% for g in steam.caches.recent.data.games.values() %}
+      <div href="https://store.steampowered.com/app/{{ g.appid }}" class="block">
         <picture>
           <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
           <img src="{{ g.h_cover }}">
@@ -22,14 +28,35 @@
         <div>
           <strong>{{ g.name }}</strong>
           <p>Played last 2 weeks: {{ tmsmp(g.playtime_2weeks*60) }}
-          <p>
-            Total played:
-            {{ tmsmp(g.playtime_linux_forever*60) }} (<abbr title="On Linux">L</abbr>) +
-            {{ tmsmp(g.playtime_windows_forever*60) }} (<abbr title="On Windows">W</abbr>) =
-            {{ tmsmp(g.playtime_forever*60) }} (<abbr title="Total">T</abbr>)
-          </p>
+
+          <div>
+            <p
+              x-data='{ playtime: { L: "{{ tmsmp(g.playtime_linux_forever*60) }}", W: "{{ tmsmp(g.playtime_windows_forever*60) }}", T: "{{ tmsmp(g.playtime_forever*60) }}" }}'
+              x-text="`Total played: ${playtime[total_mode]}`"
+            >
+            </p>
+
+            <div>
+              <button @click="total_mode = 'L'" :class="total_mode == 'L' && 't-green'">L</button>
+              <button @click="total_mode = 'W'" :class="total_mode == 'W' && 't-green'">W</button>
+              <button @click="total_mode = 'T'" :class="total_mode == 'T' && 't-green'">T</button>
+            </div>
+
+          </div>
+
+          {% if steam.caches.owned.data.games %}
+            {% if steam.caches.owned.data.games[g.appid] %}
+              <p
+                x-data="steam_rtime({{ steam.caches.owned.data.games[g.appid].rtime_last_played }})"
+                x-text="`Last played: ${timeString}`"
+                :class="textColorClass"
+              ></p>
+            {% else %}
+              <p class="t-red">Last played: Unknown</p>
+            {% endif %}
+          {% endif %}
         </div>
-      </a>
+      </div>
     {% endfor %}
     <p
       x-data="rtime({{steam.caches.recent.last_updated}})"
@@ -39,9 +66,13 @@
 
   {% if steam.caches.owned.data.games %}
     <h3>Top played games:</h3>
-    {% set owned_games = steam.caches.owned.data.games | sort(attribute="playtime_forever", reverse=true) %}
+    {% set owned_games = steam.caches.owned.data.games.values() | sort(attribute="playtime_forever", reverse=true) %}
     {% for g in owned_games[:5] %}
-      <a href="https://store.steampowered.com/app/{{ g.appid }}" class="block">
+      <div
+        @click='current == {{ g.appid }} ? current = null : current = {{ g.appid }}'
+        href="https://store.steampowered.com/app/{{ g.appid }}"
+        class="block"
+      >
         <picture>
           <source media="(max-width: 45rem)" srcset="{{ g.v_cover }}">
           <img src="{{ g.h_cover }}">
@@ -63,11 +94,32 @@
             ></p>
           {% endif %}
         </div>
-      </a>
+      </div>
+      <div
+        class="block popup"
+        x-show="current == {{ g.appid }}"
+        x-transition:enter-start="off"
+        x-transition:leave-end="off"
+      >
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+        <p>Some info</p>
+      </div>
     {% endfor %}
     <p
       x-data="rtime({{steam.caches.owned.last_updated}})"
       x-text="`Last updated: ${timeString}`"
     ></p>
   {% endif %}
+
 </div>
+
+{% if request.headers.get('hx-request') != "true" %}
+  </div>
+{% endif %}

blueprints/root/static/style/tw.scss

@@ -1,5 +1,11 @@
 @use "catppuccin" as theme;
 
+.m {
+  &t {
+    &-1 { margin-top: .5rem; }
+  }
+}
+
 .t {
   &-red { color: theme.$red; }
   &-orange { color: theme.$peach; }