admin/mtg_commander_life_tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: Game Rounds and Damage Log.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2026-02-11 22:11:15 +00:00
parent 29ddd1ded0
commit 1cd9b7c976
20 changed files with 860 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/dist/css/main.bundle.css vendored
View File

@@ -578,7 +578,7 @@ table div {
.topnav .container .logo {
/* min-width: 35vh; */
max-width: 30vw;
width: 30vw;
/* width: 30vw; */
/* min-height: 6vh; */
max-height: 6vh;
margin: 0.5vh;

2
static/dist/css/main.bundle.css.map vendored
View File

File diff suppressed because one or more lines are too long

84
static/dist/css/tcg_game.bundle.css vendored
View File

@@ -212,6 +212,62 @@
text-align: center;
}
/* Game Section */
#gameSection .row.round {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--tcg-text-secondary);
margin: 0 auto 0.5vh;
width: fit-content;
}
#gameSection .row.round .row.round .round.display_order {
display: flex;
align-items: center;
gap: 0.5rem;
background: var(--tcg-bg-card);
border: 1px solid var(--tcg-border-color);
border-radius: 6px;
padding: 0.25rem 0.5rem;
}
/*
#gameSection .row.round label {
margin-left: 30vw;
color: var(--tcg-text-secondary);
font-size: 1rem;
width: 4vw;
}
#gameSection .row.round input {
width: 10vw;
margin: 0 3vw 1vh;
}
*/
#gameSection .row.round .row.round span.round.display_order {
font-family: 'Cinzel', serif;
font-weight: 600;
color: var(--tcg-text-primary);
min-width: 20px;
justify-content: center;
}
#gameSection .row.round .row.round button.btn-round-display-order {
background: transparent;
border: none;
color: var(--tcg-text-secondary);
cursor: pointer;
font-size: 1rem;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
#gameSection .row.round .row.round button.btn-round-display-order:hover {
color: var(--tcg-accent-red);
transform: scale(1.2);
}
/* Players Grid */
.players-grid {
display: flex; /* grid;
@@ -473,6 +529,34 @@
color: var(--tcg-bg-primary);
}
.damage-log.container {
color: white;
margin: 2vh auto 0;
text-align: center;
}
.damage-log.container table thead tr th.round_id,
.damage-log.container table tbody tr td.round_id {
width: 7vw;
}
.damage-log.container table thead tr th.player_id,
.damage-log.container table tbody tr td.player_id,
.damage-log.container table thead tr th.received_from_commander_player_id,
.damage-log.container table tbody tr td.received_from_commander_player_id {
width: 20vw;
}
.damage-log.container table thead tr th.health_change,
.damage-log.container table tbody tr td.health_change {
width: 7vw;
}
.damage-log.container table thead tr th.commander-deaths,
.damage-log.container table tbody tr td.commander-deaths {
width: 7vw;
}
.damage-log.container table thead tr th.is_eliminated,
.damage-log.container table tbody tr td.is_eliminated {
width: 7vw;
}
/* Save Indicator */
.save-indicator {
position: fixed;

2
static/dist/css/tcg_game.bundle.css.map vendored
View File

File diff suppressed because one or more lines are too long

190
static/dist/js/main.bundle.js vendored
View File

@@ -260,7 +260,6 @@ class DOM {
return returnVal;
}
static getElementAttributeValueCurrent(element) {
// debugger;
if (Validation.isEmpty(element)) return null;
return element.getAttribute(attrValueCurrent);
}
@@ -1024,12 +1023,6 @@ class TableBasePage extends BasePage {
}
let formElement = TableBasePage.getFormFilters();
let comment = DOM.getElementValueCurrent(document.querySelector(idTextareaConfirm));
/*
Utils.consoleLogIfNotProductionEnvironment({ formElement, comment, records });
Utils.consoleLogIfNotProductionEnvironment('records');
Utils.consoleLogIfNotProductionEnvironment(records);
debugger;
*/
this.callSaveTableContent(records, formElement, comment).then(data => {
if (data[flagStatus] == flagSuccess) {
if (_verbose) {
@@ -1689,11 +1682,18 @@ class PageMtgGame extends TableBasePage {
});
// Render players to DOM
const latestRoundId = PageMtgGame.getLatestRoundId();
const latestRound = rounds.filter(round => round[attrRoundId] == latestRoundId)[0];
const roundDisplayOrderLabel = PageMtgGame.getRoundDisplayOrderLabel();
DOM.setElementValuesCurrentAndPrevious(roundDisplayOrderLabel, latestRound[flagDisplayOrder]);
this.renderPlayers();
} catch (error) {
console.error('Error loading game from server:', error);
}
}
static getRoundDisplayOrderLabel() {
return document.querySelector(['#gameSection', ' > .', flagRow, '.', flagRound, ' > .', flagRow, '.', flagRound, ' > .', flagRound, '.', flagDisplayOrder, ' > span.', flagRound, '.', flagDisplayOrder].join(''));
}
renderPlayers() {
const grid = document.getElementById('playersGrid');
grid.innerHTML = '';
@@ -1710,7 +1710,16 @@ class PageMtgGame extends TableBasePage {
}
});
*/
const latestRoundId = PageMtgGame.getLatestRoundId();
let activeRoundId = PageMtgGame.getActiveRoundId();
const roundDisplayOrderLabel = PageMtgGame.getRoundDisplayOrderLabel();
if (activeRoundId < 0) {
const currentRoundDisplayOrder = Number(DOM.getElementValueCurrent(roundDisplayOrderLabel));
rounds.push(PageMtgGame.makeDefaultGameRound(currentRoundDisplayOrder));
activeRoundId = PageMtgGame.getActiveRoundId();
}
const latestRound = rounds.filter(round => round[attrRoundId] == activeRoundId)[0];
DOM.setElementValueCurrent(roundDisplayOrderLabel, latestRound[flagDisplayOrder]);
players.forEach((player, index) => {
// Build display name: prefer user_name + deck_name, fallback to player name
const playerId = player[attrPlayerId];
@@ -1721,7 +1730,7 @@ class PageMtgGame extends TableBasePage {
let maxCommanderDamageReceived = 0;
damagePlayerPairs.forEach(damagePlayerPair => {
const sourceId = damagePlayerPair[attrPlayerId];
const filteredPlayerDamages = damageRecords.filter(damage => damage[attrRoundId] == latestRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == sourceId); //[playerId] || {};
const filteredPlayerDamages = damageRecords.filter(damage => damage[attrRoundId] == activeRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == sourceId); //[playerId] || {};
if (filteredPlayerDamages.length == 0) {
damageRecords.push(PageMtgGame.makeDefaultGameRoundPlayerDamage(playerId, sourceId));
}
@@ -1731,7 +1740,7 @@ class PageMtgGame extends TableBasePage {
let life = startingLife + totalDamage;
let isEliminatedByForce = damageRecords.filter(damage => damage[attrPlayerId] == playerId).map(damage => damage[flagIsEliminated]).some(Boolean);
const isEliminated = isEliminatedByForce || !player[flagActive] || life < 1 || maxCommanderDamageReceived >= 21;
const playerOwnDamage = damageRecords.filter(damage => damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null && damage[attrRoundId] == latestRoundId)[0];
const playerOwnDamage = damageRecords.filter(damage => damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null && damage[attrRoundId] == activeRoundId)[0];
const card = document.createElement('div');
card.className = `player-card ${isEliminated ? 'eliminated' : ''}`;
card.style.animationDelay = `${index * 0.1}s`;
@@ -1778,12 +1787,42 @@ class PageMtgGame extends TableBasePage {
`;
grid.appendChild(card);
});
this.reorderPlayerCards();
PageMtgGame.renderCommanderDamageLog();
// Hookup all event handlers
this.hookupGameRoundEvents();
this.hookupPlayerCardEvents();
}
static renderCommanderDamageLog() {
const roundDisplayOrderLabel = PageMtgGame.getRoundDisplayOrderLabel();
const currentRoundDisplayOrder = Number(DOM.getElementValueCurrent(roundDisplayOrderLabel));
const damageTableBody = document.querySelector('.' + flagDamageLog + '.' + flagContainer + ' table tbody');
damageTableBody.innerHTML = '';
let newTableBodyHtml = '';
damageRecords.forEach(damage => {
if (damage[flagActive] && (damage[flagCommanderDeaths] > 0 || damage[flagHealthChange] != 0 || damage[flagIsEliminated]) && rounds.filter(r => r[attrRoundId] == damage[attrRoundId])[0][flagDisplayOrder] <= currentRoundDisplayOrder) {
let round = rounds.filter(r => r[attrRoundId] == damage[attrRoundId])[0];
let player = players.filter(p => p[attrPlayerId] == damage[attrPlayerId])[0];
let receivedFromPlayer = damage[attrReceivedFromCommanderPlayerId] == null ? {
[flagName]: ''
} : players.filter(p => p[attrPlayerId] == damage[attrReceivedFromCommanderPlayerId])[0];
newTableBodyHtml += `
<tr ${attrDamageId}="${damage[attrDamageId]}">
<td class="${attrRoundId}">${round[flagDisplayOrder]}</td>
<td class="${attrPlayerId}">${player[flagName]}</td>
<td class="${attrReceivedFromCommanderPlayerId}">${receivedFromPlayer[flagName]}</td>
<td class="${flagHealthChange}">${damage[flagHealthChange]}</td>
<td class="${flagCommanderDeaths}">${damage[flagCommanderDeaths]}</td>
<td class="${flagIsEliminated}">${damage[flagIsEliminated]}</td>
</tr>
`;
}
});
damageTableBody.innerHTML = newTableBodyHtml;
}
static makeDefaultGameRoundPlayerDamage(playerId, receivedFromCommanderPlayerId) {
let roundId = PageMtgGame.getLatestRoundId();
let roundId = PageMtgGame.getActiveRoundId();
return {
[attrDamageId]: -1 - damageRecords.length,
[attrRoundId]: roundId,
@@ -1797,13 +1836,32 @@ class PageMtgGame extends TableBasePage {
static getLatestRoundId() {
let roundId = -1;
if (rounds.length > 0) {
let highestRoundDisplayOrder = Math.max(rounds.map(round => {
const highestRoundDisplayOrder = rounds.map(round => {
return round[flagDisplayOrder];
}));
roundId = rounds.filter(round => round[flagDisplayOrder] == highestRoundDisplayOrder)[0][attrRoundId];
}).reduce((acc, cur) => Math.max(acc, cur), 0);
const filteredRounds = rounds.filter(round => round[flagDisplayOrder] == highestRoundDisplayOrder);
if (filteredRounds.length > 0) {
roundId = filteredRounds[0][attrRoundId];
}
console.log({
"method": "getLatestRoundId",
highestRoundDisplayOrder,
filteredRounds,
roundId
});
}
return roundId;
}
static getActiveRoundId() {
const roundDisplayOrderLabel = PageMtgGame.getRoundDisplayOrderLabel();
const currentRoundDisplayOrder = Number(DOM.getElementValueCurrent(roundDisplayOrderLabel));
let roundId = -1;
if (rounds.length > 0) {
let filteredRounds = rounds.filter(round => round[flagDisplayOrder] == currentRoundDisplayOrder);
if (filteredRounds.length > 0) roundId = filteredRounds[0][attrRoundId];
console.log({
"method": "getActiveRoundId",
filteredRounds,
roundId
});
}
@@ -1839,14 +1897,38 @@ class PageMtgGame extends TableBasePage {
`;
}).join('');
}
hookupGameRoundEvents() {
let incrementRoundButtonSelector = '#gameSection .' + flagRow + '.' + flagRound + ' button.' + flagRoundDisplayOrderButton;
Events.hookupEventHandler("click", incrementRoundButtonSelector, (event, button) => {
const amount = button.classList.contains(flagRoundDisplayOrderPlus) ? 1 : -1;
const roundDisplayOrderButtonContainer = button.parentElement;
const roundDisplayOrderLabel = roundDisplayOrderButtonContainer.querySelector('span.' + flagRound + '.' + flagDisplayOrder);
const currentRoundDisplayOrder = Number(DOM.getElementValueCurrent(roundDisplayOrderLabel));
const newDisplayOrder = currentRoundDisplayOrder + amount;
DOM.setElementValueCurrent(roundDisplayOrderLabel, newDisplayOrder);
DOM.isElementDirty(roundDisplayOrderLabel);
this.updateAndToggleShowButtonsSaveCancel();
this.renderPlayers();
});
}
static makeDefaultGameRound(displayOrder) {
const newDisplayOrder = displayOrder != null ? displayOrder : 1 + Math.max(rounds.map(round => round[flagDisplayOrder]));
return {
[attrRoundId]: -newDisplayOrder,
[attrGameId]: gameId,
[flagNotes]: null,
[flagDisplayOrder]: newDisplayOrder,
[flagActive]: true
};
}
hookupPlayerCardEvents() {
// Life buttons
let lifeButtonSelector = '.life-btn';
Events.hookupEventHandler("click", lifeButtonSelector, (event, button) => {
const playerId = button.dataset.playerId;
const amount = parseInt(button.dataset.amount);
const latestRoundId = PageMtgGame.getLatestRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == latestRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
const activeRoundId = PageMtgGame.getActiveRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == activeRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
this.changeLife(playerId // playerId
, amount // amount
, true // updateDamage
@@ -1894,6 +1976,7 @@ class PageMtgGame extends TableBasePage {
if (updateDamage) {
damageRecords[damageIndex][flagHealthChange] += amount;
}
PageMtgGame.renderCommanderDamageLog();
// PageMtgGame.debouncedSave();
this.updateAndToggleShowButtonsSaveCancel();
@@ -1917,8 +2000,8 @@ class PageMtgGame extends TableBasePage {
} else {
damageDisplay.classList.remove('lethal');
}
const latestRoundId = PageMtgGame.getLatestRoundId();
const damageIndex = damageRecords.findIndex(damageRecord => damageRecord[attrRoundId] == latestRoundId && damageRecord[attrPlayerId] == playerId && damageRecord[attrReceivedFromCommanderPlayerId] == sourceId);
const activeRoundId = PageMtgGame.getActiveRoundId();
const damageIndex = damageRecords.findIndex(damageRecord => damageRecord[attrRoundId] == activeRoundId && damageRecord[attrPlayerId] == playerId && damageRecord[attrReceivedFromCommanderPlayerId] == sourceId);
damageRecords[damageIndex][flagHealthChange] -= amount;
this.changeLife(playerId // playerId
, -amount // amount
@@ -1936,9 +2019,10 @@ class PageMtgGame extends TableBasePage {
deathDisplay.textContent = newDeaths;
DOM.setElementAttributeValueCurrent(deathDisplay, newDeaths);
DOM.isElementDirty(deathDisplay);
const latestRoundId = PageMtgGame.getLatestRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == latestRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
const activeRoundId = PageMtgGame.getActiveRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == activeRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
damageRecords[damageIndex][flagCommanderDeaths] = newDeaths;
PageMtgGame.renderCommanderDamageLog();
// PageMtgGame.debouncedSave();
this.updateAndToggleShowButtonsSaveCancel();
@@ -1956,14 +2040,65 @@ class PageMtgGame extends TableBasePage {
eliminateBtn.textContent = 'Revive';
}
const isEliminated = card.classList.contains('eliminated');
const latestRoundId = PageMtgGame.getLatestRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == latestRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
const activeRoundId = PageMtgGame.getActiveRoundId();
const damageIndex = damageRecords.findIndex(damage => damage[attrRoundId] == activeRoundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] == null);
damageRecords[damageIndex][flagIsEliminated] = isEliminated;
DOM.setElementAttributeValueCurrent(eliminateBtn, isEliminated);
DOM.isElementDirty(eliminateBtn);
this.reorderPlayerCards();
PageMtgGame.renderCommanderDamageLog();
// PageMtgGame.debouncedSave();
this.updateAndToggleShowButtonsSaveCancel();
}
reorderPlayerCards() {
let playerGrid = document.getElementById('playersGrid');
let currentPlayerCards = playerGrid.querySelectorAll('.player-card');
let newPlayerCards = [];
let playerCardMetas = [];
currentPlayerCards.forEach((playerCard, index) => {
newPlayerCards.push(playerCard.cloneNode(true));
playerCardMetas.push({
[flagIsEliminated]: playerCard.classList.contains(flagIsEliminated),
[attrPlayerId]: playerCard.dataset["playerId"],
[flagDisplayOrder]: index
});
});
let activeRoundId = PageMtgGame.getActiveRoundId();
let newPlayerGridInnerHTML = '';
let playerIdA, playerIdB, isEliminatedAsIntA, isEliminatedAsIntB, playerA, playerB, indexPlayerCard;
playerCardMetas.sort((a, b) => {
playerIdA = a[attrPlayerId];
playerIdB = b[attrPlayerId];
isEliminatedAsIntA = PageMtgGame.isPlayerEliminated(playerIdA, activeRoundId) ? 1 : 0;
isEliminatedAsIntB = PageMtgGame.isPlayerEliminated(playerIdB, activeRoundId) ? 1 : 0;
playerA = players.filter(p => p[attrPlayerId] == playerIdA)[0];
playerB = players.filter(p => p[attrPlayerId] == playerIdB)[0];
return players.length * isEliminatedAsIntA + playerA[flagDisplayOrder] - (players.length * isEliminatedAsIntB + playerB[flagDisplayOrder]);
}).forEach(playerCardMeta => {
indexPlayerCard = playerCardMeta[flagDisplayOrder];
newPlayerGridInnerHTML += newPlayerCards[indexPlayerCard].outerHTML;
});
playerGrid.innerHTML = newPlayerGridInnerHTML;
playerGrid.querySelectorAll('.' + flagInitialised).forEach(initialisedElement => {
initialisedElement.classList.remove(flagInitialised);
});
this.hookupPlayerCardEvents();
}
static isPlayerEliminated(playerId, roundId = null) {
if (roundId == null) roundId = PageMtgGame.getActiveRoundId();
let hasDamageWithIsEliminated = damageRecords.filter(damage => damage[attrRoundId] <= roundId && damage[attrPlayerId] == playerId && damage[flagIsEliminated]).length > 0;
let damageFromOtherPlayers = {};
let otherPlayerId;
damageRecords.filter(damage => damage[attrRoundId] <= roundId && damage[attrPlayerId] == playerId && damage[attrReceivedFromCommanderPlayerId] != null).forEach(damage => {
otherPlayerId = damage[attrReceivedFromCommanderPlayerId];
damageFromOtherPlayers[otherPlayerId] = damage[flagHealthChange] + (damageFromOtherPlayers[otherPlayerId] == null ? 0 : damageFromOtherPlayers[otherPlayerId]);
});
let maxDamageFromOtherCommander = Math.max(Object.keys(damageFromOtherPlayers).map(playerId => damageFromOtherPlayers[playerId]));
// .reduce((acc, cur) => acc + cur, 0);
let totalDamageTaken = damageRecords.filter(damage => damage[attrRoundId] <= roundId && damage[attrPlayerId] == playerId).map(damage => damage[flagHealthChange]).reduce((acc, cur) => acc + cur, 0);
return hasDamageWithIsEliminated || maxDamageFromOtherCommander >= 21 || totalDamageTaken >= startingLife;
}
static updatePlayerSetup() {
const playerCountInput = document.getElementById('playerCount');
if (!playerCountInput) return;
@@ -2076,12 +2211,12 @@ class PageMtgGame extends TableBasePage {
self.leave();
window.location.reload();
} else {
console.error('Failed to save players:', data[flagMessage]);
PageMtgGame.showError('An error occurred while creating the game');
console.error('Failed to save player damages:', data[flagMessage]);
PageMtgGame.showError('An error occurred while saving player damages');
}
}).catch(error => {
console.error('Error creating game:', error);
PageMtgGame.showError('An error occurred while creating the game');
console.error('Error saving player damages:', error);
PageMtgGame.showError('An error occurred while saving player damages');
}).finally(() => {});
}
/*
@@ -2232,15 +2367,12 @@ class PageMtgGames extends TableBasePage {
submitBtn.disabled = true;
const games = [gameData];
const comment = 'Create new game';
debugger;
// const self = this;
API.saveGame(games, form, comment).then(data => {
if (data[flagStatus] == flagSuccess) {
if (_verbose) {
utils_Utils.consoleLogIfNotProductionEnvironment('Records saved!');
utils_Utils.consoleLogIfNotProductionEnvironment('Data received:', data);
}
// this.callFilterTableContent(data[attrGameId]); // gameData.game_id
const gamePageHash = `${hashPageGame}/${data[attrGameId]}`;
let filtersJson = {};
this.leave();

2
static/dist/js/main.bundle.js.map vendored
View File

File diff suppressed because one or more lines are too long