164 lines
5.3 KiB
JavaScript
164 lines
5.3 KiB
JavaScript
/* Game1 entry point built with Webpack Encore */
|
|
import './styles/game1.css';
|
|
|
|
function subscribeToMercure(mercurePublicUrl, topic) {
|
|
try {
|
|
const url = mercurePublicUrl + '?topic=' + encodeURIComponent(topic);
|
|
const es = new EventSource(url);
|
|
|
|
es.onmessage = (event) => {
|
|
try {
|
|
const data = JSON.parse(event.data);
|
|
console.log('[Mercure][game1] Update:', data);
|
|
} catch (e) {
|
|
console.log('[Mercure][game1] Raw event:', event.data);
|
|
}
|
|
};
|
|
|
|
es.onerror = (err) => {
|
|
console.warn('[Mercure][game1] EventSource error:', err);
|
|
};
|
|
|
|
console.log('[Mercure][game1] Subscribed to', url);
|
|
} catch (e) {
|
|
console.error('[Mercure][game1] Failed to subscribe:', e);
|
|
}
|
|
}
|
|
|
|
async function fetchJson(url, options = {}) {
|
|
const opts = { ...options };
|
|
const headers = new Headers(opts.headers || {});
|
|
headers.set('Accept', 'application/json');
|
|
if (opts.body !== undefined && typeof opts.body !== 'string') {
|
|
headers.set('Content-Type', 'application/json');
|
|
opts.body = JSON.stringify(opts.body);
|
|
}
|
|
// Useful convention for server-side checks
|
|
if (!headers.has('X-Requested-With')) {
|
|
headers.set('X-Requested-With', 'XMLHttpRequest');
|
|
}
|
|
opts.headers = headers;
|
|
const res = await fetch(url, opts);
|
|
const text = await res.text();
|
|
let data;
|
|
try { data = text ? JSON.parse(text) : null; } catch (e) { data = text; }
|
|
if (!res.ok) {
|
|
const err = new Error('HTTP ' + res.status + ' ' + res.statusText);
|
|
console.error('[API][game1]', err, data);
|
|
throw err;
|
|
}
|
|
return data;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async () => {
|
|
// Simple boot log so you can verify it in the browser console
|
|
// and confirm this specific bundle is loaded on the Game Hub page.
|
|
console.log('Game1 bundle loaded');
|
|
|
|
// Example: add a CSS class to <body> so page-specific styles can apply
|
|
document.body.classList.add('game1-page');
|
|
|
|
// Look for config injected by Twig in the page
|
|
const cfgEl = document.getElementById('mercure-config');
|
|
if (!cfgEl) {
|
|
console.warn('[Mercure][game1] #mercure-config element not found on page');
|
|
return;
|
|
}
|
|
|
|
const mercurePublicUrl = cfgEl.dataset.mercurePublicUrl;
|
|
const topic = cfgEl.dataset.topic;
|
|
const apiPingUrl = cfgEl.dataset.apiPingUrl;
|
|
const apiEchoUrl = cfgEl.dataset.apiEchoUrl;
|
|
|
|
if (mercurePublicUrl && topic) {
|
|
subscribeToMercure(mercurePublicUrl, topic);
|
|
} else {
|
|
console.warn('[Mercure][game1] Missing data attributes on #mercure-config');
|
|
}
|
|
|
|
// Demo API calls
|
|
try {
|
|
if (apiPingUrl) {
|
|
const ping = await fetchJson(apiPingUrl);
|
|
console.log('[API][game1] ping →', ping);
|
|
} else {
|
|
console.warn('[API][game1] data-api-ping-url missing');
|
|
}
|
|
|
|
if (apiEchoUrl) {
|
|
const echo = await fetchJson(apiEchoUrl, {
|
|
method: 'POST',
|
|
body: { message: 'from game1.js', ts: new Date().toISOString() },
|
|
});
|
|
console.log('[API][game1] echo →', echo);
|
|
} else {
|
|
console.warn('[API][game1] data-api-echo-url missing');
|
|
}
|
|
} catch (e) {
|
|
console.error('[API][game1] Request failed:', e);
|
|
}
|
|
|
|
// Add messages to message-container
|
|
const messageContainer = document.getElementById('message-container');
|
|
if (messageContainer) {
|
|
let messages = [
|
|
['System initializing...', 500],
|
|
['Connection established.', 200],
|
|
['Welcome agent to the mainframe.', 1000],
|
|
['Scanning...', 3000],
|
|
['Virus detected.', 500],
|
|
['Starting Mainframe help modus...', 2000],
|
|
['Help modus activated.', 500],
|
|
['Blocking virus activated', 0]
|
|
];
|
|
|
|
let currentMessageIndex = 0;
|
|
|
|
const printNextMessage = () => {
|
|
if (currentMessageIndex < messages.length) {
|
|
const msg = messages[currentMessageIndex];
|
|
const msgEl = document.createElement('div');
|
|
msgEl.className = 'message';
|
|
msgEl.textContent = msg[0];
|
|
msgEl.style.color = '#F00';
|
|
msgEl.style.marginBottom = '10px';
|
|
messageContainer.appendChild(msgEl);
|
|
|
|
currentMessageIndex++;
|
|
setTimeout(printNextMessage, msg[1]);
|
|
} else {
|
|
// After it has printed a set of messages, it has to start a timer of 2 seconds
|
|
console.log('[Game1] All messages printed. Starting 2s timer to expand message-container height...');
|
|
setTimeout(() => {
|
|
messageContainer.style.height = '400vh';
|
|
const inputField = document.getElementById('input-message');
|
|
inputField.disabled = false;
|
|
|
|
// Add event listener for Enter key
|
|
inputField.addEventListener('keypress', async (e) => {
|
|
if (e.key === 'Enter') {
|
|
const message = inputField.value.trim();
|
|
if (message && apiEchoUrl) {
|
|
inputField.value = '';
|
|
try {
|
|
const response = await fetchJson(apiEchoUrl, {
|
|
method: 'POST',
|
|
body: { message, ts: new Date().toISOString() },
|
|
});
|
|
console.log('[API][game1] message sent →', response);
|
|
} catch (err) {
|
|
console.error('[API][game1] Failed to send message:', err);
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
console.log('[Game1] message-container height changed to 400vh and input enabled');
|
|
}, 2000);
|
|
}
|
|
};
|
|
|
|
printNextMessage();
|
|
}
|
|
});
|