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

Feat: Decks page.

Browse Source
This commit is contained in:
Teddy Middleton-Smith
2026-02-16 19:30:31 +00:00
parent 1cd9b7c976
commit 5661632540
75 changed files with 11850 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
static/css/pages/tcg/base.css
View File

@@ -24,6 +24,9 @@ body.tcg-theme {
}
/* Top Nav TCG Style */
#buttonHamburger {
display: none;
}
.topnav.tcg {
background: var(--tcg-bg-secondary);
border-bottom: 2px solid var(--tcg-border-color);
@@ -88,7 +91,8 @@ body.tcg-theme {
.footer.tcg h3 {
font-family: 'Cinzel', serif;
color: var(--tcg-accent-gold);
margin-bottom: 1rem;
/* margin-bottom: 1vh; */
margin-top: 0;
}
.footer.tcg a {
@@ -174,9 +178,10 @@ body.tcg-theme {
font-family: 'Cinzel', serif;
font-size: 1.5rem;
color: var(--tcg-accent-gold);
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 1.5rem auto 0;
text-align: center;
}
/* TCG Form Elements */
@@ -244,6 +249,9 @@ body.tcg-theme {
.nav-links.tcg {
display: none;
}
#buttonHamburger {
display: block;
}
.topnav.tcg {
padding-right: 30vw;
}

38
static/css/pages/tcg/decks.css Normal file
View File

@@ -0,0 +1,38 @@
.tcg-card {
margin-top: 1vh;
margin-bottom: 0;
}
table.table-main tbody {
max-height: 30vh;
overflow-y: auto;
}
table.statistics {
margin-top: 0;
}
table.statistics thead {
background-color: var(--background-color);
}
table.statistics tbody {
max-height: 30vh;
overflow-y: auto;
}
table.statistics thead tr th.deck,
table.statistics tbody tr td.deck_id {
min-width: 20vh;
max-width: 20vh;
}
table.statistics thead tr th.name,
table.statistics tbody tr td.name {
min-width: 40vh;
max-width: 40vh;
}
table.statistics thead tr th.value,
table.statistics tbody tr td.value {
min-width: 10vh;
max-width: 10vh;
}

42
static/css/pages/tcg/game.css
View File

@@ -147,6 +147,9 @@
}
/* Game Section */
#gameSection {
margin: 0 auto;
}
#gameSection .row.round {
display: flex;
align-items: center;
@@ -347,13 +350,16 @@
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}
.life-controls {
.life-gain-controls,
.life-loss-controls {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1vh;
}
.life-btn {
.life-gain-btn,
.life-loss-btn {
background: var(--tcg-bg-card);
border: 2px solid var(--tcg-border-color);
color: var(--tcg-text-primary);
@@ -370,17 +376,31 @@
justify-content: center;
}
.life-btn:hover {
border-color: var(--tcg-accent-purple);
background: var(--tcg-accent-purple);
.life-gain-btn:hover,
.life-loss-btn:hover {
border-color: green; /*var(--tcg-accent-purple);*/
background: green; /*var(--tcg-accent-purple);*/
color: var(--tcg-bg-primary);
transform: scale(1.1);
}
.life-btn:active {
.life-loss-btn:hover {
border-color: red;
background: red;
}
.life-gain-btn:active,
.life-loss-btn:active {
transform: scale(0.95);
}
.life-total label {
color: var(--tcg-text-primary);
width: 100%;
margin-bottom: 1vh;
display: inline-block;
}
/* Commander Damage Section */
.commander-damage-section {
border-top: 1px solid var(--tcg-border-color);
@@ -420,6 +440,7 @@
.damage-source {
font-size: 1rem;
color: var(--tcg-text-secondary);
padding-right: 1vh;
}
.damage-controls {
@@ -478,8 +499,10 @@
.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 {
.damage-log.container table thead tr th.life_gain,
.damage-log.container table tbody tr td.life_gain,
.damage-log.container table thead tr th.life_loss,
.damage-log.container table tbody tr td.life_loss {
width: 7vw;
}
.damage-log.container table thead tr th.commander-deaths,
@@ -583,7 +606,8 @@
font-size: 3rem;
}
.life-btn {
.life-gain-btn,
.life-loss-btn {
width: 50px;
height: 50px;
font-size: 1.5rem;

57
static/css/pages/tcg/games.css
View File

@@ -33,15 +33,18 @@
position: relative;
animation: tcg-fadeIn 0.8s ease-out 0.2s backwards;
margin: 2vh auto;
display: flex;
flex-wrap: wrap;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-bottom: 1rem;
flex-wrap: wrap;
gap: 1rem;
width: 100%;
}
/* Filters Form */
@@ -88,8 +91,7 @@
overflow-x: auto;
}
.games-table {
width: 100%;
#tableMain.games-table {
border-collapse: collapse;
font-size: 1rem;
}
@@ -98,7 +100,6 @@
background: var(--tcg-bg-card);
border-bottom: 2px solid var(--tcg-accent-purple);
}
.games-table th {
font-family: 'Cinzel', serif;
font-size: 0.95rem;
@@ -107,18 +108,22 @@
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 1rem;
text-align: left;
}
.games-table thead tr {
height: 4vh;
}
#tableMain.games-table tbody {
max-height: 59vh;
}
.games-table tbody tr {
border-bottom: 1px solid var(--tcg-border-color);
transition: all 0.3s ease;
height: 4vh;
}
.games-table tbody tr:hover {
background: rgba(139, 92, 246, 0.1);
}
.games-table tbody tr.inactive {
opacity: 0.5;
}
@@ -132,7 +137,38 @@
color: white;
}
.game-id {
.games-table thead tr th.game_id,
.games-table tbody tr td.game_id {
min-width: 10vh;
max-width: 10vh;
}
.games-table thead tr th.is_commander,
.games-table tbody tr td.is_commander {
min-width: 12vh;
max-width: 12vh;
}
.games-table thead tr th.location_name,
.games-table tbody tr td.location_name {
min-width: 20vh;
max-width: 20vh;
}
.games-table thead tr th.start_on,
.games-table tbody tr td.start_on {
min-width: 14vh;
max-width: 14vh;
}
#tableMain.games-table thead tr th.active,
#tableMain.games-table tbody tr td.active {
min-width: 8vh;
max-width: 8vh;
}
.games-table thead tr th.navMtgGame,
.games-table tbody tr td.navMtgGame {
min-width: 13vh;
max-width: 13vh;
}
.game_id {
font-family: 'Cinzel', serif;
font-weight: 600;
color: var(--tcg-text-secondary);
@@ -223,7 +259,7 @@
/* Join Button */
.btn-join {
padding: 0.5rem 1.25rem;
padding: 0.5vh 1vw;
font-size: 0.9rem;
}
@@ -265,7 +301,7 @@
animation: tcg-fadeIn 0.3s ease-out;
}
.modal-overlay.hidden {
.modal-overlay.is_collapsed {
display: none;
}
@@ -338,7 +374,6 @@
}
.section-header {
flex-direction: column;
align-items: stretch;
}