This looks like a perfect example of a web components use case. Instead of creating a Game class and having it "mount" on some div in the DOM, what about having something like this:
class Game extends HTMLElement {
static template = document.createElement('template');
static {
this.template.innerHTML = `
<p>game DOM here</p>
<canvas></canvas>
`;
}
constructor() {
super();
// create private Shadow DOM for the game
this.attachShadow({ mode: 'open' })
// efficiently clone game DOM
.append(Game.template.content.cloneNode(true));
}
connectedCallback() {
// initialize game...
}
}
customElements.define('rose-game', Game);
Then in your page HTML
<rose-game></rose-game>
etc etc
You could also use a web components framework (I recommend Lit) to help with dynamic updates. You don't need a build step to do this, you can load Lit as es modules from a CDN.
I'm available to pair on this if you're interested in learning more
This looks like a perfect example of a web components use case. Instead of creating a
Game
class and having it "mount" on somediv
in the DOM, what about having something like this:Then in your page HTML
etc etc
You could also use a web components framework (I recommend Lit) to help with dynamic updates. You don't need a build step to do this, you can load Lit as es modules from a CDN.
I'm available to pair on this if you're interested in learning more
Originally posted by @bennypowers in https://github.com/RedHat-Israel/ROSE/pull/475#pullrequestreview-1610239662