fix(render): change specific container canva for general html div

.gitignore

@@ -225,3 +225,6 @@ dist
 
 # Turbo
 .turbo/
+
+#nx
+.nx/

apps/website/src/game/game.ts

@@ -6,12 +6,12 @@ import { changeWindowToGame } from "../window";
 
 const logger = new Logger("Game");
 
-export const runGame = (mainModule: any, options: Omit<IGameOptions, "canvas">) => {
+export const runGame = (mainModule: any, options: Omit<IGameOptions, "container">) => {
   logger.info("Starting game");
   changeWindowToGame();
   mainModule.main({
     ...options,
-    canvas: getElementById(IDS.canvas) as HTMLCanvasElement,
+    container: getElementById(IDS.container) as HTMLDivElement,
   });
   logger.info("Game started");
 };

apps/website/src/ids.ts

@@ -1,5 +1,5 @@
 export const IDS = {
-  canvas: "nanoforge-canvas",
+  container: "nanoforge-container",
   loader: "nanoforge-loader",
 
   loadingStatus: "loading-status",

apps/website/src/index.html

@@ -23,10 +23,10 @@
         </div>
       </div>
     </div>
-    <canvas
-      id="nanoforge-canvas"
+    <div
+      id="nanoforge-container"
       hidden
       style="width: 100%; height: 100%; position: absolute; left: 0; top: 0"
-    ></canvas>
+    ></div>
   </body>
 </html>

apps/website/src/types/game.type.ts

@@ -1,5 +1,5 @@
 export interface IGameOptions {
-  canvas: HTMLCanvasElement;
+  container: HTMLDivElement;
   files: Map<string, string>;
   env: Record<string, string | undefined>;
 }

apps/website/src/window.ts

@@ -8,15 +8,15 @@ let totalFiles = 0;
 
 export const changeWindowToGame = async () => {
   setHiddenStatusOnId(IDS.loader, true);
-  setHiddenStatusOnId(IDS.canvas, false);
+  setHiddenStatusOnId(IDS.container, false);
   await delay(500);
   const loader = document.getElementById(IDS.loader);
   if (loader) loader.classList.add("fade-out");
   logger.info("Change window to game");
 };
 
 export const changeWindowToLoader = async () => {
-  setHiddenStatusOnId(IDS.canvas, true);
+  setHiddenStatusOnId(IDS.container, true);
   setHiddenStatusOnId(IDS.loader, false);
   logger.info("Change window to loader");
 };

docs/docs/architecture.rst

@@ -164,7 +164,7 @@ The website package provides the browser-side game loader:
 4. **Game Loading**: Imports the main module and creates a file map for
    the game to access assets.
 
-5. **Game Execution**: Calls the game's ``main()`` function with canvas
+5. **Game Execution**: Calls the game's ``main()`` function with container
    and file references.
 
 6. **Watch Integration**: Subscribes to the WebSocket for hot reload

docs/docs/website.rst

@@ -15,7 +15,7 @@ The website is a client-side application that:
 - Fetches the game manifest from the loader server
 - Caches game files in browser storage
 - Loads and executes the game's main module
-- Provides a canvas and file access to the game
+- Provides a container and file access to the game
 - Supports hot reload via WebSocket
 
 Modules
@@ -57,11 +57,11 @@ Handles game execution and window management.
 
     function runGame(
       mainModule: any,
-      options: Omit<IGameOptions, "canvas">
+      options: Omit<IGameOptions, "container">
     ): void
 
 - Switches the UI to game mode
-- Gets the canvas element
+- Gets the container element
 - Calls the game's ``main()`` function with options
 
 cache
@@ -226,7 +226,7 @@ Options passed to the game's main function:
 .. code-block:: typescript
 
     interface IGameOptions {
-      canvas: HTMLCanvasElement;
+      container: HTMLDivElement;
       files: Map<string, string>;
     }