Add invite request system and Gitea Actions CI/CD pipeline

Invite request feature: - Public form to request an invite when INVITE_REQUEST_ENABLED=true - Stores requests in new invite_requests DB table - Emails admins on new request, emails requester on approve/deny - Admin panel tab to review, approve, and deny requests - Approval auto-creates invite code and sends signup link CI/CD pipeline: - Build & push Docker image to Gitea registry on release - Auto-deploy to staging with health check - Manual workflow_dispatch for production deploys Also includes client layout/sizing improvements for card grid and opponent spacing. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-07 19:38:52 -04:00
parent 0c0588f920
commit ef54ac201a
16 changed files with 1003 additions and 50 deletions
--- a/client/style.css
+++ b/client/style.css
@@ -1024,13 +1024,13 @@ input::placeholder {

 /* Card Styles */
 .card {
-    width: clamp(65px, 5.5vw, 100px);
-    height: clamp(91px, 7.7vw, 140px);
+    width: clamp(65px, 7vw, 135px);
+    height: clamp(91px, 9.8vw, 189px);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
-    font-size: clamp(2rem, 2.5vw, 3.2rem);
+    font-size: clamp(2rem, 3vw, 3.8rem);
    font-weight: bold;
    cursor: pointer;
    /* No CSS transition - hover effects handled by anime.js */
@@ -1151,7 +1151,7 @@ input::placeholder {
 /* Card Grid */
 .card-grid {
    display: grid;
-    grid-template-columns: repeat(3, clamp(65px, 5.5vw, 100px));
+    grid-template-columns: repeat(3, clamp(65px, 7vw, 135px));
    gap: clamp(8px, 0.8vw, 14px);
    justify-content: center;
 }
@@ -1161,18 +1161,22 @@ input::placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
-    gap: 25px;
+    justify-content: space-between;
+    gap: 15px;
    width: 100%;
+    flex: 1;
+    min-height: 0;
 }

-/* Player row - deck/discard and player cards side by side */
+/* Player row - local player cards */
 .player-row {
    display: flex;
    justify-content: center;
    align-items: center;
-    gap: 25px;
+    gap: clamp(15px, 2vh, 35px);
    width: 100%;
    flex-wrap: wrap;
+    padding-bottom: clamp(10px, 2vh, 30px);
 }

 .opponents-row {
@@ -1180,9 +1184,9 @@ input::placeholder {
    flex-wrap: nowrap;
    justify-content: center;
    align-items: flex-end;
-    gap: clamp(12px, 1.8vw, 35px);
-    min-height: clamp(120px, 14vw, 200px);
-    padding: 8px 20px 0;
+    gap: clamp(12px, 6vw, 120px);
+    min-height: clamp(120px, 18vw, 280px);
+    padding: 15px 20px 0;
    width: 100%;
 }

@@ -1234,7 +1238,62 @@ input::placeholder {
    transform: rotate(8deg);
 }

-/* 5 opponents: deeper arch with graduated rotation toward center */
+/* 5 opponents: tighter spacing to fit single row on wide screens */
+.opponents-row:has(.opponent-area:first-child:nth-last-child(5)) {
+    gap: clamp(6px, 2vw, 50px);
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5),
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area {
+    flex-shrink: 1;
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5) .card-grid,
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area .card-grid {
+    grid-template-columns: repeat(3, clamp(38px, 4vw, 85px));
+    gap: clamp(2px, 0.4vw, 6px);
+}
+.opponents-row .opponent-area:first-child:nth-last-child(5) .card,
+.opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area .card {
+    width: clamp(38px, 4vw, 85px);
+    height: clamp(53px, 5.6vw, 119px);
+    font-size: clamp(0.9rem, 1.3vw, 2.2rem);
+}
+
+/* 5 opponents mid-width: wrap into 2 arch rows (3 + 2) */
+@media (min-width: 750px) and (max-width: 1220px) {
+    .opponents-row:has(.opponent-area:first-child:nth-last-child(5)) {
+        flex-wrap: wrap;
+        gap: clamp(6px, 1.5vw, 20px);
+        row-gap: clamp(4px, 1vw, 16px);
+    }
+    /* Force 3+2 split: each item ~30% so 3 fit per row */
+    .opponents-row .opponent-area:first-child:nth-last-child(5),
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area {
+        flex: 0 0 auto;
+    }
+    /* Row 1 arch: 3 opponents */
+    .opponents-row .opponent-area:first-child:nth-last-child(5) {
+        margin-bottom: 0;
+        transform: rotate(-5deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(2) {
+        margin-bottom: 20px;
+        transform: rotate(0deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(3) {
+        margin-bottom: 0;
+        transform: rotate(5deg);
+    }
+    /* Row 2 arch: 2 opponents */
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(4) {
+        margin-bottom: 8px;
+        transform: rotate(-3deg);
+    }
+    .opponents-row .opponent-area:first-child:nth-last-child(5) ~ .opponent-area:nth-child(5) {
+        margin-bottom: 8px;
+        transform: rotate(3deg);
+    }
+}
+
 .opponents-row .opponent-area:first-child:nth-last-child(5) {
    margin-bottom: 0;
    transform: rotate(-10deg);
@@ -1367,9 +1426,9 @@ input::placeholder {
 }

 .deck-area .card {
-    width: clamp(80px, 7vw, 120px);
-    height: clamp(112px, 9.8vw, 168px);
-    font-size: clamp(2.4rem, 3.2vw, 4rem);
+    width: clamp(80px, 8.5vw, 150px);
+    height: clamp(112px, 11.9vw, 210px);
+    font-size: clamp(2.4rem, 3.5vw, 4.5rem);
 }

 #discard {
@@ -1771,14 +1830,14 @@ input::placeholder {

 .opponent-area .card-grid {
    display: grid;
-    grid-template-columns: repeat(3, clamp(45px, 4vw, 75px));
-    gap: clamp(4px, 0.4vw, 8px);
+    grid-template-columns: repeat(3, clamp(45px, 5vw, 100px));
+    gap: clamp(4px, 0.5vw, 8px);
 }

 .opponent-area .card {
-    width: clamp(45px, 4vw, 75px);
-    height: clamp(63px, 5.6vw, 105px);
-    font-size: clamp(1.3rem, 1.5vw, 2.2rem);
+    width: clamp(45px, 5vw, 100px);
+    height: clamp(63px, 7vw, 140px);
+    font-size: clamp(1.3rem, 1.8vw, 2.6rem);
    border-radius: 5px;
 }

@@ -1929,6 +1988,7 @@ input::placeholder {
    align-items: center;
    gap: 8px;
    width: 100%;
+    min-height: calc(100vh - 50px);
 }

 /* Side Panels - positioned in bottom corners */
@@ -1953,6 +2013,88 @@ input::placeholder {
    right: 15px;
 }

+/* Desktop: hide side panels by default, show via scorecard button */
+.side-panel.left-panel,
+.side-panel.right-panel {
+    display: none;
+}
+
+/* Desktop scorecard button - bottom right corner */
+#desktop-scorecard-btn {
+    position: fixed;
+    bottom: 15px;
+    right: 15px;
+    z-index: 99;
+    background: linear-gradient(145deg, rgba(15, 50, 35, 0.92) 0%, rgba(8, 30, 20, 0.95) 100%);
+    border: 1px solid rgba(244, 164, 96, 0.35);
+    color: #f4a460;
+    font-size: 0.7rem;
+    font-weight: 700;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+    padding: 8px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+    transition: all 0.2s ease;
+}
+
+#desktop-scorecard-btn:hover {
+    background: linear-gradient(145deg, rgba(20, 60, 40, 0.95) 0%, rgba(12, 40, 28, 0.97) 100%);
+    border-color: rgba(244, 164, 96, 0.6);
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(244, 164, 96, 0.15);
+}
+
+#desktop-scorecard-btn:active {
+    transform: scale(0.96);
+}
+
+#desktop-scorecard-btn.active {
+    background: linear-gradient(135deg, #f4a460, #e8935a);
+    color: #1a472a;
+    border-color: transparent;
+    box-shadow: 0 2px 12px rgba(244, 164, 96, 0.4);
+}
+
+/* Desktop scorecard overlay — combines standings + scores */
+.side-panel.desktop-scorecard-overlay {
+    display: none;
+    position: fixed;
+    bottom: 55px;
+    right: 15px;
+    left: auto;
+    width: 280px;
+    max-height: 70vh;
+    overflow-y: auto;
+    z-index: 100;
+    border-radius: 10px;
+    padding: 10px 12px;
+    background: linear-gradient(145deg, rgba(15, 50, 35, 0.95) 0%, rgba(8, 30, 20, 0.97) 100%);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(244, 164, 96, 0.25);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.side-panel.desktop-scorecard-overlay.open {
+    display: block;
+}
+
+/* Desktop scorecard backdrop */
+.desktop-scorecard-backdrop {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 98;
+}
+
+.desktop-scorecard-backdrop.visible {
+    display: block;
+}
+
 .side-panel > h4 {
    font-size: 0.7rem;
    text-align: center;
@@ -3596,7 +3738,24 @@ input::placeholder {
    color: rgba(255, 255, 255, 0.4);
 }

-.modal-auth input:focus {
+.modal-auth textarea {
+    width: 100%;
+    padding: 12px 15px;
+    background: rgba(0, 0, 0, 0.3);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    color: white;
+    font-size: 1rem;
+    font-family: inherit;
+    resize: vertical;
+}
+
+.modal-auth textarea::placeholder {
+    color: rgba(255, 255, 255, 0.4);
+}
+
+.modal-auth input:focus,
+.modal-auth textarea:focus {
    outline: none;
    border-color: #f4a460;
 }
@@ -3612,6 +3771,15 @@ input::placeholder {
    color: rgba(255, 255, 255, 0.45);
 }

+.form-hint a {
+    color: #f4a460;
+    text-decoration: none;
+}
+
+.form-hint a:hover {
+    text-decoration: underline;
+}
+
 .auth-switch {
    text-align: center;
    margin-top: 15px;
@@ -5336,12 +5504,16 @@ body.mobile-portrait .opponents-row {
    flex-shrink: 0;
 }

-/* --- Mobile: Player row gets remaining space, centered vertically --- */
+/* --- Mobile: Table center and player row share remaining space --- */
+body.mobile-portrait .table-center {
+    flex-shrink: 0;
+}
+
 body.mobile-portrait .player-row {
    display: flex;
    flex-direction: column;
    align-items: center;
-    justify-content: space-evenly;
+    justify-content: center;
    gap: 10px;
    width: 100%;
    flex: 1 1 0%;
@@ -5503,6 +5675,18 @@ body.mobile-portrait .real-card .card-face-back {
    line-height: 1;
 }

+/* Hide desktop scorecard button and backdrop on mobile */
+body.mobile-portrait #desktop-scorecard-btn,
+body.mobile-portrait .desktop-scorecard-backdrop {
+    display: none !important;
+}
+
+/* Re-enable side panels on mobile (overrides desktop hide) */
+body.mobile-portrait .side-panel.left-panel,
+body.mobile-portrait .side-panel.right-panel {
+    display: block;
+}
+
 /* --- Mobile: Side panels become bottom drawers --- */
 body.mobile-portrait .side-panel {
    position: fixed;