diff --git a/TODO.txt b/TODO.txt index 1268b3683..3d4e68be6 100644 --- a/TODO.txt +++ b/TODO.txt @@ -145,22 +145,23 @@ * better color scheme radial menu DONE 9/28/2024 * Make buttons icons DONE 9/28/2024 * BUG: change username after selecting map DONE 9/29/2024 -* BUG: fake humans break alliance too often -* make fake humans more difficult -* make event box work on mobile +* BUG: fake humans break alliance too often DONE 9/29/2024 +* make fake humans more difficult DONE 9/29/2024 +* BUG: make event box work on mobile DONE 9/29/2024 * BUG: alliance cooldown request -* add request attack +* BUG: alliance expire message after player dies +* Make fake humans spawn by their country +* make create/break alliance single button +* add request attack other players * add emoji button -* request to attack other players * make year clock * block user inputs if too far behind server -* BUG: FakeHuman don't be enemy if don't share border +* BUG: FakeHuman don't be enemy if don't share border (or send boat) * store cookies * BUG: names dissapear on bottom of screen +* UI: leader board * UI: boats * UI: current attacks -* UI: leader board -* make random waves on ocean, dark spots * Load terrain dataImage in background * BUG: half encircle Antartica causes capture diff --git a/src/client/graphics/layers/EventsDisplay.ts b/src/client/graphics/layers/EventsDisplay.ts index a10029a70..7a5769ead 100644 --- a/src/client/graphics/layers/EventsDisplay.ts +++ b/src/client/graphics/layers/EventsDisplay.ts @@ -56,14 +56,18 @@ export class EventsDisplay implements Layer { } tick() { - const remainingEvents: Event[] = [] + let remainingEvents: Event[] = [] for (const event of this.events) { - if (this.game.ticks() - event.createdAt < 100) { + if (this.game.ticks() - event.createdAt < 50) { remainingEvents.push(event) } else if (event.onDelete != null) { event.onDelete() } } + if (remainingEvents.length > 5) { + remainingEvents = remainingEvents.slice(-5) + } + let shouldRender = false if (this.events.length != remainingEvents.length) { shouldRender = true @@ -77,15 +81,9 @@ export class EventsDisplay implements Layer { private createTableContainer() { this.tableContainer = document.createElement('div'); this.tableContainer.id = 'table-container'; - this.tableContainer.style.position = 'fixed'; - this.tableContainer.style.bottom = '0px'; // Distance from bottom - this.tableContainer.style.right = '0px'; // Distance from right - this.tableContainer.style.zIndex = '1000'; - this.tableContainer.style.backgroundColor = 'rgba(255, 255, 255, 0.0)'; - this.tableContainer.style.padding = '20px'; - this.tableContainer.style.boxShadow = '0 0 10px rgba(0,0,0,0.0)'; + this.tableContainer.className = 'events-display'; + this.tableContainer.style.display = "none"; document.body.appendChild(this.tableContainer); - this.tableContainer.style.minWidth = '400px'; // Set minimum width } shouldTransform(): boolean { @@ -225,37 +223,29 @@ export class EventsDisplay implements Layer { render(): void { } renderTable(): void { + if (this.events.length === 0) { + this.tableContainer.innerHTML = ""; + this.tableContainer.style.display = "none"; + return; + } + + this.tableContainer.style.display = "block"; + + let tableHtml = ` `; this.events.forEach((event, eventIndex) => { - let textColor; - switch (event.type) { - case MessageType.SUCCESS: - textColor = '#66FF66'; // Lighter, brighter green - break; - case MessageType.INFO: - textColor = 'white'; - break; - case MessageType.WARN: - textColor = 'orange'; - break; - case MessageType.ERROR: - textColor = 'red'; - break; - default: - textColor = 'white'; - } - + const typeClass = MessageType[event.type].toLowerCase(); tableHtml += ` - - + `; @@ -265,14 +255,14 @@ export class EventsDisplay implements Layer {
+
${event.description} - ${event.buttons ? '
' + event.buttons.map((btn, btnIndex) => + ${event.buttons ? '
' + event.buttons.map((btn, btnIndex) => `` - ).join('') : ''} + ).join('') + '
' : ''}
`; - this.tableContainer.innerHTML = tableHtml; + // Add event listeners to buttons this.tableContainer.querySelectorAll('button').forEach(button => { button.addEventListener('click', (e) => { e.preventDefault(); - e.stopPropagation(); // Prevent the event from reaching the canvas + e.stopPropagation(); const target = e.target as HTMLElement; const eventIndex = parseInt(target.getAttribute('data-event-index') || ''); const buttonIndex = parseInt(target.getAttribute('data-button-index') || ''); @@ -283,7 +273,7 @@ export class EventsDisplay implements Layer { if (buttonAction) { buttonAction(); this.removeEvent(eventIndex); - this.renderTable(); // Re-render the table if you remove the event + this.renderTable(); } } }); diff --git a/src/client/graphics/layers/RadialMenu.ts b/src/client/graphics/layers/RadialMenu.ts index 834b2a0d7..ea36c9afb 100644 --- a/src/client/graphics/layers/RadialMenu.ts +++ b/src/client/graphics/layers/RadialMenu.ts @@ -246,7 +246,6 @@ export class RadialMenu implements Layer { this.eventBus.emit( new SendAllianceRequestIntentEvent(myPlayer, other) ) - this.game.displayMessage(`sending alliance request to ${other.name()}`, MessageType.INFO, myPlayer.id()) }) } } diff --git a/src/client/styles.css b/src/client/styles.css index 5767e8df1..3d58d96a2 100644 --- a/src/client/styles.css +++ b/src/client/styles.css @@ -322,4 +322,65 @@ h3 { align-items: center; font-weight: bold; cursor: pointer; +} + +/* Events display */ + +.events-display { + position: fixed; + bottom: 0; + right: 0; + z-index: 1000; + background-color: rgba(0, 0, 0, 0.7); + padding: 10px; + box-sizing: border-box; + max-height: 50vh; + overflow-y: auto; + width: 500px; +} + +@media (max-width: 768px) { + .events-display { + left: 0; + width: 100%; + } +} + +.events-table { + width: 100%; + border-collapse: collapse; + font-size: 16px; +} + +.events-table td { + padding: 12px; + border-bottom: 1px solid rgba(255, 255, 255, 0.1); + font-size: 18px; +} + +.events-table button { + margin-right: 12px; + margin-bottom: 6px; + padding: 8px 16px; + font-size: 16px; +} + +.events-table .highlight { + background-color: rgba(255, 255, 0, 0.1); +} + +.events-table .success { + color: #66FF66; +} + +.events-table .info { + color: white; +} + +.events-table .warn { + color: orange; +} + +.events-table .error { + color: red; } \ No newline at end of file