Refactor rename ZeitContextElement, GameContextElement

src/app/game.element.tsx

@@ -10,9 +10,9 @@ import { EmpireService } from './engine/services';
 
 export const gameToJSX = (t: I18n, empire: Empire<Types, BuildingIdentifier>) => (
   <>
-    <empire-ctx id={empire.id} entities={empire.toJSON().entities}>
+    <empire-ctx id={empire.id} entities={JSON.stringify(empire.toJSON().entities)}>
       <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-        <ph-ctx id="P0">
+        <ph-ctx id={empire.entities[0].id}>
           <ph-planet />
         </ph-ctx>
         <div class="">
@@ -27,8 +27,8 @@ export const gameToJSX = (t: I18n, empire: Empire<Types, BuildingIdentifier>) =>
 );
 
 @injectable
-export class GameElement extends HTMLElement {
-  #logger = inject(Debug);
+export class GameContextElement extends HTMLElement {
+  /*#logger = inject(Debug);
   #service = inject(EmpireService);
 
   connectedCallback() {
@@ -37,18 +37,10 @@ export class GameElement extends HTMLElement {
 
     const t = useTranslations(defaultLang);
 
-    const empire = service.current;
-    logger.log('Game', empire);
+    //const html = gameToJSX(t, service.current);
+    //this.innerHTML = raw(html);
 
-    const entities = JSON.stringify([
-      {
-        id: 'P1',
-      },
-    ]);
-
-    const html = gameToJSX(t, service.current);
-    this.innerHTML = raw(html);
-
-    logger.log('GameElement connected!');
-  }
+    logger.log('GameElement connected!', service.current);
+    // this is too early, service.current is not ready yet
+  }*/
 }

src/app/tick/index.ts

@@ -1,4 +1,4 @@
 export { PercentElement } from './percent.element';
 export { ClockElement } from './clock.element';
 export { TickElement } from './tick.element';
-export { ZeitElement } from './zeit.element';
+export { ZeitContextElement } from './zeit.element';

src/app/tick/zeit.element.tsx

@@ -6,7 +6,7 @@ import { Zeitgeber } from '../signals/zeitgeber';
  * Time/Tick Context: Zeitgeber start
  */
 @injectable
-export class ZeitElement extends HTMLElement {
+export class ZeitContextElement extends HTMLElement {
   static observedAttributes = [];
   #logger = inject(Debug);
   #zeit = inject(Zeitgeber);

src/main.ts

@@ -1,17 +1,17 @@
 import htmx from 'htmx.org';
 import { AppElement } from './app/app.element';
 import { DebugCtx } from './app/debug.element';
-import { GameElement } from './app/game.element';
+import { GameContextElement } from './app/game.element';
 import { EmpireElement, PhlameElement } from './app/engine/empire.element';
-import { ClockElement, PercentElement, TickElement, ZeitElement } from './app/tick';
+import { ClockElement, PercentElement, TickElement, ZeitContextElement } from './app/tick';
 import { PlanetElement } from './app/planet.element';
 import { EnergyElement, ResourceElement, ResourcesElement } from './app/resources.element';
 import { LanguageSelectDropdownElement } from './app/language.dropdown.element';
 
 customElements.define('debug-ctx', DebugCtx);
 customElements.define('app-root', AppElement);
-customElements.define('zeit-ctx', ZeitElement);
-customElements.define('game-ctx', GameElement);
+customElements.define('zeit-ctx', ZeitContextElement);
+customElements.define('game-ctx', GameContextElement);
 customElements.define('empire-ctx', EmpireElement);
 customElements.define('ph-ctx', PhlameElement);
 customElements.define('app-i18n-select', LanguageSelectDropdownElement);