204 lines
11 KiB
HTML
204 lines
11 KiB
HTML
{% extends 'layouts/layout_tcg.html' %}
|
|
|
|
{% block page_head %}
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='dist/css/tcg_game.bundle.css') }}">
|
|
{% endblock %}
|
|
|
|
{% block page_body %}
|
|
<header class="game-header">
|
|
<div class="header-left">{{ model.game.start_on.strftime('%-d %b %Y, %-I:%M %p') if model.game.start_on else '' }}</div>
|
|
<div class="header-center">
|
|
<div class="game-meta">
|
|
{% if model.game.is_commander %}
|
|
<span class="badge badge-commander">Commander</span>
|
|
{% elif model.game.is_draft %}
|
|
<span class="badge badge-draft">Draft</span>
|
|
{% elif model.game.is_sealed %}
|
|
<span class="badge badge-sealed">Sealed</span>
|
|
{% else %}
|
|
<span class="badge badge-standard">Standard</span>
|
|
{% endif %}
|
|
{% if model.game.location_name %}
|
|
<span class="location">{{ model.game.location_name }}</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="header-right">{{ model.game.end_on.strftime('%-d %b %Y, %-I:%M %p') if model.game.end_on else '' }}</div>
|
|
|
|
{% set block_id = 'container_buttons_save_cancel' %}
|
|
{% include 'components/common/buttons/_buttons_save_cancel.html' %}
|
|
</header>
|
|
|
|
<!-- Setup Section (shown when no players) -->
|
|
<div class="setup-section tcg-card {% if model.players and model.players|length > 0 %}hidden{% endif %}" id="setupSection">
|
|
<h2 class="tcg-section-title">Game Setup</h2>
|
|
<div class="setup-controls">
|
|
<div class="control-group">
|
|
<label class="tcg-label" for="playerCount">Players:</label>
|
|
<input type="number" id="playerCount" class="tcg-input" min="2" max="8" value="4">
|
|
</div>
|
|
<div class="control-group">
|
|
<label class="tcg-label" for="startingLife">Starting Life:</label>
|
|
<input type="number" id="startingLife" class="tcg-input" min="1" value="{{ model.game.starting_life }}">
|
|
</div>
|
|
</div>
|
|
<div id="playerSetupSection">
|
|
<!-- <h3 class="tcg-section-title" style="font-size: 1.1rem; margin-top: 2rem;">Player Names</h3> -->
|
|
<div id="playerSetupGrid" class="player-names-grid"></div>
|
|
</div>
|
|
<div class="setup-actions">
|
|
<button class="btn-tcg">Begin Battle</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Game Section (shown when game is active) -->
|
|
<div class="{% if not model.players or model.players|length == 0 %}hidden{% endif %}" id="gameSection">
|
|
<div class="{{ model.FLAG_ROW }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_ROUND }}">
|
|
<div class="{{ model.FLAG_ROW }} {{ model.FLAG_CONTAINER }} {{ model.FLAG_ROUND }}">
|
|
{#
|
|
<label class="{{ model.FLAG_ROUND }}">Round</label>
|
|
<input type="number" id="{{ model.ID_INPUT_ROUND }}" class="{{ model.FLAG_ROUND }}" />
|
|
#}
|
|
<span class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER }}">Round:</span>
|
|
<div class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER}}">
|
|
<button class="{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }} {{ model.FLAG_ROUND_DISPLAY_ORDER_MINUS }}">−</button>
|
|
<span class="{{ model.FLAG_ROUND }} {{ model.FLAG_DISPLAY_ORDER }}"></span>
|
|
<button class="{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }} {{ model.FLAG_ROUND_DISPLAY_ORDER_PLUS }}">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="players-grid" id="playersGrid">
|
|
{#
|
|
{% for player in model.players %}
|
|
{% set player_damage = [] %}
|
|
{% for damage in model.damage_records %}
|
|
{% if damage.player_id == player.player_id %}
|
|
{% set _ = player_damage.append(damage) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="player-card {% if not player.active %}eliminated{% endif %}" data-player-id="{{ player.player_id }}">
|
|
<div class="player-header">
|
|
<div class="player-info">
|
|
<div class="player-name">{{ player.name }}</div>
|
|
<div class="commander-deaths">
|
|
<span>Commander Deaths:</span>
|
|
<div class="death-counter">
|
|
<button class="death-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">−</button>
|
|
<span class="death-display" id="deaths-{{ player.player_id }}">0</span>
|
|
<button class="death-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button class="eliminate-btn">
|
|
{% if not player.active %}Revive{% else %}Eliminate{% endif %}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="life-total">
|
|
<div class="life-display" id="life-{{ player.player_id }}">40</div>
|
|
<div class="life-controls">
|
|
<button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="-5">-5</button>
|
|
<button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">-1</button>
|
|
<button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+1</button>
|
|
<button class="life-btn" {{ model.ATTR_DATA_AMOUNT }}="5">+5</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="commander-damage-section">
|
|
<div class="section-title">Commander Damage Taken</div>
|
|
<div class="damage-grid" id="damage-grid-{{ player.player_id }}">
|
|
{% for other_player in model.players %}
|
|
{% if other_player.player_id != player.player_id %}
|
|
<div class="damage-row">
|
|
<span class="damage-source">from {{ other_player.name }}</span>
|
|
<div class="damage-controls">
|
|
<button class="damage-btn" {{ model.ATTR_DATA_AMOUNT }}="-1">−</button>
|
|
<span class="damage-display" id="cmd-dmg-{{ player.player_id }}-{{ other_player.player_id }}">0</span>
|
|
<button class="damage-btn" {{ model.ATTR_DATA_AMOUNT }}="1">+</button>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
#}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="{{ model.FLAG_DAMAGE_LOG }} {{ model.FLAG_CONTAINER }}">
|
|
<h2 class="tcg-section-title">Damage Log</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th class="{{ model.ATTR_ROUND_ID }}">Round</th>
|
|
<th class="{{ model.ATTR_PLAYER_ID }}">Player</th>
|
|
<th class="{{ model.ATTR_RECEIVED_FROM_COMMANDER_PLAYER_ID }}">Received From Commander</th>
|
|
<th class="{{ model.FLAG_LIFE_GAIN }}">Life Gain</th>
|
|
<th class="{{ model.FLAG_LIFE_LOSS }}">Life Loss</th>
|
|
<th class="{{ model.FLAG_COMMANDER_DEATHS }}">Commander Deaths</th>
|
|
<th class="{{ model.FLAG_IS_ELIMINATED }}">Is Eliminated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="save-indicator" id="saveIndicator">Game Saved</div>
|
|
|
|
<div id="{{ model.PLAYER_SETUP_WRAPPER_TEMPLATE_ID }}" class="player-name-input-wrapper {{ model.FLAG_IS_COLLAPSED }}">
|
|
<label class="player-name-heading-label tcg-label">Player</label>
|
|
<div class="playerUser">
|
|
<label class="player-name-label tcg-label">User</label>
|
|
<select>
|
|
{% for user in model.users %}
|
|
{% set user_selected_attribute_text = 'selected' if user.user_id == model.user.user_id else '' %}
|
|
<option value="{{ user.user_id }}" {{ model.ATTR_USER_ID }}="{{ user.user_id }}" {{ user_selected_attribute_text }}>{{ user.firstname }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="playerDeck">
|
|
<label class="player-name-label tcg-label">Deck</label>
|
|
<select>
|
|
{% for deck in model.decks %}
|
|
<option value="{{ deck.deck_id }}" {{ model.ATTR_DECK_ID }}="{{ deck.deck_id }}">{{ deck.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="playerName">
|
|
<label class="player-name-label tcg-label">Name</label>
|
|
<input type="text" placeholder="Blank for player + deck name" />
|
|
</div>
|
|
</div>
|
|
|
|
{% include 'components/common/temporary/_overlay_confirm.html' %}
|
|
{% include 'components/common/temporary/_overlay_error.html' %}
|
|
|
|
<script>
|
|
var attrGameId = "{{ model.ATTR_GAME_ID }}";
|
|
var attrPlayerId = "{{ model.ATTR_PLAYER_ID }}";
|
|
var attrReceivedFromCommanderPlayerId = "{{ model.ATTR_RECEIVED_FROM_COMMANDER_PLAYER_ID }}";
|
|
var damageRecords = {{ model.convert_list_objects_to_json(model.damage_records) | tojson | safe }};
|
|
var decks = {{ model.convert_list_objects_to_json(model.decks) | tojson | safe }};
|
|
var flagDamageLog = "{{ model.FLAG_DAMAGE_LOG }}";
|
|
var flagRoundDisplayOrderButton = "{{ model.FLAG_ROUND_DISPLAY_ORDER_BUTTON }}";
|
|
var flagRoundDisplayOrderMinus = "{{ model.FLAG_ROUND_DISPLAY_ORDER_MINUS }}";
|
|
var flagRoundDisplayOrderPlus = "{{ model.FLAG_ROUND_DISPLAY_ORDER_PLUS }}";
|
|
var flagPlayer = "{{ model.FLAG_PLAYER }}";
|
|
var game = {{ model.game.to_json() | tojson | safe }};
|
|
var gameId = {{ model.game.game_id }};
|
|
var hashSaveGamePlayer = "{{ model.HASH_SAVE_MTG_GAME_PLAYER }}";
|
|
var hashSaveGameRound = "{{ model.HASH_SAVE_MTG_GAME_ROUND }}";
|
|
var hashSaveGameRoundPlayerDamage = "{{ model.HASH_SAVE_MTG_GAME_ROUND_PLAYER_DAMAGE }}";
|
|
var hashPageGames = "{{ model.HASH_PAGE_MTG_GAMES }}";
|
|
var idInputRound = "#{{ model.ID_INPUT_ROUND }}";
|
|
var players = {{ model.convert_list_objects_to_json(model.players) | tojson | safe }};
|
|
var playerSetupWrapperTemplateId = "{{ model.PLAYER_SETUP_WRAPPER_TEMPLATE_ID }}";
|
|
var rounds = {{ model.convert_list_objects_to_json(model.rounds) | tojson | safe }};
|
|
var startingLife = 40;
|
|
var user = {{ model.user.to_json() | tojson | safe }};
|
|
var users = {{ model.convert_list_objects_to_dict_json_by_attribute_key_default(model.users) | tojson | safe }};
|
|
</script>
|
|
{% endblock %}
|