Combat foundation complete

2025-11-27 22:18:58 -06:00
parent dd92cf5991
commit 6d3fb63355
33 changed files with 1870 additions and 85 deletions
--- a/public_web/static/css/play.css
+++ b/public_web/static/css/play.css
@@ -1119,6 +1119,161 @@
    margin-top: 0.25rem;
 }

+/* Monster Selection Modal */
+.monster-modal {
+    max-width: 500px;
+}
+
+.monster-modal-location {
+    color: var(--text-secondary);
+    margin-bottom: 1rem;
+    font-size: var(--text-sm);
+}
+
+.monster-modal-hint {
+    color: var(--text-muted);
+    margin-top: 1rem;
+    text-align: center;
+}
+
+.encounter-options {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.encounter-option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    background: var(--bg-input);
+    border: 1px solid var(--play-border);
+    border-radius: 6px;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    text-align: left;
+    width: 100%;
+    border-left: 4px solid var(--text-muted);
+}
+
+.encounter-option:hover {
+    transform: translateX(4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* Challenge level border colors */
+.encounter-option--easy {
+    border-left-color: #2ecc71; /* Green for easy */
+}
+
+.encounter-option--easy:hover {
+    border-color: #2ecc71;
+    background: rgba(46, 204, 113, 0.1);
+}
+
+.encounter-option--medium {
+    border-left-color: #f39c12; /* Gold/orange for medium */
+}
+
+.encounter-option--medium:hover {
+    border-color: #f39c12;
+    background: rgba(243, 156, 18, 0.1);
+}
+
+.encounter-option--hard {
+    border-left-color: #e74c3c; /* Red for hard */
+}
+
+.encounter-option--hard:hover {
+    border-color: #e74c3c;
+    background: rgba(231, 76, 60, 0.1);
+}
+
+.encounter-option--boss {
+    border-left-color: #9b59b6; /* Purple for boss */
+}
+
+.encounter-option--boss:hover {
+    border-color: #9b59b6;
+    background: rgba(155, 89, 182, 0.1);
+}
+
+.encounter-info {
+    flex: 1;
+}
+
+.encounter-name {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    color: var(--text-primary);
+    margin-bottom: 0.25rem;
+}
+
+.encounter-enemies {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.25rem;
+}
+
+.enemy-badge {
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+    background: var(--bg-card);
+    padding: 0.125rem 0.375rem;
+    border-radius: 4px;
+}
+
+.encounter-challenge {
+    font-size: var(--text-sm);
+    font-weight: 600;
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.challenge--easy {
+    color: #2ecc71;
+    background: rgba(46, 204, 113, 0.15);
+}
+
+.challenge--medium {
+    color: #f39c12;
+    background: rgba(243, 156, 18, 0.15);
+}
+
+.challenge--hard {
+    color: #e74c3c;
+    background: rgba(231, 76, 60, 0.15);
+}
+
+.challenge--boss {
+    color: #9b59b6;
+    background: rgba(155, 89, 182, 0.15);
+}
+
+.encounter-empty {
+    text-align: center;
+    padding: 2rem;
+    color: var(--text-muted);
+}
+
+.encounter-empty p {
+    margin: 0.5rem 0;
+}
+
+/* Combat action button highlight */
+.action-btn--combat {
+    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(155, 89, 182, 0.2));
+    border-color: rgba(231, 76, 60, 0.4);
+}
+
+.action-btn--combat:hover {
+    background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(155, 89, 182, 0.3));
+    border-color: rgba(231, 76, 60, 0.6);
+}
+
 /* NPC Chat Modal */
 .npc-chat-header {
    display: flex;