I exported my application made in Construct 3 to HTML5 and I want to run a web page in reactjs, as a react component, does anyone know if this is possible?
import { useEffect } from 'react';
const ContructRoulette = () => {
useEffect(() => {
const scripts = [
'/assets/roulette/scripts/c3runtime.js',
'/assets/roulette/scripts/supportcheck.js',
'/assets/roulette/scripts/offlineclient.js',
'/assets/roulette/scripts/main.js',
'/assets/roulette/scripts/register-sw.js',
];
const loadScripts = () => {
return new Promise((resolve, reject) => {
let loadedScripts = 0;
scripts.forEach((scriptSrc) => {
const script = document.createElement('script');
script.src = scriptSrc;
script.async = true;
script.onload = () => {
console.log(`${scriptSrc} carregado com sucesso`);
loadedScripts++;
if (loadedScripts === scripts.length) {
resolve();
}
};
script.onerror = () => {
console.error(`Erro ao carregar ${scriptSrc}`);
reject(new Error(`Erro ao carregar ${scriptSrc}`));
};
document.body.appendChild(script);
});
});
};
const initC3Runtime = () => {
if (window.C3_Init) {
window.C3_Init().then(() => {
if (window.C3_RuntimeInstance) {
window.C3_RuntimeInstance.Initialize();
} else {
console.error('C3_RuntimeInstance não está definido');
}
}).catch((error) => {
console.error('Erro ao inicializar C3_Init', error);
});
} else {
console.error('C3_Init não está definido');
}
};
loadScripts()
.then(() => {
// Espera um pequeno tempo para garantir que C3_Init esteja definido
setTimeout(() => {
initC3Runtime();
}, 1000); // Ajuste o tempo conforme necessário
})
.catch((error) => {
console.error('Erro ao carregar scripts', error);
});
return () => {
// Limpeza de scripts
scripts.forEach((scriptSrc) => {
const script = document.querySelector(`script[src="${scriptSrc}"]`);
if (script) {
document.body.removeChild(script);
}
});
};
}, []);
return (
<div id="construct-container" style={{ width: '100%', height: '100%' }}>
<div id="construct-canvas"></div>
</div>
);
};
export default ContructRoulette;
GOT THIS ERROR: C3_Init is not defined