{% extends "base.twig" %}
{% block title %}{{ t('ui.webdoors.page_title', {}, locale, ['common']) }} - {{ system_name }}{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1><i class="fas fa-gamepad"></i> {{ t('ui.webdoors.heading', {}, locale, ['common']) }}</h1>
</div>
<p class="text-muted mb-4">{{ t('ui.webdoors.description', {}, locale, ['common']) }}</p>
<div class="card mb-4">
<div class="card-header d-flex justify-content-between align-items-center">
<span><i class="fas fa-trophy text-warning me-2"></i>{{ t('ui.webdoors.top_scores_all_games', {}, locale, ['common']) }}</span>
<div class="d-flex align-items-center gap-2">
<div class="btn-group btn-group-sm" role="group" aria-label="{{ t('ui.webdoors.leaderboard_month_navigation', {}, locale, ['common']) }}">
<a class="btn btn-outline-secondary btn-sm" href="/games?month_offset={{ leaderboard_month_offset + 1 }}" title="{{ t('ui.webdoors.previous_month', {}, locale, ['common']) }}">
<i class="fas fa-chevron-left"></i>
</a>
{% if leaderboard_month_offset > 0 %}
<a class="btn btn-outline-secondary btn-sm" href="/games?month_offset={{ leaderboard_month_offset - 1 }}" title="{{ t('ui.webdoors.next_month', {}, locale, ['common']) }}">
<i class="fas fa-chevron-right"></i>
</a>
{% else %}
<button class="btn btn-outline-secondary btn-sm" type="button" disabled title="{{ t('ui.webdoors.current_month', {}, locale, ['common']) }}">
<i class="fas fa-chevron-right"></i>
</button>
{% endif %}
</div>
<small class="text-muted">{{ leaderboard_month_label }}</small>
</div>
</div>
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-sm table-striped mb-0 align-middle">
<thead class="table-light">
<tr>
<th style="width: 60px;">{{ t('ui.webdoors.rank', {}, locale, ['common']) }}</th>
<th>{{ t('ui.webdoors.player', {}, locale, ['common']) }}</th>
<th>{{ t('ui.webdoors.game', {}, locale, ['common']) }}</th>
<th>{{ t('ui.webdoors.board', {}, locale, ['common']) }}</th>
<th class="text-end" style="width: 100px;">{{ t('ui.webdoors.score', {}, locale, ['common']) }}</th>
<th style="width: 110px;">{{ t('ui.webdoors.date', {}, locale, ['common']) }}</th>
</tr>
</thead>
<tbody>
{% if leaderboard|length == 0 %}
<tr>
<td colspan="6" class="text-center text-muted py-3">{{ t('ui.webdoors.no_scores_for_month', {'month': leaderboard_month_label}, locale, ['common']) }}</td>
</tr>
{% else %}
{% for entry in leaderboard %}
<tr>
<td class="text-muted">#{{ entry.rank }}</td>
<td>{{ entry.display_name }}</td>
<td>
{% if entry.game_path %}
<a href="/games/{{ entry.game_path }}" class="leaderboard-link">{{ entry.game_name }}</a>
{% else %}
{{ entry.game_name }}
{% endif %}
</td>
<td><span class="badge bg-secondary-subtle text-dark">{{ entry.board }}</span></td>
<td class="text-end">{{ entry.score }}</td>
<td class="text-muted">{{ entry.date }}</td>
</tr>
{% endfor %}
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% if games|length > 0 %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
{% for game in games %}
<div class="col">
<div class="card h-100 game-card">
<div class="card-body d-flex">
<div class="game-icon me-3">
<img src="{{ game.icon_url }}" alt="{{ game.name }}" class="rounded"
style="width: 64px; height: 64px; object-fit: cover;"
onerror="this.src='/favicon.svg'">
</div>
<div class="flex-grow-1">
<h5 class="card-title mb-1">
{{ game.name }}
{% if game.type == 'dosdoor' %}
<span class="badge bg-info text-white" style="font-size: 0.65rem;">DOS</span>
{% elseif game.type == 'nativedoor' %}
<span class="badge bg-warning text-dark" style="font-size: 0.65rem;">NATIVE</span>
{% elseif game.type == 'jsdosdoor' %}
<span class="badge bg-primary text-white" style="font-size: 0.65rem;">{{ t('ui.webdoors.type_jsdos', {}, locale, ['common']) }}</span>
{% else %}
<span class="badge bg-success text-white" style="font-size: 0.65rem;">WEB</span>
{% endif %}
</h5>
<p class="card-text text-muted small mb-2">{{ game.description }}</p>
<div class="d-flex justify-content-between align-items-center">
<small class="text-muted">
{% if game.type == 'dosdoor' or game.type == 'nativedoor' %}
{% if game.players %}{{ t('ui.webdoors.players_count', {'count': game.players}, locale, ['common']) }}{% endif %}
{% if game.version or game.author %}
{% if game.players %} | {% endif %}
{% if game.version %}v{{ game.version }} {% endif %}
{% if game.author %}{{ t('ui.webdoors.by_author', {'author': game.author}, locale, ['common']) }}{% endif %}
{% endif %}
{% else %}
{{ t('ui.webdoors.version_by_author', {'version': game.version, 'author': game.author}, locale, ['common']) }}
{% endif %}
</small>
<a href="/games/{{ game.path }}" class="btn btn-primary btn-sm">
<i class="fas fa-play"></i> {{ t('ui.webdoors.launch', {}, locale, ['common']) }}
</a>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="alert alert-info">
<i class="fas fa-info-circle"></i> {{ t('ui.webdoors.no_games_available', {}, locale, ['common']) }}
</div>
{% endif %}
</div>
<style>
.game-card {
transition: transform 0.2s, box-shadow 0.2s;
}
.game-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.leaderboard-link {
color: inherit;
text-decoration: none;
}
.leaderboard-link:hover {
text-decoration: underline;
}
</style>
{% endblock %}
|
Download
