Merge pull request #1 from Deseteral/feature/imgui

ImGui

.eslintignore

@@ -1,2 +1,3 @@
 node_modules/
 dist/
+imgui-js/

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "imgui-js"]
+	path = imgui-js
+	url = https://github.com/flyover/imgui-js.git

examples/src/scenes/imgui-test-scene.ts

@@ -0,0 +1,30 @@
+import { Screen } from 'ponczek/gfx/screen';
+import { Scene } from 'ponczek/core/scene';
+import { ENDESGA16PaletteIdx } from 'ponczek/palettes/endesga16-palette';
+import { Input, SceneManager } from 'ponczek/core';
+import { withTransition } from 'examples/utils/with-transition';
+
+export class ImGuiTestScene extends Scene {
+  private counter: number = 0;
+
+  update(): void {
+    ImGui.Begin('Hello');
+    ImGui.Text('Hello world from ImGui!');
+    ImGui.Text(`Counter value: ${this.counter}`);
+
+    if (ImGui.Button('Bump value')) {
+      this.counter += 1;
+    }
+
+    ImGui.End();
+
+    if (Input.getButtonDown('b')) withTransition(() => SceneManager.popScene());
+  }
+
+  render(scr: Screen): void {
+    scr.clearScreen(ENDESGA16PaletteIdx[6]);
+
+    scr.color(ENDESGA16PaletteIdx[14]);
+    scr.fillRect(10, 25, 128, 256);
+  }
+}

examples/src/scenes/main-menu-scene.ts

@@ -19,6 +19,7 @@ import { SceneStackTestScene } from 'examples/scenes/scene-stack-test-scene';
 import { SimplexNoiseTestScene } from 'examples/scenes/simplex-noise-test-scene';
 import { TilemapTestScene } from 'examples/scenes/tilemap-test-scene';
 import { withTransition } from 'examples/utils/with-transition';
+import { ImGuiTestScene } from 'examples/scenes/imgui-test-scene';
 
 interface Item {
   text: string,
@@ -58,6 +59,7 @@ export class MainMenuScene extends Scene {
       [{ text: 'Scene stack', scene: () => new SceneStackTestScene() }],
       [{ text: 'Simplex noise', scene: () => new SimplexNoiseTestScene() }],
       [{ text: 'Tilemap', scene: () => new TilemapTestScene() }],
+      [{ text: 'ImGui', scene: () => new ImGuiTestScene() }],
     ];
 
     this.frameTexture = Texture.copy(Assets.texture('frame'));

examples/src/style.css

@@ -19,3 +19,12 @@ body {
 canvas {
   image-rendering: pixelated;
 }
+
+#imgui-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: none;
+}

scripts/generate-index-files.ts

@@ -1,6 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 
+const ignoredModules = [
+  'imgui',
+];
+
 function writeIndexForFiles(files: string[], indexFilePath: string): void {
   const exportList = [
     ...files.map((fileName) => `export * from './${fileName}';`),
@@ -14,6 +18,7 @@ const rootFolderContent = fs.readdirSync('./src', { withFileTypes: true });
 // Create modules index files
 rootFolderContent
   .filter((entry) => entry.isDirectory())
+  .filter((entry) => !ignoredModules.includes(entry.name))
   .map((entry) => path.resolve('.', 'src', entry.name))
   .forEach((modulePath) => {
     const indexFilePath = path.resolve(modulePath, 'index.ts');
@@ -28,6 +33,7 @@ rootFolderContent
 const rootIndexPath = path.resolve('.', 'src', 'index.ts');
 const rootModules = rootFolderContent
   .filter((entry) => (entry.isDirectory() || path.extname(entry.name) === '.ts'))
+  .filter((entry) => !ignoredModules.includes(entry.name))
   .map((entry) => entry.name)
   .map((filePath) => path.basename(filePath, path.extname(filePath)))
   .filter((name) => name !== 'index');

src/imgui/imgui-env.ts

@@ -0,0 +1,2 @@
+/// <reference path="./imgui.d.ts" />
+import '../../imgui-js/dist/imgui.umd.js'; // eslint-disable-line