160 lines
8.1 KiB
HTML
160 lines
8.1 KiB
HTML
{% extends 'layouts/layout_tcg.html' %}
|
|
|
|
{% block page_head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/tcg_games.bundle.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block page_body %}
|
|
{#
|
|
<header class="page-header">
|
|
<h1 class="page-title">MTG Commander Games</h1>
|
|
<p class="page-subtitle">Track your multiplayer battles</p>
|
|
</header>
|
|
#}
|
|
<div class="games-section tcg-card">
|
|
<div class="section-header">
|
|
<h2 class="tcg-section-title">Your Games</h2>
|
|
<button class="btn-tcg" id="btnNewGame">New Game</button>
|
|
</div>
|
|
|
|
<!-- Filters Form -->
|
|
<form id="{{ model.ID_FORM_FILTERS }}" class="{{ model.FLAG_FORM_FILTERS }} {{ model.FLAG_IS_COLLAPSED }}">
|
|
{{ model.form_filters.hidden_tag() }}
|
|
<div class="filters-row">
|
|
<div class="filter-group">
|
|
{{ model.form_filters.search.label(class="tcg-label") }}
|
|
{{ model.form_filters.search(class="tcg-input", placeholder="Search games...") }}
|
|
</div>
|
|
<div class="filter-group checkbox-group">
|
|
{{ model.form_filters.active_only() }}
|
|
{{ model.form_filters.active_only.label(class="tcg-label") }}
|
|
</div>
|
|
<div class="filter-group checkbox-group">
|
|
{{ model.form_filters.is_commander() }}
|
|
{{ model.form_filters.is_commander.label(class="tcg-label") }}
|
|
</div>
|
|
<div class="filter-group">
|
|
<button type="submit" class="btn-tcg-secondary btn-tcg">Apply Filters</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Games Table -->
|
|
<table class="games-table {{ model.FLAG_TABLE_MAIN }} {{ model.FLAG_ROW }} {{ model.FLAG_CARD }} {{ model.FLAG_DECK }}" id="{{ model.ID_TABLE_MAIN }}">
|
|
<thead>
|
|
<tr>
|
|
<th class="{{ model.ATTR_GAME_ID }}">Game ID</th>
|
|
<th class="{{ model.FLAG_IS_COMMANDER }}">Type</th>
|
|
<th class="{{ model.FLAG_LOCATION_NAME }}">Location</th>
|
|
<th class="{{ model.FLAG_START_ON }}">Started</th>
|
|
<th class="{{ model.FLAG_ACTIVE }}">Status</th>
|
|
<th class="{{ model.FLAG_NAV_MTG_GAME }}">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% if model.games and model.games|length > 0 %}
|
|
{% for game in model.games %}
|
|
<tr class="game-row {% if not game.active %}inactive{% endif %}" data-game-id="{{ game.game_id }}">
|
|
<td class="{{ model.ATTR_GAME_ID }}">#{{ game.game_id }}</td>
|
|
<td class="{{ model.FLAG_IS_COMMANDER }}">
|
|
{% if game.is_commander %}
|
|
<span class="badge badge-commander">Commander</span>
|
|
{% elif game.is_draft %}
|
|
<span class="badge badge-draft">Draft</span>
|
|
{% elif game.is_sealed %}
|
|
<span class="badge badge-sealed">Sealed</span>
|
|
{% else %}
|
|
<span class="badge badge-standard">Standard</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="{{ model.FLAG_LOCATION_NAME }}">{{ game.location_name or 'Unknown' }}</td>
|
|
<td class="{{ model.FLAG_START_ON }}">{{ model.format_datetime_text(game.start_on) if game.start_on else 'Not started' }}</td>
|
|
<td class="{{ model.FLAG_ACTIVE }}">
|
|
{% if game.end_on %}
|
|
<span class="status status-ended">Ended</span>
|
|
{% elif game.active %}
|
|
<span class="status status-active">Active</span>
|
|
{% else %}
|
|
<span class="status status-inactive">Inactive</span>
|
|
{% endif %}
|
|
</td>
|
|
<td class="{{ model.FLAG_NAV_MTG_GAME }}">
|
|
<a href="{{ model.HASH_PAGE_MTG_GAME }}/{{ game.game_id }}" class="btn-tcg btn-join">Join Game</a>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
{% else %}
|
|
<tr class="no-games-row">
|
|
<td colspan="6" class="no-games">
|
|
<div class="no-games-message">
|
|
<span class="no-games-icon">⚔</span>
|
|
<p>No games found. Start a new battle!</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endif %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- New Game Modal -->
|
|
<div id="newGameModal" class="modal-overlay {{ model.FLAG_IS_COLLAPSED }}">
|
|
<div class="modal-content tcg-card">
|
|
<div class="modal-header">
|
|
<h2 class="tcg-section-title">Create New Game</h2>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<form id="newGameForm" class="new-game-form">
|
|
<div class="form-group">
|
|
<label class="tcg-label" for="gameType">Game Type</label>
|
|
<select id="gameType" class="tcg-input" name="game_type">
|
|
<option value="commander" selected>Commander</option>
|
|
<option value="draft">Draft</option>
|
|
<option value="sealed">Sealed</option>
|
|
<option value="standard">Standard</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="tcg-label" for="locationName">Location</label>
|
|
<input type="text" id="locationName" name="location_name" class="tcg-input" placeholder="e.g., Local Game Store">
|
|
</div>
|
|
{#
|
|
<div class="form-group">
|
|
<label class="tcg-label" for="playerCount">Number of Players</label>
|
|
<input type="number" id="playerCount" name="player_count" class="tcg-input" min="2" max="8" value="4">
|
|
</div>
|
|
#}
|
|
<div class="form-group">
|
|
<label class="tcg-label" for="startingLife">Starting Life</label>
|
|
<input type="number" id="startingLife" name="starting_life" class="tcg-input" min="1" value="40">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="tcg-label" for="gameNotes">Notes</label>
|
|
<textarea id="gameNotes" name="notes" class="tcg-input" rows="3" placeholder="Optional notes about this game..."></textarea>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button type="button" class="btn-tcg btn-tcg-secondary">Cancel</button>
|
|
<button type="submit" class="btn-tcg">Create Game</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'components/common/temporary/_overlay_confirm.html' %}
|
|
{% include 'components/common/temporary/_overlay_error.html' %}
|
|
|
|
<script>
|
|
var games = {{ model.convert_list_objects_to_json(model.games) | tojson | safe }};
|
|
var hashSaveGame = "{{ model.HASH_SAVE_MTG_GAME }}";
|
|
var hashPageGame = "{{ model.HASH_PAGE_MTG_GAME }}";
|
|
var flagGame = "{{ model.FLAG_GAME }}";
|
|
var flagIsCommander = "{{ model.FLAG_IS_COMMANDER }}";
|
|
var flagIsDraft = "{{ model.FLAG_IS_DRAFT }}";
|
|
var flagIsSealed = "{{ model.FLAG_IS_SEALED }}";
|
|
var flagLocationName = "{{ model.FLAG_LOCATION_NAME }}";
|
|
var flagNotes = "{{ model.FLAG_NOTES }}";
|
|
var flagStartOn = "{{ model.FLAG_START_ON }}";
|
|
var flagStartingLife = "{{ model.FLAG_STARTING_LIFE }}";
|
|
</script>
|
|
{% endblock %}
|