diff --git a/assets/game1.js b/assets/game1.js index 4141f60..6ec1a34 100644 --- a/assets/game1.js +++ b/assets/game1.js @@ -24,6 +24,7 @@ function subscribeToMercure(mercurePublicUrl, topic) { msgEl.style.color = '#0F0'; // Green for incoming messages msgEl.style.marginBottom = '10px'; messageContainer.appendChild(msgEl); + window.scrollTo(0, document.body.scrollHeight); if(stillPlayingSound) playSound(); console.log('[Mercure][game1] sequenceFinished status:', sequenceFinished); @@ -181,6 +182,7 @@ document.addEventListener('DOMContentLoaded', async () => { msgEl.textContent = msg[0]; msgEl.style.marginBottom = '10px'; messageContainer.appendChild(msgEl); + window.scrollTo(0, document.body.scrollHeight); playSound(); @@ -203,6 +205,13 @@ document.addEventListener('DOMContentLoaded', async () => { stillPlayingSound = false; sequenceFinished = false; const message = inputField.value.trim(); + + const msgEl = document.createElement('div'); + msgEl.className = 'message'; + msgEl.textContent = message; + msgEl.style.marginBottom = '10px'; + messageContainer.appendChild(msgEl); + if (message && apiEchoUrl) { inputField.value = ''; try { @@ -211,6 +220,16 @@ document.addEventListener('DOMContentLoaded', async () => { body: { message, ts: new Date().toISOString() }, }); console.log('[API][game1] message sent →', response); + if (response && response.result && Array.isArray(response.result.result)) { + response.result.result.forEach(text => { + const msgEl = document.createElement('div'); + msgEl.className = 'message'; + msgEl.textContent = text; + msgEl.style.marginBottom = '10px'; + messageContainer.appendChild(msgEl); + }); + window.scrollTo(0, document.body.scrollHeight); + } } catch (err) { console.error('[API][game1] Failed to send message:', err); } diff --git a/assets/styles/game1.css b/assets/styles/game1.css index 83fa243..cf1a6bf 100644 --- a/assets/styles/game1.css +++ b/assets/styles/game1.css @@ -29,8 +29,11 @@ body { div#game-timer { position: fixed; - top: 20px; - left: 20px; + top: 0; + left: 0; + width: 100%; + padding: 20px; + background-color: #000; color: #F00; font-size: 28px; z-index: 100; @@ -38,7 +41,7 @@ div#game-timer { div#message-container { padding: 20px; - padding-top: 60px; /* Space for fixed timer */ + padding-top: 80px; /* Space for fixed timer */ display: flex; flex-direction: column; justify-content: flex-end; @@ -49,6 +52,7 @@ div#message-container { div.message { color: #C0C0C0; + white-space: pre-wrap; } div#input { diff --git a/src/Game/Service/GameResponseService.php b/src/Game/Service/GameResponseService.php index 707b3b8..2d546ff 100644 --- a/src/Game/Service/GameResponseService.php +++ b/src/Game/Service/GameResponseService.php @@ -189,6 +189,7 @@ class GameResponseService $messages[] = ' If you want to send a message specifically to one other agent, use the id of the agent after /chat, like /chat 6 {message}'; $messages[] = ' This will send the message only to agent with id 6.'; $messages[] = ' USAGE: /chat {message}'; + $messages[] = ' USAGE: /chat 6 {message}'; $messages[] = ''; break; case 'help':