game within component (broken in prod)

index.html

@@ -5,7 +5,7 @@
     <title>candiru</title>
     <base href="/" />
     <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <link rel="stylesheet" href="/public/style.css" />
+    <link rel="stylesheet" href="/style.css" />
     <link rel="stylesheet" href="/src/styles.css" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta name="mobile-web-app-capable" content="yes">

src/app/game/game.component.html

@@ -0,0 +1,2 @@
+<p>game works!</p>
+<div #rendererContainer class="game-container w-full h-screen absolute top-0 left-0"></div>

src/app/game/game.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { GameComponent } from './game.component';
+
+describe('GameComponent', () => {
+  let component: GameComponent;
+  let fixture: ComponentFixture<GameComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [GameComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(GameComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/game/game.component.ts

@@ -0,0 +1,23 @@
+// game.component.ts
+import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { Game } from "../../client/core/Game.ts";
+
+@Component({
+  selector: 'app-game',
+  templateUrl: './game.component.html',
+  standalone: true,
+})
+export class GameComponent implements AfterViewInit {
+  @ViewChild('rendererContainer') rendererContainer!: ElementRef;
+  private game?: Game;
+
+  ngAfterViewInit() {
+    this.game = new Game(this.rendererContainer.nativeElement);
+    this.game.start();
+    console.log('init!')
+  }
+
+  ngOnDestroy() {
+    // Add cleanup if needed
+  }
+}

src/app/pages/index.page.ts

@@ -1,38 +1,13 @@
 import { Component } from '@angular/core';
+import {GameComponent} from "../game/game.component.ts";
 
 @Component({
   selector: 'app-home',
   standalone: true,
-  template: `
-    <h2>Analog</h2>
-
-    <h3>The fullstack meta-framework for Angular!</h3>
-
-    <p class="read-the-docs">
-      <a href="https://analogjs.org" target="_blank">Docs</a> |
-      <a href="https://github.com/analogjs/analog" target="_blank">GitHub</a> |
-      <a href="https://github.com/sponsors/brandonroberts" target="_blank">
-        Sponsor
-      </a>
-    </p>
-  `,
-  styles: `
-    :host {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .read-the-docs > * {
-      color: #fff;
-    }
-
-    @media (prefers-color-scheme: light) {
-      .read-the-docs > * {
-        color: #213547;
-      }
-    }
-  `,
+  template: `<app-game></app-game>`,
+  styles: ``,
+  imports: [
+    GameComponent
+  ]
 })
 export default class HomeComponent {}

src/client/core/Game.ts

@@ -26,12 +26,12 @@ export class Game {
     private static nextGameIndex: number = 0;
 
 
-    constructor() {
+    constructor(container: HTMLElement) {
         this.gameIndex = Game.nextGameIndex++;
         this.localPlayer = new Player();
         this.chatOverlay = new ChatOverlay(this.localPlayer);
         this.networking = new Networking(this.localPlayer, this.chatOverlay);
-        this.renderer = new Renderer(this.networking, this.localPlayer, this.chatOverlay);
+        this.renderer = new Renderer(container, this.networking, this.localPlayer, this.chatOverlay);
         this.chatOverlay.setRenderer(this.renderer);
         this.inputHandler = new InputHandler(this.renderer, this.localPlayer, this.gameIndex);
         this.touchInputHandler = new TouchInputHandler(this.inputHandler, this.chatOverlay);

src/client/core/Renderer.ts

@@ -42,7 +42,7 @@ export class Renderer {
     private inputHandler!: InputHandler;
     private collisionManager!: CollisionManager;
 
-    constructor(networking: Networking, localPlayer: Player, chatOverlay: ChatOverlay) {
+    constructor(container: HTMLElement, networking: Networking, localPlayer: Player, chatOverlay: ChatOverlay) {
         this.networking = networking;
         this.localPlayer = localPlayer;
         this.chatOverlay = chatOverlay;
@@ -51,7 +51,8 @@ export class Renderer {
         this.scene = new THREE.Scene();
         this.camera = new THREE.PerspectiveCamera(90, globalThis.innerWidth / globalThis.innerHeight, 0.01, 1000);
         this.renderer = new THREE.WebGLRenderer();
-        document.body.appendChild(this.renderer.domElement);
+        //document.body.appendChild(this.renderer.domElement);
+        container.appendChild(this.renderer.domElement);
         this.renderer.domElement.style.imageRendering = 'pixelated';
         this.renderer.setAnimationLoop(null);
 

src/client/main.ts

@@ -1,4 +1,4 @@
-import {Game} from "./core/Game.ts";
-
-const game = new Game();
-game.start();
+// import {Game} from "./core/Game.ts";
+//
+// const game = new Game();
+// game.start();

src/main.server.ts

@@ -0,0 +1,32 @@
+import 'zone.js/node';
+import '@angular/platform-server/init';
+import { enableProdMode } from '@angular/core';
+import { bootstrapApplication } from '@angular/platform-browser';
+import { renderApplication } from '@angular/platform-server';
+import { provideServerContext } from '@analogjs/router/server';
+import { ServerContext } from '@analogjs/router/tokens';
+
+import { AppComponent } from "./app/app.component.ts";
+import { config } from "./app/app.config.server.ts";
+
+if (Deno.env.has('PRODUCTION')) {
+  enableProdMode();
+}
+
+export function bootstrap() {
+  return bootstrapApplication(AppComponent, config);
+}
+
+export default async function render(
+  url: string,
+  document: string,
+  serverContext: ServerContext
+) {
+  const html = await renderApplication(bootstrap, {
+    document,
+    url,
+    platformProviders: [provideServerContext(serverContext)],
+  });
+
+  return html;
+}

src/styles.css

@@ -33,8 +33,8 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
+  /*display: flex;*/
+  /*place-items: center;*/
   min-width: 320px;
   min-height: 100vh;
 }

vite.config.ts

@@ -4,11 +4,25 @@ export default defineConfig(async () => {
   const analog = (await import('@analogjs/platform')).default;
 
   return {
+    define: {
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        // Add any other environment variables you need
+      },
+      // Fallbacks for other process references
+      'process.platform': JSON.stringify('browser'),
+      'process.version': JSON.stringify(''),
+    },
     build: {
       target: ['es2020'],
-    },
-    resolve: {
-      mainFields: ['module'],
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            three: ['three'],
+            // Add other large dependencies here
+          }
+        }
+      }
     },
     plugins: [
       analog({