126 lines
4.0 KiB
HTML
126 lines
4.0 KiB
HTML
{% 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"
|
|
hx-trigger="every 1m"
|
|
hx-swap="outerHTML"
|
|
hx-headers='{
|
|
"If-Modified-Since": {{ steam.last_updated | int }},
|
|
"If-None-Match": "{{ steam.etag }}"
|
|
}'
|
|
>
|
|
<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.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 }}">
|
|
</picture>
|
|
|
|
<div>
|
|
<strong>{{ g.name }}</strong>
|
|
<p>Played last 2 weeks: {{ tmsmp(g.playtime_2weeks*60) }}
|
|
|
|
<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>
|
|
</div>
|
|
{% endfor %}
|
|
<p
|
|
x-data="rtime({{steam.caches.recent.last_updated}})"
|
|
x-text="`Last updated: ${timeString}`"
|
|
></p>
|
|
{% endif %}
|
|
|
|
{% if steam.caches.owned.data.games %}
|
|
<h3>Top played games:</h3>
|
|
{% set owned_games = steam.caches.owned.data.games.values() | sort(attribute="playtime_forever", reverse=true) %}
|
|
{% for g in owned_games[:5] %}
|
|
<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 }}">
|
|
</picture>
|
|
|
|
<div>
|
|
<strong>{{ g.name }}</strong>
|
|
<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>
|
|
{% if g.rtime_last_played != 0 %}
|
|
<p
|
|
x-data="steam_rtime({{ g.rtime_last_played }})"
|
|
x-text="`Last played: ${timeString}`"
|
|
:class="textColorClass"
|
|
></p>
|
|
{% endif %}
|
|
</div>
|
|
</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 %}
|